ImageEffects material
The ImageEffects
material performs the same basic operation as a Bitmap
material, but also supports the ability to set effects like the alpha value of the texture.
Why not just use this material all the time? Well, it is a little more expensive that a standard Bitmap
material. If you just need to show an image as-is, use a bitmap.
Example Links
In this example we set up a series of graphics with an image effects material. Each one has a different effect applied to it:
- Tint - Applies a colour tint to the texture, like looking through coloured glass.
- Alpha - Changes the transparency of the texture.
- Saturation - Changes the saturation of the texture, from full colour to greyscale.
- Overlay - Applies a colour overlay to the texture, where the texture has a solid colour applied on, affected by the overlay amount.
- Overlay (linear gradient) - As with overlay, but a linear (straight line) gradient between two colours.
- Overlay (radial gradient) - As with overlay, but a radial (circular) gradient between two colours.
val material: Material.ImageEffects =
Assets.assets.junctionboxAlbedoMaterial.toImageEffects
val graphic: Graphic[Material.ImageEffects] =
Graphic(Rectangle(0, 0, 40, 40), 1, material)
.withRef(20, 20)
val viewCenter: Point = (Point(550, 400) / 4) + Point(0, -25)
def present(context: Context[Unit], model: Unit): Outcome[SceneUpdateFragment] =
Outcome(
SceneUpdateFragment(
graphic
.moveTo(viewCenter)
.moveBy(0, -40)
.modifyMaterial(_.withTint(RGBA.Red)),
graphic
.moveTo(viewCenter)
.moveBy(-60, -40)
.modifyMaterial(_.withAlpha(0.5)),
graphic
.moveTo(viewCenter)
.moveBy(-30, -40)
.modifyMaterial(_.withSaturation(0.0)),
graphic
.moveTo(viewCenter)
.moveBy(30, -40)
.modifyMaterial(_.withOverlay(Fill.Color(RGBA.Magenta.withAmount(0.75)))),
graphic
.moveTo(viewCenter)
.moveBy(60, -40)
.modifyMaterial(
_.withOverlay(
Fill.LinearGradient(Point.zero, RGBA.Magenta, Point(40), RGBA.Cyan.withAmount(0.5))
)
),
graphic
.moveTo(viewCenter)
.moveBy(-60, 10)
.modifyMaterial(
_.withOverlay(
Fill.RadialGradient(
Point(20),
10,
RGBA.Magenta.withAmount(0.5),
RGBA.Cyan.withAmount(0.25)
)
)
)
)
)