HTML and CSS Reference
In-Depth Information
sprites but uses
-webkit-transform
instead of just setting the left and top. The fourth and fifth ways both
use Canvas, with the fifth foregoing the full-Canvas clear.
On the desktop, it doesn't matter how you render the sprites or how many you render; the frame rate hovers
around 60 frames per second. On mobile it's a different story. The frame rate drops immediately on both the
iPad2 and the iPhone4 using IMG or CSS sprites. The iPad2, with it's more powerful processor, can hang on to
its frame rate for a bit longer using Canvas sprites, but in both cases the frames-per-second decreases noticeably
when rendering 100 image-based, moving sprites.
Although 100 sprites might seem like a lot, if you consider projectiles, particle effects, background tiles, and
other animations, it's not an unreasonable number for a simple game. What these results mean is that at the
moment, decisions about your game need to be made with an understanding of the mobile platform. That's the
bad news. The good news is that performance improves all the time, and other options exist for deploying onto
mobile devices than just using Mobile Safari.
Adapting to Limited Bandwidth and
Storage
Given the predominance of Wi-Fi in the United States, designing for mobile doesn't necessarily mean your
players will be on 3G when they play your game, but it does make it a possibility that you need to take into
consideration.
If you create an RPG with hundreds of megabytes of assets, you need an incremental loading system that
doesn't try to download everything at once. Even if the user is on 4G or Wi-Fi, the mobile browser won't have
the cache space or the memory to handle all those assets efficiently.
Optimizing for Mobile
What does optimizing for mobile mean? It means packaging and delivering your game in such a way as to let the
player into the game as quickly as possible. This means limiting the libraries you use, minifying your JavaScript
and CSS assets, and using spritesheets to limit the number of separate requests the device must make to down-
load images. It also means setting up your web server to serve assets compressed to reduce the bandwidth costs.
Finally, it means configuring your server to serve the proper cache headers to ensure assets can be cached on
the device and don't need to be downloaded every time the player plays the game.
Good for Mobile Is Good for All
The good news is that optimizing your game for mobile doesn't only affect mobile devices. Making your game
load faster and play smooth can result in a better all-around experience on desktop as well as mobile.
Many times, given the speed of desktop browsers these days, it doesn't seem worth following best practices
because the benefit seems incremental. This is a stance that is actually more damaging to your game than might
first appear. Chances are, as a game and web developer, you have a relatively new machine connected to the
Internet via a fast connection. Potential players of your game around the country and around the world are un-
likely to all be that lucky.
