1. 程式人生 > >Unity 2017 使用UGUI製作大轉盤抽獎

Unity 2017 使用UGUI製作大轉盤抽獎

涉及到的外掛:Dotween

在“Hierarchy”面板建立一個Image,這個Image用來顯示大轉盤的那個圓盤,我用的UGUI裡預設的那個圓圓的圖片,放大後很模糊,不過不打緊
這裡寫圖片描述
接著建立一個Panel名字改成“獎品組”,這個是獎品的父物體,記得吧Panel裡的Image,Canvas Renderer元件刪了
然後在建立一個Panel名字改成“Awar”用製作獎品的,一樣的吧Image,CanvasRenderer元件刪除
然後在Awar中建立Image,Text,分別吧名字改為“Ico,desc”,然後設定一下自己想要的效果,我設定的Ico上方,Desc下方如圖:
這裡寫圖片描述
結構圖:
這裡寫圖片描述


*需要注意的地方:把Awar的小藍點移動到圓盤的中心如圖:
這裡寫圖片描述
如果這步沒做後面的自動生成程式碼生成就不準嘍
然後寫一個程式碼:生成的指令碼

public class GenerateAwar:MonoBehaviour{
 public GameObject AwarGameObject; //上面製作的Awar物體
    public int Count = 10; // 生成個數,當你根據資料生成個數的時候記得修改

    void OnEnable ()
    {
        var angle = 360 / Count; // 計算每個獎品的Z軸度數
        var additionAngle = 0
; //當前角度 for (var i = 0; i < Count; i++) { var obj = Instantiate(AwarGameObject); additionAngle = angle + additionAngle; obj.transform.Rotate(Vector3.forward,additionAngle); Log.Error(obj.transform.localRotation.eulerAngles.z); obj.transform.SetParent(transform,false
); obj.SetActive(true); } } }

然後掛到”獎品組“身上
如:
這裡寫圖片描述
那個獎品就是Awar,我名字改不回來了,似乎是unity的問題,哇哈哈哈
然後執行,就能看到如圖效果:
這裡寫圖片描述
然後建立一個指標放在中心編寫一個指令碼:旋轉指標的指令碼

//這個指令碼掛在指標身上,
//然後在抽獎按鈕的Button事件裡拖入指標選擇這個類的SetTime方法
public class RotatePointer : MonoBehaviour
{

    private bool _isRotate = false;//是否旋轉
    public float ContinuousTime = 2;//旋轉時間
    public float Speed = 2000;//旋轉速度
    public float Angle = 0; // 這個是設定停止的角度
    private float _time;
    // Update is called once per frame
    void Update () {

        if (!_isRotate)return; //不旋轉結束

        if (Time.time < _time) // 沒結束
        {
            transform.Rotate(Vector3.forward * Speed * Time.deltaTime);
        }
        else
        {
        //結束,使用DoTween旋轉到結束角度,耗時1秒
        //這裡有個360,使用來防止指標迴轉的,如果不加這個360,你會看到指標倒退
            transform.DORotate(new Vector3(0, 0, 360 + Angle), 1f, RotateMode.FastBeyond360);
            _isRotate = false; // 設定不旋轉
        }
    }

    //外部呼叫,初始化時間和開啟旋轉
    public void SetTime()
    {
        _time = Time.time + ContinuousTime;
        _isRotate = true;
    }
    //外部呼叫,設定停止角度
    public void SetAngle(float angle)
    {
        Angle = angle;
    }
}

指標:
這裡寫圖片描述
開始按鈕:
這裡寫圖片描述
因為電腦上沒什麼製作動圖的軟體,如果效果我就結束,旋轉個1張
旋轉:
這裡寫圖片描述

結束:
這裡寫圖片描述