[Unity3D] UI - HP, MP 에너바 조절하기. [Part 1]

Unity3D/Project 2017. 3. 16. 13:01

※ 주의 

이 글은 아마추어가 개인적으로 생각하여 작성하는 것으로, 이곳에 나오는 내용을 맹신하지 않는것을 당부드립니다.



Menu

0. 미리보기

1. HP,MP껍데기 및 기능 만들기.

2. HP,MP 조절을 위한 데미지, 리커버리 만들기.




1. HP, MP껍데기 및 기능 만들기.


- 배칭(드로우콜)을 줄이기 위해 유니티에서 제공하는 아틀라스 사용.


텍스쳐 타입 : sprite (2D and UI)
스프라이트 모드 : Multiple

패킹 태그 : UI


위의 셋팅이 끝난 뒤 스프라이트 에디터를 누른다.





Slice를 누면 밑에 창이 나오는데, 그 창에서 Slice를 누르면 이미지들이 자신의 크기에 맞게 잘린다.

이미지가 알맞게 잘렸으면 Apply를 눌러 빠져나온다.



메인 이미지에 붙어있는 ◀단추를 누르면 잘린 이미지들이 자식으로 들어가 있는것을 확인 할 수 있다.

 




※ 다른 이미지가 필요해졌을 때 패킹 태그를 똑같은 이름으로 지정하면 똑같은 스프라이트 팩에 들어가게 된다.



이러한 설정(아틀라스)을 하지 않으면, 캔버스에 이미지를 하나 만들어 쓸때마다 배치(Batches)가 증가하게 된다.

모바일 게임에 경우 이러한 배치수를 100개를 상한선으로 두고 있다.


※ 배치수가 너무 많다면 게임을 원할하게 돌아가게 할 수 없다.


스프라이트 팩에들어있는 이미지는 몇개를 꺼내쓰든 1개의 배치만을 소모한다.




게임창에 Stats를 누르면 배치수를 확인 할수 있는데, SkyBox 배치 1개, 이미지 배치수가 1개가 들어간 것을 볼 수 있다.


※ 사용한 이미지는 총 5개다.



여기서 아틀라스화 하지 않은 이미지를 쓰면 배치는 바로 증가하게 된다.



-------------------------------------------------------------------------------------------------------------------


- HP 및 MP를 눌러 이미지 타입을 Simple에서 Filled로 전환한다.



그 후 

Fill Method : Horizontal

Fill Origin : Left

으로 전환한 뒤


Fill Amount를 마우스로 수동으로 조절해보면 밑의 그림처럼 변환되는것을 확인 할 수 있다.



Fill Amount의 값은 0 ~ 1의 값만을 가지고 있다.


실시간으로 변하는 체력을 표시하고 싶다면 Fill Amount = (현재체력 / 체력의 최대치)로 처리하여 넣으면 된다.



이제 코드로 플레이어의 체력을 변화시켜보도록 하자.

PlayerInfo스크립트를 만들어 플레이어 컴포넌트에 추가한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 이걸 using시켜줘야 Image의 자료형을 쓸수 있다.
 
public class PlayerInfo : MonoBehaviour
{
    // 공개
    public GameObject[] Effect;
    public Image[] Img;          // HP,MP이미지.
 
    public float MAX_HP;         // HP 최대치.
    public float MAX_MP;         // MP 최대치.
    public float p_HP;           // 현재 HP.
    public float p_MP;           // 현재 MP.
 
    // 플레이어 UI정보 갱신.
    // 인자 : (HP냐? MP냐?, 데미지냐? 체력회복이냐?, 데미지 혹은 체력회복의 수치는 얼마만큼이냐?)
    public void UIUpdate(string _Type, string _InfoType, float _Value)
    {
        float Type    = 0;   // HP또는 MP의 현재 수치.
        float MAXType = 0;   // HP또는 MP의 최대치.
        int Index     = 0;   // HP또는 MP의 이미지 인덱스.
 
        switch (_InfoType)
        {
            case "HP":
            {
                Index   = 0;
                Type    = p_HP;
                MAXType = MAX_HP;
 
                // 리커버리면 회복
                if (_Type == "Recover")
                    p_HP += _Value;
                // 리커버리가 아니면 데미지.
                else
                    p_HP -= _Value;
 
                break;
            }
            case "MP":
            {
                Index   = 1;
                Type    = p_MP;
                MAXType = MAX_MP;
 
                if (_Type == "Recover")
                    p_MP += _Value;
                else
                    p_MP -= _Value;
 
                break;
            }
        }
 
        // 인덱스 번째의 이미지를 갱신시킨다.
        // 만약, 변화시켜야 되는 이미지가 HP이고, 체력의 최대치가 100이라고 하자.
        // 20의 데미지를 받아 체력이 80남았다고 하자, 그러면 체력이 80이 남은것을 보여줘야 한다.
        // fillAmount의 값은 0 ~ 1가 끝이기 때문에 체력을 소수점으로 변환해줘야 표현이 가능해진다.
        // 80 / 100 = 0.8 요컨데 퍼센트로 바꿔서 표현한다 생각하면 된다.
        Img[Index].fillAmount = Type / MAXType;
    }
}
 
