Download - 유니티로 flappy brid 만들기(Unity 5.1)

Flappy Bird 만들기창원대학교 정보통신공학과

김대호 & 박동규 http://ivis.cwnu.ac.kr/tc/dongupak/

1

http://ivis.cwnu.ac.kr/tc/dongupak/

Flappy Bird 란?

• 베트남의 Dong Nguyen이 만든 iOS, 안드로이드용 모바일 게임

• 중독성이 강하고 단순한 점프액션게임의 한 종류

2

Flappy Bird 란?

• 관련 동영상

• http://www.youtube.com/watch?v=fQoJZuBwrkU

• http://www.youtube.com/watch?v=sf2nFL9Z3v0

• http://www.youtube.com/watch?v=UZXWp83gtog

3

http://www.youtube.com/watch?v=fQoJZuBwrkU

http://www.youtube.com/watch?v=sf2nFL9Z3v0

http://www.youtube.com/watch?v=UZXWp83gtog

순서

• 배경화면 만들기

• FlappyBrid 와 Cactus 만들기

• 충돌반응(GameManager)

• 소리효과

• GUI(점수) 만들기

• Intro,GameOver Scene

4

새 프로젝트 만들기

5

리소스 받기

• 유니티 버전 5.1 기준

• 유니티 Project 만들기

• FlappyBird라는 이름의 프로젝트를 만들자

• http://ivis.cwnu.ac.kr/tc/dongupak/263

• 홈페이지에 올려 놓은 Resource 파일을 받아 Project 창에 Import한다

• 리소스에는 게임 텍스쳐. 사운드, 애니메이션, iTween이라는 Tweening script가 있다.

6

http://ivis.cwnu.ac.kr/tc/dongupak/263

리소스 복사

Drag & Drop

8

배경화면 만들기

Hierarchy 창에서 Plane을 두 개 생성 후 각각의 이름을

bgBack, bgGround로 이름 변경

9


리소스 파일의 Assets/Textures/ForLoop에서 bg_2파일을 bgBack에, Ground 파일을 bgGround

에 각각 맵핑을 합니다

Position: 위치 Rotation:회전각 Scale:크기

Unlit/Transparent:하얀색으로 덮힌 부분을 투명 처리해 줌

Tilling: 축의 방향으로 이미지의 갯수를 생성 Offset:축의 방향으로 위치를 잡아 해당 지점의 위

치부터 보여줌10


리소스 파일의 Assets/Textures/ForLoop에서 Ground 파일을 BG_ground에

각각 맵핑을 합니다

11


Orthographic: 원근감이 없는 환경 Size를 3으로한다-카메라의 크기 숫자가 작을 경우

시야가 좁아진다

12

결과

13

배경화면 만들기(ScrollMove)

Project 창에 Folder를 생성 후 Script라는 이름으로 변경

14


Project 창에 Create-> C# Script 생성 *ScrollMove.cs

//targetOffset 은 시간에 따라 속력을 곱하므로 시간에 따라

Offset 값이 바뀜

ScrollMove.cs를 bgBack,bgGround

오브젝트에 연결시켜줌

15


bgBack은 -0.1 bgGround는 -3

의 속력을 각각 넣는다

16

결과

뒷배경과 앞배경이 원근을 가지고 움직이는 것을 볼 수있다.

17

배경 그룹

18

선인장 만들기

Create -> Create Empty로 Hierarchy에 GameObject를 생성

Project창에 Sprite 폴더의 cactus 파일을 GameObject의 하위객체로 총 3개를 넣는다

19

선인장 만들기GameObject의 이름을 CACTUS로 변경

2개 객체는 Cactus로, 1개는 Goal로 바꾸고 위아래 Cactus를 2개

중간 Goal을 1개 생성한다

Cactus 객체는 게임상에서 충돌을 피해야할 장애물이며 Goal은 통과해야할 지점의 객체이다

20

선인장 만들기

Goal 의 Sprite Renderer 체크 해제하여 게임창에 이미지가 보이지않도록한다.

Position을 설정하고 난 후 게임화면에 나타나는 Cactus와 Goal의 모습, Goal은 게임객체로는 존재하나 화면에는 보

이지(rendering) 않는다

21

선인장 만들기(CactusMove)

//선인장 장애물의 속도

//왼쪽으로 속도값 만큼 움직임

//y축은 랜덤값을 주어서 높낮이가 랜덤으로 생성됨

오브젝트포지션이(x축) -6을 넘어설때 객체는 사라짐

