jzcodes

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

Recommended Posts

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!!

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites
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!

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.