Jump to content

[help] How Tweening work


Recommended Posts

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








Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...