cs



플레이어의 인스펙터창 정보.


저작자표시 비영리 변경금지

'Unity3D > Project' 카테고리의 다른 글

[Unity3D] 객체 미리 생성 후 재활용 - Memory pool [Part 0]  (0) 2017.03.20
[Unity3D] UI - HP, MP 에너바 조절하기. [Part 2]  (1) 2017.03.17
[Unity3D] UI - HP, MP 에너바 조절하기. [Part 0]  (0) 2017.03.15
[Unity3D] 조이스틱으로 캐릭터 조종하기. [Part 2]  (10) 2017.03.13
[Unity3D] 조이스틱으로 캐릭터 조종하기. [Part 1]  (6) 2017.03.10
Posted by 비선형구조

[Unity3D] UI - HP, MP 에너바 조절하기. [Part 0]

Unity3D/Project 2017. 3. 15. 14:28

※ 주의 

이 글은 아마추어가 개인적으로 생각하여 작성하는 것으로, 이곳에 나오는 내용을 맹신하지 않는것을 당부드립니다.



Menu

0. 미리보기

1. HP,MP껍데기 및 기능 만들기.

2. HP,MP 조절을 위한 데미지, 리커버리 만들기.




0. 미리보기







저작자표시 비영리 변경금지

'Unity3D > Project' 카테고리의 다른 글

[Unity3D] UI - HP, MP 에너바 조절하기. [Part 2]  (1) 2017.03.17
[Unity3D] UI - HP, MP 에너바 조절하기. [Part 1]  (1) 2017.03.16
[Unity3D] 조이스틱으로 캐릭터 조종하기. [Part 2]  (10) 2017.03.13
[Unity3D] 조이스틱으로 캐릭터 조종하기. [Part 1]  (6) 2017.03.10
[Unity3D] RPG게임 카메라 - 줌 인/아웃, 카메라 회전. [Part 4]  (3) 2017.03.08
Posted by 비선형구조

[Unity3D] 조이스틱으로 캐릭터 조종하기. [Part 2]

Unity3D/Project 2017. 3. 13. 12:06

※ 주의 

이 글은 아마추어가 개인적으로 생각하여 작성하는 것으로, 이곳에 나오는 내용을 맹신하지 않는것을 당부드립니다.



Menu


1. 조이스틱 만들기.

2. 조이스틱의 벡터를 받아 캐릭터를 회전 및 이동 시키기.





2. 조이스틱의 벡터를 받아 캐릭터를 회전 및 이동 시키기.


필요한 재료.

- 플레이어의 Trsnform 컴포넌트

- 움직임 플래그 값.


조이스틱을 만들었다면 움직이는것은 그다지 어렵지 않다.

조이스틱을 움직이기 위해서 구했던 벡터를 그대로 캐릭터를 회전 시키는데 쓰면 되기 때문이다.


물론 그 벡터를 그대로 갔다 쓰면 안되고 약간의 변경이 필요하다.

아크탄젠트를 사용해서 각도를 바꿔주고 그것을 디그리로 변경하면 되는데,

이러한 함수도 유니티에서 제공해주고 있다.


