iPhone/iPad Development
One of the exciting possibilities of using HTML5 is that it can be viewed on portable devices such as the cool Apple iPhone and iPad. However before diving into iDevelopment here are a couple of things to bear in mind when developing for these devices, most of this has come about during the development of our HTML5/iPad compatible games.
Sprite Rendering
If you're optimizing your game for the iPhone or iPad you can get great image rendering performance by using CSS3 transforms instead of the drawImage() method found on the Canvas element.
Typically when rendering an image using the Canvas element you will use something like the following:
The alternate method is to use a CSS3 transform. To do this you create your element with its position value set to absolute. When you've done this you can move the element around in javascript by setting the webkitTransform property:
The advantage of using CSS to move your sprites is that on the iPhone/iPad this is hardware accelerated, meaning you can draw lots of items without degrading performance too much.
Here I re-work the existing Canvas animation tutorial to use the transform property instead of the Canvas:
Text Rendering
It is problematic when it comes to rendering text on the iPhone/iPad as there is a bug present that causes text to not render correctly. If you plan to render text in your Canvas element then I would recommend using bitmap text rendering. If you want true text rendering then I'd recommend StrokeText which is compatible with the iPhone and iPad. Details of the API and to download it please visit the StrokeText site.
Performance
The performance of HTML5/The Canvas element on the iPhone and iPad is considerably less than that of an average spec. PC which can have a serious effect on your games performance. Based on experience if you must use a Canvas then the key is to only redraw the parts of the scene that actually change rather then render the whole scene each frame.
Guide the car to its parking space in this fun Car Parking game.
Aim for the Trash Can and get the various items of Trash in the bin.
Fly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.
Pop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!
Here we have a bunch of monsters that need to be matched up. Look out for the bomb and spinning monsters that will cause special damage!
Guide your friendly Bird through the maze of pipes and other obstacles collecting the Stars in this cool arcade game inspired by the legendary Flappy Bird.
You are stranded on an Alien planet. Your goal is to build a space rocket and escape. Start by building units to create power and mine the metal patches. Build defenses to defend your base from the advancing Aliens and Zombies!
Play Pool against the computer or battle against your friends in the online mode!
Slice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!