Jump to content
Search Community

Super Mario World like animation

caio1985 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I develop apps using Ionic (mobile apps) and I had an idea I wanted to implement and I'm here to consult with you guys to know how hard it would be to achieve something like it. I'm completely new to Greensock.JS.

 

Some of you might be familiar with the SNES game Super Mario World where you would walk in the world, unlocking new levels as you enter on each of them to unlock the next one. Here's an example:

Super_Mario_World_(SNES)_10.gif

 

I want to have a similar world (although I want it to look more modern, SVG/Isometric, etc), but the principle of walking from point A to B, B to C, respecting a predefined path would be the same. I also want the camera to follow my avatar (ie. Mario).

 

In your opinion, if I manage to get one artist to create the world in SVG for me, with the paths, etc - would it be hard to code this in Greensock? Would I need to use other libraries? Any examples, guidance would be very appreciated.

 

Thanks in advance!

Caio 

 

 

Link to comment
Share on other sites

Hi @caio1985

 

I love Super Mario World!

 

1 hour ago, caio1985 said:

In your opinion, if I manage to get one artist to create the world in SVG for me, with the paths, etc - would it be hard to code this in Greensock?

 

I don't know your skill level, but GSAP is very easy to use. Where a lot of people struggle is with simple JavaScript, like responding to user input, which has nothing to do with GSAP. 

 

Following a path is really simple using the MorphSVGPlugin and BezierPlugin.

 

See the Pen GopRwQ by GreenSock (@GreenSock) on CodePen

 

 

1 hour ago, caio1985 said:

I also want the camera to follow my avatar (ie. Mario).

 

The concept of making a camera follow an object is pretty simple. If your object moves 100 to the right, you would move the world 100 to the left.

 

See the Pen WZmWOV by osublake (@osublake) on CodePen

 

 

1 hour ago, caio1985 said:

I want it to look more modern, SVG/Isometric

 

Instead of drawing isometric objects at 30 degrees, most games do it at 26.565 degrees, making tiles a 2:1 ratio in size. If a tile is 100 wide, its height would be 50. This makes doing calculations much, Much easier, and it makes for smoother looking lines when doing pixel art.

https://greensock.com/forums/topic/19072-onstart-firing-early/?tab=comments#comment-88670

 

 

 

  • Like 3
Link to comment
Share on other sites

Hi OSUblake,

 

Thanks for the quick response :)

 

Yes, from the examples you sent it makes it looks very simple.

 

The last example in specific (diametric projection) which you linked to is exactly how I imagine it, of course, where the wireframe tiles are there would be buildings, etc and actually my avatar would be traveling / walking between from one red dot to the other.

https://greensock.com/forums/topic/19072-onstart-firing-early/?tab=comments#comment-88670

 

Follow up questions if I may:

  • On the diametric projection example, it seems MorphSVGPlugin and BezierPlugin were not used, were they? For the use case I described (ie. "super mario like experience" would you recommend using these two plugins or manually defining a route data? Ideally I wanted to ask an artist to define everything (walking paths) within the SVG Object directly so I don't need to code routes.
     
  • Based on what I've seen, one of the main points here is making sure the SVG object representing the world map should have the SVG Paths created in a way that it allows Greensock plugins / methods to properly allow the effect of walking. Any suggestion on how to structure that in the best way so I can brief the artist properly?
     
  • Any tools anyone can use to create mock SVGs files at least to put some concept in practice?

Thanks!

Caio

 

 

Link to comment
Share on other sites

13 minutes ago, caio1985 said:

On the diametric projection example, it seems MorphSVGPlugin and BezierPlugin were not used, were they? For the use case I described (ie. "super mario like experience" would you recommend using these two plugins or manually defining a route data? Ideally I wanted to ask an artist to define everything (walking paths) within the SVG Object directly so I don't need to code routes.

 

No, I didn't use those plugins. I was just demonstrating how you can use a simple calculation to figure out where something is on grid with dimetric projections. Using those plugins is definitely the easiest route.

 

16 minutes ago, caio1985 said:

Based on what I've seen, one of the main points here is making sure the SVG object representing the world map should have the SVG Paths created in a way that it allows Greensock plugins / methods to properly allow the effect of walking. Any suggestion on how to structure that in the best way so I can brief the artist properly?

 

Not really. The path just needs to follow exactly where you want your object to move along. During development, it might help if you can visibility see the path, to make sure your object is following it correctly, but after that you can hide the path. In this version, I moved the path inside the SVG's <defs></defs> tags so it doesn't render the path.

 

See the Pen 3e35d4db342b87436c59ae09fe0ae88f by osublake (@osublake) on CodePen

 

 

23 minutes ago, caio1985 said:

Any tools anyone can use to create mock SVGs files at least to put some concept in practice?

 

An easy way to start testing stuff out is on CodePen. Check out this post about how to get started with CodePen. It has some starter templates with all the plugins loaded that you can fork. 

 

 

You can just copy and paste your SVG markup inside the HTML section of a pen. If you're using Illustrator for SVG, here's a good post that shows how to get the markup.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hi OSUblake, how are you?

 

I finally managed to add the plugins to my Ionic App and get them running.

 

I'm based my initial code on this sample 

See the Pen GopRwQ by GreenSock (@GreenSock) on CodePen

 meaning:

  • I'm able to draw the SVGs
  • I'm able to animate the balloon so it follows the SVG path (motionPath)

Thinking now about my use case in specific which I want this balloon to move along a SVG path but stopping along it (remember what I told you about super mario world), I started playing with TimelineMax. The reason is that I want to draw a single path and then define stop points along that path which would represent the super mario game levels the balloon would stop.

 

This is code the I'm using:

  ngAfterViewInit(){

    this.motionPath = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#balloon"});

    this.tl = new TimelineMax({});

    this.tl.set("#balloon", {xPercent:-50, yPercent:-50})
    .to("#balloon", 2, {bezier:{values:this.motionPath, xPercent:-10, type:"cubic"}}, "1")
    .to("#balloon", 2, {bezier:{values:this.motionPath, xPercent:-20, type:"cubic"}}, "2")
    .to("#balloon", 2, {bezier:{values:this.motionPath, xPercent:-50, type:"cubic"}}, "3");

    this.tl.progress(0).pause(0); //put ball at beginning of curve
  }

 

Then when I hit the animate button, it does the following:

  animate(){
    this.tl.tweenFromTo("2", "3");
  }

The thing is: it is not working as I wanted and I don't know if this is the best way to accomplish what I described.

 

I want that each .to() calls above represent one level in the game where the balloon would stop.

 

The animate() method is not yet complete, it is just a way for me to test if it would move the balloon from -20 on xPercent to -50 but it doesn't seem to work properly after the second time I call animate():

  • Before calling animate() for the first time, the balloon is positioned outside the path, when animate() is first called, it puts the balloon on the beginning of the path, centered properly and moves (animates) from that point to almost 80% of the path length. Once the animation ends, the balloon returns to the beginning of the path.
  • When I call animate() for the second time, nothing happens.

See the Pen mddKMxL by caio1985 (@caio1985) on CodePen

Link to comment
Share on other sites

18 hours ago, ZachSaucier said:

Hey caio1985,

 

What you're trying to do will be very easy using a new plugin that's introduced in GSAP 3. We're hoping to release GSAP 3 within the next week! If I were you I might just hang on and try using that.

Can't wait for this ! 

Thank you guys

And keep us updated on your APP OP, i would love to see the result

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...