Sign in to follow this  

Phaser is not rendering inside time callback nested in a tween

Recommended Posts

I have a function (fire_event()) outside update(). Inside this function, I do these things:

function fire_event(){
    my_flag = false;
    game.add.tween(sprite).to( { alpha: 1.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){, function(){
            game.add.tween(sprite).to( { alpha: 0.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){
                my_flag = true;
            }, this);
        }, this);
    }, this);

function update(){
    } else {
        //do nothing

Everything that need to be rendered on function do_stuff_2(), is not rendering... only when the most inner tween finishes things got rendered. Everything go rendered, till the code reaches do_stuff_2().


Detailed info about do_stuff_2():

underlayer_group.removeAll(); //clear group
overlayer_group.removeAll(); //clear group
map_name =; //thats just a string
maps[map_name].setLayers(underlayer_group, overlayer_group); //I'll provide a more details on it, but it basically add new layers to these groups
hero.body.x = current_event.x_target * maps[map_name].sprite.tileWidth; //hero is a sprite. Changing it x position
hero.body.y = current_event.y_target * maps[map_name].sprite.tileHeight; //hero is a sprite. Changing it y position
shadow.x = hero.x;  //shadow is a sprite. Changing it x position
shadow.y = hero.y;  //shadow is a sprite. Changing it y position

//reconfig world physics
map_collider.body.loadPolygon(maps[map_name].key_name, maps[map_name].key_name);
mapCollisionGroup = game.physics.p2.createCollisionGroup();

Detailed info about setLayers():

setLayers(underlayer_group, overlayer_group){
    this.map_sprite = game.add.tilemap(this.key_name); //set map sprite
    this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); //set tilemap image

    for(var i = 0; i < layers.length; i++){
        var layer = this.map_sprite.createLayer(layers[i].name); //create a layer
        if(layers[i].properties.over != 0) //just test a property to determine which group this layer is going to make part


In short words: do_stuff_2() removes sprites from groups, then add new layers to them, and change some sprites position.
The thing is, everything inside do_stuff_2() only happens when the tween under do_stuff_2() finishes.
The inner tween makes alpha channel goes from 1 to 0 immediately.

Here is a working example:

The problem happens always in the fade out. Fade in works. To see the problem, just get inside the "inn" house. This part of the code is inside the index.js file at root folder. Line 227, inside teleport() function.


Does a time event inside a tween, like the example above, make things do not render excepting when everything is finished? Don`t things get rendered when I nest callbacks?



Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.