OnEnable() : Start() 함수보다 먼저 선언되는 메서드 객체를 초기화 시켜주는 메서드

22

선인장 만들기(CactusMove)

연결시킴

속도 값을 입력

23

실행

24

Prefab

Prefab 만들기

Prefab - 미리 만들어둔 객체로 반복사용시에 매우 편리함

25

선인장 만들기(Prefab폴더)

Script로 연결된 CACTUS를 Project Prefab 폴더를 생성하여 이동시키면 자동으로 프리팹이 만들어짐

프리팹이란? 게임 오브젝트의 생성과 관리를 수월하게 해주는 일종의 설계도면

26

Flappy Bird 만들기GameObject->Create Empty를 통해

빈 오브젝트를 만들고 이름을 BIRD 로 지정

Sprite폴더에 bird_A_01을 BIRD 의 하위객체로 지정후

이름을 Bird로 함

27

Flappy Bird 만들기

새의 크기를 크게 설정함

Inspector창에 Add Component에서 Animator(철자 주의)를 추가시킴

Bird의 오브젝트 설정

28

Flappy Bird 만들기

Animation 폴더의 Bird 애니메이션을 Animator아래의 Controller에 넣음

29

결과

…………

30

Bird.cs 스크립트

//점프 파워//새 이미지

// 마우스를 클릭했을 경우 점프

// Awake 함수는 스크립트 객체의 라이프타임 동안 단 한번만 호출 게임이 시작 할 때 객체를 초기화 시키는기능

// 새가 점프했을 경우 새의 LookDirection을 변화시켜 Y축으로 회전시켜주는 기능

주의 : GetComponents가 아님

31

Bird.cs 스크립트의 적용

Bird.cs 스크립트를 BIRD에 적용한 후

32

BIRD 객체의 스크립트 Bird.cs

Bird는 Bird.cs 스크립트의 ImageBird 객체와 연결시킵니다.

33

Flappy Bird(Bird.cs)

BIRD에 rigidbody 컴포넌트를 추가시킨다.

34

테스트

터치입력에 반응

35

충돌반응(GameManager.cs)

빈 GameObject 생성하고 이름을 MANAGER 이라 만듦

새 스크립트를 생성하여 GameManager.cs 라고

하자

MANAGER 객체는 게임의 상태관리를 위하여 사용할 것이다.

36

GameManager?

• 게임의 전반적인 동작을 로직하고 관리하는 게임구동의 핵심적인 역할

• 게임의 준비, 종료, 시작을 모두 처리함.

• 게임이 준비상태인지, 게임중인지, 종료되었는지를 체크하는 상태변수를 이용하여 각 상태에 따른 화면의 제어와 객체의 제어를 수행한다

37

충돌반응(GameManager.cs)

//장애물 오브젝트

//InvokeRepeating : 메소드를 일정 시간마다 호출시켜주는 함수

// cactus 라는 게임 객체를 생성함

// ready 변수는 차후 게임이 종료되었는가를 구분하는 변수로 사용

38

충돌반응(Tag 설정)

Cactus를 클릭 후 Inspector -> Add Tag를 하여 Tag를 추가시킴

39

Tag?

40

충돌반응(Tag 설정)중간부분인 Goal과

위아래 Cactus 두가지를 생성

Cactus 객체 두 개는 Cactus로 Goal 객체는 Goal로 태그지정

41

충돌반응(Collider 입히기)

CACTUS 하위객체를 모두 선택한후 Box Collider를 입힘

42


Is Trigger는 ON으로 설정하고 Box Collider Size Z 값을 10 으로 변경

설정을 다한 CACTUS를 prefab으로 다시 맵핑

43


44


Prefab의 CACTUS를 GameManager Cactus에 연결시켜준다

45

중간결과

반복생성되는 선인장-장애물46


BIRD 객체를 클릭한후, Add Component의 Sphere Collider를 생성한다

Is Trigger는 OFF Radius는 0.35로 맞춰준다

47


bgGround는 충돌반응을 인식하기위해 IsTrigger를

ON으로하고 태그를 Cactus로 한다

48

테스트

• Collider의 Is Trigger속성

• Is Trigger 속성이 On 되어 있으면 솔리드 객체처럼 행동하지 않는다

• Is Trigger가 On으로 되어 있으면 바닥과의 충돌시 Trggering은 되지만 물리적으로 뚫고 지나가는 것을 막지는 못함

• Is Trigger 속성이 Off로 되어 있으면 Bird 객체는 바닥을 뚫고 지나가지 못함

