This section will explain how to reduce overdraw using bitmap fills instead of bitmap images by themselves. Some devices overdraw can be more of a problem than triangle counts. This example will lead to a slight increase the number of triangles but reduces the amount of overdraw. However, since overdraw is much more expensive than rendering some extra triangles, this technique can lead to a significant improvement in rendering performance.

Figure 1: Inner and outer rings

Figure 2:Overdraw view in Scaleform

Here we have two bitmap images, the inner ring and outer ring, one on top of the other. However, only the rings themselves are visible, not the transparent space in the corners and in the center. However those transparent pixels are still rendered and hence add to the rendering time. When rendered out using the overdraw view option [Ctrl+E] in the Scaleform Player you can see where overdraw is taken place, the brighter the green the more layers of overdraw.

The triangle count is low but there is a lot of overdraw. To reduce the amount of overdraw we will convert the images to shapes and using the bitmap as a fill within the shape. A quick easy way of doing this in Flash is to select the bitmap on the stage and hit [Ctrl+B], converting the image to a shape with the bitmap as a fill.

Figure 3: Bitmap

Figure 4: Shape with a bitmap fill

We then need to cut out the areas within the shape we don’t intend to use, using either other shapes or lines. When cutting out the shape you increase the number of triangles, but this increase can be kept low by using a coarse shape (a shape that has a few corners) as opposed to a shape that has many corners.

In this example we will be using the PolyStar Tool because it allows us to easily cut out in a circular area with the least impact on triangle count. In the fill and stroke properties, we have the stroke set to a color and the fill set to transparent. In the tool settings options we change the number of sides to 8.

On the stage we draw out where we want to divide our shape. When finished we then delete the excess areas and the stroke leaving only the final shape.

Figure 5: Stroke is used to divide the shape.

Figure 6: Delete the excess areas and the stroke.

We then apply the same process to the other bitmap image and preview in the Scaleform player. The final result looks no different than the bitmap version until you turn on the overdraw preview mode. The shape is no longer a simple quad and therefore the triangle count is slightly higher but the overdraw area is significantly lower.

Figure 7: The final result.

Figure 8: The final result in overdraw view.

Using this technique on overlapping shapes can lead to significant rendering time improvement on older generation devices such as iPad1 where the graphics hardware handles overdraw poorly.