이 자료는 지난 2013년 Unite Korea의 지국환씨의 Flappy bird 만들기 튜토리얼을 바탕으로 만든 2014년 창원시 스마트 모바일 앱 지원센터의 "게임 및 웹 앱 개발과정"에서 진행한 세미나 자료입니다. 유니티 버전 4.3에서 작성되었습니다. 이 자료의 튜토리얼을 바탕으로 하나하나 제작해가며 Flappy Bird를 만드는 기쁨을 누리시기 바랍니다. 관련 이미지와 소스는 아래 블로그에 있습니다. http://ivis.cwnu.ac.kr/tc/dongupak/245

1. Flappy Bird 만들기
창원대학교 정보통신공학과
!
김대호 & 박동규
http://ivis.cwnu.ac.kr/tc/dongupak/

2. Flappy Bird 란?
• 베트남의 Dong Nguyen이 만든 iOS, 안드로이드용 모바
일 게임
• 중독성이 강하고 아주 단순한 점프액션게임의 한 종류

3. Flappy Bird 란?
• 관련 동영상
• http://www.youtube.com/watch?v=fQoJZuBwrkU
• http://www.youtube.com/watch?v=sf2nFL9Z3v0
• http://www.youtube.com/watch?
v=UZXWp83gtog

4. 순서
• 배경화면 만들기
• FlappyBrid 와 Cactus 만들기
• 충돌반응(GameManager)
• 소리효과
• GUI(점수)
• Intro,GameOver Scene

5. 리소스 받기
• 유니티 Project 만들기
• FlappyBird라는 이름의 프로젝트를 만들자
•
http://ivis.cwnu.ac.kr/tc/dongupak/245
• 홈페이지에 올려 놓은 Resource 파일을 받아 Project 창에
Import한다
• 리소스에는 게임 텍스쳐. 사운드, 애니메이션, iTween이라는
Tweening script가 있다.

6. 리소스 받기
Drag & Drop

7. 배경화면 만들기
Hierarchy 창에서 Plane을 두 개 생성 후
각각의 이름을
bgBack, bgGround로 이름 변경

8. 배경화면 만들기
리소스 파일의 Assets/Textures/ForLoop에서
bg_2파일을 bgBack에, Ground 파일을
bgGround에 각각 맵핑을 합니다
Position: 위치
Rotation:회전각
Scale:크기
Transparent/Diffuse:하얀색으로 덮힌부분을 처
리해줌
Tilling: 축의 방향으로 이미지의 갯수를 생성
Offset:축의 방향으로 위치를 잡아 해당 지점의 위
치부터 보여줌

9. 배경화면 만들기
리소스 파일의 Assets/Textures/ForLoop에서
bg_2파일을 BG_back에 Ground 파일을
BG_ground에
각각 맵핑을 합니다

10. 배경화면 만들기
Directional Light를 추가시켜
밝게 보이도록 합니다.

11. 배경화면 만들기
Orthographic: 원근감이 없는 환경
Size: 카메라의 크기 숫자가 작을 경우 시선이 좁아
진다

12. 결과

13. 배경화면 만들기(ScrollMove)
Project 창에 Folder를 생성후
Script폴더를 만듬

14. 배경화면 만들기(ScrollMove)
Project 창에
Create-> C# Script 생성
*ScrollMove.cs
//targetOffset 은 시간에 따라
속력을 곱하므로 시간에 따라
Offset 값이 바뀜
ScrollMove.cs를
bgBack,bgGround
오브젝트에 연결시켜줌

15. 배경화면 만들기(ScrollMove)
bgBack은 0.1
bgGround는 3
의 속력을 각각 넣는다

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

17. 선인장 만들기
GameObject -> Create Empty로
Hierarchy에 GameObject를 생성
Project창에 Sprite폴더의 cactus 파일을
GameObject의 하위객체로 총 3개를 넣는다

18. 선인장 만들기
GameObject의 이름을
CACTUS로 바꾸고
위아래 Cactus를 2개
중간이 Goal를 1개 생성한다
Cactus 객체는 게임상에서 충돌을 피해야할 장애물이며 Goal은
통과해야할 객체이다

19. 선인장 만들기
Goal 의 Sprite Renderer 체크 해제하여
게임창에 이미지가 보이지않도록한다.
Position을 설정하고 난 후
게임화면에 나타나는 Cactus와 Goal의 모
습, Goal은 게임객체로는 존재하나 화면에는
보이지 않는다

20. 선인장 만들기(CactusMove)
//선인장 장애물의 속도
//왼쪽으로 속도값 만큼 움직임
//y축은 랜덤값을 주어서
높낮이가 랜덤으로 생성됨
오브젝트포지션이(x축) -6을 넘어설때 객체는
사라짐
OnEnable() : Start() 함수보다 먼저 선언되는
메서드 객체를 초기화 시켜주는 메서드

