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 game Fruit5 and also our Tower Defense and Newspaper Skateboarding game for iPhone.
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:
context.drawImage(myImage, x, y);
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:
element.style.webkitTransform = "translate3d(20px,20px,0)";
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Moving an image using CSS3</title>
<script type="text/javascript">
var x = 50;
var y = 0;
var dirX = 1;
var dirY = 1;
function init() {
// Create our game loop
setInterval(loop, 25);
}
function loop() {
x += dirX;
y += dirY;
if (x <= 0 || x > 256 - 23) {
dirX = -dirX;
}
if (y <= 0 || y > 256 - 23) {
dirY = -dirY;
}
// Each loop we move the image by altering its x/y position
var sprite = document.getElementById("sprite");
// Set the x/y position
sprite.style.webkitTransform = "translate3d(" + x + "px," + y + "px,0)";
}
</script>
</head>
<body onload="init();">
<div>
<div id="drawingSurface" style="width:256px; height:256px;">
<div id="sprite" style="position:absolute; width:23px; height:23px; background:url(images/happy.png);"></div>
</div>
</div>
</body>
</html>
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.
Rate this:
1 Star
2 Star
3 Star
4 Star
5 Star
3 Ratings / 3.7 Average