유니티:UI - 편집 역사

Sam: /* 앵커 */

2021-08-13T11:29:15Z

앵커

← 이전 판		2021년 8월 13일 (금) 11:29 판
38번째 줄:		38번째 줄:
	\|}		\|}

	==== 팁 ====		====팁====
	Text 오브젝트에 Shadow컴포넌트(Add Component>UI>Effects>Shadow)를 추가해 다루면 가독성이 높아진다.		Text 오브젝트에 Shadow컴포넌트(Add Component>UI>Effects>Shadow)를 추가해 다루면 가독성이 높아진다.

91번째 줄:		91번째 줄:
	\|}		\|}
	\|}		\|}

			= 배치 =
			캔버스는 게임을 실행중인 화면의 크기에 따라 달라진다. 화면 크기에 따라 캔버스 안에 배치된 UI의 모습들도 달리 배치된다. 최근엔 다양한 기기로 게임을 플레이하기 때문에 고정픽셀 크기의 요소들은 사용하지 않는다.

			== 스케일 ==

			=== 다양한 기기에 적용하기 ===
			캔버스의 인스펙터 창에서 UI Scale Mode를 Scale With Screen Size로 한다. 화면크기에 따른 스케일을 사용한다.

			Reference Resolution은 기준해상도를 의미한다.

			=== 방향 매치 ===
			일반적으로 기기에 따라 화면비율이 다르기도 하기 때문에 캔버스 크기와 같은 비율로 늘리다간 요소들이 화면 밖으로 빠져나가기도 한다. 인스펙터의 Match로 조절하는데, 폭을 기준으로 할지, 높이를 기준으로 할지 그 정도를 지정할 수 있다.

	==앵커==		==앵커==
	캔버스의 기준점을 앵커라 부른다. 캔버스의 어느 지점을 좌표계의 중심으로 잡을 것인가.		캔버스의 기준점을 앵커라 부른다. 캔버스의 어느 지점을 좌표계의 중심으로 잡을 것인가.

	Rect Transform에서 앵커 프리셋을 볼 수 있다. shift를 누르고 보면 컴포넌트에서의 기준점도 정할 수 있다.		Rect Transform에서 앵커 프리셋을 볼 수 있다. shift를 누르고 보면 컴포넌트에서의 기준점도 정할 수 있다.(alt도 뭔가 있는데...)

	앵커를 잘 이용하면 단말기마다 다른 화면 크기에서도 일관성을 유지할 수 있다.		앵커를 잘 이용하면 단말기마다 다른 화면 크기에서도 일관성을 유지할 수 있다.
103번째 줄:		116번째 줄:
	=게임메니저=		=게임메니저=
	UI를 코드로 다룰 수도 있다. 게임 규칙과 상태, UI에 띄울 데이터를 제어하는 코드를 게임메니저라 부른다.		UI를 코드로 다룰 수도 있다. 게임 규칙과 상태, UI에 띄울 데이터를 제어하는 코드를 게임메니저라 부른다.

Sam: /* 개요 */

2021-08-10T13:16:45Z

개요

← 이전 판		2021년 8월 10일 (화) 13:16 판
6번째 줄:		6번째 줄:
	여러 카메라 중 어떤 카메라를 플레이어에게 보여줄지 배정하기도 한다.		여러 카메라 중 어떤 카메라를 플레이어에게 보여줄지 배정하기도 한다.

	~~<br />~~		===작성===
			계층 창에서 우클릭을 하면 UI메뉴가 따로 있다. 클릭하면 여러 게임 오브젝트가 한번에 생긴다.

	~~===제작===~~		캔버스는 바로 게임의 창.. 카메라가 아닌,
	~~계층 창에서 우클릭을 하면 UI메뉴가 따로 있다.~~

	~~Canvas 컴포넌트를 만든다.~~ 캔버스는 바로 게임의 창.. 카메라가 아닌,


