Sign in to follow this  
mickeyren

My tutorials on Phaser

Recommended Posts

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!

 

funwithspells.png

stopparticleslide.png

topdown-layers-moving-collision.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

2017-01-01 at 6.29 PM.gif

2017-01-01 at 6.56 PM.gif

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.