Playing games is cool. Making them by yourself is cooler. But being able to make a pretty decent game in a few hours and then sharing it with the world in just a few clicks is the coolest thing of them all.
That’s what HTML5 gaming empowers us to do. Using your web browser as a gaming platform you can get your gaming fix wherever you are, without having to worry on hardware, performance o even needing to download a single file into your device.
A few years back when Flash was the “best thing to ever happened to the internet”, you could see animations, games or even movies made with it all over the place. A few years later, with the progressive withdrawal of Flash support on various platforms and devices and the advent of Javascript, HTML5, CSS3 and a few other technologies things have changed quite a bit.
Some people see the demise of Flash as a backwards move, since it allowed people with little programming background to easily create interactive software for the web in a short period of time. They may be right, but if you are here reading this you won’t probably have those problems in the first place (you geek!).
Lucky you, because on today’s tutorial we are going to take a quick look on how to make a canvas-based HTML5 game from scratch!
There are many ways to start coding HTML5 games. Some people just use plain javascript and use the DOM elements to make objects and animations. Others will use a various array of plugins to display graphics on screen. Some will even end up using SVG elements to create a complete game. All of those approaches are ok, but since HTML5 introduced the <canvas> element it has all been a lot more coherent and comprehensive to use for us game developers.
It allows us to have a sort of drawing board, where we can render things in 2D/3D in the same way you would do in a more traditional platform. You can also benefit from the hardware acceleration capabilities of each device since it supports the WebGL standard for rendering. At this point we could start coding up our game with javascript and manipulating the <canvas> element to make it a reality, but you would end up realizing that it is not exactly what would you expect from a game engine. Mainly because it isn’t one. Things like game flow, sprite manipulation or animation are still up to you, so you’ll end up writing a lot of code in order to be able to do some very basic things.
That’s where Javascript game engines come in. They add an abstraction layer on top of the <canvas> element, allowing you to interact with it in a more intuitive way for game developers, filling in the gaps with functions and methods that allow us to do what we really want without having to waste time reinventing the wheel or making our own sprite management methods, for example. There are TONS of different javascript game engines out there. Some are better than others, some are free and others are not. Some even have interactive editing tools for levels and such. Before you start coding anything I would recommend on spending some time testing a few ones and seeing what each is capable of.
Introducing enchant.js
For the purpose of this tutorial we are going to be using Enchant js. It is a lightweight 2D/3D engine with a huge japanese company behind but it is free to use (MIT License, YAY). There is a live community supporting it and most importantly, I’ve found it to be one of the cleanest and simplest js game engines out there. It’s really easy to use and you can get you game up and running in a few minutes, which is what we are about to do now.
Setting up the environment
Since it is a web game and we will probably want people to be able to play it online at some point we are going to create a test server environment where we can place our files into a folder in the same way they will end up in our production server once the game is finished and published. For this purpose I use XAMPP . It sets up an Apache server in a few clicks, with a simple GUI to turn ON or OFF each of it’s components. It rocks.
(Of course if you already have an Apache server -or equivalent- installed just skip this step, duh).
We are going to create a separate folder with the following structure:
index.html – the webpage from where the game will be loaded and played.
css/game.css – css file to customize that page if we want, but it won’t have much content in this tutorial.
res/ – folder where we will store our sprites, graphics and sounds for the game.
js/ – folder where we will store our game code. As you can see we have the main enchant.js plugin as well as some plugin files to use some extra functionality for our game (more on that soon).
js/main.js The main code file for our game, that’s where the “magic” happens.
Running the game
Once this is done we will need to set up our index.html as follows:
As you can see we just included the needed js and css files and created an empty body element. Then, we just create our main.js file, like so:
Now you can access the index.html file from your web browser and you’ll get a blue screen. Still nothing fancy but we will get there. Before moving on let’s see what the current main.js code is doing:
1.- First, we call enchant.js. This will initialize the plugin for us to use and it will also create a canvas element inside our DOM for our game to live in.
2.- We define some global variables, in this case it is just the screen size we want enchant.js to generate for us in the next step.
3.- When the page has loaded completely (i.e every js, css, or /res file have been downloaded to the client) we start running our code.
4.- We create a new game variable with a given height and width. Once that’s done we configure the game to run at 30fps and to have a scale of 1 (using a higher number will multiply the screen size by that number, and enchant.js will resize the viewport accordingly).
5.- We set up an onload method for the game variable that will only instantiate a new GameScreen class. With that done we just call the start() method of our game variable in order to get the game running.
6.- Below that we can define every class we need for our game (players, enemies, bullets, scenes and so on). In this case we only have the GameScene class which inherits from the enchant.js Scene class, so it will behave as a normal Scene but it will perform our specific game logic.
7.- This GameScene class currently has only two methods. THe first one, initialize() will be called when the scene is created and it will prepare everything it needs to run. For now it just calls the default scene constructor and then sets its own background to a blue color.
As you can see with only a few lines of code we have the engine running with our first scene, which -for the moment- just tints it’s background with blue. With all the groundwork done we can now start thinking on what our game is going to be.
I’ve been thinking on doing a Flappy Bird clone myself for a while, not because I like the game or anything of the sort, but because I have been wondering how difficult could it be to make it (not much) and because I wanted to test out the enchant.js implementation of Box2D, which as some of you may know already is a physics simulation engine for 2D games.
In the next part of this tutorial we’ll develop the core game logic, where we’ll take on matters such as sprite drawing and animation, physics interaction and user input. Oh, and we will also see a practical implementation of parallax backgrounds!
That’s all for now, stay tuned for the next part of the tutorial!
P.S- BTW, the next Ludum Dare is taking place next weekend, we may take part on it so keep an eye on our Twitter account for updates 🙂