Optimizing for HTML5: The Basics

June 22 2011, 9:58am

Billy Garretsen, head of GameSalad’s internal game team, has prepared a 3-part entry on “Best Practices” for designing for HTML5 and GameSalad Arcade within GameSalad Creator. This is part 1 of 3 — The Basics. OPTIMIZING YOUR GAME FOR THE BEST PERFORMANCE ON GAMESALAD ARCADE In the past, building and testing games with GameSalad for iPhone, iPad and Mac Desktop was manageable because of fewer discrepancies between devices per platform. With the coming of HTML5 publishing, any computer with a compatible browser will now be able to run your game. Because of this, it is extremely important to optimize your game to ensure smooth performance even on lower-powered devices. DROP IT LOW (RESOLUTION) The native dimensions of published HTML5 games are 480×320 which is a low resolution format. High res images (larger than 512×512) will cause your game to run slower so be sure to keep your image sizes as small as possible. If you are porting a high resolution game over to web scale your images down using Photoshop or comparable graphics program. If your images are overly long or tall, then split them into separate files. An example would be an image that is 512×1024 – it would be best to split the image into two halves that fit into the 512×512 suggested limit. TINTING – NOT A DEALBREAKER BUT BEST TO AVOID Tinting is the act of dynamically applying a coloration to your actor in the actor’s property panel. Tinting is a great way to adjust actor images and communicate with the player when they have been hit, etc. If you overly use this feature, though, such as recoloring an entire scene full of actors then the performance of your game will suffer. So, if you absolutely need to tint an actor follow these guidelines:

Only use tinting on static, non animating actors. Each frame of an animation will be rendered twice hogging up valuable texture memory. Do not use tinting on more than 10 static actors in your scene. If you find it impossible to achieve your visual goals under these constraints the safest alternative is to “pre-bake” the tint into your actor image.

With this method, you will only have one instance of your actor image in texture memory rather than two.

BLENDING MODE ALTERNATIVES Due to inconsistencies in the rendering engines for the various web browsers certain features will not be fully supported when publishing to HTML5. Graphics blending modes including Screen, Multiply and Additive are not supported across all platforms and will not function when your game is published to HTML5. Please refer to Blending Mode Documentation for more information and alternatives. PROJECT SIZE LIMITATIONS We recommend keeping your project size under 20MB in order to ensure the fastest loading of your game when being played on slower internet connection speeds. The absolute maximum size for each project is 150MB. If your project exceeds this number you will be unable to publish to HTML5. Cutting your image resolutions down, converting stereo sound to mono and lowering the quality of the audio are all ways you can shave size off of your project.