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.

 
Latest Games
Zombie Escape
Apr 19, 2016
Plays: 633

Zombie Escape ScreenshotDrive fast before the crazy mutant zombies get you!

6 Ratings/4.1 Average
Car Parking
Jan 16, 2016
Plays: 681

Car Parking ScreenshotGuide the car to its parking space in this fun Car Parking game.

1 Rating/5 Average
Trash It
Jan 11, 2016
Plays: 698

Trash It ScreenshotAim for the Trash Can and get the various items of Trash in the bin.

3 Ratings/5 Average
Sky Fly
Jan 11, 2016
Plays: 710

Sky Fly ScreenshotFly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.

1 Rating/5 Average
Professor Snappy
Jan 11, 2016
Plays: 498

Professor Snappy ScreenshotPop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!

1 Rating/5 Average
Monster Match Saga
Jan 10, 2016
Plays: 722

Monster Match Saga ScreenshotHere 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!

3 Ratings/4.6 Average
Fly Bird Fly
Jan 10, 2016
Plays: 552

Fly Bird Fly ScreenshotGuide 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.

1 Rating/5 Average
Life In One
Jan 10, 2016
Plays: 625

Life In One ScreenshotYou 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!

2 Ratings/3 Average
X Pool
Jan 02, 2016
Plays: 926

X Pool ScreenshotPlay Pool against the computer or battle against your friends in the online mode!

1 Rating/5 Average
Fruit Slicer
Jan 02, 2016
Plays: 537

Fruit Slicer ScreenshotSlice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!

1 Rating/5 Average