My tutorials on Phaser

[mickeyren]

Here's me giving back to the community by sharing my own knowledge and adventure in Phaser:

New:

Jan 9, 2017 - https://www.programmingmind.com/phaser/topdown-layers-moving-and-collision

Past:

https://www.programmingmind.com/phaser/fun-with-spells-using-phaser

https://www.programmingmind.com/phaser/stop-particles-from-sliding-in-phaser

Hope you guys enjoy!

 

[Any_Key]

I like this. Your code is well laid out and has enough comments to more than follow what's happening without being to verbose. As someone who's learned ES5 but not 6 I found these examples quite easy to follow and I learned about a few Phaser features I'd not needed or thought about until now but now I know they exist and maybe even how to use them.

[erich]

they are really good - I love how you did the skeletons, well done

[mickeyren]

Thanks guys! @Any_Key and @erich, very encouraging! 

I'll have more tutorials up soon:

Tilemap part 1 - loading and collision (will probably span to at least 3 parts, part 2 is shooting, part 3 is AI) and Zooming.

Screenshots attached. Just polishing it up a bit more and completing the tutorial write up. 

And of course, Happy New Year everyone! Hoping for a better new year to Phaser and it's community!

[Any_Key]

I did run into one issue with your examples; your .js files do not import/export or otherwise reference one another. Once I figured out you're transposing down to ES5 and all of your classes are in a single file it made sense but as presented on your site I couldn't figure out how one thing was talking to another.

[triptych]

These are super awesome! Thanks especially for the spell tutorial. 

One feedback -- can you please post the code up on github somewhere?

 

[mickeyren]

Happy monday everyone! 

I manage to finish my first part on my top down tutorial and it's ready - https://www.programmingmind.com/phaser/topdown-layers-moving-and-collision 

Hii @Any_Key they are actually separate files, but they run through Jekyll's asset pipeline which packs and compresses them all together.  And yea, I noticed my game won't run on my IOS8 which has an older Safari browser so I had to use a library that automatically transforms any *.es6 files into vanilla ES5 code. https://github.com/TannerRogalsky/sprockets-es6 Works amazingly well!  

Now i can stick to writing es6 code, i never want to go back to writing the old way of JS classes unless absolutely needed. So for example on my newest tutorial (topdown - layers, moving and collision), there are only 2 files - gamestate.es6, which is the same across across all of my tutorials and a tutorial specific one - demo.es6. 

I have a JS manifest file that packs all the JS files i need for my Phaser tutorials.

//= require jquery-1.12.4.min
//= require featherlight-1.6.1.min
//= require phaser/phaser-2.6.1.min
//= require phaser/juicy
//= require phaser/spriter
//= require phaser/isogrid
//= require phaser/pieprogress
//= require phaser/phaser-virtual-gamepad
//= require phaser/demos/gamestate

And then for tutorial specific code i had this on the actual HTML:

{% js phaser/demos/topdown-layers-moving-and-collision/demo %}

For my Fun with Spells tutorial because the spells span multiple files, i created another manifest file for that:

//= require phaser/demos/fun-with-spells/demo
//= require phaser/demos/fun-with-spells/spell
//= require phaser/demos/fun-with-spells/player
//= require phaser/demos/fun-with-spells/magicbolt
//= require phaser/demos/fun-with-spells/firewall
//= require phaser/demos/fun-with-spells/icecage
//= require phaser/demos/fun-with-spells/lightningbolt
//= require phaser/demos/fun-with-spells/firestorm

Jekyll asset pipeline will stitch them all together so on the tutorial specific markdown I can just include that manifest file:

{% js phaser/demos/fun-with-spells/index %}

And then to start my demo, i just had these lines at the bottom of each markdown file. 

var game = new Phaser.Game(640, 480, Phaser.AUTO, 'phaserDemo');
game.state.add('demo', DemoState);
game.state.start('demo');

Hope that explains! and I definitely have them all separated out.

Hii @triptych I don't see the benefit of posting them to GitHub, as I already have all the source code posted on the tutorial page itself (except for the HTML file). But maybe I'm missing something that would be beneficial to some people, would you mind telling me why you want it on GitHub? 

[mattstyles]

33 minutes ago, mickeyren said:

would you mind telling me why you want it on GitHub? 

I can't speak for @triptych but when following a tutorial a link to a github repo is highly beneficial and as I don't have to muck around with downloads and files etc, I just clone the repo and follow your instructions to get the project up and running locally, preferably this should be just one command (possibly two with an install step). 

This way the repo is always up to date with the tutorial as well, rather than handling multiple zips for different versions, if I've already cloned the project then I see you've updated it, I just pull the repo, rebuild and fire it into a browser. Far easier.

You could even be really clever and tie different sections of your tutorial in to commits or branches in your repo, so when I'm following your tutorial I can have the actual code for that section. Again, you could do that with a zip of source code but its just trickier for the consumer to manage. Google do this well with the structured git repo, and it can always be up to date which is the real bonus.

[triptych]

What @mattstyles said Plus you get download (zip files ) for free and you can push updates and changes easily.