00:00
00:00
PsychoGoldfish
I like turtles

Age 46

NG Code Monkey

Hard Knocks

Ur Mom

Joined on 9/26/00

Level:
14
Exp Points:
1,910 / 2,180
Exp Rank:
31,872
Vote Power:
5.57 votes
Audio Scouts
2
Art Scouts
2
Rank:
Town Watch
Global Rank:
47,786
Blams:
48
Saves:
130
B/P Bonus:
2%
Whistle:
Normal
Trophies:
49
Medals:
775
Supporter:
11m 29d

PsychoGoldfish's News

Posted by PsychoGoldfish - April 26th, 2019


I've been playing with Wick Editor a bunch, trying to get some simple Newgrounds.io API widgets working in advance of the Wick Editor Game Jam.


Edit: The Newgrounds.io widgets are available for download now!


One of the appealing things about Wick Editor (besides being 100% free) is how similar it is to older ActionScript 2.0 versions of Flash, but it's definitely lacking a few things, and has a bunch of quirks.


So I wrote up a couple chapters/tutorials for using Wick Editor that may help people used to working a certain way in Flash, or other game frameworks.




Understanding "this" context


One of the most jarring things for me was figuring out what the 'this' scope refers to in different places.


In AS2 Flash, you could select a MovieClip and put code directly onto it with functions like onClipEvent(load) and onClipEvent(enterFrame). Within this code, if you used 'this', it would refer to your MovieClip instance.


In Wick Editor, you can do just about the same thing. You can put code directly on a Clip using 'function load()' and 'function update()'. Just like in Flash, using 'this' will refer to your Clip instance.


Now, if you were to try putting code on the timeline of your respective clips, you hit a major difference. If you add scripting to a key frame within a MovieClip, 'this' still refers to the MovieClip instance.


In Wick Editor, if you put code on a key frame, 'this' actually refers to the frame itself, not the Clip. To reference the clip from code on a keyframe, you instead need to use this.parentObject.


This is important to remember, especially if you put code on multiple key frames and expect it to reference code from older frames. Using 'this' on a Wick Frame literally only refers to that frame.


Let's say on frame 1, you use the following code:

this.alert_text = "Hello World";


Then on frame 2, we call:

alert(this.alert_text);


The alert will say 'undefined', because each Wick Frame is a separate object.


If you instead do this on frame 1...

this.parentObject.alert_text = "Hello World";


... and this on frame 2...

alert(this.parentObject.alert_text);


You will get the expected Hello World result.




Scoped Variables


Flash never really had global variables. If you wanted something to be universal, you would set it with _root.varName = "value";. Also, any variable not attached to an object, or _root, had to be declared with var varName = "value";


Because Wick Editor really just uses JavaScript, there's a bit of a difference in variable scopes and how to use them.


