Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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(){
        game.time.events.add(Phaser.Timer.HALF, 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 = current_event.target; //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: https://jjppof.github.io/goldensun_html5/index

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?



Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...