Simple tween on game.world not working

[grumpygamer]

Hello again.

 

I'm trying to tween the alpha of game.world without much success.

 

this works:

game.world.alpha = 0;

but this doesn't:

game.add.tween(game.world).to({ alpha:0 }, 1500).start();

The syntax looks correct.

Any ideas why?

[drhayes]

That syntax looks correct. I'm doing exactly that in the game I'm working on now and it's fine.

 

Do you see any errors in the JS console? Dumb question, but is your world's alpha 1 to start with? Does it tween at all, or does it just go black, or does it do nothing?

 

Can you stick a "var tweenThing = " in front of the game.add.tween code and then type "console.log(tweenThing);". Expand the object, and show us a screenshot of what it looks like?

[stupot]

If your testing your tweens out in the browser console, they don't always run because the default behaviour of Phaser is to pause when the window loses focus, where focus is lost when you type in the console.

 

If this is what you are doing then add the following to disable the pause:

 

    game.stage.disableVisibilityChange = true;

[ForgeableSum]

If you want the tween to auto-start, you should set the auto-start paramater (4th) to true instead of calling the start method at the time you define the tween. Try this:

 

game.add.tween(game.world).to({ alpha:0 }, 1500,null,true);

 

 

Also, 1500 is real fast. It's possible you are not seeing the tween because you ened to slow it down a big. 

[grumpygamer]

 

That syntax looks correct. I'm doing exactly that in the game I'm working on now and it's fine.

 

Do you see any errors in the JS console? Dumb question, but is your world's alpha 1 to start with? Does it tween at all, or does it just go black, or does it do nothing?

 

Can you stick a "var tweenThing = " in front of the game.add.tween code and then type "console.log(tweenThing);". Expand the object, and show us a screenshot of what it looks like?

 

- No errors in the JS console

- Alpha is set to 0 to start with (I'm fading the initial screen in)

- It tweens only the text layers in, whilst the background just "appears".

 

I've attached the screenshot (I actually named the variable "tweenThing" LOL).

 

Here's the create function where I set everything up:

this.create = function(game){    game.world.alpha = 0;    background = game.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, "menubg");    t_title    = game.add.bitmapText(game.world.centerX, game.world.centerY, 'snaredrum-title','Bitmap Fonts!',72).anchor.set(0.5);    audio_nav  = game.add.audio('audio_nav');    audio_nav_select  = game.add.audio('audio_nav_select');    //audio_intro = game.add.audio('audio_intro',1,true);    for (i=1; i<=this.menuitems.length; i++) {        this.menuobjects.push(game.add.bitmapText(game.world.centerX, game.world.centerY + this.menumargin*i, 'snaredrum', this.menuitems[i-1], 72));        this.menuobjects[i-1].anchor.set(0.5);    }         keyup    = game.input.keyboard.addKey(Phaser.Keyboard.UP);   keydown  = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);   keyspace = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);   keyenter = game.input.keyboard.addKey(Phaser.Keyboard.ENTER);   this.handleMenu(game);    }

As you can see I push the text layers in an array for later use in the function handleMenu.

 

Inside the function handleMenu (at the beginning) I then call:

var tweenThing = game.add.tween(game.world).to({ alpha:1 }, 1500).start();console.log (tweenThing);

[grumpygamer]

If your testing your tweens out in the browser console, they don't always run because the default behaviour of Phaser is to pause when the window loses focus, where focus is lost when you type in the console.

 

If this is what you are doing then add the following to disable the pause:

 

    game.stage.disableVisibilityChange = true;

 

This is not the case, but thanks.

 

 

 

If you want the tween to auto-start, you should set the auto-start paramater (4th) to true instead of calling the start method at the time you define the tween. Try this:

 

game.add.tween(game.world).to({ alpha:0 }, 1500,null,true);

 

 

Also, 1500 is real fast. It's possible you are not seeing the tween because you ened to slow it down a big. 

 

 

The tween starts so that is not the problem either. It just seems the tween only involves the text layers (??)

[ForgeableSum]

I might be wrong about this, but I don't think you can tween an entire group and game.world is an extension of Phaser.Group. Tweens are designed to target displayObjects, such as sprites and images, not display object containers.

 

If you want to fade out the entire game world, you're best bet is probably to fade out the entire canvas element which can be done easily with css.  Or you could loop through all visible display objects and tween their opacity at the same time. 

 

try running this:

game.world.forEach(function(displayObject) {

 

game.add.tween(displayObject).to({ alpha:0 }, 1500,null,true);

 

}); 

 

[drhayes]

No, you definitely can. I'm doing this in my game, tweening alpha from 0 to 1. It doesn't work flawlessly with my tilemap so I'll probably end up doing something else.

 

Which, actually, would be my suggestion here: come up with a very simplified case that tries to tween the game.world.alpha. The world's only child is a tiling sprite. File a bug on Phaser for Rich to look at. Then use an Image or a BitmapData the size of the game that fades in from alpha 0 to alpha 1.

 

That's what I'm going to do to get around my tile fading problems.