Fade problem (help)

Help & Support
1

Project: Flappy Bird
Hi, I need to make the ‘Screen4’ object in my project fade away, using ‘fade3.js’. Everything else works with the fades, except this.

This is what I have tried:

            var app = this.app;
            var screen4 = app.root.findByName('Screen4');
        screen4.enabled = true;
                            setTimeout(function () {
                         app.fire('gears:fade');
                            }, 1250);

This would normally work, but for some reason, after I apply this to the object (via script), it just disappears, instead of fading

I do not know how to fix this, and I have tried a number of things, but I cannot figure this out/
Any help is appreciated :slight_smile:

2

Hey, did a quick search through your codebase and I can’t find any event listener for your gears:fade event.

You need to setup an event listener that actually executes some code, otherwise it is perfectly normal and correct to not see anything. If you want to run some code in the fade3.js script, that’s where you should put your event listener.

Check this page from the Playcanvas manual to find out how to use events:

https://developer.playcanvas.com/en/user-manual/scripting/communication/

3

Thanks for the reply.

I have moved the piece of code to ‘Fade3.js’, and it is still doing the same thing. I have modified some code also, and here is what it is now:

var Fade3 = pc.createScript('fade3');

Fade3.attributes.add('event', { type:'string' });
Fade3.attributes.add('type', {
    type: 'number',
    enum: [
        { 'In': 0 },
        { 'Out': 1 },
        { 'InOut': 2 }
    ]
});
Fade3.attributes.add('duration', { type:'number', default: 0.25 });

// initialize code called once per entity
Fade3.prototype.initialize = function() {
    var app = this.app;

    this.fadeIn = 0;
    this.fadeOut = 1;
    this.fadeInOut = 2;
    
    app.on('gears:fade', function () {
        this.fadeOut = 1;
    }, this);
    
        app.on('game:start', function () {
            var screen4 = app.root.findByName('Screen4');
        screen4.enabled = true;
                            setTimeout(function () {
                         app.fire('gears:fade');
                            }, 1250);
    }, this);
    
    app.fire('game:start');

What have I done wrong?

4

Right, I see you’ve added the following code in your Fade3.js script:

    this.fadeIn = 0;
    this.fadeOut = 1;
    this.fadeInOut = 2;
    
    app.on('gears:fade', function () {
        this.fadeOut = 1;
    }, this);

So, how does it work exactly, can you elaborate? I don’t see this property, this.fadeOut being used anywhere in your code.

5

Since it says it here,

Fade3.attributes.add('event', { type:'string' });
Fade3.attributes.add('type', {
    type: 'number',
    enum: [
        { 'In': 0 },
        { 'Out': 1 },
        { 'InOut': 2 }
    ]
});

I thought that you could turn them into changeable values or something, I guess I thought wrong.

6

No, to be able to fade in/out an entity, usually you need to adjust the opacity property of a material used.

Try searching in the forum, there are plenty of topics on how to approach fading.

7

Ok, I’ll search the forum. Thanks :slight_smile:

1 Like