UI (User Interface) 만들기

모바일 게임에는 UI (User Interface) 를 빼놓을 수 없죠.

앞서 했던 탱크의 움직임과 포탄발사를 UI를 통해서 구현해보도록 하겠습니다.

계층 리스트 > Create > UI > Image 를 클릭해주시면 UI 화면이 엄청크게 생깁니다.

  

계층 리스트에는 Canvas와 Image가 생기는데 Image는 하얀 큐브이고 캔버스가 화면을 나타냅니다.

Canvas의 Inspector > Canvas Scaler (Script) > UI Scale Mode 를 보시면

Constant Pixel Size 로 되어있는데 Scale With Screen Size 로 바꿔주세요.

Scale With Screen Size 는 화면의 사이즈대로 UI크기가 맞춰집니다.

큐브를 하나 더 생성해주시고 원하는곳에 배치해주세요.

*Tip. UI는 2D로 보여지는 모습이기때문에 Scene을 2D를 체크해주신후 수정하시면 편합니다.

저는 왼쪽버튼은 탱크가 앞으로이동, 오른쪽버튼은 총알발사로 적용시켜 보도록 하겠습니다.

우선 버튼에 이벤트 트리거를 생성해주셔야 합니다.

    

큐브의 Add Component > Event > Event Trigger

Add New Event Type

Type의 종류입니다. 상황에 맞게 적절하게 사용하시면 됩니다.

저는 PointerDown 과 PointerUp을 사용하겠습니다.

이벤트를 추가시키시면 Pointer Up과 같이 되고 +를 누를경우 Pointer Down과 같이 됩니다.

Down과 Up모두 +를 해주시고 밑줄친곳에 적용하실 오브젝트를 넣어주세요.

저는 탱크를 넣도록 하겠습니다.

소스는 적용하시는 오브젝트에서 작성해주시면 됩니다.

    bool bForwardMove = false;
    bool bFire = false;
 
    void Update()
    {
        if (bForwardMove)
        {
            transform.Translate(new Vector3(0, 0, 1) * MoveSpeed * Time.deltaTime);
        }
        if (bFire)
        {
            GameObject ins = Instantiate(Bullet);
 
            ins.transform.position = FireHole.transform.position;
            ins.transform.rotation = FireHole.transform.rotation;
            ins.GetComponent<Rigidbody>().AddForce(FireHole.forward * 3000f);
        }
    }
 
    public void setForwardMoveState(bool _State)
    {
        bForwardMove = _State;
    }
 
    public void setbFireMoveState(bool _State)
    {
        bFire = _State;
    }  

UI의 움직임만을 적용한 소스입니다.

상태를 제어하는 변수를 생성하시고 상태변화는 이벤트 트리거에서 적용합니다.

탱크를 추가하시고 No Function 을 TankMoving > setForwardMoveState 로 바꿔주시면 체크모양이 생깁니다.

체크하시면 True, 체크 하지 않으시면 False 입니다.

저는 Down일때 True, Up일때 False를 주도록 하겠습니다.

다른 작용을 하실때도 이와같이 소스를 작업하시고 함수또는 변수를 적용시키시면 됩니다.

UI 적용완료 동영상입니다.