17번째 줄:		15번째 줄:

	====유의====		====유의====
	UI는 캔버스 하위에 속할 때에만 보인다.		UI는 캔버스 하위에 속할 때에만 보인다. 모든 UI는 캔버스의 자식 오브젝트가 되어야 한다.

	===Text UI===		===Text UI===
	문자열을 표시하는 UI. 폰트는 라이센스 꼭 확인!		문자열을 표시하는 UI. 폰트는 라이센스 꼭 확인!
	{\| class="wikitable"		{\| class="wikitable"
	\|+
	!세부항목		!세부항목
	!설명		!설명
32번째 줄:		29번째 줄:
	Vertical overflow		Vertical overflow
	\|칸을 넘쳐나는 문자열을 포함되지 않는데, 이걸 조절하면 칸이 넘치는 문자열도 표현할 수 있다.		\|칸을 넘쳐나는 문자열을 포함되지 않는데, 이걸 조절하면 칸이 넘치는 문자열도 표현할 수 있다.
			수평, 수직방향으로 옵션이 있다. 넘쳐날 때 줄바꿈을 할지, 자를지, 그대로 넘치게 표시할지 정한다.
	\|-		\|-
	\|Best Fit		\|Best Fit
			\|
			\|-
			\|
	\|		\|
	\|}		\|}

			==== 팁 ====
			Text 오브젝트에 Shadow컴포넌트(Add Component>UI>Effects>Shadow)를 추가해 다루면 가독성이 높아진다.

	===이미지 UI===		===이미지 UI===
97번째 줄:		101번째 줄:
	<br />		<br />

	=~~=코드로?=~~=		=게임메니저=
	UI를 코드로 다룰 수도 있다. ~~객체를 가져오는 명령을 통해서 텍스트내용을 코드에서 변경해보자~~.		UI를 코드로 다룰 수도 있다. 게임 규칙과 상태, UI에 띄울 데이터를 제어하는 코드를 게임메니저라 부른다.


	하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.<syntaxhighlight lang="c#">		하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.<syntaxhighlight lang="c#">
	//다음의 코드가 최상단에 추가되어야 한다. UI를 사용한다는 의미.		//기존 코드에 더해 다음의 코드가 최상단에 추가되어야 한다. UI를 사용한다는 의미.
	//~~UI요소를 조작하려면 이 코드가 필수이다~~.		using UnityEngine.UI; // UI관련 라이브러리.
	using UnityEngine.UI;		using UnityEngine.SceneManagement; // 씬 관련 라이브러리.

			public class GameManager : MonoBehaviour {
			public 타입명 변수명; // 필요한 변수들을 준비한다.
			public Text 변수명; // UI에 띄울 텍스트 컴포넌트. 내용변경을 위해 사용.
			public GameObject 변수명; // 특정 상황에서 활성화할 텍스트(게임오브젝트). 활성, 비활성화로만 사용.
			}

			void Start() {
			}

			public void EndGame() {
			}

	</syntaxhighlight>		</syntaxhighlight>

Sam: /* 코드로? */

2021-08-04T03:07:00Z

코드로?

← 이전 판		2021년 8월 4일 (수) 03:07 판
16번째 줄:		16번째 줄:
	캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)		캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)

	==== 유의 ====		====유의====
	UI는 캔버스 하위에 속할 때에만 보인다.		UI는 캔버스 하위에 속할 때에만 보인다.

100번째 줄:		100번째 줄:
	UI를 코드로 다룰 수도 있다. 객체를 가져오는 명령을 통해서 텍스트내용을 코드에서 변경해보자.		UI를 코드로 다룰 수도 있다. 객체를 가져오는 명령을 통해서 텍스트내용을 코드에서 변경해보자.

	하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.		하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.<syntaxhighlight lang="c#">
			//다음의 코드가 최상단에 추가되어야 한다. UI를 사용한다는 의미.
			//UI요소를 조작하려면 이 코드가 필수이다.
			using UnityEngine.UI;

			</syntaxhighlight>

2021년 8월 4일 (수) 02:53에 Sam님의 편집

2021-08-04T02:53:44Z

← 이전 판		2021년 8월 4일 (수) 02:53 판
15번째 줄:		15번째 줄:

	캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)		캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)

			==== 유의 ====
			UI는 캔버스 하위에 속할 때에만 보인다.

	===Text UI===		===Text UI===

2021년 8월 2일 (월) 09:16에 Sam님의 편집

2021-08-02T09:16:09Z

← 이전 판		2021년 8월 2일 (월) 09:16 판
3번째 줄:		3번째 줄:
	==개요==		==개요==
	게임 메뉴나 스테이터스 등을 표시하기 위한 정보제공기능.		게임 메뉴나 스테이터스 등을 표시하기 위한 정보제공기능.

			여러 카메라 중 어떤 카메라를 플레이어에게 보여줄지 배정하기도 한다.

	<br />		<br />

