Jump to content

Anyone know how to make a rotatable knob?


Recommended Posts

I want to make a rotatable knob. I want the player to be able to click the knob or just outside the knob and then for the knob image's angle to change. But I don't know how to work out what angle it would be. I know it's the angle between the mouse pointer, then center of the knob and then top of the knob that I want. This won't even make a triangle if the angle is large enough so looking at trig tutorials I can't even find anything appropriate.

 

Once again my lack of maths knowledge has failed me. But just so you know it's not for lack of trying. Whenever I try and learn trig, there is something from algebra I don't understand, so I get an algebra book which contains an example using fractions, so I brush up on fractions but it contains some large multiplication problems, so I have to practice that then before you know it i'm back to practicing my times tables and have learned nothing to help with programming.  Although I totally know what 7 * 8 is without using google. :)

 

If anyone can explain, please use as little math jargon as possible and imagine your are explaining to a 10 year old with learning difficulties, or you'll probably just lose me.  If anyone can just supply code that I can pretty much copy and paste and get working can have a permanent advertisement in the game for their website or game of choice.

 

 

 

Link to comment
Share on other sites

Ok I've worked it out. Well after hours of searching I finally found something I could copy and paste. I basically found the answer on stack overflow, although I had to alter it by adding 90 degrees on the end as it was always 90 out.  So Andrew on stackoverflow, you'll never know cause I don't have enough reputation to comment there but thanks!

var adj = this.input.mousePointer.position.x - this.knob.x;var opp = this.input.mousePointer.position.y - this.knob.y;var angle = Math.atan2(opp, adj);angle = angle / (Math.PI / 180);this.knob.angle = angle + 90;
Link to comment
Share on other sites

  • 2 weeks later...

Hey, I see that you found a solution, but there might be an issue. I was having a similar situation and there is a point where you move your mouse where it won't animate the shortest distance to the angle, it takes the long way around. You can see this problem illustrated in my StackOverflow question here: http://gamedev.stackexchange.com/questions/72348/how-do-i-lerp-between-values-that-loop-such-as-hue-or-rotation

 

The solution is the accepted answer, and you can see a demo of it here where the problem is fixed: http://codepen.io/jackrugile/pen/45c356f06f08ebea0e58daa4d06d204f

 

Your implementation might not be having this issue, or it could be your intended way of it working, just wanted to give you a heads up though. Hope this helps!

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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