Scene management and fading between scenes

[mkit]

I am completely new to HTML game development but have a good few years Flash game development.

 

I am developing my first game for a client and learning on the job and I am using Pixi. The client has supplied all the assets as sprite sheets and Spine data for the animations. I was originally going to use Phaser but it appears it doesn't yet support Spine data.

 

Anyway my game is fortunately quite a simple click to find a hidden object game that has 4 scenes, each a different room in the house.

 

There is also a splash screen and an instructions screen, the 4 game screens and a game over screen.

 

The client has requested the game fades each screen out to white. then fade into the new scene.

 

I can see that I can use Greensock Tweenlite to tween the alpha of a sprite so my question is do I need to create a full screen (1024 x 768) white image and load this in from an external image or is there a better solution?

 

Any advice on how best to deal with scene management much appreciated. I have a very tight deadline for this game - very tight indeed!!

 

Thanks in advance

 

[xerver]

> do I need to create a full screen (1024 x 768) white image and load this in from an external image or is there a better solution?

 

A small white square drawn with canvas api then used as a texture in a TilingSprite would work fine.

 

Most scenes are managed as just special DisplayObjectContainers that you either add/remove from the stage or show/hide with visible properties.

[mkit]

Thanks for the swift reply.

 

Would the following code be very inefficient?

 

var screenFadeContainer = new PIXI.DisplayObjectContainer();screenFadeContainer.scale.x = screenFadeContainer.scale.y = 1;stage.addChild(screenFadeContainer);var fullSceenCover = rectangle(0, 0, numGameWidth, numGameHeight, 0xFFFFFF, 0xFFFFFF, 0 );screenFadeContainer.addChild(fullSceenCover); function rectangle( x, y, width, height, backgroundColor, borderColor, borderWidth ) { var box = new PIXI.Graphics();box.beginFill(backgroundColor);box.lineStyle(borderWidth , borderColor);box.drawRect(0, 0, width - borderWidth, height - borderWidth);box.endFill();box.position.x = x + borderWidth/2;box.position.y = y + borderWidth/2;return box;};

[xerver]

Nope that would be fine as well.

[mkit]

Great thanks xerver for the clarification.

 

[d13]

 

I can see that I can use Greensock Tweenlite to tween the alpha of a sprite 

You may also want to consider Tween.js:

 

https://github.com/sole/tween.js/

[mkit]

You may also want to consider Tween.js:

 

https://github.com/sole/tween.js/

 

Thanks d13 - is Tween.js better or have a smaller footprint? I chose the Greensock one as I was familiar with it from Flash.

[mkit]

I could do with more info on the scene management.

 

I have made a separate javascript file for each scene. 

 

My main question is do I load all the graphics for all scenes at the same time and just hide the ones I do not need yet.

 

So if I have the following scenes

 

Splash Screen

Instructions Screen

Room1 Screen

Room2 Screen

Room3 Screen

Game Over Screen

 

Do I do something like

 

var splashContainer = new PIXI.DisplayObjectContainer();var instructionsContainer = new PIXI.DisplayObjectContainer();var room1Container = new PIXI.DisplayObjectContainer();var room2Container = new PIXI.DisplayObjectContainer();var room3Container = new PIXI.DisplayObjectContainer();var gameOverContainer = new PIXI.DisplayObjectContainer();stage.addChild(splashContainer);stage.addChild(instructionsContainer);stage.addChild(room1Container );stage.addChild(room2Container);stage.addChild(room3Container);stage.addChild(gameOverContainer);instructionsContainer.visible = false;room1Container.visible = false;room2Container.visible = false;room3Container.visible = false;gameOverContainer.visible = false;

And then load all the graphics for all screens at once?

 

If this is not the best way to do this then please advise me of alternative solutions.

 

Many thanks

[d13]

..is Tween.js better or have a smaller footprint? 

No, it's just another alternative

[mkit]

Ah OK thanks d13 for the clarification