21. 선인장 만들기(CactusMove)
연결시킴

22. 선인장 만들기(Prefab)
Script로 연결된 CACTUS를 Project Prefab 폴더
를 생성하여 이동시키면 자동으로 프리팹이 만들어짐
프리팹이란? 게임 오브젝트의 생성과 관리
를 수월하게 해주는 일종의 설계도면

23. Flappy Bird 만들기
GameObject->GameEmpty를 통해
빈 오브젝트를 만들고 이름을 BIRD 로 지정
Sprite폴더에 bird_A_01을
BIRD 의 하위객체로 지정후
이름을 Bird로 함

24. Flappy Bird 만들기
새의 크기를 맞게 설정함
Inspector창에 Add Component에
서 Animator(철자 주의)를 추가시킴
Bird의 오브젝트 설정

25. Flappy Bird 만들기
Animation폴더의 Bird 애니메이션을
Animator에 집어넣음

26. 결과
…………

27. Flappy Bird(Bird.cs)
//점프 파워
//새 이미지
// Awake 함수는 스크립트 객체의 라이프타임 동안
단 한번만 호출 게임이 시작 할 때 객체를 초기화 시키는
// 마우스를 클릭했을 경우 점프가 발동
기능
// 새가 점프했을 경우 새의 LookDirection을 변화시켜 Y축으로
회전시켜주는 기능

28. Flappy Bird(Bird.cs)
Bird.cs 스크립트를 Bird에 입힌 후

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

30. Flappy Bird(Bird.cs)
BIRD에 rigidbody 컴포넌트를 추가
시킨다.

31. 충돌반응(GameManager.cs)
빈 GameObject 생성하고 이름을
MANAGER 이라 만듦
새 스크립트를 생성하여
GameManager.cs를 만듦
MANAGER 객체는 게임의 상태관
리를 위하여 사용할 것이다.

32. GameManager?
• 게임의 전반적인 동작을 로직하고 관리하는 게임구동의 핵
심적인 역할
• 게임의 준비, 종료, 시작을 모두 처리함.
• 게임이 준비상태인지, 게임중인지, 종료되었는지를 체크하
는 상태변수를 이용하여 각 상태에 따른 화면의 제어와 객체
의 제어를 수행한다

33. 충돌반응(GameManager.cs)
//장애물 오브젝트
ready 변수는 차후 게임이 종료되었는가를
구분하는 변수로 쓰이게 됩니다.
//InvokeRepeating : 메소드를 일정 시간마다
호출시켜주는 함수
ready 변수를 쓰는이유?? 메소드 호출의 중복을 막기위한
코드 또한 차후 게임 진행요소에 기여함

34. 충돌반응(Tag 설정)
Cactus를 클릭 후 Inspector ->
Add Tag를 하여 Tag를 추가시킴

35. Tag?

36. 충돌반응(Tag 설정)
중간부분인 Goal과
위아래 Cactus 두가지를 생성
Cactus 두 개는 Cactus로
Goal은 Goal로 태그지정

37. 충돌반응(Collider 입히기)
CACTUS 하위객체를 모두 선택한후
Box Collider를 입힘

38. 충돌반응(Collider 입히기)
설정을 다한 CACTUS를
prefab으로 다시 맵핑
Is Trigger는 ON으로 설정하고
Box Collider Size Z 값을 10 으로 변경

39. 충돌반응(Collider 입히기)

40. 충돌반응(Collider 입히기)
맵핑 된 CACTUS를 GameManager
Cactus에 연결시켜준다

41. 중간결과

42. 충돌반응(Collider 입히기)
BIRD 객체를 클릭한후, Add Component의
Sphere Collider를 생성한다
Is Trigger는 OFF
Radius는 0.35로 맞춰준다

43. 충돌반응(Collider 입히기)
BG_ground는 충돌반응을
인식하기위해 IsTrigger를
ON으로하고
태그를 Cactus로 한다

44. 충돌반응(Collider 입히기)
바닥을 뚫리지 않기위해
bgBack에서
Box Collider를 입하고
is Trigger는 OFF로한다

45. 충돌반응(OnTriggerEnter)
OnTriggerEnter() 메소드는
is Trigger가 On인 상태에서 충
돌을 감지함
Tag값이 Cactus이면
아래로 떨어지게 됨
*Bird.cs

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

47. 충돌반응(게임시작,종료)
BIRD 객체에서 use Gravity를
비활성화 시킨다
-> 최초상태는 중력에 영향을 받지않아 떨어지지
않게 된다

48. 충돌반응(게임시작,종료)
마우스 클릭이 발생하고 ready가 true일때
UseGravity가 활성화되어 게임이 시작된다
GameManger.cs
게임의 종료를 알려주는 변수
게임을 종료시키는
GameOver() 메서드에서는
MakcCactus 메서드의 Invoke를 중지시켜 더
이상 선인장이 화면에 나타나지 않게한다

