Can I make a menu screen that plays a "scene" ? How?

[jzcodes]

Hello! I wasn't sure what to call it but I am working on a game with my husband (terrible idea, he's a designer..) and he asked if I could create a menu screen that plays out a little scene or something. He showed me this video as an example of Mario Kart SNES (only watch the first 35 seconds of so):

https://www.youtube.com/watch?v=AlAmXXNz5ac

I am aware of how to use states and all but, I only just started using Phaser and I was trying to think out how I would create something similar to the scene played out in the example (Maybe something not so complex), also if this is possible how would I loop this scene, since a user might leave the scene playing to see the end of it? 

Thank you in advance for all of your help!!

[casey]

You could do something like with just with phaser animations and timers. They are optional to loop or not.  Each character is an animated sprite, essentially, which you can move around to set locations with timers/delays 

and then you have a scrolling background.

Example https://phaser.io/examples/v2/animation/multiple-anims

e.g. move object on a timer

function moveObject(mySprite) {
  game.time.events.add(Phaser.Timer.SECOND * .3, function() { //.3 second delay before moving
        myObject.body.moveTo(myObject.duration, myObject.distance, myObject.direction);
  }, this);
}

 

 

So you just implement a series of animations and timers over a scrolling background. 

[gauravD]

Like @casey said, animations (tweens) and timers will help you. 

An example - https://jsfiddle.net/gauravdixitv/L422hqk9/

[jzcodes]

On 1/17/2018 at 5:51 PM, casey said:

You could do something like with just with phaser animations and timers. They are optional to loop or not.  Each character is an animated sprite, essentially, which you can move around to set locations with timers/delays 

and then you have a scrolling background.

Example https://phaser.io/examples/v2/animation/multiple-anims

e.g. move object on a timer

function moveObject(mySprite) {
  game.time.events.add(Phaser.Timer.SECOND * .3, function() { //.3 second delay before moving
        myObject.body.moveTo(myObject.duration, myObject.distance, myObject.direction);
  }, this);
}

 

 

So you just implement a series of animations and timers over a scrolling background. 

Ohhh okay awesome!!! I figured I would have to use some sort of timer but I've never used them in Phaser before!! And I just so happened to watch a video on a scrolling background the other day. Thank you so much ! I can't wait to play with this!