Sam: /* 개요 */

2021-08-02T05:52:52Z

개요

← 이전 판		2021년 8월 2일 (월) 05:52 판
2번째 줄:		2번째 줄:

	==개요==		==개요==
			게임 메뉴나 스테이터스 등을 표시하기 위한 정보제공기능.

	<br />		<br />

90번째 줄:		92번째 줄:
	<br />		<br />

	== 코드로? ==		==코드로?==
	UI를 코드로 다룰 수도 있다. 객체를 가져오는 명령을 통해서 텍스트내용을 코드에서 변경해보자.		UI를 코드로 다룰 수도 있다. 객체를 가져오는 명령을 통해서 텍스트내용을 코드에서 변경해보자.

	하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.		하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.

2020년 9월 11일 (금) 05:52에 Sam님의 편집

2020-09-11T05:52:06Z

← 이전 판		2020년 9월 11일 (금) 05:52 판
1번째 줄:		1번째 줄:
	{{유니티}}		{{유니티}}

	== 개요 ==		==개요==
	<br />		<br />

	=== 제작 ===		===제작===
	계층 창에서 우클릭을 하면 UI메뉴가 따로 있다.		계층 창에서 우클릭을 하면 UI메뉴가 따로 있다.

12번째 줄:		12번째 줄:
	캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)		캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)

	=== Text UI ===		===Text UI===
	문자열을 표시하는 UI. 폰트는 라이센스 꼭 확인!		문자열을 표시하는 UI. 폰트는 라이센스 꼭 확인!
	{\| class="wikitable"		{\| class="wikitable"
30번째 줄:		30번째 줄:
	\|}		\|}

	=== 이미지 UI ===		===이미지 UI===
	소스이미지를 가져다 넣어야 한다. 이미지 파일을 끌어다 넣으려면, 이미지 타입을 Sprite로 바꾼 후에 넣어주어야 한다.		소스이미지를 가져다 넣어야 한다. 이미지 파일을 끌어다 넣으려면, 이미지 타입을 Sprite로 바꾼 후에 넣어주어야 한다.
	{\| class="wikitable"		{\| class="wikitable"
39번째 줄:		39번째 줄:
	\|이미지타일을 만들거나, 하나의 이미지를 조정하거나 Filled를 통해 이미지 트렌젝션을 할 수도 있겠다. 혹은, 쿨타임 효과 구현에 쓰인다.		\|이미지타일을 만들거나, 하나의 이미지를 조정하거나 Filled를 통해 이미지 트렌젝션을 할 수도 있겠다. 혹은, 쿨타임 효과 구현에 쓰인다.
	\|-		\|-
	\|Set Native Size		\|Set Native Size
	\|본래 이미지 크기와 동일하게 수정한다.		\|본래 이미지 크기와 동일하게 수정한다.
	\|-		\|-
46번째 줄:		46번째 줄:
	\|}		\|}

	=== 버튼 UI ===		===버튼 UI===
	클릭이벤트를 가진 반응형 UI이다. TextUI를 포함하고 있다. 이미지 스크립트를 컴포넌트로 갖고 있다.		클릭이벤트를 가진 반응형 UI이다. TextUI를 포함하고 있다. 이미지 스크립트를 컴포넌트로 갖고 있다.
	{\| class="wikitable"		{\| class="wikitable"
81번째 줄:		81번째 줄:
	\|}		\|}

	== 앵커 ==		==앵커==
	캔버스의 기준점을 앵커라 부른다. 캔버스의 어느 지점을 좌표계의 중심으로 잡을 것인가.		캔버스의 기준점을 앵커라 부른다. 캔버스의 어느 지점을 좌표계의 중심으로 잡을 것인가.

87번째 줄:		87번째 줄:

	앵커를 잘 이용하면 단말기마다 다른 화면 크기에서도 일관성을 유지할 수 있다.		앵커를 잘 이용하면 단말기마다 다른 화면 크기에서도 일관성을 유지할 수 있다.

			<br />

			== 코드로? ==
			UI를 코드로 다룰 수도 있다. 객체를 가져오는 명령을 통해서 텍스트내용을 코드에서 변경해보자.

			하위요소를 불러오려면 기존 불러오는 방식 뒤에 Inchildren까지 붙여주어야 한다.

