유니티에서 UI를 만드는 법에 대해 간단하게 알아보겠다.

좌 우 이동버튼과 우상단의 HP게이지를 만들어 볼것이다.

캐릭터의 조작 버튼, 캐릭터의 체력 게이지 총 두 가지 UI를 만들것이다.

우선 UI에 사용될 리소스를 준비 한 후, Hierarchy탭 - Create - UI - Button 2개와 Image 1개를 생성한다.

올바르게 생성되었을 경우, Hierarchy탭에 Canvas가 생성되었을 것이고, 그 하위 오브젝트로 Button과 Image가 생성되었을 것이다.

Button의 이름을 각각 LButton, RButton으로 변경하고, Image의 이름을 hpGauge로 변경해준다.

 

Canvas 하위에 hp게이지와 버튼이 성공적으로 생성

우선 UI를 제 위치에 배치해보자.

각 UI의 Inspector창을 보면 Rect Transform 컴포넌트를 확인할 수 있다.

이곳에서 앵커라는것과 포지션을 이용해 UI를 제 위치에 배치해 보자.

왼쪽의 네모칸을 누르면 앵커를 설정 할 수 있다.

앵커는 간단히 말에서 해당 UI의 중심축을 어디에 둘 것이냐를 정하는것이다.

앵커를 hp게이지의 경우 우상단, LB RB는 각각 좌하단 우하단에 배치해보자.

 

먼저 hpGauge를 먼저 만들어보자.  

hpGauge의 Inspcetor창을 살펴보면, Image탭의 Source Image가 있을것이다.

이곳에 자신이 준비한 리소스를 드래그&드롭하면 해당 리소스가 UI에 적용된다.

해당 리소스를 드래그&드롭하면 UI에 적용할 수 있다.

같은 방법으로 LB와 RB에도 리소스를 적용시킬 수 있다.

스크립트를 통해 UI를 감독하는 방법에 대해서는 다음 포스팅을 통해 알아보겠다.

'Unity' 카테고리의 다른 글

[Unity/Android] ARMx64/IL2CPP 빌드 오류  (0) 2022.07.04

C#에서는 세 개의 float값을 이용하여 벡터(Vector3)를 나타낼 수 있다. (두 개의 float값을 이용한 Vector2도 있다.)

Vector3는 float(단정밀도 부동소수점)형의 x, y, z값을 가진 구조체이다.

이는 다음과 같이 선언 할 수 있다.

Vector3 position = new Vector3(X,Y,Z); //세 개의 요소가 각각 X, Y, Z값을 가짐.

Vector3 position = new Vector3(X); //세 개의 요소 모두 X값을 가짐.

Vector3 position = new Vector3(Vector2, Z); //지정된 Vector2개체와 Z값에서 새로운 개체 Vector3를 생성.

 

사용 가능한 메서드는 다음 링크에서 확인 가능하다.

https://docs.microsoft.com/ko-kr/dotnet/api/system.numerics.vector3?view=netframework-4.7.2

 

 

'Unity > C#' 카테고리의 다른 글

C#에서 구조체, value type  (0) 2021.09.13
[Unity/C#] Update와 FixedUpdate  (0) 2019.06.17
[Unity/C#] Ray&Raycast  (0) 2019.06.11
-C#- Awake/Start/Update  (0) 2019.06.03
-C#- 대리자(delegate)  (0) 2019.05.28

this는 자바스크립트 객체 내부에서 자기 자신을 가리킬때 사용하는 키워드이다.

지금 콘솔창에 console.log(this)를 입력하면 window객체가 출력되는것을 확인할 수 있을것이다.

다음 코드를 살펴보자.

1
2
3
4
5
6
7
8
let elephant = {
    name : 'jane',
    gender : 'female',
    yearOfBirth : 2010,
    calculateAge : function(){
    console.log(2019 - this.yearOfBirth);
    }
}
cs

elephant.calculateAge()를 실핼하면 9가 출력된다.

그렇다면 메소드 함수의 this.yearOfBirth가 elephant.yearOfBirth라는것을 알 수 있다.

위 객체와 같은 메소드를 가진 eagle 객체가 있다고 가정하자.

eagle.calculateAge = elephant.calculateAge 후 eagle객체의 함수를 실행시켜보면 eagle 객체의 메소드가 적용되어 작동하는것을 확인 할 수 있을것이다.

주의할 점은 객체 내부에 선언되었더라도 메소드로 선언되지 않을 경우, this는 window 객체를 가리키게 되므로 반드시 메소드로 선언했을 경우에 사용 가능하다.



요 몇달간 그림을 아예 안그렸더니 손이 썩어버렸다...

이대로 복학하면 졸업을 못하게 될지도 모르니 낙서라도 매일 하는것을 목표로 하자













'그림 > 드로잉' 카테고리의 다른 글

습작  (0) 2021.10.26

Hoisting은 코드를 읽을 때 변수와 함수가 먼저 선언되는것을 말한다.


자바스크립트 코드는 크게 두 단계를 거쳐 읽힌다.

1. Creation Phase

2. Execution Phase


Creation Phase에서는 변수/객체, 스코프 체인 생성과 'this' 변수의 값을 결정한다. 

Execution Phase에서는 현재 Execution Context를 생성한 함수의 코드들을 한줄 한줄 읽어낸다.


다음 코드를 보며 이해해보자.

1
2
3
4
5
foo();
function foo(){
    console.log(x);
}
var x = 'hello!';
cs

위 코드는 undefined를 출력한다.

c언어였다면 1번라인부터 오류가 출력되었을것이다.

하지만 자바스크립트에서는 변수와 함수를 Hoisting해 현재 Execution Context의 함수 내부 코드와 변수 할당을 실행하기 전에 변수와 함수를 먼저 선언한다.

따라서 실제로는 1번라인이 실제로 싫행되기 전에 foo함수와 x변수의 선언이 완료된 후 나머지 코드를 실행 하는것이다. 





' > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

Execution Context와 Execution Stack에 대해 간단하게 알아보자.

모든 자바스크립트 코드가 작동되는 환경을 Execution Context라 한다.

간단히 말해 Execution Context는 변수 등의 정보를 저장하고, 우리가 작성한 코드들을 계산/실행하는 저장소와 같다고 보면 된다. 

다음 코드를 참고해보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var name = 'JellyBear';
 
function first(){
    var a = 'Hello!';
    second();
    var x = a + name;
}
 
function second() {
    var b = 'Hi';
    third();
    var z = b+ name;
}
 
function third(){
    var c = 'Hey!';
    var z = c + name;
}
 
first();
 
cs

첫번째 Execution Context는 전역 컨텍스트이고, 두번째는 first 함수, 세번째는 second 함수, 네번째는 third 함수이다.

이를 스택으로 쌓은것이 Execution Stack이다.

전역컨텍스트-> first -> second -> third -> (top) 순이다.

이를 third - second -first 순으로 pop해서 처리한다.

 


' > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

+ Recent posts