Making a browser based game may sound like a simple task, But things are not always what they seem. After making some more research I’m once again smarter than yesterday. I’ve narrowed my options to a three: HTML5 Canvas, Document Object Model with CSS3 or a full-blown JavaScript development API (like Pixi.js or ImpactJS).
I find great comfort from this a bit old but yet interesting lecture video. It illustrates the challenges web browser technologies were facing a few years ago. There were no commercial JavaScript APIs and everything was mainly run by hobbyists. Since then, gaming platform shown on the video was acquired by Zynga and was never heard from again. The guy seems to currently work at Google Chrome team.
However, some points made in the video are still relevant to this day. Like that the traditional game industry has got about 25-30 years lead compared to the browser game industry. This makes me feel that I still have the chance to make something new and inspiring. I was afraid that time had ran out for me.
Browser based game technologies
There is a lot of discussion going on whether one should use HTML5 Canvas or DOM elements with CSS3 transformations for the animations. I’m not going to cover Flash here since I want my games to work on mobile devices.
One especially important note from the previous video is that you should carefully plan what technologies you are going to use. The game you are making right now will most likely not be ready tomorrow. So you should plan for the future.
http://www.lostdecadegames.com/mailbag-frameworks-canvas-wrappers/
“To get the most benefit out of any JavaScript framework or development environment you should really build your game from the ground up on that platform.”
http://www.goodboydigital.com/to-dom-or-not-to-dom/
“Using CSS to create super dynamic content (I’m thinking games here, not simple animations) feels to me like jamming a square peg in a round hole.”
http://www.kirupa.com/html5/dom_vs_canvas.htm
“While you may not have thought about your markup and code in quite this way, almost everything you specify is nothing more than a drawing instruction that tells your browser what to display on the screen.”
“Choosing between the immediate mode-ness of the canvas and the retained mode-ness of your DOM is not an exclusive decision.”
Comparing HTML5 Canvas vs. CSS3
Check out this great presentation PDF about HTML5 Canvas vs CSS3 (Pros & Cons) from TIZEN conference 2012.
Cross-platform browser based game compilers:
Here are some mostly commercial development platforms to easily port your game to multiple device platforms.
“When you’re ready to launch your game, run a single command to package either iOS or android binaries ready for upload to the Google Play Store or Apple’s App Store.”
https://www.ludei.com/cocoonjs/
“Using CocoonJS, a single code base is enough to publish a game or app natively on more than 10 stores. Best of all, with no installations thanks to our cloud-based platform.”
“PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS.”
What about SVG?
Here is one article you can study for more about SVG. It is out of my scope but I gave it some thought also.
Conclusion
Oh my goodness how much stuff I managed to come up with again. As it turns out, it highly depends on your needs what technology to use. When making a game you need to think about the future and the time your game might be coming out. You must give a lot of thought for what technologies you choose to use.
In conclusion I might be better off using some battle-proven Javascript game development API even as much as I hated them at first. For my purposes it seems I could be using either Canvas or CSS3. And one interesting fact was that my first candidate jQuery is not the one I should be using. It would be a good choice if I had a lot experience with it, which I do not have.
It takes a lot of time to really all this stuff. But most importantly I’m getting there. I will have to do some more testing with those Javascript APIs. Stay tuned for more.
