[help] How Tweening work

[palanolho]

Hi everyone.

I'm currently trying to learn more about PixiJS ao I'm building a 5 reels x 4 rows slot machine.

At the moment I'm working on making the reels spin and stop on a predefined index.

 

As an overview, I have an array for each reel and when rendering the reels I always have 4 symbols visible from each reel and an additional one outside the clipping area. (so that the symbols spin only in a specific area and not the full canvas).

They I move each symbol down "X" pixels and once the lowest symbol is out of the clipping area, I add the next symbol to the top of the reel. and this will give the effect of an ever spinning reel.

Now I want to handle the "stopping" but some people around the form mentioned that I should be using tweening in order to move the symbols instead of moving them a fixed amount of px.

Since I don't understand (yet) the concept of the tweening and how it could be used in my case, I was wondering if anyone would be able to explain how tweening works and how do you think I could use it in my case (I'm thinking in using this library https://www.createjs.com/tweenjs that seems good and "simple, but if you think there are better ones, please let me know).

 

Basically, the animation of the reels that I want to try to implement is the following:

1. Start spinning all reels at the same time
2. each reel should make a full pass through all symbols of the reel
3. after a full pass, the reel should stop on a given index (calculated when the reels started spinning)
4. the "stopping symbol" should stop on the first visible position of the reel (in this case will correspond to position 0,0 of the contains that contains the reel symbols)

Is anyone able to give me some insight how tween and how to use it in my case?

 

Many thanks in advance for any help you can provide,

- Miguel

 

 

 

 

 

 

 

[jonforum]

good stuff here for study slot machine and also the easing libs from  GSAP
https://codepen.io/rhernando/pen/5366f11be0238e46a98cdaf74ae6d882?editors=001

https://codepen.io/GreenSock/pen/QEdpLe

https://codepen.io/dax006/pen/LGoNrE

you have a lot of concept here.

[botmaster]

Tweening takes: 1. a measure of time, 2. an object. 3. one (or more) property (usually numeric) of that object, 4. an end value for that property.

The tween then starts and run for the amount of time defined and apply a math formula each time it is called that includes: the actual time T, the start value of the property, the end value of the property and calculate the intermediate value that needs to be applied to the object. Most tween engine are time based but not all.

Tweening is usually best used for defined animation where the end value doesn't change although most engine allow you to change on the fly the end values and tween properties to make them dynamic.

Is it suitable for slow machine animation? yes it is > define the number of time and end angle the slot must spin > calculate the amount of time this requires > now you have all the values needed for a tween. The difference here is you must calculate everything before using a tween to animate a slot.

What tweens are not suitable for usually: tweening an object that interacts (eg. bounce, hit other objects, ect) with other objects

What tweens are good for: tweening an object to defined end values (that will not change or change very little), eg. train going from point A to point B. alpha going from 0 to 1, ect ...