Timing movement of multiple elements / timelines based on calculated values (match3 tiles)

[AllBitsEqual]

Hi everyone

 

I'm currently looking at GSAP as a potential tool for animating moving tiles on a grid after solving this in basic javascript a while back.  I've made a few animated banners and simple things using GSAP and I'm pretty happy with the results but right now, I'm not sure if GSAP timelines might be able to help me solve something a bit more complex.

 

I've built a simple match3 game in javascript and it was working all pretty ok but I was never able to achieve smooth animations and propper easing. With my newfound experience with GSAP, I'm currently thinking about taking up an old pet project of mine again and trying to redo the whole animations of the game board with GSAP.

The issue I'm currently facing is that in match3 games (Candy Crush and the like) you have a lot of tiles in a grid moving at the same time, starting and stopping their movements to then move again when an opening was created. I've done the whole calculation of where which tile will be at which time and I can use those results to derive paths (3 down, 1 down left diagonally and then 2 more down and so on) and I know how to write the tl.to() code to move a singular tile. Right now I'm looking at the best way to write multiple of these timelines and run them in parallel.

My regular JS code will take care of player interactions, turns, effects (falling tiles creating a new match, removing matched tiles and all that. What I really would love to know is either if someone has a link to a useful tutorial or can give me a few key words that might help me do my own research to see how I best solve this challenge.

 

[Rodrigo]

Hi @AllBitsEqual and welcome to the GreenSock forums!

 

That's a tall but fun task I must say. If you are using regular DOM nodes Flip Plugin should be the first thing I'd look into:

https://greensock.com/docs/v3/Plugins/Flip

 

Now if you're using canvas for this, the plot thickens. I've never been involved in anything like this but I know that @OSUblake has created hundreds of amazing things and I wouldn't be surprised that he crafted something like this, although I couldn't tell you so you'll have to find out:

https://codepen.io/osublake

 

Also I would look into google and check some of these results (there are videos of 2 years or even more recent that could provide a good starting point).

 

Hopefully this helps,

Happy Tweening!

[AllBitsEqual]

First of all, thanks for the response. I had a quick look at flip and while it looks like a cool and useful plugin, I think it only has a small overlap with the stuff I'm planning to do. I also had a look at the linked pens by OSUblake and there are quite a few nice things in there too.

Again, thank you for the search results but from what I could see by skipping through those videos, they mostly did not do complex stuff for the animations and are basically where I already am. I've got a working game with most of the basic stuff a player can do, win/lose handling, spawning and moving of new tiles/gems and all that, even chain reactions and combos for special effects. What I currently do is "staggering" animations by "knowing" the duration of previous animations and adding a computed delay to later animations in the timeline.

Right now I want to introduce prettier eased animations and other effects in a timely manner and clean way that keeps the project manageable and scalable. 

[mvaneijgen]

20 hours ago, AllBitsEqual said:

a link to a useful tutorial or can give me a few key words that might help me do my own research to see how I best solve this challenge

I think you're not going to find that. The beautiful thing about GSAP is that you can build everything your heart desires with it, but it's your creativity that needs to connect the puzzle pieces.

 

Flip seems like the perfect fit for it, but how that would work for your setup is where you come in as the developer. All I can recommend of is our own @Carl's YouTube channel https://www.youtube.com/user/snorklTV/videos I've personally watch those videos (and did his GSAP courses) multiple times and every time I gleam something new from it. It will not teach you "how do I fix my specific problem", but there is a lot of general knowledge to gain from it that you could adapt to your project. I keep coming back to this tutorial, but it is just so elegant and I've never build something exactly like it, but just the general approach I've used in several projects. 

 

What I would do is create a simple version of your project in Codepen and just try a view solutions (eg Flip) and just keep iterating, that is how I like to work and usually at version 20 I've something I could maybe use in my project. And if you're stuck you can ask for help over here with a minimal demo. Hope it helps and happy tweening! 

[AllBitsEqual]

A simple version could be a pre-populated grid with empty tiles, pre-calculated paths and a play button... I think I can do that in the future and both use as an example and for trying out different approaches.

Maybe I did not understand the purpose and capabilities of flip and I'll give it another go and get more familiar with the concept and examples.

Also thanks for the link to carl's content. Guess I'll add it to my watch list for the weekend.

[AllBitsEqual]

Ok, I made a really basic (and ugly) pen to demonstrate one of the things I need to solve.

See the Pen jOvpwEa?editors=0011 by AllBitsEqual (@AllBitsEqual) on CodePen

I've added one group for the simple movements and another for the complex ones. In the real app, those would all be part of the same set of movement results. I've kept them apart here to keep it a bit more readable. I've also NOT implemented spawning new tiles so the current mock isn't realistic as the empty areas would fill up from the top in the real game.

Also right now in the mock, the IDs are something along the lines of t-x-y such as t-0-4 and so on... in the real app, each tile has a generated uid and more data. I've tried to keep things simple.

The basics are in the codePen. I need to write some code to properly calculate the timings and delays and relative x/y values for each step (right now I did it by hand / in my head and hardcoded it) and both the durations, ease options and a lot of other things need a ton of fine-tuning but basically, it works... it's just not really pretty.

I'll now take another look at the flip plugin. Just wanted to quickly drop the codePen demo here before doing more research.