1. What is HTML5 Gaming...
2. What do I need? ...
3. What are the best li...
Welcome to the complete guide on HTML5 Games! This is the post that will get it all started for you, from here on you can choose your own path to developing greatness.
What is HTML5 Gaming?
What do I need?
- A browser to test your games in (Chrome or Firefox).
Chrome has built in developer tools to help you debug, for Firefox you need to install the Firebug extension
- A text editor to code in (Sublime Text).
In my opinion, Sublime Text is the best out there, and all you're ever going to need. No need to buy the expensive Adobe DreamWeaver. However, if have your game running on a server, you might want to look into Coda, as it makes you able to keep an ftp connection open wile you code your files,
- A (Local) Server to run your websites/games on.
Free hosting is available at multiple places and suffices, but you could always buy 'premium hosting'.
But, you can also use the software WAMP to create a local server to do everything on.
- A basic understanding of HTML5 and CSS3
HTML5 is very much needed for the core structure of the main game page and perhaps a few elements later on. CSS3 is used for styling the game, so it depends on how you want the game to look how much you have to learn.
Don't worry, both languages are the simplest available (how would the World Wide Web have gotten so popular if it wasn't that way?).
I mean it. You need to know the basics of the code you're going to be working with, but HTML5 is not an extremely easy method of creating games. You need to know as much as you can.
- A JS library to help you.
Don't think 'heh, I can do this on my own, no help'. There are really awesome libraries out there, that really take a lot of the hard work away from creating a game, while still giving you all the freedom in the world to create what you want.
What are the best libraries?
Phaser – good for any 2D game, great support for physics
Pixi.js is included, which is good for drawing (relatively simple) graphics
Three.js – amazing for 3D games right in your browser. But, as for anything that is 3D, it is also harder to learn and use than 2D engines.
Physijs is a phsyics library made exclusively for three.js - it uses the exact same syntax and all as three.js, with only a few minor differences at a few points. So once you've learned three.js, you've practically also already learned how to include physics (I wrote an extra tutorial on it though, do not fret)!
CreateJS – great for adding a nice touch to your games (mainly focusses on interactive, graphical, fluid experiences)
Construct and ImpactJS – Both are paid software for creating HTML5 games, no real coding knowledge is needed.