Jump to content

Spin a wheel and land on specific segment


Recommended Posts

Hi All

I'm quite new to Pixi (as in this is day #2), I have a simple circle divided into segments (Wheel of Fortune style).

What I want to do is spin it, wait for a few seconds, slow down and stop on a specific segment, with a bit of bounce-back.

By the looks of things rotation itself is fairly straightforward, but how would I go about doing this?

Many Thanks

Link to comment
Share on other sites

Hi! Do you have any experience with Flash or any engine/renderer based on it? Pixi doesnt have big tutorials except https://github.com/kittykatattack/learningPixi . 

Also pixi doesnt have any animation functions from the box, you should use something like https://greensock.com/?product-plugin=js-pixiplugin , or you can write down formulas for bounce, code some javascript and put it in animation ticker.

Your task is too vague. Try to implement it, stumble across a bug, spend several hours on it, make a fiddle and post here, then people will help you :)

Link to comment
Share on other sites

One way to go about that type of thing is to start from the goal and calculate everything back to the start then playback everything. For example, pick the segment to stop to and register the position you need to be at (for a wheel probably degrees/radians), then calculate how many rotation you will need to run (for example start to segment = - n degrees + n number of turn = n * -360) then reverse all those number to positive (depends on direction of spinning) and start your wheel, your wheel will make n number of turn + n degrees to your segment position + then apply a small ease back and you are done.

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