Blending Modes

by Jon (Updated on 2015-10-14)


Contents

What are Blending Modes?

When semi-transparent images are drawn (particularly when two or more overlap), the graphics engine has to know how to draw the overlapping area. This is known as blending.

Blending Modes are the equations used to determine how to draw these semi-transparent images. There's no better way to show this than through a live demo.

Isn't that neat? You may wonder which blend modes are commonly used. In reality, the majority of games get by with "Normal" (the default), "Add" and "Multiply."

How to Set the Blending Mode

Blending Modes can be set directly on an actor or an entire layer.

Set an Actor's Blending Mode

Use the "set blend mode for Actor" block (Actor > Effects) to change the actor's blend mode.

stencyl-design-mode-set-blend-mode-block

Set a Layer's Blending Mode

  1. Click on the cog icon for a Layer.
    stencyl-blend-mode-set-for-layer

  2. Set the Blend Mode in the popup.
    stencyl-blend-mode-layers-pane

Limitations

Blending modes only fully work for Flash games due to limitations with the underlying technology (OpenFL/Lime).

Some Blending Modes work on Desktop and Mobile targets but only Add, Multiply and Screen. We hope that in the future, OpenFL will support all blending modes on these targets.

Summary