mkit

Scene management and fading between scenes

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;};

Share this post


Link to post
Share on other sites

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

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.