Related Articles & Updates
HTML5 Game Development with Phaser
Game development for the web can be challenging. The Phaser framework offers a complete API for developing <canvas> games in a straightforward and well organized environment. In this article we’ll look at the core features of phaser and use them to create a clone of the classic nintendo arcade game “Mario Bros.”
HTML5 Game Development with Phaser
From my #presentation to the Fredericksburg Developer Group: HTML5 Game Development with Phaser. If you couldn’t make it, check out the slides below. And the source for the game Zeta Bros. is on Github.
Complete Game Demo
Got the #Phaser game all buttoned up for the presentation. Added character selection to the main screen, some extra sound effects and more tweaks to the animation. Follow the links to take it out for a spin and then take a look through the #JavaScript on GitHub.
Level Design
Cleaned up the levels a bit. Made Level2 more difficult. The game is in a complete enough state for the demo now. Going to add some finishing touches if there’s time.
Killer Bots
Security bot sprites are in place. The wall switches deactivate the bots, leaving them in a vulnerable state. Equivalent to stunning the enemies in Mario Bros. Alpha Zeta makes quick work of them, turning them into a pile of junk.
Revised Graphics
Updated level design with final graphics. Time to add the killer robots and start wiring everything together.
Sound Effects
More experimentation with the #WebAudio support in #Phaser. I’m not much of a sound designer so all of these clips are taken from freesound.org
Intro Animation
Using #Phaser tween animation and #WebAudio events to add some life to the splash screen.
Level Refactor
Added “level” objects that extend the base GameScene object. The createPlatform and spawnBot methods are overridden to customize each level. I prefer this method to a config object because it lets me customize every aspect of the level if needed. Check out the video to see the 2 example levels.
Game Over Man!
Recycling the background and the font and, Viola, we have instant end-game scene. Right now it’s serving double-time as both a winning and losing screen.
Intro Scene
Added an intro scene with the splash image I made a few weeks ago. It’ll need a “Start” button but for now just click anywhere.
Levels
Check out the video of gameplay so far. Secret underground bases need lots of levels. The label over the door indicates the level number. For now, it just repeats the same level while incrementing the number.
Security Bots
Some FPO security bot sprites. When the player collides with one the game restarts for now. Thinking about adding an electrical energy field around it to zap the player on contact.
Rough Draft
A first pass at the game with (mostly) FPO graphics. The idea is you’re escaping through the underground levels at Area 51, or perhaps that base in Dulce. You run around pressing switches on the wall which open the elevator door to the next level.
Doin’ It Again
I signed up to do another presentation to the Fredericksburg Developer Group later this year. This one will be an HTML5 game development demo using the Phaser framework. It’s going to feature a step-by-step through programming a clone of the original Mario Bros. arcade game. I call it “Zeta Bros.”