Friday, November 28, 2014

HTML5 Canvas Game

Recently I've been working on a simple HTML5 canvas game. I came up with the idea after browsing through some arcade games that I used to play. One of them was Tyrian2000, its a classic space game where you have to destroy as many enemies as possible. After playing it for a while I thought it might be cool to create a game like that with a Star Trek theme. I recently watched Star Trek Enterpise(new series) so that subject was still fresh in my memory.

I created a simple TypeScript project and played with the canvas element a little bit. Everything worked out pretty well and after a short amount of time I created a space ship which could fly in a rolling space background. I tested everything on Internet Explorer and Chrome and had no problems at all, so I went on. After that I tried to run it inside a Cordova App and came to a shocking conclusion. The canvas performance is absolutely horrible in Android. I have a Nexus 10 tablet which runs on Android 5.0 and the canvas fps was super slow.

As I was determined to continue I started to research the problem on the Internet. Unfortunately it didn't get better. I found some solutions and performance tip and tricks but they didn't seem to workout miracles. The conclusion: use C++ for Mobile Game development. The hardware acceleration on the canvas element is very bad on mobile devices and your game will probably don't perform well on it. So sadly I had to quit my quest for a Mobile game on HTML5 canvas, but I'm determined to continue. I'm currently researching some C++ game environments/libraries. I'm currently looking into: Cocos 2D and Marmalade