Jump to content
Search Community

Slot machine, 5 columns with different distances

zerocool35 test
Moderator Tag

Recommended Posts

First of all let me say it's a pleasure finding out about GreenSock and I am looking forward integrating your products (Blitmask and TweenMax) to my projects.

 

THE SITUATION IS AS FOLLOWS:

I am making a video slot machine games. 4 rows x 5 columns. Each column represents a Blipmask object. I have 5 BIG elements strips (about 42 elements on the strip) and I use Blitmask(blitmask has dimensions width of element x (4 x height of element) and TweenMax to scroll them. 1st column stops after it traveled the distance of 12 elements, 2nd column stops after it traveled the distance of 17 elements and each column after that, 5 elements added. The last column stop after it travelled 32 elements ;)

 

MY PROBLEM:

1) I want as soon as SPIN button is pressed, the 5 blitmasks to start spinning at the same speed

2) At the end of each tween I want a bouce effect that uses only a few frames for it (regardless of the duration of the tween). I am using frames in my tween as duration parameter. So for example the 1st column runs for 100 frames, I want the bounce effect to be the last 10 frames. For the last column that runs let's say X frames I still want the bounce effect to be 10 frames. So easing out to be irrelevant of duration.

3) I want the bouncing/easeOut to be sudden and not smooth. I prefer minimal deacelleration in the end (Imagine a real world slot machine - it stops very sudden)

4) Finally, I want the sliding speed to be the same for all columns. I adjust the duration accordingly to make sure that the stopping of columns will happen at regular intervals.

 

I tried many easing out techniques but nothing seems to work and satisfy ALL the above requirements. If anyone has some suggestions please feel free to help.

 

Thank you for reading this and trying to help :)

 

Link to comment
Share on other sites

I think you should try creating one tween with a Linear ease that will tween fully to the destination value (and determine the duration appropriately) and then right before it ends interupt it with a new tween that tweens from the current position to the destination value with a Bounce.easeOut ease. You can use a timeline kind of like

 

//generate a random offset value divisible by 100
var newNumber:Number = (randomNumber(0, 9) * 100) + 1800;


var tl = new TimelineLite();
tl.to(strip1, 2, {y:newNumber, ease:Linear.easeNone})
 .to(strip1, 0.5, {y:newNumber, ease:Bounce.easeOut}, "-=0.3") //this tween starts before the previous one ends (overwriting it)
 .call(reset, [], "+=2")

 

http://greensock.com/forums-support-files/blitmask-spin/

 

Ideally you would make the duration of both tweens based on the amount of distance needed to travel. Just don't have a lot of time to make it perfect it right now, but hopefully this helps.

  • Like 1
Link to comment
Share on other sites

Thank you Carl for the reply. I tried running your code and keep getting an error.. So I made it simpler and I still get an error.. 

I have this in AS3:

import com.greensock.*;
import com.greensock.easing.*;
var timeline:TimelineMax = new TimelineMax();
timeline.to(C19, DurationInFrames, {useFrames:true,y:C19.y + newNumber,ease:Linear.easeNone});
 
The above looks pretty simple and should work. But I get this error in the compiler:
Scene 1, Layer 'Actions', Frame 1, Line 100 1061: Call to a possibly undefined method to through a reference with static type com.greensock:TimelineMax.
 
Which is pretty strange since "to" is a method of TimelineMax (same error for TimelineLite) :(
 
Not sure why it's not working. COM folder exists with all the AS3 files etc.
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...