Blend

Introduction

The Blend variable controls how the selected instance combines its colors with whatever is drawn before. The final appearance depends on its Blend, Alpha, Source File, and Color values.

Blend is available on the following types:

• ColoredRectangle

• Container (if Is Render Target is set to true)

• NineSlice

• Sprite

Blend is also available on all Skia elements:

• Arc

• ColoredCircle

• LottieAnimation

• RoundedRectangle

• Svg

Most examples on this page overlay a Sprite over ColoredRectangles, but the same Blend behavior applies to all items which support the Blend variable.

Normal Blend

Normal Blend is the default value. When an instance uses Normal Blend, it interpolates its color with whatever it draws on top of using its Alpha value as a weight.

If a Normal Blend Sprite has an Alpha of 255, then the Sprite completely replaces whatever is below.

Normal Blend Sprite with an Alpha of 255

If a Sprite has an Alpha of 128 (roughly half of 255), then it averages its color with whatever is below.

Normal Blend Sprite with an Alpha of 128

A Sprite with an Alpha of 25 (roughly 10%) blends with whatever is below, but its color is given a weight of roughly 10%.

Normal Blend Sprite with an Alpha of 25

The examples above use the Alpha value to apply transparency. Note that if the source file (.png) has transparency as part of the file, the same effect applies.

Additive Blend

Additive Blend results in the color of a element being added to whatever is below. This typically results in brighter colors. Additive Blend can be used to simulate a light.

Since Additive Blend results in a modification of what is under instead of a replacement, an Additive Blend Sprite typically appear transparent even when Alpha is 255.

Additive Blend Sprite with an Alpha of 255

As Alpha is reduced, the brightening effect is reduced. A Sprite with an Alpha of 128 only applies roughly half as much of a brightening effect.

Additive Blend Sprite with an Alpha of 128

A Sprite with an Alpha of 25 applies a slight brightening effect.

Additive Blend Sprite with an Alpha of 25

Stacking multiple Sprites with Additive Blend results in the brightening effect stacking as well.

Four Additive Blend Sprites with an Alpha of 255

Replace Blend

Replace Blend results in the instance completely replacing whatever it is drawn on top of regardless of its Alpha or transparency in the source file.

A Sprite with no transparency in its source file drawn with Alpha of 255 looks the same whether it uses Replace or Normal Blend.

Replace Blend Sprite with an Alpha of 255

Changing the Alpha on a Sprite with Replace Blend does not affect how it is drawn - it is always drawn at full opacity.

Replace Blend Sprite with an Alpha of 128

Replace Blend results in a Sprite being fully opaque even if its source file has transparency. The following image shows two Sprites displaying the same image.

Normal and Replace Blend on the same source file.

Alpha-Only Blends

Gum supports Blend modes which modify the alpha (opacity) of whatever is under the instance using the alpha-only Blend . Alpha-only Blend modes ignore the color of the instance using the Blend - only the alpha matters (see note below about premultiplied alpha). Therefore, the following three circles would behave the same despite having different colors:

Color values are ignored with Alpha-only Blends

Runtimes which use premultiplied alpha (such as FlatRedBall) require using objects that are fully white when modifying alpha. Otherwise, the color of the overlaying instance will blend with the underlying object.

Since alpha-only blends operate directly on the alpha of whatever is below, they are only intended to be used on Containers with Is Render Target set to true. Usually objects with these blend modes are drawn on top of all other items in the container. For example, the following image shows a RenderTargetContainer which holds a number of items including the AlphaOnlyCircle. AlphaOnlyCircle is an instance which can be used to apply Alpha-only Blends to whatever is below.

AlphaOnlyCircle can be used to modify the alpha of what is below

Using an alpha-only Blend outside of a container with Is Render Target set to true typically results in the instance either being drawn as pure black or being invisible.

Subtract Alpha Blend

Subtract Alpha Blend subtracts, or "cuts out", the alpha of whatever is below.

Subtract Alpha removing the alpha of what is below

As Alpha is reduced, the amount of opacity removed effect is also reduced. A Sprite with an Alpha of 128 only removes roughly half as much opacity from what is below.

Reducing Alpha results in less opacity being removed

Replace Alpha Blend

Replace Alpha forcefully sets the opacity of whatever is below. Rather than subtracting alpha, replace can forcefully set the alpha.

Replace Alpha with an Alpha value of 255 results in no changes if what is under is already opaque, but it can add alpha if what is under is transparent.

Replace Alpha with Alpha of 255 results in no changes on already-opaque regions, but can add alpha

If Alpha is reduced, then the resulting pixels display the explicitly set alpha. The following shows setting alpha explicitly to 128 (about 50%).

Explicitly setting alpha to 128 with Replace Alpha

Setting Alpha to 0 forcefully sets whatever is under to fully transparent. This is similar to performing Subtract Alpha with an Alpha of 255.

Replace Alpha with Alpha of 0

Keep in mind that Replace Alpha can apply different alpha values if the instance itself has variable alpha, such as a Sprite with some parts transparent and some parts opaque.

Alpha being replaced to opaque in the center and transparent on the edges of the circle

Min Alpha

Min Alpha modifies the underlying object so that the result is the minimum alpha between the instance and what is below. This can be used to create an alpha mask.

Min alpha creates a mask

If the instance alpha is reduced, then the resulting transparency is reduced as well. The following shows setting Alpha to 128 (about 50%).

Min alpha with an alpha of 128

Keep in mind that multiple objects can be combined to create larger masks. For example, additional ColoredRectangles can be added to the circle above to create a larger mask. Each rectangle also has its Blend set to Min Alpha.

Extending masks with additional shapes