HTML5 Mobile Game Development workshop

HTML5 Game Dev Workshop at the HTML5Dev Conf 2014

I recently had the opportunity to run two full-day workshop in San Francisco, on HTML5 mobile game development at the HTML5 Developer Conference, the world largest HTML5, JavaScript and Node.js conference. A lot of people have asked me to share this experience and to share the slides so I’ve decided to write this article.

html5 game development workshop  html5 game development conference

The goal of my workshops was to teach web developers how to make their own cross-platform mobile games using HTML5. Everybody who enrolled had strong web development skills but they had never made a game before. Having among the attendants talented developers including Apple employees, experts in data visualization and backend hackers was intimidating at first! but after seeing them hacking their own Mario clones, spaceship games and a Minecraft inspired 2D platformers I was very happy with the results.

html5 game development workshop  html5 game development workshop

7 hours of lecture can be an overkill no matter how interesting the topic, so the workshop was divided between lecture time and coding time, where participants coded their own games. In the second workshop I also included mini coding labs as per the feedback received after the first day. This was very much appreciated by the attendants and I’ll definitely include more in-between short coding labs to keep people awake.

html5 game development zenva academy  miner game

Teaching HTML5 mobile game development in just one day was a challenge, as I’m used to splitting the content in individual modules or courses, or assuming people know certain things. The approach I followed was:

  1. Cover the basics – what are HTML5 games, how can you render a HTML5 game (no frameworks yet). Canvas API
  2. Development workflow of a HTML5 game, from idea to publishing to native platforms.
  3. Framework basics – HTML5 Quintus
  4. Framework basics – Phaser

After those 4 modules, students picked a framework and worked on it for the rest of the day, on their own game ideas.

One reason why two frameworks were included instead of just one is because I usually get the impression people will “marry” a HTML5 game framework too fast, without realizing there are other options and losing focus about JavaScript being the center. As you improve your JavaScript skills you also improve your HTML5 gamedev skills. So I opted to cover two options so that at least they’ve had a play with two engines before deciding which one they are going for.

Another aspect I made a strong point about is that HTML5 game frameworks shouldn’t be treated as a “black box” as you do with jQuery or Angular. If you commit to use a framework on a game then you should read it’s source code and become familiar with it. It’s not optional!

What did people think of the workshop?

I got some interesting feedback and results after running a survey. Not everyone responded but it was good to collect feedback.

html5 game development workshop survey 1

html5 game development workshop survey 2

Presentations on Slideshare

 

 

 

 

Published by

Pablo Farias Navarro

Pablo is an educator, developer and entrepreneur. Founder of Zenva, Pablo has published over 30 online courses that teach game, app and web development. Pablo has also created educational content for companies such as Amazon and Intel.

Share this article

  • Do you have recorded video?

    • Sadly no, but I’m using all the material in the new HTML5 gamedev online course I’m making