Developer Diary: Jetpack game HTML5 – Day 1

What’s this project about?

Well, basically I’m going to recreate my jetpack game that I’ve made in Flash (http://student.nmct.be/michiel.de.mey/blog/portfolio/jetpack-awesomeness/) with Javascript and the HTML5 canvas element.

So why am I doing this? Mostly because now I have a project that I can work on whenever I’m bored or whenever I don’t feel like working for school.
Also, it’s something cool you can add to your portfolio. (Having an HTML5 game in your portfolio ,makes you look bad-ass!)

NOTE: This is a developers diary, I’m just writing this to record my own progress and to reflect on what I’ve done and to share my findings with the internet. Any suggestions are welcome.
ALSO NOTE: I am in no way a professional Javascript coder.

On to the development!

Day 0: Research

I always do some research before I begin with a project. For example “What libraries am I going to use? Is it possible with pure Javascript? What’s fully supported and what not?” etc.
But most research is done during the development progress. For example, when you’ve encountered a error, you usually search the internet for the best possible solution. Or when you are working with a certain element and you want to know more about it, you look it up on the internet or in the documentation.

What have we learned? Always do some research to see if things are possible to achieve and always look for the best solution.

Item #1 : Choosing the HTML5 game library

I had only 2 requirements.

  1. It had to be free. (I don’t want to pay to develop games using HTML5 canvas).
  2. I don’t want some fancy IDE with click and drag stuff. That’s just very unprofessional. (e.g. Construct: http://www.scirra.com/)

I’ve found a very useful list of HTML5 game engines over at this wiki: https://github.com/bebraw/jswiki/wiki/Game-Engines
I’ve tried only the most popular ones, mostly the ones with the best documentation.

But only one in particular caught my eye. Crafty

It’s really easy to use, though it might be confusing at first because it’s a modular game engine that uses entities and components.
I suggest you read this article if you don’t have any experience with it: http://cowboyprogramming.com/2007/01/05/evolve-your-heirachy/

One thing that really convinced me was the Box2Dweb component. Since my flash game uses Box2Dflash, I could easily use the same code because Box2Dweb is just a port of Box2Dflash.

Item #2: Reading the documentation

Before you start using a library/engine/framework you have to read the basics. It’s usually in the form of a quick-start guide or possible even tutorials. Just make sure that you have enough knowledge to begin your project. I’ve read the quick-guide, done a few tutorials and looked at some example code before I started. I suggest you do the same. 🙂

Day 1: Starting the project

I’m using Netbeans 7.1 to code my game. I created a PHP project, deleted the .php files and added a index.html file. There isn’t really a template for HTML5 websites/Javascript in netbeans.

Important: Add milestones to your project

For example “I want to make a background and make my character move on the first day of the project.”. That was my milestone. I wanted my character to show up on the screen and go up and down very elegantly when pushing the correct keys. The background was optional and very easy to do.

I’s 01:26 and I’ve just finished playing some Saints Row the Third. (Remember: It’s important to have fun!) Anyway, I’ve reached my milestone and I am VERY content with the end result.

Michiel De Mey

Full-time geek, Full Stack Engineer and Full Metal Hero. NodeJs, AngularJs, API design, WebSockets, WebSec & IoT enthusiast. Former San Francisco resident.

More Posts - Website - Twitter - Facebook - LinkedIn - Google Plus

  • Pingback: Developer Diary: Jetpack game HTML5 – Day 1 | HTML5 Game Development()

  • Hey,
    I’ve just stumbled upon your little diary here because I was looking for a short introduction into game development with JavaScript.
    I am quite experienced with Java, so wanted to try some games with HTML5 and JavaScript, although I know these are whole different worlds.
    The GWT looks nice but is a bit too much for me for now so I found Crafty too.
    I have looked into your short code for the first milestone. Your little example here is very nice and I’m interested what you will do from now on.
    Hope to see some more entrys here soon,
    Kagee

  • genefer s

    I agree
    that HTML5 is too far than flash and also flash is very powerful than HTML5.
    Below are the few points which I have noticed

    1) Video compatibility (youtube
    html5 player
    need different format of video for different browsers,
    which directly impact on storage and bandwidth)

    2) Styling (need separate CSS
    for different browsers)

    3) Multiple audio support at
    one time and simulations

    4) Code is not secure

    And many more…

    But as per my analysis and
    Adobe Flash acceptance for HTML 5. Seems that after few years HTML 5 will be
    closer competitor.

     

  • genefer s

     
    Processing video is
    one thing, but flash makes it in a proprietary, close-source way (AFAIK,
    correct me if i’m wrong). html5 vedio playeroffers
    easy way for web developers to present video or audio. When the HTML4 era
    ends, there will be no hacks, embed, object and other tags needed, javascript
    tricks to achieve this in any browser.On the other way, it will be hard for
    developers of browsers, BUT: it’s still better than having only one close-source
    technology to have video on site. There is a real concurrency between
    browsers, so their developers will surely try to make it the best way they
    can. Unlike Flash developers, in my opinion.