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. Ir yo love video games you will explore a new wonderful world of mobile apk games on Android4Fun website.
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.
- It had to be free. (I don’t want to pay to develop games using HTML5 canvas).
- 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.
