Playing with canvas and webgl

I finally got around to playing with the HTML 5 canvas element and attempted to build a quick game to compare the process to my past experiences of Adobe Flash.

I was quite surprised with how much I was able to do using only canvas, WebGl, the gamma JS library and some example code. I was able to create:

  • Platforms
  • A controllable entity that the ‘camera’ follows
  • Enemy objects with collision detection
  • Dynamic Lighting
  • Multiple Levels
  • Basic Textures
  • Entities from COLLADA files

Although I was amazed that I could do these things the process wasn’t easy, it was a lot of work to do many of the things that I would take for granted in flash.

Fortunately there seems to be an explosion of libraries and game engines built using these standards that will make the process much easier and if you do want to create a game using canvas I would recommend not trying to reinvent the wheel and sticking to one of these. Although with there being so many of these engines popping up it’s quite hard to tell which ones will gain the most popularity.

While there might be some catching up to do for canvas/WebGL games the quality is increasing at an incredible rate while free libraries and game engines lower the entry level to creating them. While flash might be the weapon of choice for web based game developers now I feel Adobe will have to do something special to keep up.

The game is very basic and was just an attempt to see what was possible, still if you want to play it you can find it here and you’ll need the latest chrome/firefox/safari.

2 thoughts on “Playing with canvas and webgl

  1. Pingback: WebGL around the net, 28 April 2011 | Learning WebGL

  2. Pingback: Lets Monkey Around | blogotron.co.uk

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>