LogoLogo
  • Gum Tool
    • Introduction
    • Setup
      • Running from Source
    • Showcase
    • Tutorials and Examples
      • Intro Tutorials
        • 1 - The Basics
        • 2 - Variables Tab
        • 3 - Files
        • 4 - Components
        • 5 - Exposing Variables
        • 6 - Parent
        • 7 - States
        • 8 - State Categories
      • Animation Tutorials
        • 1 - Introduction to Animation
        • 2 - Creating an Animation
        • 3 - Playing Animations inside other Animations
        • 4 - Combining Multiple Categories
      • Examples
        • Bottom-Up Stack
        • Centering
        • Custom NineSlice
        • Health Bar
        • Padding
    • Gum Elements
      • General Properties
        • Alpha
        • Base Type (Inheritance)
        • Blend
        • Clips Children
        • Has Events
        • Height Units
        • Ignored By Parent Size
        • Locked
        • Max Height
        • Max Width
        • Min Height
        • Min Width
        • Order
        • Parent
        • Rotation
        • Visible
        • Variable References
        • Width Units
        • X
        • X Origin
        • X Units
        • Y
        • Y Origin
        • Y Units
      • Behaviors
        • Default Implementation
      • Circle
      • ColoredRectangle
      • Component
        • Default Child Container
      • Container
        • Children Layout
        • Contained Type
        • Is Render Target
        • Stack Spacing
        • Wraps Children
      • NineSlice
        • Blend
        • Custom Frame Texture Coordinate Width
        • Texture Address
        • Texture Left
        • Texture Top
      • Polygon
        • Points
      • Skia Standard Elements
        • General Properties
          • Has Dropshadow
          • Is Filled
          • Use Gradient
        • Arc
          • Start Angle
          • Sweep Angle
          • Thickness
        • Canvas
        • ColoredCircle
        • LottieAnimation
        • RoundedRectangle
          • Corner Radius
        • Svg
      • Sprite
        • Color
        • Source File
        • Texture Address
        • Wrap
      • States
        • Categories
      • Text
        • Blue
        • Color
        • Font
        • Font Scale
        • Font Size
        • Green
        • Is Bold
        • Is Italic
        • MaxLettersToShow
        • Outline Thickness
        • Red
        • Text
        • Text Overflow Horizontal Mode
        • Text Overflow Vertical Mode
        • Use Custom Font
        • Use Font Smoothing
    • Project Tab
    • Code Tab
      • Runtime Generation Details
      • Generation Scope
      • Inheritance Location
      • Is CodeGen Plugin Enabled
      • Show CodeGen Preview
    • Localization
    • Menu
      • Content
      • Project Properties
    • Plugins
      • AddAndRemoveVariablesForType
      • AddMenuItem
      • Export
      • Setting Up Post Build Events
    • Variables
      • Add Variable
    • Bitmap font generator (.fnt)
    • Upgrading
      • Migrating 2025 April 27 to Preview
      • Breaking Changes
        • Removal of Variable Spaces
  • Code
    • Gum Code Reference
      • AnimationRuntime
      • BitmapCharacterInfo
      • BitmapFont
      • Camera
      • CircleRuntime
      • ColoredRectangleRuntime
      • Component Runtimes
      • ContainerRuntime
      • Cursor
      • Gum Class Overview
      • DataUiGrid
        • Reflection
        • Categories
      • ElementSave
        • ToGraphicalUiElement
      • GraphicalUiElement
        • Absolute Values
        • AddToManagers
        • AnimateSelf
        • ApplyState
        • BlendState
        • CanvasHeight
        • CanvasWidth
        • Children
        • ContainedElements
        • Font Values
        • GetAbsoluteHeight
        • GetAbsoluteWidth
        • GetChildByNameRecursively
        • GetFrameworkElementByName
        • IsAllLayoutSuspended
        • Parent
        • RemoveFromManagers
        • UpdateLayout
      • GumProjectSave
      • IDataUi
      • InstanceMember
      • InstanceSave
      • InteractiveGue
        • CurrentInputReceiver
        • RaiseChildrenEventsOutsideOfBounds
        • RollOverBubbling
      • IPositionedSizedObject
      • Layer
      • NineSliceRuntime
      • RectangleRuntime
      • Renderer
        • SinglePixelTexture
      • SelectedState
      • SpriteRenderer
        • LastFrameDrawStates
      • SpriteRuntime
        • TextureAddress
        • TextureHeight
        • TextureLeft
        • TextureTop
        • TextureWidth
      • TextRuntime
        • Color
        • FontScale
        • FontSize
        • HorizontalAlignment
        • Text Wrapping
        • VerticalAlignment
      • VariableSave
    • FNA
    • Kni
    • Meadow
    • MonoGame
      • Setup
        • Linking Game Project to Source (Optional)
      • Tutorials
        • Gum Project Forms Tutorial
          • Setup
          • Gum Screens
          • Common Component Types
          • Styling
          • Multiple Screens
        • Code-Only Gum Forms Tutorial
          • Setup
          • Forms Controls
          • ListBox Items
          • Input in Forms
        • [Deprecated] Gum Project (.gumx) Tutorial
          • Setup
          • Gum Screens
          • Gum Forms
          • Customizing Forms
          • Strongly Typed Components Using Code Generation
          • Multiple Screens
      • Setup for GumBatch (Optional)
      • Loading a Gum Project (Optional)
      • async Programming
      • Custom Runtimes
      • GumBatch
      • Gum Forms
        • Binding (ViewModels)
        • Controls
          • Button
          • CheckBox
          • FrameworkElement
            • BindingContext
            • IsEnabled
            • IsFocused
            • ModalRoot and PopupRoot
            • SetBinding
          • ListBox
          • ListBoxItem
          • MenuItem
          • PasswordBox
          • RadioButton
          • ScrollViewer
            • VerticalScrollBarValue
          • StackPanel
          • Slider
          • TextBox
        • Control Customization In Code
          • MenuItem
        • Control Customization in Gum Tool
        • Gamepad Support
        • Keyboard Support
        • Troubleshooting
      • File Loading
      • Resizing the Game Window
      • Known Issues
      • Samples
        • MonoGameGumFormsSample
    • Nez
    • Silk.NET
    • SkiaGum
      • Setup
        • WPF
    • .NET MAUI
      • Setup
