Revisions to How to implement a dial control that snaps to increments?

Rollback to Revision 4

edited Jun 21, 2022 at 9:15

140.8k
23
257
401

HereThis is the updatedmy code , im using a raycast to detect if the dial is clicked/dragged.

public static float DegreesCCWFromRight(Vector2 center, Vector2 pointer) { var direction = pointer - center; return Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg; }

private void RotateObject() { Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition);   RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward);   if (Input.GetMouseButtonDown(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>()) {  {   deltaRotation = 0f;  previousRotation = DegreesCCWFromRightangleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition));   }     }   else if (Input.GetMouseButton(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>())   {   currentRotation = DegreesCCWFromRightangleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition));   deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation = currentRotation;); if (Mathf.Abs(deltaRotation) > deltaLimit)  Vector2 mouseWorld = Camera.main.ScreenToWorldPoint(Input.mousePosition);  {  float angle  deltaRotation = DegreesCCWFromRight(transform.position,deltaLimit mouseWorld* Mathf.Sign(deltaRotation);   }  const float incrementCount = 8;  previousRotation = currentRotation;  angle = Mathfhit.Roundcollider.gameObject.transform.Rotate(currentRotationVector3.back * incrementCount /Time.deltaTime, 360deltaRotation);  }  }

I forgot to add, here is my angle between points method.

 float angleBetweenPoints(Vector2 position1, Vector2 position2) {  Vector2 fromLine = position2 - position1;  *Vector2 360toLine /= incrementCount;new Vector2(1, 0);   float angle = Vector2.Angle(fromLine, toLine);  Vector3 cross = hit.collider.gameObject.transformVector3.localEulerAnglesCross(fromLine, =toLine);  new Vector3 // did we wrap around? if (0,cross.z 0,> angle0); {  }angle = 360f - angle; }  return angle; }

Edit: updated the code. Added actual dial image.

Here is the updated code

public static float DegreesCCWFromRight(Vector2 center, Vector2 pointer) { var direction = pointer - center; return Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg; }

private void RotateObject() { Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition);   RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward);   if (Input.GetMouseButtonDown(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>()) {  previousRotation = DegreesCCWFromRight(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition));   }  }   else if (Input.GetMouseButton(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>())   {   currentRotation = DegreesCCWFromRight(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition));   previousRotation = currentRotation; Vector2 mouseWorld = Camera.main.ScreenToWorldPoint(Input.mousePosition);  float angle = DegreesCCWFromRight(transform.position, mouseWorld);   const float incrementCount = 8;  angle = Mathf.Round(currentRotation * incrementCount / 360) * 360 / incrementCount;   hit.collider.gameObject.transform.localEulerAngles = new Vector3(0, 0, angle); } }

Edit: updated the code. Added actual dial image.

This is the my code , im using a raycast to detect if the dial is clicked/dragged.

Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition); RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward); if (Input.GetMouseButtonDown(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) {    deltaRotation = 0f;  previousRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); }    } else if (Input.GetMouseButton(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { currentRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation); if (Mathf.Abs(deltaRotation) > deltaLimit)  {    deltaRotation = deltaLimit * Mathf.Sign(deltaRotation); }  previousRotation = currentRotation;  hit.collider.gameObject.transform.Rotate(Vector3.back * Time.deltaTime, deltaRotation);  }  }

I forgot to add, here is my angle between points method.

 float angleBetweenPoints(Vector2 position1, Vector2 position2) {  Vector2 fromLine = position2 - position1;  Vector2 toLine = new Vector2(1, 0); float angle = Vector2.Angle(fromLine, toLine);  Vector3 cross = Vector3.Cross(fromLine, toLine);   // did we wrap around? if (cross.z > 0) {  angle = 360f - angle; }  return angle; }

deleted 159 characters in body

Source Link

edited Jun 20, 2022 at 18:05

PeytonFarquhar

49
7

ThisHere is the myupdated code , im using a raycast to detect if the dial is clicked/dragged.

public static float DegreesCCWFromRight(Vector2 center, Vector2 pointer) { var direction = pointer - center; return Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg; }

private void RotateObject() { Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition);   RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward);   if (Input.GetMouseButtonDown(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>())   {  {  deltaRotation = 0f;  previousRotation = angleBetweenPointsDegreesCCWFromRight(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); }  }   }   else if (Input.GetMouseButton(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>())   {   currentRotation = angleBetweenPointsDegreesCCWFromRight(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation);  previousRotation = currentRotation;  if (Mathf.Abs(deltaRotation) > deltaLimit)  Vector2 mouseWorld = {Camera.main.ScreenToWorldPoint(Input.mousePosition);   deltaRotation =float deltaLimitangle *= Mathf.SignDegreesCCWFromRight(deltaRotationtransform.position, mouseWorld);   }  const float incrementCount = 8;  previousRotation = currentRotation;  angle = hit.collider.gameObject.transformMathf.RotateRound(Vector3.backcurrentRotation * Time.deltaTime, deltaRotation); incrementCount / }360) }