Any variable you set without a 'var' or 'let' declration, will be a global variable. (TECHNICALLY, it's attached to the Window object, but for all purposes, this is considered global).


If I write the following ANYWHERE in my code...

alert_text = "Hello World";


...I can access that value from any frame or object, no matter what (at least after it's been set).


If I write

var alert_text = "Hello World";


It's only accessible by whatever scope it's written in, or anything below that scope. If I wrote it at the top of a script on frame 2 of my timeline, only code in that frame could access it. If I put any functions in that same block of code, they can access it as well. If I put it within a function, code outside of that function would not be able to access it.


Examples:

var outer_value = "outer";

function test_inner() {
    var inner_value = "inner";

    alert(outer_value); // alerts 'outer'
    alert(inner_value); // alerts 'inner'
}

test_inner();

alert(outer_value); // alerts 'outer'
alert(inner_value); // alerts 'undefined'




Extending Clips


One big thing lacking from Wick Editor is a way to attach an external script to a clip, like Flash's 'Export for ActionScript' would let you do. There's lots of ways you could work around this, but you always want to keep duplicate code and memory management to a minimum.


One way to do this is to write single functions for controlling objects you intend to use in multiple places, such as a game enemy.


Because there's no support for external js files yet, I found the best way to do this, and keep things organized, is to create a layer and a single key frame for every object I want to write code for.


So I might add a layer and name it "Enemy1 Code". Then I'd add a keyframe on frame 1 and add this code to it:


Enemy1 = function() {

    // prevent this stuff from running more than once.
    if (this.extended) return;
    this.extended = true;

    // fires when the sprite is loaded
    this.load = function() {
        // start at the left side of the screen
        this.x = 0;
    };

    // fires every game tick
    this.update = function() {
        // move the thing sideways, just to show this works.
        this.x += 10;
    };

};

Now I would create a new Clip. It would have to be on a lower layer, or later frame to ensure the above code had a chance to run. I would double click the Clip to edit it, and on it's first frame, I would add this code:

Enemy1.call(this.parentObject);


If you test your game, your object should see your Clip slide across the screen.


One thing I figured out is any code you put in a Clip's first frame will execute before it's load and update methods. If you put the code on the clip itself, this isn't always the case.


So what we are doing is using JavaScript's call method to execute all of the code in the global Enemy1 function, using the Clip instance as the 'this' scope, before the Wick engine calls it's load or update methods. When the Clip has loaded, those methods are ready to go.


That worked pretty well, but I realized if I ever wanted to clone this Enemy1 clip, it would create new versions of the load/update functions for every instance. This could mean a potential memory leak, and we want to avoid that.


The next thing I did was move those into static functions attached to the Enemy1 function object, and just reference them in the main Enemy1 function. Since we're referencing static functions, they won't need to be created for each instance anymore:

Enemy1 = function() {

    // prevent this stuff from running more than once.
    if (this.extended) return;
    this.extended = true;

    // fires when the sprite is loaded
    this.load = Enemy1.load;

    // fires every game tick
    this.update = Enemy1.update;

};

// these always exist, and won't need to be re-created for every instance
Enemy1.load = function() {
    this.x = 0;
};
Enemy1.update = function() {
    // move the thing sideways, just to show this works.
    this.x += 10;
};




Faking a Library


One glaring omission to how Wick Editor currently works is the asset library only holds your image and media files. In Flash it contained all the Graphics, Buttons and MovieClips you created, and you could attach names to them so you could dynamically add them to your stage.


Wick doesn't have anything like that right now. The best you can do right now is make all of your clips, and hide them off-stage somewhere, cloning them as needed.


Using this method, you want to make sure your "library" of clips aren't executing any significant code, but make sure when you clone them that they behave as expected.


I figured a great way to do this is to create a master LibraryAsset function that could handle registering clips and creating new instances with a subclass attached.


I ended up making a little demo where a bunch of space ships fly across the screen at varying scales and speeds.


To start, I made my global LibraryAsset function:

/**
 * name - The string name you will use to get clones of the asset
 * clip - A reference to the actual Wick Clip
 * subclass - A reference to the subclass this asset will use when cloned
**/
LibraryAsset = function(name, clip, subclass) {
    
    // only add a clip once
    if (LibraryAsset.assets[name]) return false;

    // make a reference to the subclass we'll be using
    clip.subclass = subclass;
    
    // make me invisible, just to be safe
    clip.opacity = 0;

    // store a reference to the clip by name
    LibraryAsset.assets[name] = clip;
};


// stores references to our library assets
LibraryAsset.assets = {};


// Use this to get a cloned asset, by name, with it's subclass applied.
LibraryAsset.get = function(asset_name) {
    
    // throw an error if we try getting an undefined asset.
    if (typeof(LibraryAsset.assets[asset_name]) == 'undefined') {
        throw('Invalid asset name: ' + asset_name);
    }
    
    // get a reference to the asset clip we want
    var asset = LibraryAsset.assets[asset_name];
    
    // create a clone
    var clone = asset.clone();
    
    // make it visible
    clone.opacity = 1;
    
    // apply the subclass so the clone actually does stuff.
    asset.subclass.call(clone);
    
    return clone;
};


Then I made the subclass to control my space ships:

Ship = function() {
    // reference our static functions to save memory
    this.load = Ship.load;
    this.update = Ship.update;
};


// on load, we want to set a starting position, scale & speed.
Ship.load = function() {

    // set the starting position
    this.x = -100;
    this.y = randomInt(0, project.height);
    
    // scale our ship and set it's speed
    var scale = randomFloat(0.5, 1);
    this.speed = 30 * scale;
    this.scaleX = scale;
    this.scaleY = scale;
};


// on update, we make the ship move right until it's off-screen, then reset it
Ship.update = function() {

    // move the ship
    this.x += this.speed;

    // if it's off-screen, call our load function again
    if (this.x > project.width + 100) {
        this.load();
    }
};


Next I drew my space ship and made it into a Clip. I double clicked that to edit it, and on the first frame I added the following code:


LibraryAsset('ship', this.parentObject, Ship);

This basically told my LibraryAsset function that I want this Clip to be called 'ship', and to use my Ship subclass to control it.


If I test my game at this point, I basically have a blank screen because the LibraryAsset function hides my ship, and it isn't using the subclass at all right now.


To finis the demo, I added this code to the root timeline:

for(var i = 0; i < 20; i++) {
    var ship = LibraryAsset.get('ship');
}


This gets 20 copies of my ship asset WITH the subclass applied. When I test my game now, I have a screen full of ships zipping across as intended.


You can see my working demo and grab the .wick file at https://www.newgrounds.com/projects/games/1327369/preview




Hopefully somebody finds my experiences with Wick Editor useful and is inspired to make something cool for the game jam!


Tags:

11

Posted by PsychoGoldfish - November 21st, 2014


81981_141660039591_chatshot.png#aftertheweekend


7

Posted by PsychoGoldfish - October 27th, 2014


And so we reach the final Monster Monday of 2014.  Follow me on Twitter (@Psycho_Goldfish) and RT this week's monsters to your followers! And be sure and follow these great artists here on NG!!!

This week's picks:

http://www.newgrounds.com/art/view/thespazicat/good-ol-nosferatu
Good Ol' Nosferatu by @thespazicat

http://www.newgrounds.com/art/view/m-vero/sinister
Sinister by @Daverom

http://www.newgrounds.com/art/view/kkylimos/the-dimorteli-brothers
The DiMorteli Brothers by @Kkylimos

http://www.newgrounds.com/art/view/deathink/chuckenstien
Chuckenstien by @deathink

http://www.newgrounds.com/art/view/farturast/halloween-2012
Haloween 2012 by @FatrurAst

 

I forgot to post last week's Monster Monday picks so I'll toss them in here:

http://www.newgrounds.com/art/view/jazza/this-is-halloween
This is Halloween by @Jazza

http://www.newgrounds.com/art/view/xaltotun/pumpkin-golem
Pumpkin Golem by @Xaltotun

http://www.newgrounds.com/art/view/jakubias/mountain-of-goats
Mountain of Goats by @Jakubias

http://www.newgrounds.com/art/view/pkshayde/r2-d2-zombie
R2-D2 Zombie by @PKShayde

http://www.newgrounds.com/art/view/thepsychosheep/dasha
Dasha by @ThePsychoSheep


1

Posted by PsychoGoldfish - October 15th, 2014


So I totally dropped the ball on Monster Monday this week, because I have other shit to do.  But I'm making up for it today with Wicked Wednesday.

Here's a taste of what I'll be posting on twitter today (follow me @Psycho_Goldfish):

http://www.newgrounds.com/art/view/liransz/wickedly-drawn - You should totally be following @liransz she has tons of great halloweenish art in the portal.

http://www.newgrounds.com/art/view/hungercat/xenomorph - @Hungercat also has a nice collection of monster art.

http://www.newgrounds.com/art/view/jackaloftrades/scorching-the-evil-snowman - @jackaloftrades brings us this Christmas-o-ween classic.

http://www.newgrounds.com/art/view/theshadling/hatred - Because @theShadling can indeed draw more than boobs damnit!

http://www.newgrounds.com/art/view/mindchamber/demonic-p-bot - @Mindchamber even includes a short story with this pic.

http://www.newgrounds.com/art/view/wolfenheim/demongo - Any Samurai Jack Fans out there? @Wolfenheim has lots of great fan art you should check out.

http://www.newgrounds.com/art/view/sabtastic/grasp-of-the-dead-hand - @Sabtastic brings us her take on one of the scariest moments in ANY Zelda game ever.

If you have any favorite monster/halloween themed art to share on the Twitters, post it with the hash tag #WickedWednesday and I'll try and re-tweet you.

 

I've also announced an epic contest with an amazing prize for this year's PsychoGoldfish Day:

http://www.newgrounds.com/bbs/topic/1352573/3#bbspost25264576_post_text


1

Posted by PsychoGoldfish - October 6th, 2014


Every monday for the duration of October, I'm planning on showcasing some of the great monster-oriented content we have here on Newgrounds.  Follow me on Twitter (@Psycho_Goldfish) and either retween my posts or add your own with the #MonsterMonday tag!

Here's some monsters for this week:

http://www.newgrounds.com/art/view/splosh999/swampish

http://www.newgrounds.com/art/view/gcs-wt/omden-moden

http://www.newgrounds.com/art/view/splosh999/coookiiieeeeesssss

http://www.newgrounds.com/art/view/letal/second-photoshop-painting

http://www.newgrounds.com/art/view/rickmarin/the-monster


1

Posted by PsychoGoldfish - July 23rd, 2014


With the current boom of popular indy games being produced on Steam, Mobile, and the latest game consoles, I am often remonded that many of these games owe a lot to classic browser games for creating and/or popularizing new or overlooked genres.

One of my guilty pleasures these days is playing endless runners on my tablet.  Games like Jeypack Joyride and Zombie Tsunami are a lot of fun, but I can trace my love for the genre back to Dino Run and Canabalt.

What brower games made you guys fall in love with a new game genre?

81981_140613364963_webclassics.jpg


1

Posted by PsychoGoldfish - December 3rd, 2013


So now that the fancy new blog stuff is working, we are also ready to debut CONTENT EMBEDS!

Currently this only works on movies with video files and audio submissions.

To embed something, look below the video/audio player for the embed icon. (If it's missing, the author doesn't want theor movie embeddable)

81981_138609061032_embed_icon.png

Copy paste the size you want (Note: Large and Medium movie embeds will be scaled down to fit the width of a blog post.)

81981_138609156731_embed_option.png

And violla! 

 

 


1

Posted by PsychoGoldfish - August 23rd, 2012



1

Posted by PsychoGoldfish - August 22nd, 2012


So I started playing Transformers: Fall of Cyberton yesterday and I am having a really hard time staying away from it and getting any work done.

The story so far is great, and there's almost a seamless transition when you switch from the autobot campaign to the decepticon. Its all just one continuous story told from both perspectives.

I find myself nerding out a lot, so many fun moments so far. For example, in the later Optimus Prime levels you have to haul ass in truck form to reach some objectives. On the way you can just run down decepticons and they go flying. I found myself re-enacting this scene from the transformers movie, complete with the aerial transformation/flip attack and an awesome rendition of "You got the touch"

I also re-created optimus dying... a lot...

There's also some fun easter eggs. In one place you can sit down and watch TV while your base is being attacked because NOBODY MAKES ME MISS MY SOAPS!

There's another fun one where a door switch transforms into a retarded dancing robot that had me laughing pretty good.

The characters play mostly the same, but the unique special abilities they get vary enough to really change the play style for each character's levels.

You can't get into cover Gears of War style, but you CAN switch your gun arms, so you can use cover without needing to be glued to it.

I'm not even half way through it yet, but I'm hooked. And I haven't even wet my dick in the multi-player yet.

This is definitely a must own for transformers nerds, and anyone who enjoys a good 3rd person shooter will have a lot of fun with it too. Maybe I'll see some of you on XBL.


1

Posted by PsychoGoldfish - August 18th, 2012


So today I decided to start a new food-oriented blog. I had the wife record some video while I was making dinner and use that for my first post. Was pretty fun, and I'll definitely be doing more.


1