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.

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

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

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.

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.

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

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

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.

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 results in a Sprite being fully opaque even if its source file has transparency. The following image shows two Sprites displaying the same image.

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. Therefore, the following three circles would behave the same despite having different colors:

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.

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.

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.

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.

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

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

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.

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.

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

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.