flappy bird 만들기 세미나 자료

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

!김대호 & 박동규

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

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

Flappy Bird 란?

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

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

Flappy Bird 란?

• 관련 동영상

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

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

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

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

리소스 받기• 유니티 Project 만들기

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

•

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

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

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


리소스 받기

Drag & Drop

배경화면 만들기

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

bgBack, bgGround로 이름 변경


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

bgGround에 각각 맵핑을 합니다

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

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

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

치부터 보여줌


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

BG_ground에 각각 맵핑을 합니다


Directional Light를 추가시켜 밝게 보이도록 합니다.


Orthographic: 원근감이 없는 환경 Size: 카메라의 크기 숫자가 작을 경우 시선이 좁아

진다

결과

배경화면 만들기(ScrollMove)

Project 창에 Folder를 생성후 Script폴더를 만듬


Project 창에 Create-> C# Script 생성

*ScrollMove.cs

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

Offset 값이 바뀜

ScrollMove.cs를 bgBack,bgGround 오브젝트에 연결시켜줌


bgBack은 0.1 bgGround는 3

의 속력을 각각 넣는다

결과

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

선인장 만들기GameObject -> Create Empty로 Hierarchy에 GameObject를 생성

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

선인장 만들기GameObject의 이름을 CACTUS로 바꾸고 위아래 Cactus를 2개

중간이 Goal를 1개 생성한다

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

선인장 만들기

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

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

보이지 않는다

선인장 만들기(CactusMove)

//선인장 장애물의 속도

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

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

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

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

선인장 만들기(CactusMove)

연결시킴

선인장 만들기(Prefab)

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

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

Flappy Bird 만들기GameObject->GameEmpty를 통해

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

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

이름을 Bird로 함

Flappy Bird 만들기

새의 크기를 맞게 설정함

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

Bird의 오브젝트 설정

Flappy Bird 만들기

Animation폴더의 Bird 애니메이션을 Animator에 집어넣음

결과

…………

Flappy Bird(Bird.cs)

//점프 파워

//새 이미지

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

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

기능

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


Bird.cs 스크립트를 Bird에 입힌 후


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


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

충돌반응(GameManager.cs)

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

새 스크립트를 생성하여 GameManager.cs를 만듦

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

GameManager?

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

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

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

충돌반응(GameManager.cs)

//장애물 오브젝트

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

ready 변수를 쓰는이유?? 메소드 호출의 중복을 막기위한 코드 또한 차후 게임 진행요소에 기여함

ready 변수는 차후 게임이 종료되었는가를 구분하는 변수로 쓰이게 됩니다.

충돌반응(Tag 설정)

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

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

위아래 Cactus 두가지를 생성

Cactus 두 개는 Cactus로 Goal은 Goal로 태그지정

충돌반응(Collider 입히기)

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


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

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


맵핑 된 CACTUS를 GameManager Cactus에 연결시켜준다

중간결과


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

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


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

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


바닥을 뚫리지 않기위해 bgBack에서

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

충돌반응(OnTriggerEnter)

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

돌을 감지함

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

*Bird.cs

OnTriggerEnter

• Is Trigger 가 On 되었을 시 충돌을 감지하는 메서드

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

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

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


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

GameManger.cs

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

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

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


Game Play

Game Ready

Game End

ready = true end = false

ready = false end = false

ready = false end = true


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

Bird.cs


Game Play



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

호출

Bird.cs GameManager.cs

Game Play

Game End


ready = false end = true

충돌반응(iTween)

• 유니티에서 제공하는 스크립트

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


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

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

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


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

최종결과

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

화면이 흔들리며 Flappy Bird가 움직이지 않고 있습니다.

ㅜㅜ

소리효과(Jump Sound)

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


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


이 한줄이면 끝

소리효과(Death, Goal)

Bird.csGameManager.cs


MANAGER 에서 Audio Source 를 추가


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

GUI(점수)

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

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

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

GUI(점수)

설정에 맞게 조정함

slkrcre글꼴을 넣어줌

결과

GUI(GameManager.cs)

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

GUI(점수)

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

Intro SceneSprite 폴더에 있는 ready와 ready_image를

각각 GUI의 하위객체로 만듬

이름을 각각 GetReady,

ReadyTap으로 바꿈

Intro Scene

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

Intro Scene

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

GameManager.cs

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

Intro Scene

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

Intro Scene이제 버튼을 누르면 서 이미지가 사라지고 게임이 시작된다.

GameOver Scene

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

GameOver Scene

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

GameOver Scene

GameManager.cs에서 GameOver_Image를 만든후 iTween 메서드가 alpha값을

1에서 255로 바꿔준다

GameManager.cs

GameOver Scene

GameOver_Image를 GameOver Sprite 와 연결해준다.

결과

ㅠㅠ

점수관리

1.빈 오브젝트를 생성후 FinalWindow라 하고 Finish_Window 하위객체로 생성 이름은

FinishWindow로 함

점수관리

2.Score텍스트를 두번 복사하여 각각 BestScore,FinalScore로 만든후 하위객체로 생성

3.Transform 지정

점수관리Final_Window(상위)

Final_Window(하위) BestScore FinalScore

결과

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

점수관리

게임이 종료되었을시 iTween을이용한 이동시키는(MoveTo) 기능을 호출한다.

점수관리

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

리플레이

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

생성시킨다

리플레이

PlayButton 의 Inspector창에 Add Component에서

Box Collider를 입혀 충돌을 반응하게한다

리플레이

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

입력한다

ResetScene.cs

점수관리

PlayButton에 ResetScene 스크립트를 입힌다

점수관리

new 스프라이트를 FinalWindow 하위객체로 생성하고

이름을 ImageNew로 한다 그리고 BEST 글자 옆에 위치시키도록한다

점수관리

GameManager.cs 영역에 아래의 코드를 입힌다.

점수관리현재 Score가 BestScore일 시

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

결과

Q & A !

!



감사합니다.

flappy bird 만들기 세미나 자료

Engineering