Fading an UI shape color

Armory Engine General
1

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?

Thanks

2

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() {
    Tween.to({
        target: this,
        props: {
            fadeOpacity: 1.0
        },
        duration: 2.0,
        delay: 1,
        done: [remove the trait or something],
        ease: Ease.QuadIn
    });

    notifyOnRender2D(update2D);
}

function update2D(g:kha.graphics2.Graphics) {
    g.begin(false);

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

    g.end();
}

Tell me if you need any clarification. :slight_smile:

1 Like
3

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.

Thanks

1 Like