Morning: Preparing for the Afternoon

For instructors tutoring children or other individuals with little programming or even gaming experience, we recommended spending a few hours in the morning to make sure things go smoothly in the afternoon.

If you’re the student, it’s best you skip this part so as not to spoil what your teacher is going to ask you to do.

Introduce them to Shoot ‘em Ups

It may sound weird for us who grew up in the ’80s and ’90s where shoot ‘em ups were staple arcade games, but there is a very slight possibility that the person you’re teaching may not be familiar with the genre.

If that’s the case, then you need to let them play a few shoot ‘em ups before starting the workshop. They must first understand the basic concepts around the genre, knowing what makes those games fun an challenging. At the worst case, finding out that they hate the genre will let you end the session early and spare you from an unproductive afternoon.

An obvious choice would be 1942, as it has been ported and remade so many times that you can find one on pretty much any platform.

Then there are Flash games from sites like Newgrounds and Kongregate. As HTML5 is supposed to replace Flash, letting your student play these games will give them an idea on what they can make in the future.

Steam also has a good collection of shmups. Jamestown deserves special mention because it lets you play with your students via local co-op.

Technical Requirements: JavaScript and Math

Theoretically, you can conduct a workshop with students who have no prior knowledge of JavaScript. They will be at the mercy of the copy-paste gods however, and it’s also safe to say that they won’t retain much after this workshop is over.

For best results, students who aren’t familiar with programming or JavaScript must take a crash course in the morning. You don’t need to go all the way into advanced JavaScript - knowing how to make and use functions and objects as well as using browser’s developer consoles for debugging should be enough for the workshop. MDN has a good list of JavaScript tutorials that you and your students can choose from for this purpose.

In addition to programming skills, students should know basic Trigonometry. Phaser already handles most of the calculation but knowing stuff like sine/cosine and polar coordinates will make it easier for them to visualize what’s going on under the hood. They will also directly use those concepts at the latter part of the workshop where we rotate sprites and generate patterns for the boss battle.

While there are many online tutorials out there for trigonometry (Khan Academy comes to mind), I have yet to see one that is better than your usual high school trigonometry class while accessible to younger students. You might even say that the other way around, introducing kids to trigonometry through game concepts, would be a better approach¹.

If you still wish to quickly introduce basic trigonometry to your students before the workshop, look for visually impressive and interactive demos like How to Fold a Julia Fractal.

Development Environment Setup

All you need to code in Phaser is a browser that supports HTML5 (e.g. Chrome, Firefox), a web server, and the text editor of your choice.

You have to use a web server to test your game in this tutorial. The first part of Getting Started With Phaser explains why you should do this.

As for the text editor, any editor or IDE with JavaScript support (syntax highlighting, automatic indent/brackets) and can parse non-Windows line endings (i.e. not Notepad) will do. If your preferred editor does not fit these requirements, we suggest downloading the free trial of Sublime Text.

Once you have setup your web server and text editor, download the basic game template with Phaser 2.4 RC1 from Github, extract it to the folder served by the web server, and start coding.

More detailed information about setting up your development environment (like choosing a web server) can be found at Appendix A: Environment Setup Tutorials.

Other Suggested Prior Reading

Apart from JS and Math, we suggest that you at least skim through the following to give you an idea about what we are going to do:

• Getting Started with Phaser - Phaser’s own guide setting up a development environment
• Phaser Examples - view demos of Phaser’s features.
• Phaser Documentation - your typical API docs with link to source.

In addition to Phasers documentation, the following may give you insights on making games in Phaser:

• Game Programming Patterns - like many game frameworks, Phaser uses the Game Loop pattern at its core.
• Game Mechanic Explorer - a somewhat short list of game mechanics, all implemented in Phaser.

Video Walkthrough

This book reached the Leanpub’s “Lifetime Number of Copies Sold” bestsellers list around December 2014. As my holiday gift of thanks to those that bought and downloaded it, I recorded a quick and dirty video walkthrough of the main chapters of the book. If you prefer watching the programming lessons in HD video (even when they are taught by a slightly drunk non-native English speaking guy), you’re in luck.

If you purchased or downloaded the book, you should be able to download the videos (all 600MB+ of them) via the “Extras” zip link on your Leanpub dashboard. If you’re reading this online or want to watch in lower resolution, you can also watch the videos on YouTube.