뻔뻔한블로그

UI오브젝트의 위치를 지정하는 것은 월드맵의 존재하는 오브젝트들의 위치를 변경하는 것과 다르다.

월드맵의 존재하는 오브젝트 Transform의 Position의 값으로 위치를  지정해준다.

하지만 UI는 아래와 같이 Rect Transform으로 위치를 지정해준다  

UI는 단말기의 보여지는 사각형의 스크린 뷰로 Canvas밑에서 관리된다. 그렇기에 다른 방법으로 위치를 지정해줘야 한다.

RectTransform으로 접근한 뒤 anchorePosition으로 접근해서 값을 지정해줄 수 있다.

추가적으로 ) RectTransform

Anchors : 사각형 왼쪽 하단 모서리와 오른쪽 상단 모서리의 앵커

Min :  사각형 크기의 일부로 정의되는 사각형 왼쪽 하단 모서리의 앵커 포인트. 0,0은 상위 사각형 왼쪽 하단 모서리의 앵커에 해당하고 1,1은 상위 사각형 오른쪽 상단 모서리의 앵커에 해당

Max :  사각형 크기의 일부로 정의되는 사각형 오른쪽 상단 모서리의 앵커 포인트. 0,0은 상위 사각형 왼쪽 하단 모서리의 앵커에 해당하고 1,1은 상위 사각형 오른쪽 상단 모서리의 앵커에 해당

Left, Top, Right, Bottom : 앵커를 기준으로 한 사각형 에지의 상대적인 포지션으로, 앵커에 의해 정의되는 사각형 안의 패딩

https://docs.unity3d.com/kr/current/Manual/class-RectTransform.html

UI 체력바 만들기(GUI)

UI이미지 만들기

이미지 2개와 텍스트UI 1개를 생성한다. 

1) 체력이 깍일 때 밑에 보이는? 이미지

2) 실제 HP를 표시 할 이미지

3) 캐릭터의 HP를 텍스트로 표시할 UI오브젝트

(UI오브젝트들은  'Canvas'안에 넣어야 게임뷰에 보이기 때문에 canvas안에 생성해준다)

1) HP_glass는 별다른 설정없지만

2) HP_Image는 HP수치에 따라 왼쪽에서 오른쪽으로 길이가 줄어드는 효과를 내야한다.

HP 이미지 컴포넌트 설정

Source Image : UI이미지에 적용할 sprite이미지

Image Type -> Filled

Fill Metod -> Horizontal 수평으로 증감 효과 

Fill Origin -> Left 이미지가 채워지는 시작장소(체력이 달면 오른쪽에서 왼쪽으로 줄어듦)

Fill Amount : 1이면 이미지가 모두 채워지고 0으로 갈수록 줄어듦

소스코드

hpbar.fillAmount HP/ 100f; : 현재 체력을 100으로 나누어 이미지 넓이를 표시한다.

HpText.text = stirng.Format("HP {0}/100",HP); : 텍스트로도 표시 하기 위한 UI text 

AddListener 이용해서 함수불러오기

버튼 프리팹 동적 생성하기(http://funfunhanblog.tistory.com/15)

동적으로 생성한 버튼을 위 그림 처럼 클릭 시 각각 다른 함수를 실행할 수 있도록 하자

유니티에는 UI버튼 기능중에는 OnClick( )이 있다. 일반적으로는 버튼을 생성하면 인스펙터 창을 통해 적용하면 되는데

동적으로 생성된 버튼에는 당연히 인스펙터창에서 실행할 함수를 적용할 수 가 없다.

그러면 스크립트에서 버튼이 생성됨과 동시에 각 버튼마다 OnClick( ) 기능을 주어야한다.

1) 실행 시킬 메서드 생성(스크립트 생성)

먼저 버튼이 눌리면 실행 할 함수들을 작성해준다.

2) 함수불러오기 AddListener

저번 포스팅에서 만들어 줬던 동적생성 메소드에서 작성해준다.

(명시적으로 표현하기 쉬운 if else 사용)

AddListener을 이용하여 BtnAnimal에 있는 함수를 불러오고 있다.

*AddListener : 함수를 불러온다. 콜백