Sam: 새 문서: {{유니티}} == 개요 ==
=== 제작 === 계층 창에서 우클릭을 하면 UI메뉴가 따로 있다. Canvas 컴포넌트를 만든다. 캔버스는 바로 게임의 창...

2020-09-07T12:07:27Z

새 문서: {{유니티}} == 개요 == <br /> === 제작 === 계층 창에서 우클릭을 하면 UI메뉴가 따로 있다. Canvas 컴포넌트를 만든다. 캔버스는 바로 게임의 창...

새 문서

{{유니티}}

== 개요 ==
<br />

=== 제작 ===
계층 창에서 우클릭을 하면 UI메뉴가 따로 있다.

Canvas 컴포넌트를 만든다. 캔버스는 바로 게임의 창.. 카메라가 아닌,

캔버스에 가까운 것이 상위에 위치한다.(레이거 같은 느낌으로)

=== Text UI ===
문자열을 표시하는 UI. 폰트는 라이센스 꼭 확인!
{| class="wikitable"
|+
!세부항목
!설명
|-
|Line Spacing
|행바꿈을 할 때 몇 줄을 띄울 것인가.
|-
|Horizental overflow
Vertical overflow
|칸을 넘쳐나는 문자열을 포함되지 않는데, 이걸 조절하면 칸이 넘치는 문자열도 표현할 수 있다.
|-
|Best Fit
|
|}

=== 이미지 UI ===
소스이미지를 가져다 넣어야 한다. 이미지 파일을 끌어다 넣으려면, 이미지 타입을 Sprite로 바꾼 후에 넣어주어야 한다.
{| class="wikitable"
!세부항목
!설명
|-
|Image Type
|이미지타일을 만들거나, 하나의 이미지를 조정하거나 Filled를 통해 이미지 트렌젝션을 할 수도 있겠다. 혹은, 쿨타임 효과 구현에 쓰인다.
|-
|Set Native Size
|본래 이미지 크기와 동일하게 수정한다.
|-
|
|
|}

=== 버튼 UI ===
클릭이벤트를 가진 반응형 UI이다. TextUI를 포함하고 있다. 이미지 스크립트를 컴포넌트로 갖고 있다.
{| class="wikitable"
!세부항목
!설명
|-
|Interactable
|반응 하느냐?
|-
|Transition
|
{| class="wikitable"
|+
!
!
!
|-
|Color Tint
|상황에 따라 버튼 색을 바꾼다.
|Highlighted Color
Pressed Color 눌렀을 때 색

Color Multiplier 색을 어떻게 섞을 것인가?
|-
|Navigation
|방향성. 탭 키를 누르면 어디로 갈 것이냐?
|Automatic으로 해두는 게 간편할듯.
|-
|On Click()
|작동 함수를 넣을 수 있따.
버튼을 누르고 떼기가 한 동작.
|함수를 넣은 후에 넣어줄 변수를 설정한다.
|}
|}

== 앵커 ==
캔버스의 기준점을 앵커라 부른다. 캔버스의 어느 지점을 좌표계의 중심으로 잡을 것인가.

Rect Transform에서 앵커 프리셋을 볼 수 있다. shift를 누르고 보면 컴포넌트에서의 기준점도 정할 수 있다.

앵커를 잘 이용하면 단말기마다 다른 화면 크기에서도 일관성을 유지할 수 있다.

유니티:UI - 편집 역사

Sam: /* 앵커 */

Sam: /* 개요 */

Sam: /* 코드로? */

2021년 8월 4일 (수) 02:53에 Sam님의 편집

2021년 8월 2일 (월) 09:16에 Sam님의 편집

Sam: /* 개요 */

2020년 9월 11일 (금) 05:52에 Sam님의 편집

Sam: 새 문서: {{유니티}} == 개요 == === 제작 === 계층 창에서 우클릭을 하면 UI메뉴가 따로 있다. Canvas 컴포넌트를 만든다. 캔버스는 바로 게임의 창...

Sam: 새 문서: {{유니티}} == 개요 ==
=== 제작 === 계층 창에서 우클릭을 하면 UI메뉴가 따로 있다. Canvas 컴포넌트를 만든다. 캔버스는 바로 게임의 창...