Lynda.com has published the long-awaited course on HTML5 Game Development with Phaser! Special thanks to Richard Davey for looking over the code and providing guidance in the development of this course.
Phaser is a cross-platform game development framework for both mobile and desktop games. This fast, fun, and free framework supports both JavaScript and TypeScript, targeting the open web via HTML5 Canvas. This course shows you how to put Phaser to work: creating a multi-state games that can be played on both desktop browsers and mobile devices. After you gather your assets, author Joseph Labrecque will help you start a new game project with the Brackets code editor, create a basic preloader and menu states, and then start building game entities and layering in functionality with Phaser’s sprites, groups, animations, tweens, emitters, and physics. He’ll also show you how to provide feedback to the player and add sounds effects for a more immersive gaming experience. When you’re done, Joseph shows you how to prep the game for a mobile launch.
Phaser
I really like Phaser. It’s an awesome little framework for quickly building games using web standards and is quite similar to a lot of ActionScript-based frameworks like Flixel. Phaser has the concept of states – so you don’t end up placing all of your JavaScript inside one big file (but you can if you want to). It has particle systems, a group of physics libraries to choose from, rich audio support, and much more.
Bunnies
Why bunnies? Bunnies are cute. They are simple to draw and animate… and who doesn’t feel the need to defend such poor little creatures?
Flash?
Am I giving up Flash? Of course not. I actually generate all of my visual assets and animations with Flash Professional CC in this course. I work with Flash just about every day – just as I have in the last 15 years or so. Concurrently, I’ve been working with HTML, CSS, and JavaScript for even longer than Flash. Just because I do work in one area doesn’t mean I abandon everything else. That’s foolish ;)
This might be a dumb question, but I wasn’t sure where else I could ask it. In your course you use the following line at the end of the buildSpaceRocks function:
r.events.onOutOfBounds.add(this.resetRock,this);
you also do something similar in the buildEmitter function:
this.input.onDown.add(this.fireBurst, this);
In both cases “this” first refers to the object that contains the function which happens to be the BunnyDefender prototype object. The second “this” after the comma refers to in the first instance to the “r” as the object being passed in, which is confusing because it appears the “r” is the object the event is being applied to, so shouldn’t it know that is what it should apply to? And in the 2nd instance the “this” refers to the “input”.
So my question is around how the “this” variable can refer to 2 different variables/objects when it appears as if the same scope would exist inside the (). I must be missing a concept here about how the add() works. I can see that it does work, but without your instructions, it seems like figuring out what “this” would be, is almost impossible. Any advice?
Hi Chris.
I know exactly what you mean and had a bit of this confusion when I first approached Phaser as well. Having a heavy AS3 background, I had it drilled into my to avoid using “this” whenever possible – yet when approaching Phaser (JavaScript) with this in mind… ran into a lot of issues. I reached out to Richard to be sure I was handling this correctly so eventually just had to leave my prejuices toward “this” at the door :)
To answer your question though; the first “this” refers to the game object. The additional “this” which is passed through to these functions refers to other objects like bunnies and such. How does Phaser make the distinction between the two? Well, Phaser uses a port of AS3 Signals to handle events like this (tied to Sprite instances) and the way Signals work is that they bind directly as specific communicators/messengers.
It’s a few years old… but here is the original Signals wiki page – it may help bring more perspective! https://github.com/robertpenner/as3-signals/wiki