49. 충돌반응(게임시작,종료)
Game
Play
Game
Ready
Game
End
ready = true
end = false
ready = false
end = false
ready = false
end = true

50. 충돌반응(게임시작,종료)
Bird.cs
end가 false 일 경우만 점프가 가능하다.

51. 충돌반응(게임시작,종료)
Game
Play
ready = false
end = false

52. 충돌반응(게임시작,종료)
Bird.cs GameManager.cs
Cactus와 충돌되었을 때 GameManager의
GameOver() 메서드를 호출한다.
호출
Game
Play
Game
End
ready = false
end = false
ready = false
end = true

53. 충돌반응(iTween)
• 유니티에서 제공하는 스크립트
• 애니메이션 이나 오브젝트의 움직임을 관리해준다.

54. 충돌반응(iTween)
iTween.cs를 Script폴더에 넣는다.
GameManager.cs에 GameOver() 메소드
에서 iTween의 메서드를 호출한다.
실행 후 게임이 종료되면 화면이
흔들리는 것을 알 수 있다.

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

56. 최종결과
버튼이 누르면 게임이 시작되며
충돌반응이 일어났을 때 게임이 종료되고
화면이 흔들리며
Flappy Bird가 움직이지 않고 있습니다.
ㅜㅜ

57. 소리효과(Jump Sound)
BIRD를 클릭 후 Add Component에
Audio Source를 추가시킴

58. 소리효과(Jump Sound)
Audio Source 영역의 Audio Clip에
Sounds 폴더의 Jump 파일을 넣음

59. 소리효과(Jump Sound)
이 한줄이면 끝

60. 소리효과(Death, Goal)
Bird.cs
GameManager.cs

61. 소리효과(Death, Goal)
MANAGER 에서 Audio Source 를 추가

62. 소리효과(Death, Goal)
Death Sound Goal Sound에
각각 소리를 집어넣음

63. GUI(점수)
Score에서 Add Component를
눌러서 Text Mesh를 추가시킴
GameObject를 생성하여
이름을 GUI로 바꿈
GameObject를 생성하여
이름을 Score로 바꿈
하위객체로 지정

64. GUI(점수)
설정에 맞게 조정함
slkrcre글꼴을 넣어줌

65. 결과

66. GUI(GameManager.cs)
//Goal 지점을 통과했을때
점수가 1점 플러스됨

67. GUI(점수)
MANAGER의 GameManager에
Score_text에 Score를 연결시킴

68. Intro Scene
Sprite 폴더에 있는 ready와 ready_image를
각각 GUI의 하위객체로 만듬
이름을 각각
GetReady,
ReadyTap으로 바
꿈

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

70. Intro Scene
GameManager.cs
GameManger.cs에서 시작전의 이미지를
사라지게 하게 만들어주는 코드이다
Alpha 값을 0으로하여 0.5초만에 사라지게
된다.

71. Intro Scene
각각의 이미지를 연결시켜준
다

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

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

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

75. GameOver Scene
GameManager.cs에서
GameOver_Image를 만든후
iTween 메서드가 alpha값을
1에서 255로 바꿔준다
GameManager.cs

76. GameOver Scene
GameOver_Image를
GameOver Sprite 와 연결해준다.

77. 결과
ㅠㅠ

78. 점수관리
1.빈 오브젝트를 생성후 FinalWindow라 하고
Finish_Window 하위객체로 생성 이름은
FinishWindow로 함

79. 점수관리
2.Score텍스트를 두번 복사하여 각각
BestScore,FinalScore로 만든후 하위객체로 생성
3.Transform 지정

80. 점수관리
Final_Window(상위)
Final_Window(하위) BestScore FinalScore

81. 결과
Scene창에서 Game화면상 밑에
설치를해준다

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

83. 점수관리
MANAGER 스크립트에
연결시켜준다

84. 리플레이
PlayButton 스프라이트를
Final_Window의 하위객체로
생성시킨다

85. 리플레이
PlayButton 의 Inspector창에
Add Component에서
Box Collider를 입혀 충돌을 반응하게한다

86. 리플레이
Project창에서 스크립트를 하나 생성하고
파일이름을 ResetScene으로 하여 위의 코드를
입력한다
ResetScene.cs

87. 점수관리
PlayButton에 ResetScene
스크립트를 입힌다

88. 점수관리
new 스프라이트를
FinalWindow 하위객체로 생성하고
이름을 ImageNew로 한다
그리고 BEST 글자 옆에 위치시키도록한다

89. 점수관리
GameManager.cs
영역에 아래의 코드를 입힌다.

90. 점수관리
현재 Score가 BestScore일 시
ImageNew를
Active 시키고 아니면
Active 시키지 않는다.

91. 결과

92. Q & A
!
!
http://ivis.cwnu.ac.kr/tc/dongupak/245

93. 감사합니다.