Jump to content
Search Community

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

Plenge 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

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

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

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

  • 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 @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

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