Optimizing for HTML5: Blending Modes

June 22 2011, 12:32pm

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 3 of 3 — Blending Modes. INTRODUCTION TO BLENDING MODES Blending modes are a great way to affect mood, lighting and depth. The most commonly used blending modes for special effects are screen, multiply and additive. These are the modes that result in bright glows, simulated shadows and transparency effects.

How does Screen blending work? When a graphic is set to Screen mode, the color information in the art becomes less visible the darker it is and is completely invisible when black. Alternately, the lighter the color information is the more visible it becomes. Color saturation will also effect the intensity of the color blending with artwork underneath the screened image.

Additive blending works very similarly to Screen but the end result is much more intense.

Multiply blending is the opposite of screen blending. The darker the color the more opaque it is, and the lighter the color the less visible. The color values of the multiplied image will blend in with artwork below, oftentimes resulting in a color tinting or staining effect. Blending modes can really spice up your graphics and enhance your production value. WHAT’S THE CATCH? Because of inconsistencies between the graphics rendering engines on the various web browsers, the only way to ensure universal compatibility is to avoid the use of these blending modes when publishing to HTML5. Blending modes should only be used when publishing to platforms that fully take advantage of them. If you plan on creating a game for iPhone, iPad or Mac Desktop you should not feel restricted by these HTML5 considerations. HOW DO I ACHIEVE THESE RESULTS WITHOUT USING BLENDING MODES? The good news is that almost every method of using these blending modes can be replicated with simple art preparation. Rather than use light or dark values in the art to determine opacity you will need to set the opacity at the source.

In the examples above you can see a simple way that art packages such as Adobe Illustrator and Photoshop allow you to set opacity on gradients. Below you can see how you can achieve the same results as a Screen or Multiply without the need of blending modes.

Here are a few more examples of simple applications of these alternatives:

These are just a few examples of these alternative techniques. With creative experimentation many more impressive effects can be achieved without the need of blending modes. By building these practices into your workflow you can ensure that your games will look great AND play smoothly across all platforms including HTML5.