Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
longnt80

Detect chosen item in fortune wheel

Recommended Posts

I want to make a fortune wheeler game where user can click the button to spin the wheel then when it stops, it will show what user get.

 

I create the function to spin the wheel but not I'm sure which approach to detect which item is chosen. Can someone give me an idea how to approach this?

 

Thanks a bunch!

See the Pen rGRRMb by longnt80 (@longnt80) on CodePen

Link to post
Share on other sites

You can use modulus on current rotation by 360 and get absolute value. Based on that you can determine where arrow is pointing. You can play with snap a bit so arrow won't stay on edge.

  • Like 5
Link to post
Share on other sites

@Sahil @OSUblake 

In the example above, why the _gsTransform.rotation value has a different value than the random rotation value that I gave the wheel?

 

Because I saw in this demo from Greensock, the values passed in and the _gsTransform's values are the same: 

See the Pen ihsjA?editors=0011 by GreenSock (@GreenSock) on CodePen

.

Link to post
Share on other sites

Hi @longnt80

 

It's because you're using a relative value.

tl.to(wheel, 7, { rotation: "+=" + random })

 

Which is the same as doing this.

tl.to(wheel, 7, { rotation: wheel[0]._gsTransform.rotation + random })

 

  • Like 3
Link to post
Share on other sites

Thank you @OSUblake

 

There is still a different between those values. But I just figured out that it was because of the timeScale tween I applied on the timeline. This is interesting.

  • Like 1
Link to post
Share on other sites
1 minute ago, longnt80 said:

There is still a different between those values. But I just figured out that it was because of the timeScale tween I applied on the timeline. This is interesting.

 

Ah, yes. You're tweening the timeScale to 0, so the timeline animation will actually never reach the value you set because it's effectively paused when the timeScale is at 0.

  • Like 2
Link to post
Share on other sites

Hello gentlemen,  this question might look stupid, but what if the arrow points at the top,  instead on the right of the wheel. How can I modify the code.  Thank you for your answer.

Link to post
Share on other sites

Just rotate the wheel so your arrow points to the top. No need to modify the code.

  • Like 2
Link to post
Share on other sites
On 10/21/2017 at 5:34 AM, OSUblake said:

Expanding on what @Sahil said, something like this.

 

Hello @OSUblake,

Please, how to increase the number of laps?

On 10/21/2017 at 5:34 AM, OSUblake said:

 

 

 

Link to post
Share on other sites
1 hour ago, Wilfried NHW said:

how to increase the number of laps?

Increase the rotation.

Link to post
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.

×