HTML5 has been around for a little while now, and since then there’s been a surge in the development of HTML5-based games. There’s even an entire website devoted entirely to HTML5 game development. My interest in HTML5 primarily stems from the fact that Runescape, a browser-based MMORPG that I enjoy playing is getting its own HTML5 client. So, I decided to do some research and try it out for myself.
I followed a quick useful tutorial on Box2DWeb (which oddly I can’t seem to find anymore) just to get into the basics of doing games in Box2DWeb. However, Box2D is only a PHYSICS engine. Its not a graphics engine, and the internal graphical capabilities are for debug purposes only. They aren’t very advanced at all. Instead, if you want to generate graphics, you need to additionally grab a graphics engine, too.
Its a real annoyance, there’s only one page on how to connect IvanK to Box2DWeb, and I couldn’t find much of anything else online for this, either. I went and applied the IvanK code to my existing example above (so I could have one function to generate boxes and circles), and after working out the bugs, what did I find? A blank canvas.
I had it set to create a circle. However, I could not get the circle to appear
. Nothing showed up. I ended up spending most of my Sunday this weekend just trying to figure how to connect IvanK to Box2D (half of it just trying to get a single circle to appear). I finally went and grabbed the images from the IvanK website (don’t worry, I deleted them) just to try and get this working. I copied the default code, ran it on my site, and it WORKED FINE. So obviously something was missing.
Typical programmer move, after spending hours pouring over it, I finally realized that I had missed one small piece of code that actually added the Sprite to the Stage:
// Add To Array
That second line? That’s the one I missed.Yes, “stage” is defined further up in the file.
I worked on this for about another hour trying to work out some remaining bugs in it once I finally got it to appear on the stage. I still had other problems, though, mostly relating to the fact that the graphics did not appear in the same spot as the actual element was at. I managed to fix it, though, but since it was so late by that point right now I just have a ball dropping onto a blank background.
In any case, that was my first experience working with HTML5. I actually had hoped to try this out last weekend, but I never got the opportunity to do so. So instead I had to put it off until this weekend and I basically spent my weekend working on this little project.
When I have more time, I’ll go back and try to actually finish a basic ball rolling platformer puzzle game. I need to finish the ball, though, so it looks like its actually rolling, probably just adding a small line in it like the first one. If you are interested in trying this our yourself, I linked to all the articles I used as reference in my post. You can also download my current code from Github to see my progress.