49


바닥을 뚫고 지나가는 것을 막기위해 bgBack에서

Box Collider를 입히고 is Trigger는 OFF로 한다

50

Is Trigger속성 - On

물리적으로 뚫고지나가는 것을 막지 못함

51

Is Trigger속성 - Off

물리적으로 뚫고지나가는 것을 막음

52

충돌반응(OnTriggerEnter) 추가

OnTriggerEnter() 메소드는 is Trigger가 On인 상태에서 충

돌을 감지함

Tag 값이 Cactus이면 아래로 떨어지게 됨

*Bird.cs

53

OnTriggerEnter

• Collider 객체의 Is Trigger 가 On 되었을 시 충돌을 감지함

• 충돌이 감지되면 OnTriggerEnter 메소드가 충돌 이벤트를 처리함

• 매개변수 Collider는 충돌한 객체임

• Collider 객체의 Is Trigger 가 Off되면 객체를 뚫고 지나지 못함

54

충돌반응(게임시작,종료)

BIRD 객체에서 use Gravity를 비활성화 시킨다

-> 최초상태는 중력에 영향을 받지않아 떨어지지 않게 된다

55


마우스 클릭이 발생하고 ready가 true일때 UseGravity가 활성화되어 게임이 시작된다

GameManger.cs

게임의 종료를 알려주는 변수

게임을 종료시키는 GameOver() 메서드에서는

MakcCactus 메서드의 Invoke를 중지시켜 더 이상 선인장이 화면에 나타나지 않게한다

56


Game Play

Game Ready

Game End

ready = true end = false

ready = false end = false

ready = false end = true

57


// end가 false 일 경우만 점프가 가능하다.

Bird.cs

58


Game Play


59


Cactus와 충돌되었을 때 GameManager의 GameOver() 메서드를 호출한다.

호출

Bird.cs GameManager.cs

Game Play

Game End


ready = false end = true

60

충돌반응(iTween)

• 오픈소스로 제공하는 스크립트

• Bob Berkebile 제작

• 애니메이션 이나 오브젝트의 움직임을 관리해준다.

61


iTween.cs를 Script폴더에 넣는다.

GameManager.cs에 GameOver() 메소드에서 iTween의 메서드를 호출한다.

실행 후 게임이 종료되면 화면이 흔들리는 것을 알 수 있다.

62


충돌효과를 내기 위해 x,y 축으로 0.2만큼 0.5초의 짧은 시간에 카메라를 흔든다.

63

최종결과

버튼이 누르면 게임이 시작되며 충돌반응이 일어났을 때 게임이 종료되고

화면이 고흔들리고 Flappy Bird가 바닥에 떨어지면 움직일 수 없는 상태가 된다.

64

소리효과(Jump Sound)

BIRD를 클릭 후 Add Component에 Audio Source를 추가시킴

65


Audio Source 영역의 Audio Clip에 Sounds 폴더의 Jump 파일을 넣음

66


// 오디오 소스 컴포넌트를 Play()한다

Bird.cs

67

소리효과(Death, Goal)

Bird.csGameManager.cs

68


MANAGER 에서 Audio Source 를 추가

69


Death Sound Goal Sound에 각각 소리를 집어넣음

70

CACTUS 객체 삭제

화면에 나타난 CACTUS 는 삭제하도록 하자

71

점수

Game상태가 end가 아니면 점수가 증가하도록 수정

72

GUI 객체 생성

• 점수, 사용자 정보등을 알리기 위한 그래픽 사용자 인터페이스 설계

73

Score에 Text Mesh추가

Score에서 Add Component를 눌러서 Text Mesh를 추가시킴

Empty GameObject를 생성하여 이름을 Score로 바꿈 GUI의 하위객체로 지정

Empty GameObject를 생성하여 이름을 GUI로 바꿈

74

Score(점수)

설정에 맞게 조정함

slkscre 글꼴을 넣어줌

75

결과

76

GUI(GameManager.cs)

//Goal 지점을 통과했을때 점수가 1점 플러스됨

77

GUI(점수)

MANAGER의 GameManager에 Score Text에 Score를 연결시킴

78

Intro SceneSprite 폴더에 있는 ready와 ready_image를 각각

GUI의 하위객체로 만듬

이름을 ready는 GetReady로

ready_image는 ReadyTap으로 바꿈

79

Intro Scene

Game 스크린상에서 잘보이도록 객체의 Position 과 Scale을 잘 설정해준다.

80

Intro Scene

