2017-07-30 02:09:19 +08:00
|
|
|
|
/// Credit mgear, SimonDarksideJ
|
|
|
|
|
/// Sourced from - https://forum.unity3d.com/threads/radial-slider-circle-slider.326392/#post-3143582
|
2020-07-09 03:38:28 +08:00
|
|
|
|
/// Updated to include lerping features and programmatic access to angle/value
|
2017-07-30 02:09:19 +08:00
|
|
|
|
|
|
|
|
|
using System;
|
|
|
|
|
using UnityEngine.Events;
|
|
|
|
|
using UnityEngine.EventSystems;
|
|
|
|
|
|
|
|
|
|
namespace UnityEngine.UI.Extensions
|
|
|
|
|
{
|
2017-07-30 03:49:04 +08:00
|
|
|
|
[AddComponentMenu("UI/Extensions/Radial Slider")]
|
2017-07-30 02:09:19 +08:00
|
|
|
|
[RequireComponent(typeof(Image))]
|
2018-04-12 22:12:17 +08:00
|
|
|
|
public class RadialSlider : MonoBehaviour, IPointerEnterHandler, IPointerDownHandler, IPointerUpHandler, IDragHandler
|
2017-07-30 02:09:19 +08:00
|
|
|
|
{
|
|
|
|
|
private bool isPointerDown, isPointerReleased, lerpInProgress;
|
2018-04-12 22:12:17 +08:00
|
|
|
|
private Vector2 m_localPos, m_screenPos;
|
2017-07-30 03:49:04 +08:00
|
|
|
|
private float m_targetAngle, m_lerpTargetAngle, m_startAngle, m_currentLerpTime, m_lerpTime;
|
2017-07-30 02:09:19 +08:00
|
|
|
|
private Camera m_eventCamera;
|
|
|
|
|
private Image m_image;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
|
|
|
|
[Tooltip("Radial Gradient Start Color")]
|
|
|
|
|
private Color m_startColor = Color.green;
|
|
|
|
|
[SerializeField]
|
|
|
|
|
[Tooltip("Radial Gradient End Color")]
|
|
|
|
|
private Color m_endColor = Color.red;
|
|
|
|
|
[Tooltip("Move slider absolute or use Lerping?\nDragging only supported with absolute")]
|
|
|
|
|
[SerializeField]
|
|
|
|
|
private bool m_lerpToTarget;
|
|
|
|
|
[Tooltip("Curve to apply to the Lerp\nMust be set to enable Lerp")]
|
|
|
|
|
[SerializeField]
|
|
|
|
|
private AnimationCurve m_lerpCurve;
|
|
|
|
|
[Tooltip("Event fired when value of control changes, outputs an INT angle value")]
|
|
|
|
|
[SerializeField]
|
|
|
|
|
private RadialSliderValueChangedEvent _onValueChanged = new RadialSliderValueChangedEvent();
|
|
|
|
|
[Tooltip("Event fired when value of control changes, outputs a TEXT angle value")]
|
|
|
|
|
[SerializeField]
|
|
|
|
|
private RadialSliderTextValueChangedEvent _onTextValueChanged = new RadialSliderTextValueChangedEvent();
|
|
|
|
|
|
|
|
|
|
public float Angle
|
|
|
|
|
{
|
|
|
|
|
get { return RadialImage.fillAmount * 360f; }
|
|
|
|
|
set
|
|
|
|
|
{
|
|
|
|
|
if (LerpToTarget)
|
|
|
|
|
{
|
|
|
|
|
StartLerp(value / 360f);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
UpdateRadialImage(value / 360f);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public float Value
|
|
|
|
|
{
|
|
|
|
|
get { return RadialImage.fillAmount; }
|
|
|
|
|
set
|
|
|
|
|
{
|
|
|
|
|
if (LerpToTarget)
|
|
|
|
|
{
|
|
|
|
|
StartLerp(value);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
UpdateRadialImage(value);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public Color EndColor
|
|
|
|
|
{
|
|
|
|
|
get { return m_endColor; }
|
|
|
|
|
set { m_endColor = value; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public Color StartColor
|
|
|
|
|
{
|
|
|
|
|
get { return m_startColor; }
|
|
|
|
|
set { m_startColor = value; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public bool LerpToTarget
|
|
|
|
|
{
|
|
|
|
|
get { return m_lerpToTarget; }
|
|
|
|
|
set { m_lerpToTarget = value; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public AnimationCurve LerpCurve
|
|
|
|
|
{
|
|
|
|
|
get { return m_lerpCurve; }
|
2017-07-30 03:49:04 +08:00
|
|
|
|
set { m_lerpCurve = value; m_lerpTime = LerpCurve[LerpCurve.length - 1].time; }
|
2017-07-30 02:09:19 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public bool LerpInProgress
|
|
|
|
|
{
|
|
|
|
|
get { return lerpInProgress; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[Serializable]
|
|
|
|
|
public class RadialSliderValueChangedEvent : UnityEvent<int> { }
|
|
|
|
|
[Serializable]
|
|
|
|
|
public class RadialSliderTextValueChangedEvent : UnityEvent<string> { }
|
|
|
|
|
|
|
|
|
|
public Image RadialImage
|
|
|
|
|
{
|
|
|
|
|
get
|
|
|
|
|
{
|
|
|
|
|
if (m_image == null)
|
|
|
|
|
{
|
|
|
|
|
m_image = GetComponent<Image>();
|
|
|
|
|
m_image.type = Image.Type.Filled;
|
|
|
|
|
m_image.fillMethod = Image.FillMethod.Radial360;
|
2017-07-30 04:00:33 +08:00
|
|
|
|
m_image.fillAmount = 0;
|
2017-07-30 02:09:19 +08:00
|
|
|
|
}
|
|
|
|
|
return m_image;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public RadialSliderValueChangedEvent onValueChanged
|
|
|
|
|
{
|
|
|
|
|
get { return _onValueChanged; }
|
|
|
|
|
set { _onValueChanged = value; }
|
|
|
|
|
}
|
|
|
|
|
public RadialSliderTextValueChangedEvent onTextValueChanged
|
|
|
|
|
{
|
|
|
|
|
get { return _onTextValueChanged; }
|
|
|
|
|
set { _onTextValueChanged = value; }
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-30 03:49:04 +08:00
|
|
|
|
private void Awake()
|
|
|
|
|
{
|
|
|
|
|
if (LerpCurve != null && LerpCurve.length > 0)
|
|
|
|
|
{
|
|
|
|
|
m_lerpTime = LerpCurve[LerpCurve.length - 1].time;
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
m_lerpTime = 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-30 02:09:19 +08:00
|
|
|
|
private void Update()
|
|
|
|
|
{
|
|
|
|
|
if (isPointerDown)
|
|
|
|
|
{
|
|
|
|
|
m_targetAngle = GetAngleFromMousePoint();
|
|
|
|
|
if (!lerpInProgress)
|
|
|
|
|
{
|
|
|
|
|
if (!LerpToTarget)
|
|
|
|
|
{
|
|
|
|
|
UpdateRadialImage(m_targetAngle);
|
|
|
|
|
|
|
|
|
|
NotifyValueChanged();
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
if (isPointerReleased) StartLerp(m_targetAngle);
|
|
|
|
|
isPointerReleased = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (lerpInProgress && Value != m_lerpTargetAngle)
|
|
|
|
|
{
|
|
|
|
|
m_currentLerpTime += Time.deltaTime;
|
2017-07-30 03:49:04 +08:00
|
|
|
|
float perc = m_currentLerpTime / m_lerpTime;
|
|
|
|
|
if (LerpCurve != null && LerpCurve.length > 0)
|
|
|
|
|
{
|
|
|
|
|
UpdateRadialImage(Mathf.Lerp(m_startAngle, m_lerpTargetAngle, LerpCurve.Evaluate(perc)));
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
UpdateRadialImage(Mathf.Lerp(m_startAngle, m_lerpTargetAngle, perc));
|
|
|
|
|
}
|
2017-07-30 02:09:19 +08:00
|
|
|
|
}
|
2017-07-30 03:49:04 +08:00
|
|
|
|
if (m_currentLerpTime >= m_lerpTime || Value == m_lerpTargetAngle)
|
2017-07-30 02:09:19 +08:00
|
|
|
|
{
|
|
|
|
|
lerpInProgress = false;
|
|
|
|
|
UpdateRadialImage(m_lerpTargetAngle);
|
|
|
|
|
NotifyValueChanged();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private void StartLerp(float targetAngle)
|
|
|
|
|
{
|
|
|
|
|
if (!lerpInProgress)
|
|
|
|
|
{
|
|
|
|
|
m_startAngle = Value;
|
|
|
|
|
m_lerpTargetAngle = targetAngle;
|
|
|
|
|
m_currentLerpTime = 0f;
|
|
|
|
|
lerpInProgress = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private float GetAngleFromMousePoint()
|
|
|
|
|
{
|
2018-04-12 22:12:17 +08:00
|
|
|
|
RectTransformUtility.ScreenPointToLocalPointInRectangle(transform as RectTransform, m_screenPos, m_eventCamera, out m_localPos);
|
2017-07-30 02:09:19 +08:00
|
|
|
|
|
|
|
|
|
// radial pos of the mouse position.
|
|
|
|
|
return (Mathf.Atan2(-m_localPos.y, m_localPos.x) * 180f / Mathf.PI + 180f) / 360f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private void UpdateRadialImage(float targetAngle)
|
|
|
|
|
{
|
|
|
|
|
RadialImage.fillAmount = targetAngle;
|
|
|
|
|
|
|
|
|
|
RadialImage.color = Color.Lerp(m_startColor, m_endColor, targetAngle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private void NotifyValueChanged()
|
|
|
|
|
{
|
|
|
|
|
_onValueChanged.Invoke((int)(m_targetAngle * 360f));
|
|
|
|
|
_onTextValueChanged.Invoke(((int)(m_targetAngle * 360f)).ToString());
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-30 04:00:33 +08:00
|
|
|
|
//#if UNITY_EDITOR
|
2017-07-30 02:09:19 +08:00
|
|
|
|
|
2017-07-30 04:00:33 +08:00
|
|
|
|
// private void OnValidate()
|
|
|
|
|
// {
|
|
|
|
|
// if (LerpToTarget && LerpCurve.length < 2)
|
|
|
|
|
// {
|
|
|
|
|
// LerpToTarget = false;
|
|
|
|
|
// Debug.LogError("You need to define a Lerp Curve to enable 'Lerp To Target'");
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//#endif
|
2017-07-30 02:09:19 +08:00
|
|
|
|
|
|
|
|
|
#region Interfaces
|
|
|
|
|
// Called when the pointer enters our GUI component.
|
|
|
|
|
// Start tracking the mouse
|
|
|
|
|
public void OnPointerEnter(PointerEventData eventData)
|
|
|
|
|
{
|
2018-04-12 22:12:17 +08:00
|
|
|
|
m_screenPos = eventData.position;
|
2017-07-30 02:09:19 +08:00
|
|
|
|
m_eventCamera = eventData.enterEventCamera;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public void OnPointerDown(PointerEventData eventData)
|
|
|
|
|
{
|
2018-04-12 22:12:17 +08:00
|
|
|
|
m_screenPos = eventData.position;
|
2017-07-30 02:09:19 +08:00
|
|
|
|
m_eventCamera = eventData.enterEventCamera;
|
|
|
|
|
isPointerDown = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public void OnPointerUp(PointerEventData eventData)
|
|
|
|
|
{
|
2018-04-12 22:12:17 +08:00
|
|
|
|
m_screenPos = Vector2.zero;
|
2017-07-30 02:09:19 +08:00
|
|
|
|
isPointerDown = false;
|
|
|
|
|
isPointerReleased = true;
|
|
|
|
|
}
|
2018-04-12 22:12:17 +08:00
|
|
|
|
|
|
|
|
|
public void OnDrag(PointerEventData eventData)
|
|
|
|
|
{
|
|
|
|
|
m_screenPos = eventData.position;
|
|
|
|
|
}
|
2017-07-30 02:09:19 +08:00
|
|
|
|
#endregion
|
|
|
|
|
}
|
|
|
|
|
}
|