브릿지 Unity3D 기초 스터디 3회

Unity3D 초급스터디
3회차 `15. 10. 10.
대학연합게임제작동아리 브릿지

스터디 일정 및 커리큘럼
• 9월 12일 : 유니티 소개 및 에디터 조작법
• 9월 19일 : Sprite, Animation, Physics 기초
• 10월 10일 : Unity UI, GameManager
• 10월 24일 : Animation Controller, Timer
• 10월 31일 : 슈팅 게임 개발
• 11월 7일 : 2D 게임 완성(마녀이야기)

지난 시간
• 프로그래밍 시스템
• 스프라이트, 2D 애니메이션 기초
• 물리시스템
• 스테이지 관리
• Blinkz 실습

uGUI
• 유니티의 새로운(?) GUI 시스템 
- 새롭다고 하기에는... 
- 4.6 이상 버전부터 사용가능
• 자세한 내용은 
- http://www.slideshare.net/gukhwanji/46-gui

Canvas
• 모든 UI element를 포함하는 게임오브젝트. Canvas라는 컴포넌
트를 가진다.
• 씬 뷰에서 직사각형 형태 
- 게임 뷰에서 보이는 영역
• Screen Space : 화면을 기준으로 UI 그림 
World Space : 필드에 세팅 가능. 오브젝트 영향 받음
• Canvas Scaler 
- Contant Pixel Size : 스크린 사이즈를 바탕으로 
- Scale with Screen Size : 스크린 사이즈를 지정

Rect Transform
• UI 성분들을 위한 새로운 트랜스폼 컴포넌트 
- Pivot : 회전이나 이동 시 쓰이는 기준점 
- Stretch : 화면의 사이즈에 따라 변경될 기준점
• http://docs.unity3d.com/Manual/UIBasicLayout.html

Text
• 흔히 알고 있는 Label
• 폰트, 사이즈 등 여러 정보 수정
가능
• Vertical, Horizontal Overflow
주의

Image
• 스프라이트의 기능을 담당하는 UI Element
• Image type 
- Simple : 기본 
- Sliced : 3x3으로 분할. 가장자리 부분이 깨지지 않게 
- Tiled : 스프라이트가 반복 
- Filled : 부분적으로 스프라이트 보여줌

Interaction Components
• Button 
버튼이 눌릴 때 이벤트 처리
• Toggle 
True/False로 이벤트 처리
• Slider 
OnValueChanged

Depth
• 유니티 기존 GUI (4.6이전 버전) 
- Z축 값 조절
• NGUI 
- Depth넘버로 조절
• uGUI 
- 하이어라키 뷰 순서조절

Sprite Packer
• Atlas 생성 
- 드로우콜을 줄이기위해
• 드로우콜? 
- 오브젝트를 화면에 그리
기 위해서 엔진이 그래픽
API에 그리기를 요청하는
횟 수

실습(1)
• card1 ~ card12 이미지를 스프라이트 패커로 묶기 
- packingTag 지정

실습(2)
• UI 이미지, 버튼을 활용해서 다음과 같은 화면 구성 
- canvas size : 800x600 
- image size : 80x80

Game Manager
• 카드 뒤집기 게임
• GameManager 스크립트를 만들자. 
- UI 게임오브젝트 (카드 24장) 
- 카드 앞면 스프라이트 12개, 뒷면 1개 
- 현재 상태 관리 
- 맞춘 카드 갯수 
- 첫번째 선택한 카드, 두번째 선택한 카드

오브젝트 참조
• public으로 선언 후 인스펙터창에 하나씩 집어넣는 방법
• 스크립트로 불러오는 방법
• 배열로 불러오자! 
public GameObject[] cards1 = new GameObject[24];
• List, ArrayList 
using System.Collections.Generic; 
추가, 수정, 삭제 용이

Generic
• 클래스 내부에 사용할 데이터 타입을 외부에서 지정하는 기
법 Java의 Generic, C++의 Templete
• List<GameObject> cards2 = new List<GameObject>();

오브젝트 참조
• 캔버스 아래에 “cards”라는 빈 오브젝트 생성 
- 나머지 카드들을 모두 “cards”의 자식으로 집어넣음
• // 이름이 “cards”인 오브젝트를 검색 
GameObject o = GameObject.Find(“cards”); 
// o의 자식 오브젝트들을 모두 cards2에 추가 
for(int i=0; i<o.transform.childCount; i++){ 
GameObject card = o.transform.getChild(i).gameObject; 
cards2.Add(card); 
}

리소스 참조
• 마찬가지로 public으로 선언뒤 인스펙터 창에서 입력
• 스크립트로 불러오는 방법 
Asset/Resources/ “경로이름”
• ex) 
Resources.Load(“cards1”, typeof(Sprite)) as Sprite

리소스 참조
• backSprite = Resources.Load("back1", typeof(Sprite)) as
Sprite;
• for(int i=0; i<12; i++){ 
string fileName = string.Format(“card{0}”,i+1); 
Sprite sprite = Resources.Load(fileName,
typeof(Sprite) as Sprite; 
sprites.Add(sprite); 
 
//sprites.Add(Resources.Load(string.Format("card{0}",i+1), typeof(Sprite)) as Sprite); 
}

버튼 이벤트 등록
• public void CardClick(GameObject o){ 
//일단 만들어놓고! 
}
• 오브젝트마다 하나씩 집어넣어보자

버튼 이벤트 스크립트로 등록
• 귀찮으면 스크립트로.. 근데 좀 복잡함 ㅠ
• 여러 매개변수 전달, 반복 작업이 간편화
• System.Action (Action Delegate) 
- C# 문법… 알면 좋으나 일단 그냥 패쓰!! 
- https://mmxbong9.wordpress.com/2014/09/02/c-action-
과-delegate-람다식-action-func-event/

스프라이트를 바꿔보자
• GetComponent : 인스펙터 부의 컴포넌트를 스크립트로 가
져옴
• UI 컴포넌트를 사용하려면 using UnityEngine.UI;
• void CardClick(GameObject o){ 
o.GetComponent<Image>().sprite = sprites[0]; 
}

Card 클래스
• Sprite front // 앞면 스프라이트
• Sprite back // 뒷면 스프라이트
• bool isFront // 앞인가?
• void Awake(){ 
front = null; back = null; isFront = false; 
}
• GameManager에서 한꺼번에 만들어주자!!!

Card 클래스
• public void Setup(Sprite front, Sprite back){ 
this.front = front; 
this.back = back; 
isFront = false; 
}
• public void CardOpen(){ 
if(isFront){ 
this.GetComponent<Image>().sprite = back; 
}else{ 
this.GetComponent<Image>().sprite = front; 
} 
isFront = !isFront; 
}

Game Manager 클래스
• Start()에 아래 코드 추가 
- card오브젝트에 Card컴포넌트를 추가하고, 카드 뒷면 이
미지랑 앞면이미지(랜덤) 추가
• card.AddComponent<Card>().Setup(backSprite, 
sprites[Random.Range (0,12)]);
• CardClick 함수 변경 
void CardClick(GameObject o){ 
o.GetComponent<Card>().CardOpen(); 
}

(실습3) 여기까지 구현!
• 클릭하면 미리 생성된 랜덤 앞면 보여주기
• 다시 클릭하면 뒷면 됨

카드 Shuffle
• 미리 나열된 배열을 하나 만듬 
[0, 0, 1, 1, 2, 2, 3, 3, ... , 10, 10, 11, 11] (size : 24)
• 위의 배열의 순서를 섞어 버린다!

카드 Shuffle
0 1 2 3 4 5
기준 나머지 중 랜덤으로 하나 선택
4 1 2 3 0 5
자리 교환!

카드 Shuffle
4 1 2 3 0 5
4 5 2 3 0 1
자리 교환!

카드 Shuffle
4 5 2 3 0 1
4 5 3 2 0 1
자리 교환! 
반복!

카드 Shuffle
• 이렇게 섞임 
[10, 1, 3, 2, 4, 2, ... , 1, 11, 5]
• int[] index = new int[24]; 
for(int i=0; i<24; i++){ 
index[i] = i/2; 
} 
for(int i=0; i<23; i++){ 
int randNum = Random.Range(i+1, 24); 
int temp = index[randNum]; 
index[randNum] = index[i]; 
index[i] = temp; 
}

(실습4) Shuffle 적용하기
• 앞에서 작성한 코드에 Shuffle 알고리즘을 추가
• 모든 카드가 한 쌍씩 세트가 되도록

Invoke
• Invoke(“함수이름”, 실행할 시간)
• ex) Invoke(“CardOpen”, 1f) 
CardOpen함수를 1초뒤에 실행하라.

Button
• o.GetComponent<Button>().interactable = false; 
- 버튼이 비활성화 됨.
• o.GetComponent<Button>().interactable = true; 
- 버튼이 활성화 됨.

(실습5) 1초동안 버튼 비활성화
• 카드 2개를 오픈 하면 1초간 모든 버튼이 비활성화 되도록
함.
• 1초가 지나면 (정답을 제외한) 모든 버튼 활성화

[과제] 카드뒤집기 게임 완성
• 게임 시작하면 5초간 카드의 앞면을 보여주고 다시 뒤집힘 
- Invoke활용
• 카드를 차례대로 선택. 두번째 카드가 선택되면 1초간 보여
주고 정답 판별 
- 정답 : +500점 
- 오답 : -100점
• 점수는 UI의 Text를 활용하여 화면에 배치

[과제] 카드뒤집기 게임 완성
• 게임 클리어 : 모든 카드를 찾았을 때
• 게임 오버 : -1000점이되었을때
• 5초 뒤 게임 재시작.

브릿지 Unity3D 기초 스터디 3회

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à 브릿지 Unity3D 기초 스터디 3회

Similaire à 브릿지 Unity3D 기초 스터디 3회 (20)

브릿지 Unity3D 기초 스터디 3회