GameManger.cs에서 시작전의 이미지를 사라지게 하게 만들어주는 코드이다

GameManager.cs

Alpha 값이 0.5초만에 0으로 사라지게 된다.

81

Intro Scene

각각의 이미지를 연결시켜준다

82

BIRD와 Score 위치조절

83

Intro Scene이제 화면을 탭하면 이미지가 0.5초만에

사라지고 게임이 시작된다.

84

GameOver Scene

GameOver 스프라이트를 GUI의 하위객체로 설정한다

85

GameOver Scene

GameOver객체를 GetReady 뒤에 설치하고 알파값을 1로하여 투명하게 만들어준다

(알파값을 0으로 하면 불투명상태가 되지 않으므로 주의가 필요함)

86

GameOver Scene

GameManager.cs에서 GameOverImage를 참조하여

iTween 메서드를 통해 alpha값을 1에서 255로 바꿔준다.

(투명->불투명 이미지가 됨)

GameManager.cs

87

GameOver Scene

GameOver image를 Game Over Image변수와 연결해준다.

88

결과

89

점수관리

1.빈 오브젝트를 생성후 FinalWindow라 하고 2.Finish_Window를 그 하위객체로 생성한다. 이

름을 FinishWindow로 수정함

90

점수관리

Score 텍스트를 두번 복사(Comm+D)하여 각각 BestScore,FinalScore로 만든 후 FinalWindow 하위객체로 생성

화면 아래로 이동

91

점수관리FinalWindow(상위)

FinishWindow(하위)

BestScore FinalScore

92

결과보기

Perspective Orthographic

93

결과

Scene창에서 Game 화면 밑에 설치를해준다

94

점수관리

게임이 종료되었을시 iTween을 이용하여 점수판 윈도우(finalWindow)를 이동시키는(MoveTo) 기능을 호출한다.

GameManager.cs

95

점수관리

MANAGER 스크립트에 연결시켜준다

96

리플레이

PlayButton 스프라이트를 FinalWindow의 하위객체로

생성시킨다

97

리플레이 버턴의 속성

PlayButton 의 Inspector창에 Add Component에서

Box Collider를 입혀 충돌감지기능을 입힌다

98

리플레이

Project창에서 C# 스크립트를 하나 생성하고 파일 이름을 ResetScene으로 하여 위의 코드를

입력한다

ResetScene.cs

99

점수관리

PlayButton에 ResetScene 스크립트를 입힌다

100

점수관리new 스프라이트를

FinalWindow 하위객체로 생성하고 이름을 ImageNew로 한다

그리고 BEST 글자 옆에 위치시키도록한다

101

점수관리

GameManager.cs에 다음 코드를 추가한다.

GameManager.cs

최고점수(best score)가 갱신되면 NEW라는 이미지가 bestScoreText 점수에 표시되도록 해보자

102

점수관리현재 Score가 BestScore이면

ImageNew를 Active 시키고 아니면 Active 시키지 않는다.

GameManager.cs

103

PlayerPrefs 클래스

• PlayerPrefs 클래스는 게임세션중에 필요한 정보를 저장하고 읽어오는 클래스이다

• 각 운영체제마다 게임정보를 저장하는 디렉토리는 다를 수 있다.

• 여기서는 게임점수를 정수값으로 저장하고 읽어오는 역할을 한다

104

점수관리

FinalScore는 Final Score Text로 BestScore는 Best Score Text로

ImageNew는 Image New로 연결시킨다 이제 GameManage.cs 스크립트의 Final Score Text는

FinalScorer 객체를 참조하게 된다105

GameOver()의 중복호출Tag 값 : Cactus

Tag 값 : Cactus

충돌시 GameOver() 호출

충돌시 GameOver() 호출

선인장과 부딛혀 GameOver()가 호출 되고 바닥에 닿을때 또 GameOver()가 호출되는 것을 방지하여야 함106

GameOver()의 중복호출 방지

GameManager.cs 를 수정하세요

107

결과

108

추가구현

• Cactus 가 두 묶음, 세 묶음씩 랜덤하게 나타나도록 코드를 수정하시오

• 각 묶음에 따라 점수가 다르게 올라가도록 하시오

• Cactus가 랜덤하게 아래위로 요동치도록 기능을 구현하시오

• 랜덤하게 Gold 아이템이 Goal에 나타나도록 프로그램을 수정하시오.

• Gold 아이템 획득시 보너스 점수 5점 추가

109

Q & A

자료의 잘못된 부분은 [email protected]으로 알려주세요

110