※ 삼각비,삼각함수,라디안,디그리 등은 블로그내에 게임수학 부분을 참고하기 바란다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class JoyStick : MonoBehaviour {
 
    // 공개
    public Transform Player;        // 플레이어.
    public Transform Stick;         // 조이스틱.
 
    // 비공개
    private Vector3 StickFirstPos;  // 조이스틱의 처음 위치.
    private Vector3 JoyVec;         // 조이스틱의 벡터(방향)
    private float Radius;           // 조이스틱 배경의 반 지름.
    private bool MoveFlag;          // 플레이어 움직임 스위치.
 
    void Start()
    {
        Radius = GetComponent<RectTransform>().sizeDelta.y * 0.5f;
        StickFirstPos = Stick.transform.position;
 
        // 캔버스 크기에대한 반지름 조절.
        float Can = transform.parent.GetComponent<RectTransform>().localScale.x;
        Radius *= Can;
 
        MoveFlag = false;
    }
 
    void Update()
    {
        if (MoveFlag)
            Player.transform.Translate(Vector3.forward * Time.deltaTime * 10f);
    }
 
    // 드래그
    public void Drag(BaseEventData _Data)
    {
        MoveFlag = true;
        PointerEventData Data = _Data as PointerEventData;
        Vector3 Pos = Data.position;
        
        // 조이스틱을 이동시킬 방향을 구함.(오른쪽,왼쪽,위,아래)
        JoyVec = (Pos - StickFirstPos).normalized;
 
        // 조이스틱의 처음 위치와 현재 내가 터치하고있는 위치의 거리를 구한다.
        float Dis = Vector3.Distance(Pos, StickFirstPos);
        
        // 거리가 반지름보다 작으면 조이스틱을 현재 터치하고 있는 곳으로 이동.
        if (Dis < Radius)
            Stick.position = StickFirstPos + JoyVec * Dis;
        // 거리가 반지름보다 커지면 조이스틱을 반지름의 크기만큼만 이동.
        else
            Stick.position = StickFirstPos + JoyVec * Radius;
 
        Player.eulerAngles = new Vector3(0, Mathf.Atan2(JoyVec.x, JoyVec.y) * Mathf.Rad2Deg, 0);
    }
 
    // 드래그 끝.
    public void DragEnd()
    {
        Stick.position = StickFirstPos; // 스틱을 원래의 위치로.
        JoyVec = Vector3.zero;          // 방향을 0으로.
        MoveFlag = false;
    }
}
 
cs



MoveFlag같은 경우 조이스틱을 드래그 할때만 true로 바뀌고 드래그가 끝난다면 곧바로 false로 돌아간다.

플래그 값이 true인 동안에만 transform.Translate를 통해 캐릭터가 움직인다.


플레이어를 움직이는 구문을 Drag함수 안에 놓으면 드래그 하는동안만 움직이지 않냐고 물을수도 있다.


맞다. 드.래.그 하는 동안만 움직인다. 조이스틱을 잡고 끝으로 땡겨놓고 가만히 있으면 조이스틱을 땡기는 동안만 움직이고

가만히 있을때에는 움직이지 않는다. 말 그대로 조이스틱을 잡고 움직이는 동안만 함수가 들어오는 것이다.

아무튼 움직이는 것은 지속적으로 체크가 가능한 Update함수에서 해야한다. (코루틴을 사용해도 좋다.)


플레이어를 어떤 축을 중심으로 회전시켜야 할까?

y축이다. y축을 원하는 방향으로 회전만 시킨다면 플레이어는 그 방향으로 나아가게 될 것이다.

그렇다면 그 방향을 어떻게 구할수 있을까?

바로 조이스틱의 벡터이다. 하지만 이 벡터는 바로 쓸수 없다.

쓰기 위해선 아크탄젠트를 통해 변환하고, 나온 라디안 값을 디그리로 변환해주고 나온 디그리 값으로

플레이어의 y축 회전에 쓰면된다.




아탄을 통해 각a를 구할수 있다.

하지만 이 값은 라디안 값이므로 디그리(각도)로 변환해 주어야 한다.



결과.


 

저작자표시 비영리 변경금지

'Unity3D > Project' 카테고리의 다른 글

[Unity3D] UI - HP, MP 에너바 조절하기. [Part 1]  (1) 2017.03.16
[Unity3D] UI - HP, MP 에너바 조절하기. [Part 0]  (0) 2017.03.15
[Unity3D] 조이스틱으로 캐릭터 조종하기. [Part 1]  (6) 2017.03.10
[Unity3D] RPG게임 카메라 - 줌 인/아웃, 카메라 회전. [Part 4]  (3) 2017.03.08
[Unity3D] RPG게임 카메라 - 줌 인/아웃, 카메라 회전. [Part 3]  (3) 2017.03.08
Posted by 비선형구조
prev 1 ··· 15 16 17 18 19 20 21 ··· 29 next
openclose

티스토리툴바