Fading an UI shape color

Hi all,
I’m trying to make a fade from black to the game scene.
I used a rectangle shape of the size of the screen in black and am trying to script this fade.

I used this:

var curtain:zui.Canvas.TElement;
var curtainColor:kha.Color;
var curtainOpacity:kha.FastFloat = 1.0;

On init:

canvas = Scene.active.getTrait(CanvasScript);
curtain = canvas.getElement(“Curtain”);
curtainColor = Color.fromValue(curtain.color);

And on update:

while (curtainOpacity > 0) {
curtainOpacity -= 0.001;
curtainColor.A = curtainOpacity;
curtain.color = curtainColor;

Basicly it just passes from full black to transparent. Without fade. Anyone knows a method to do this?


Hey I just finished doing this for my own game demo. I skipped using canvas and just went straight to using the Kha api to draw a rectangle. Iron also has an iron.system.Tween class that is perfect for doing stuff like fades:

var fadeOpacity:kha.FastFloat = 1;

function init() {
        target: this,
        props: {
            fadeOpacity: 1.0
        duration: 2.0,
        delay: 1,
        done: [remove the trait or something],
        ease: Ease.QuadIn


function update2D(g:kha.graphics2.Graphics) {

    g.color = kha.Color.fromFloats(0, 0, 0, 1);
    g.fillRect(0, 0, iron.App.w(), iron.App.h());


Tell me if you need any clarification. :slight_smile:

1 Like

Works like a charm. Thank you!

The only thing is the notifyOnRender2D also affects to any UI canvas you have created, so you would have to redefine alpha for the rest of UI components.


1 Like