Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Plenge

I am trying to create racing minimap using MorphSVG and animate object alongside path, but can i reverse so object stays, and path moves?

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

I am trying to create a minimap for a little game.

First i started creating a full map in SVG, and then animated the player icon alongside the path.

But is it possible to reverse the behaviour, so that the player icon stays, and the path itself, is animating, moving and rotating anchored to the player icon?

 

Just like the image below.

 

Any help is highly appreciated. :D

 

current code:
 

        motionPath = MorphSVGPlugin.pathDataToBezier('#motion-path', {align:'#player-dot'});    
        TweenLite.set('#player-dot', {xPercent:-50, yPercent:-50});
        tl.to('#player-dot', 2, {
            bezier:{values:motionPath, type:'cubic'},
            ease: Power0.easeNone
        });

 

Screen Shot 2018-01-11 at 15.30.23.png

Link to comment
Share on other sites

Hi @mikel, and thank you so much for helping out.

 

This is very close to what i am looking for, the look and feel is spot on.

But my SVG path is not a round track. It is a sprint from A to B. Like the example image below.

Screen Shot 2018-01-11 at 18.36.26.png

Link to comment
Share on other sites

^^^^^^^^

Woops, wrong user.
Sorry for the confusion :D it is still me above @mikel

Link to comment
Share on other sites

Hi Plenge / NetBooster, 

 

If you want an endless loop, the circle is a good solution. Otherwise could it be this option:

 

See the Pen 2117498985cc8c4ad1e7236803f7f3d1 by mikeK (@mikeK) on CodePen

 

... and you can wave the checkered flag.

 

Mikel

 

  • Like 3
Link to comment
Share on other sites

That looks pretty good. I will try and work with that.

Thanks @mikel!

:)

Link to comment
Share on other sites

Here's how to make a really simple camera. Just move the world in the opposite direction your target is moving. To keep the target centered in the view, the path should be at least 1/2 a screen away from the edge of the world. 

 

I didn't do that in this demo, and you'll notice when the bee gets close to the edge of world because it has to move away from the center of the screen. 

 

 

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

 

  • Like 4
Link to comment
Share on other sites

Hi @OSUblake,

 

Hmmm - I understand what you mean. As always, very stimulating ...

 

It takes a little time, but I'll try to implement an idea using the camera.

 

Best regards
Mikel

Link to comment
Share on other sites

I thought your circle based camera was pretty creative. Unfortunately, it won't for every situation.

 

Understanding how the camera I made is pretty simple. There are 3 components that you need to deal with. 

  • The viewport. The viewable area. What you can see. Basically a container, with overflow: hidden on it. 
  • The world. It should be larger than the viewport, and is the parent container for everything.
  • The target. What you want to follow. It moves around the world.

And the rest is basically just knowing how to center a rectangle inside another rectangle. For those that don't, or need a refresher...

 

// Coordinates to center the smallBox inside the bigBox
var x = bigBox.width / 2 - smallBox.width / 2;
var y = bigBox.height / 2 - smallBox.height / 2;

// Or even simpler
var x = (bigBox.width - smallBox.width) / 2;
var y = (bigBox.height - smallBox.height) / 2;

 

We want the target to remain in the center of the viewport, so every time it moves, we'll need to update the camera. So start off by figuring out the coordinates to center it, just like above.

 

The target is moving around the world, so we can't move the target to those coordinates. Rather, we need to find out how far away the target is away from those coordinates, and then move the world by that difference. That will move the target into place, and now you have a functioning camera!

 

var x = (viewport.width - target.width) / 2;
var y = (viewport.height - target.height) / 2;

var dx = x - target.x;
var dy = y - target.y;

world.x += dx;
world.y += dy;

 

 

  • Like 2
Link to comment
Share on other sites

Hi @OSUblake,

 

Based on your pen (Motion Path Callbacks) I had this idea - still in progress:

 

See the Pen 1263296d23dd5b659614996fc091d15b by mikeK (@mikeK) on CodePen

 

'On foot' - that means: classically with my knowledge - I can control the process well.

 

But your camera should be the next trigger ...

 

Thanks and kind regards

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

Hehe. Yeah, your planet is wiggling because you're animating the width. If you rework it to use scale instead, it will be smooth.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

Hi @OSUblake,

 

Great - my beer is secured.
But that bar is on Mars.

 

Kind regards

Mikel

Link to comment
Share on other sites

Hi @mikel & @OSUblake.

 

Thank you for the great examples, i made it work, and it works incredibly well.
I will make sure to post a link, gif or small video when its done ;)

 

Huge thumbs up from here! 

 

- Plenge

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

Hi @mikel & @OSUblake.

 

As promised, here is a link to a short video, showcasing the result.

 

https://streamable.com/sgntm

 

The animation we talked about was to create a minimap for the actual game, so the minimap in the bottom left corner, is using the principal of your code examples. I believe it turned out pretty well :)

Thank you again for the help, it was highly appreciated.

 

- Plenge

  • Like 3
Link to comment
Share on other sites

Hi @Plenge

 

That looks AMAZING! What was used to make the actual racing part? And is there a playable version online?

  • Like 1
Link to comment
Share on other sites

Hi @OSUblake

Thanks.
For the actual game, i used canvas and vanilla javascript, it is actually based on the code from Jakes Gordon - https://github.com/jakesgordon/javascript-racer, but heavily modified and optimized.

On top of that, TweenMax is used for animation of all UI elements, for example when you collect coins, and the minimap etc.

Right now, the game is not playable online as it was a project i created as a campaign for a customer.
But I will see if i can get the game online on another link for you guys to try out ;)

 

I will get back to you here, when i figure out how.

 

- Plenge
 

  • Like 1
Link to comment
Share on other sites

On 2/12/2018 at 3:28 AM, Plenge said:

For the actual game, i used canvas and vanilla javascript, it is actually based on the code from Jakes Gordon - https://github.com/jakesgordon/javascript-racer, but heavily modified and optimized.

 

 

Hehe. I'm quite familiar with that. I also made a racing game based on it several years ago!

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.

×