I forgot to add, here is my angle between points method.

  float angleBetweenPoints(Vector2 position1, Vector2 position2) {  Vector2 fromLine = position2 - position1;  Vector2 toLine = new Vector2(1, 0);  float angle* =360 Vector2.Angle(fromLine,/ toLine);incrementCount;   Vector3 cross = Vector3.Cross(fromLine, toLine);  // did we wrap around?  hit.collider.gameObject.transform.localEulerAngles = ifnew Vector3(cross.z > 0) , 0, {angle); angle = 360f - angle;} }  return angle; }

Edit: updated the code. Added actual dial image.

This is the my code , im using a raycast to detect if the dial is clicked/dragged.

Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition); RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward); if (Input.GetMouseButtonDown(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>())   {  deltaRotation = 0f;  previousRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); } } else if (Input.GetMouseButton(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { currentRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation);  if (Mathf.Abs(deltaRotation) > deltaLimit)  {   deltaRotation = deltaLimit * Mathf.Sign(deltaRotation); }  previousRotation = currentRotation;  hit.collider.gameObject.transform.Rotate(Vector3.back * Time.deltaTime, deltaRotation);  } }

I forgot to add, here is my angle between points method.

  float angleBetweenPoints(Vector2 position1, Vector2 position2) {  Vector2 fromLine = position2 - position1;  Vector2 toLine = new Vector2(1, 0);  float angle = Vector2.Angle(fromLine, toLine);   Vector3 cross = Vector3.Cross(fromLine, toLine);  // did we wrap around?  if (cross.z > 0)  { angle = 360f - angle; }  return angle; }

Here is the updated code

public static float DegreesCCWFromRight(Vector2 center, Vector2 pointer) { var direction = pointer - center; return Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg; }

private void RotateObject() { Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition);   RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward);   if (Input.GetMouseButtonDown(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>()) {  previousRotation = DegreesCCWFromRight(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition));   }   }   else if (Input.GetMouseButton(0))   {   if (hit.collider && hit.collider.GetComponent<Rotate2d>())   {   currentRotation = DegreesCCWFromRight(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); previousRotation = currentRotation;  Vector2 mouseWorld = Camera.main.ScreenToWorldPoint(Input.mousePosition); float angle = DegreesCCWFromRight(transform.position, mouseWorld);   const float incrementCount = 8;  angle = Mathf.Round(currentRotation * incrementCount / 360) * 360 / incrementCount; hit.collider.gameObject.transform.localEulerAngles = new Vector3(0, 0, angle); } }

Edit: updated the code. Added actual dial image.

added anglebetweenpoints method

Source Link

edited Jun 20, 2022 at 12:04

PeytonFarquhar

49
7

How can I implement snapping via code? I have this 2d circle that the players rotate via drag and it works like a rotating dial. The best way to describe what I wanted to achieve is similar to a clock hand snapping to the hour numbers. I'm a total beginner and haven't actually learned anything about quaternions.

This is the my code , im using a raycast to detect if the dial is clicked/dragged.

Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition); RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward); if (Input.GetMouseButtonDown(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { deltaRotation = 0f; previousRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); } } else if (Input.GetMouseButton(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { currentRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation); if (Mathf.Abs(deltaRotation) > deltaLimit) { deltaRotation = deltaLimit * Mathf.Sign(deltaRotation); } previousRotation = currentRotation; hit.collider.gameObject.transform.Rotate(Vector3.back * Time.deltaTime, deltaRotation); } }

I forgot to add, here is my angle between points method.

 float angleBetweenPoints(Vector2 position1, Vector2 position2) { Vector2 fromLine = position2 - position1; Vector2 toLine = new Vector2(1, 0); float angle = Vector2.Angle(fromLine, toLine); Vector3 cross = Vector3.Cross(fromLine, toLine); // did we wrap around? if (cross.z > 0) { angle = 360f - angle; } return angle; }

How can I implement snapping via code? I have this 2d circle that the players rotate via drag and it works like a rotating dial. The best way to describe what I wanted to achieve is similar to a clock hand snapping to the hour numbers. I'm a total beginner and haven't actually learned anything about quaternions.

This is the my code , im using a raycast to detect if the dial is clicked/dragged.

Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition); RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward); if (Input.GetMouseButtonDown(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { deltaRotation = 0f; previousRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); } } else if (Input.GetMouseButton(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { currentRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation); if (Mathf.Abs(deltaRotation) > deltaLimit) { deltaRotation = deltaLimit * Mathf.Sign(deltaRotation); } previousRotation = currentRotation; hit.collider.gameObject.transform.Rotate(Vector3.back * Time.deltaTime, deltaRotation); } }

How can I implement snapping via code? I have this 2d circle that the players rotate via drag and it works like a rotating dial. The best way to describe what I wanted to achieve is similar to a clock hand snapping to the hour numbers. I'm a total beginner and haven't actually learned anything about quaternions.

This is the my code , im using a raycast to detect if the dial is clicked/dragged.

Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition); RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector3.forward); if (Input.GetMouseButtonDown(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { deltaRotation = 0f; previousRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); } } else if (Input.GetMouseButton(0)) { if (hit.collider && hit.collider.GetComponent<Rotate2d>()) { currentRotation = angleBetweenPoints(transform.position, Camera.main.ScreenToWorldPoint(Input.mousePosition)); deltaRotation = Mathf.DeltaAngle(currentRotation, previousRotation); if (Mathf.Abs(deltaRotation) > deltaLimit) { deltaRotation = deltaLimit * Mathf.Sign(deltaRotation); } previousRotation = currentRotation; hit.collider.gameObject.transform.Rotate(Vector3.back * Time.deltaTime, deltaRotation); } }

I forgot to add, here is my angle between points method.

 float angleBetweenPoints(Vector2 position1, Vector2 position2) { Vector2 fromLine = position2 - position1; Vector2 toLine = new Vector2(1, 0); float angle = Vector2.Angle(fromLine, toLine); Vector3 cross = Vector3.Cross(fromLine, toLine); // did we wrap around? if (cross.z > 0) { angle = 360f - angle; } return angle; }