Gamedev Phaser Content Kit

Learn how to build HTML5 Games with Phaser

Welcome to the Gamedev Phaser Content Kit, also known as Mobile Web Games Starter Kit or HTML5 Game Development with Phaser. This Content Kit contains resources on how to start building games using the Phaser framework, it is prepared especially for beginners. You can use it to learn it yourself or teach others either by giving a conference talk or during the hands-on workshop.

Fork me on GitHub

Content Kit materials

This Content Kit can be used as a base for the conference talk material, workshop, online training or whatever else comes to your mind. You can use the slides containing the commented, explained snippets of code to present the topic to the audience, or you can run a live-coding session showing people how to build the final version of the game from scratch. You can also add your own content or trim the existing one if you have limited time for the talk.

Current version and licensing

This Content Kit was last updated on August 17th 2015. It is published under the Mozilla Public License, version 2.0.

Prerequisites for the presenter

Prerequisites for the audience

Key points

Here's what the audience will be able to do or get from your talk/workshop:

Presentation setup

There are two sets of slides that can be used independently, or together one after another if you have enough time. The first, optional "theory" slide deck walks you through the HTML5 game development in general, its tools and resources. The second, main "talk" slide deck is using the Breakout HTML5 game as an example and explains the key elements needed to have such game implemented.

Presenting about HTML5 game development is fairly simple — you just need the slides and demo materials, downloaded locally if possible so network connectivity is not a problem. Just running the "theory" presentation without a code walkthrough or workshop should take 30 minutes, and the "talk" presentation should also take about 30 minutes. You can present those two in this particular order if you have an hour for your talk. If your time is limited to a half an hour, you can go with the main slide deck only.

You can visit the slides subpage where all the decks are available - those two for the presentation, a short live-coding instructions, and the workshop transcript.

Demo setup

In its simplest form, the demos can be run simply by double clicking the html files in the demos directory (from lesson01.html to lesson16.html), or navigating to the live demos directly.

You can find the full list of demos and their short description on the demos subpage. You can launch the last, final demo (lesson16.html) during the talk if you want to show the actual gameplay and show the full source code.

Reference materials

Follow these external resources to learn more about HTML5 game development.

Frequently Asked Questions (FAQs)

Remember that the audience may have some questions about the topic. Be sure to feel comfortable with what you're presenting. Don't worry if you don't know the answer to a question - you can always tell them you'll check it and answer later, or you can point them to any of the external resources so they can check it themselves.

Should I start from scratch or use a framework?
It depends on whether you want to learn about the basics with a simple 2D game or already know JavaScript and want to build the game quickly. In the first case start from scratch, and in the second use the framework.

Feedback

Send pull requests if you find anything that should be fixed or updated.

Translations

The English version is the only one available right now, but the Polish version is being worked on and should be available in the near future. Feel free to translate the resources to your native language and send the pull request, so other developers can benefit from that.

About the author

This Content Kit was created by Andrzej Mazur - you can ping him on Twitter @end3r or send him an email. Feel free to ask questions, request training on using the Content Kit or preparing for the talk. Send feedback if you have any.

More about Content Kits

If you're interested in Content Kits you can find the full list on the MDN page. If you want to create one yourself there's Mozilla Wiki for that with all the details you need. The Content Kits project started as the collaboration between the Mozilla MDN Technical Writers and Technical Evangelism teams. They are here to help you, so don't hesitate if you need anything or have any questions: ask them directly via the #mdn IRC channel or the dev-mdc mailing list.