Jump to content
Search Community

Battle Maps Idea

nonoumasy test
Moderator Tag

Recommended Posts

Hello,

 

I've been thinking of creating an MERN app that will let users create Battle Maps that recreate historical/fictional battles.
User can add SVG elements like polygon(rectangles), text, etc  on a map, position it, and then create a keyframe for it. 

User can keep adding and once finished, the User can save and share this Battle Map.

Other Users can either hit a play button and the map will animate and they can also step thru each keyframe.

I created a rough mock to show the general idea.

My question is how would you do this with GSAP.

Desktop - 1.png

Link to comment
Share on other sites

Hey nonoumasy and welcome to the GreenSock forums. 

 

How to build this sort of thing depends on exactly what you're needing it to do. For the actual movement of the pieces, you could use GSAP's Draggable to enable users to move pieces around. You could also use GSAP's upcoming Flip plugin (for Shockingly Green or greater Club GreenSock members) to record positions when the user clicks a button to save the state. Then you could use GSAP's tweening functionality to animate between the states. 

 

Creating a UI that visualizes the generated GSAP timeline is a bit more complex, especially if you want it to be editable directly by the user. 

 

Overall what you're trying to do is definitely possible with GSAP but it will take a lot of development time to create. If you have a specific question feel free to ask. Happy tweening!

Link to comment
Share on other sites

Thanks Zach.
Your answer is very helpful. It confirmed that it's possible to do this. Also, good to know which modules to use.
I agree the UI is pretty complex. I think I won't have anything complex like an actual timeline, ala AE but keep it as simple as text.
I just wanted to know if there was a way to store a keyframe for each SVG element and save that. It seems with this Flip plugin, it's possible. That was the missing piece I think for me.

Then I would just have a play button in presentation mode(vs editor mode) to playback the battle animation.

Cheers

N

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