Powered by GitBook
On this page
  • Introduction
  • Normal Blend
  • Additive Blend
  • Replace Blend
  • Alpha-Only Blends
  • Subtract Alpha Blend
  • Replace Alpha Blend
  • Min Alpha

Was this helpful?

Edit on GitHub
Export as PDF
  1. Gum Tool
  2. Gum Elements
  3. General Properties

Blend

PreviousBase Type (Inheritance)NextClips Children

Last updated 3 months ago

Was this helpful?

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:

  • (if is set to true)

Blend is also available on all Skia elements:

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%.

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.

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.

ColoredRectangle
Container
Is Render Target
NineSlice
Sprite
Arc
ColoredCircle
LottieAnimation
RoundedRectangle
Svg
Normal Blend Sprite with an Alpha of 255
Normal Blend Sprite with an Alpha of 128
Normal Blend Sprite with an Alpha of 25
Additive Blend Sprite with an Alpha of 255
Additive Blend Sprite with an Alpha of 128
Additive Blend Sprite with an Alpha of 25
Four Additive Blend Sprites with an Alpha of 255
Replace Blend Sprite with an Alpha of 255
Replace Blend Sprite with an Alpha of 128
Normal and Replace Blend on the same source file.
Color values are ignored with Alpha-only Blends
AlphaOnlyCircle can be used to modify the alpha of what is below
Subtract Alpha removing the alpha of what is below
Reducing Alpha results in less opacity being removed
Replace Alpha with Alpha of 255 results in no changes on already-opaque regions, but can add alpha
Explicitly setting alpha to 128 with Replace Alpha
Replace Alpha with Alpha of 0
Alpha being replaced to opaque in the center and transparent on the edges of the circle
Min alpha creates a mask
Min alpha with an alpha of 128
Extending masks with additional shapes