Dice Test_3

#어제 만들던 주사위에서 수정할게 많았다.

기획했던 랜덤 뽑기시스템(암상인 시스템이라 부른다)에서 플레이어가 획득할 수 있는 아이템의 갯수가 6개로 축소되었다. 주사위를 2개일 필요가 없어서 하나로 줄이고 주사위의 크기를 키웠다. 

연출에서도 수정해야할 사항이 많았다. 주사위의 동작 로직은 어제 만들어 놓은 로직과 같지만 주사위의 면이 6개의 아이템으로 보여져야하고, 주사위가 일정 시간이 지나면 뽑기 결과화면이 연출 되어야했다. 

뽑기 결과 화면을 유저에게 언제 어떻게 보여주어야 할지 고민이 됐다. 처음 구상은 "Go" , "Stop"버튼을 클릭하게 하고 주사위의 움직임을 제어 했으나 뭔가 조잡한 느낌이 강하게 들었다.

다행히 팀원의 아이디어로 레퍼런스를 찾을 수 있었다. "마리오 파티" 의 주사위 UI를 참고 하였다.

버튼 하나("Go")로 클릭하게 하고 코루틴을 이용하여 일정 시간동안 버튼을 비활성화 하였다.( (버튼컴포넌트 비활성화(interactable=false;), 버튼의 a값과 텍스트의 a값도 줄여주었다)) 결과 화면에서 주사위는 자연 스러운 움직임이 필요해보였다.

Dotween과 Easing을 사용하여 연출을 만들었다. (자세한건 스크립트와 영상에서)

주사위의 결과 화면을 제어해야함으로 코루틴을 사용하여 1.3f초 지나면 결과 연출이 나오게 제어하였다(이후 결과 화면의 아이템 이미지까지 확률로 제어하는 로직도 추가해야한다.)

레퍼런스와는 많이 다르게 만들어 졌지만 조금더 수정을 거치면 괜찮은 연출이 나올 것 같다.

애니메이션으로 연출을 만들 수 있지만 최대한 스크립트로 제어하고 싶어서 여러 시도를 해봤다.

 

*주사위 겉면은 기존에 붙어있던 주사위 텍스쳐를 제거하고 실제 게임에서 쓰일 이미지로 대체하였다.

*어제R&D한 랜더택스쳐를 그대로 쓰고 주사위가 돌아가는 범위를 frame으로 감싸주었다.

*아직 화면 구성중이다 . frame안에 이미지로 뽑기 결과의 아이템 이미지가 들어갈 예정이다.

#스크립트

#DiceScript

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class DiceScript : MonoBehaviour
{
    private Rigidbody rb;
    public Sprite resultImg; //주사위 결과 스프라이트
    void Start()
    {
        this.rb = GetComponent<Rigidbody>();
    }
    public void Init()
    {
        this.rb.isKinematic = false;
        float dirX = Random.Range(600, 700);
        float dirY = Random.Range(600, 700);
        float dirZ = Random.Range(600, 700);
        this.transform.position = new Vector3(0, 3f, 0); //높이 y=2 로 고정
        this.transform.rotation = Quaternion.identity; //회전 -> 0, 안하면 다른 위치의 y축에서 떨어짐 
        rb.AddForce(this.transform.up * 500); //y축으로 500만큼의 힘을 가하다
        rb.AddTorque(dirX, dirY, dirZ); //3개의 축(x,y,z)에 랜덤한 힘(0~500까지의 랜덤한 수)으로 회전하는 힘을 가한다
    }

    //회전 멈춤, 위치고정, 스프라이트 이미지 교체(확률 컨트롤이 필요함)
    public void DiceResult()
    {
        this.rb.isKinematic = true;
        this.transform.DOMove(new Vector3(0, 3f, 0), 2f).SetEase(Ease.OutElastic);
        Quaternion targetRotation = Quaternion.Euler(0f, -24.752f, 0f);
        this.transform.DORotate(targetRotation.eulerAngles, 0.01f).SetEase(Ease.OutExpo);
    }
}

*DiceResult메서드를 만들고 주사위에 Dotween와 Easeing을 사용하여 연출을 만들었다. 

 

#UIDiceDirector

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIDiceDirector : MonoBehaviour
{
    public Button closeBtn;
    public GameObject btnGo;
    private Button rollBtn;
    public DiceScript dice;
    
    void Start()
    {
        this.rollBtn = this.btnGo.GetComponent<Button>();
        this.closeBtn.onClick.AddListener(() => { 
            this.gameObject.SetActive(false);
        });
        this.rollBtn.onClick.AddListener(() => { //돌고 있는 중이면 또 눌리면 안됨
            this.dice.Init();
            this.rollBtn.interactable=false; //button컴포넌트 비활성화
            StartCoroutine(this.DiceBtnSetting());
            this.BtnGoColorDown();
        });

    }
    private IEnumerator DiceBtnSetting()
    {
        yield return new WaitForSeconds(1.3f);
        this.dice.DiceResult();
        this.rollBtn.interactable = true;
        this.BtnGoColorUp();
    }
    private void BtnGoColorDown() //알파값 down
    {
        var imgBoxGo=this.btnGo.transform.Find("imgBox").GetComponent<Image>();
        var txtSelectGo = this.btnGo.transform.Find("txtSelect").GetComponent<Text>();

        Color imgBoxGoColor = imgBoxGo.color;
        imgBoxGoColor.a = 0.5f;
        imgBoxGo.color= imgBoxGoColor;

        Color txtSelectGoColor= txtSelectGo.color;
        txtSelectGoColor.a = 0.5f;
        txtSelectGo.color= txtSelectGoColor;
    }
    private void BtnGoColorUp() //알파값 up
    {
        var imgBoxGo = this.btnGo.transform.Find("imgBox").GetComponent<Image>();
        var txtSelectGo = this.btnGo.transform.Find("txtSelect").GetComponent<Text>();

        Color imgBoxGoColor = imgBoxGo.color;
        imgBoxGoColor.a = 1f;
        imgBoxGo.color = imgBoxGoColor;

        Color txtSelectGoColor = txtSelectGo.color;
        txtSelectGoColor.a = 1f;
        txtSelectGo.color = txtSelectGoColor;
    }
}