본문으로 바로가기



게임만들기강좌_유니티강좌








안녕하세요 피슈 입니다.


오늘은 최근에 유행하고 있는 클릭커 게임을 만들어 볼까 합니다.


아니 게임 개발 강좌 첫시간인데 벌써 게임을 만들 수 있는거야?


하고 의아해 하실 수 있는 데, 강좌를 하나씩 따라 하다 보면 어느새!!


클릭커 게임이 뚝딱!!! 하고 나타나는 기적이 이루어 질것입니다.!!!


ㅎㅎㅎ 진담이구요



완벽한 형태의 게임은 아니더라도, 클릭커의 기본적인 형태를 취하고 있는


게임을 만들어 보려고 합니다. 


끝까지 잘 봐주세요~










1. 게임 기획하기




우선 기획을 해 볼까 합니다. 우리는 클릭커 게임을 만들기로 정하였습니다.


그렇다면, 클릭커 게임으로 유명한 타마고라는 게임을 카피해 보기로 합니다.

















타마고라는 클릭커 게임을 잘 모르시는 분들은 앱스토어에 올라와 있으니 한번씩 해보시면 


아 이런 게임이구나 라는걸 아시게 될 것입니다.




게임은 별게 없습니다. 무식하게 터치를 하다 보면, 결국에는 알에서 뭔가가 나오는 그런 게임입니다.



우리도 동일하게 게획을 해 봅니다.


디스플레이는 가로 디스플레이 ,


화면 정중앙에는 포켓볼이 하나 있고 포켓볼을 터치할 때마다 숫자가 1씩 증가합니다.


화면 상단 중앙에는 클릭한 숫자가 올라 갑니다.



그리고 사전에 정의한 숫자에 클릭한 숫자가 도달하면


포켓볼이 깨지고, 안에서 귀여운 피카츄가 등장하는 게임입니다.


그리고 리셋버튼을 누르면 다시 처음의 포켓볼 상태로 돌아가도록 해봅니다.












2. 기능 리스트 작성



우리가 만들 게임에 기능이 어떤 것이 있을 지, 리스트를 작성해 봅니다.


게임을 만들기 전에 게임이 어떤 로직으로 작동할 지, 머리 속으로 생각을 해봐야 할텐데요


머리 속에 모든 로직이 쫙 펼쳐저 있다면 정말 좋겠지만, 초보 여러분들은 뭐부터 만들어야 될지 감이 영 안올 거라 생각됩니다.


그래서 필요한 기능들을 미리 적어 봄으로써, 로직도 정리하고, 게임에 필요한 기술에 대해서도 알아보는 


시간을 가질 수 있게 됩니다.




그렇다면 우리가 만들 클릭커 게임 어떤 기능이 있을 까요?






1. Input 마우스 ( 마우스 입력 받기 )


2. 마우스 입력 받을 때마다 숫자 증가 시키기


3, 특정 값에 도달 하였을 때 이벤트 발생 시키기


4. 리셋




이정도가 될 거 같습니다. 


좀 더 깊이 있는 게임을 만드시고 싶으시면, 위에서 기능을 좀더 추가하면 좋을 것 같습니다.













3. 재료 준비하기



이렇게 기능 리스트가 작성이 됬다면, 게임에 들어갈 재료들을 준비해야 됩니다.



어떤 이미지가 필요할까요??? 




포켓폴_png                     피카츄_png






포켓볼 이미지 png


피카츄 png



이정도잇으면 될 거 같네요


구글링 해서 준비 하도록 합니다.
















4. 개발 시작



자 이제 그럼 본격적으로 게임 개발에 들어갑니다.


우리가 저번강의까지 unity3D를 설치만 했다 뿐이지, 도통 만저본적도 없는데 어떻게 할까요?


게임 중간 중간에 필요한 부분이 있으면 설명을 할 테니 크게 신경안 써도 됩니다.




일단 게임이 만들어질 스테이지 세팅을 해야합니다.


Hierarchy라고 써있는 패널에 보면 MainCamera 라고 하나 덩그러니 있는 것을 보실 수 있으실겁니다.


카메라를 클릭해 봅니다. 


화면 오른쪽에 inspector 라는 곳에 속성이 등장합니다. 맞습니다. inspector창은 선택한 객체의 속성을 변경할 수 있는 곳입니다.


또는 이곳에다가 Component들을 추가할 수 있습니다. 


우선 우리가 선택한 Camera에는 추가할 것은 없고 


Projection이라는 항목을 봅니다. 




      


[ 카메라의 시야각이 사각형 형태로 바뀌는 것을 볼 수 있습니다.  ]






거기에 보면 기본적으로 perspective로 되 어 있는데 이부분을 orthographic으로 바꿔 줍니다.


유니티는 3D 엔진이라서 카메라의 시야각이 있는 현실의 카메라와 동일합니다.


그런데 우리는 2D 게임을 만들거기 때문에, 시야각이 일직선인 형태의 카메라로 세팅을 해주는 것입니다.






[ Scene 뷰 밑에 2D 라고 써잇는 버튼을 누르면  2D 모드 로 바뀝니다. ]


orthographic으로 해주면  scene에 보면 뭔가 길게 뻗어진 형태로 바뀐것을 확인 하실 수 있습니다. 



지금 해주는 작업은 3D 툴인 유니티를 2D 화면으로 전환 해주는 작업이라고 보시면 됩니다.


카메라가 2D로 바뀌었으면, 이제 Canvas를 만들 차례입니다.



Canvas는 그림그릴때 쓰이는 종이인데, 


말그대로 우리가 만들 게임이 담길 오브젝트라고 생각하면 됩니다.









 hierarchy -> 우클릭 -> UI -> Canvas


또는


hierarchy 아래 create -> UI -> Canvas


또는


메뉴 -> GameObject -> UI -> Canvas


이렇게 만들어주시면됩니다.





앞으로 게임 오브젝트를 생성하는 기능은 정말 많이 사용하게 될겁니다.


만드는 방법이 3가지 이니, 이중에 편하신걸로 사용하시면 됩니다.





Canvas가 생성되면 Scene 뷰에 흰색 박스가 하나 생성되는 것을 보실 수 있습니다.


이것이 canvas 라는 것인데..  아직은 뭐가 뭔지 감이 잘 안오실 겁니다.


canvas안에 우리가 만들 오브젝트들이 담기게 될 것인데요


이것들이 카메라와 일직선상에 있을 때 Game 뷰에서 보이게 됩니다.


그래서 카메라와 Canvas를 일직선상으로 맞춰주는 작업을 하여야 합니다.



우선 다시 MainCamera를 눌러 봅니다.


Insepctor 창에 보면








가장 위쪽에 Transform 이라고 있고 x,y,z 이렇게 숫자를 입력하는 란이 있습니다.


그리고 밑에 아까 우리가 설정을 바꾸었던 projection도 보입니다.


그리고 그 밑에 size라고 보입니다.


기본값으로는 5라고 되어 있을 것입니다.




Camera와 Canvas 의 비율을 1 : 1  로 맞춰주는 것이 앞으로 작업을 할 때 수월 해집니다.


그래서 size 값을 변경해 주어야 하는데요


일단 360 이라고 넣습니다.







이유는 나중에 설명하고, 걍 넣습니다.



그리고 이번에는 Canvas의 Inspector로 가봅니다.


알수 없는 영어들이 많이 있는데








여기서는 Canvas -> RenderMode -> World Space를 선택합니다.



그리고  Canvas -> RectTransform -> width -> 1280


Canvas -> RectTransform -> height - > 720







이렇게 값을 변경해 줍니다.



그리고 pivot 값을  x = 0 . y = 1로 해줍니다.








그러면 pos x , pos y, pos Z 값이 바뀔 텐데


모두 0, 0, 0 으로 맞춰줍니다. 






다시 MainCamera로 와서


MainCamera -> Transform -> x -> 640


MainCamera -> Transform -> y -> -360





이렇게 값을 변경해 줍니다.


이 모든걸 다 완벽하게 했다면.. Scene 뷰에는  흰 직사각형 하나만 보일 것입니다.


( 두개로 보이는 사람들은 수치가 정확하게 입력이 됬는지 확인해 보시기 바랍니다. )






                  



[ 왼쪽과 같이 보인다면 성공!! 오른쪽이면 다시 세팅하세요 ]








지금까지 카메라와  캔버스의 비율을 1 : 1로 맞춰주는 작업을 하였습니다. ( Pixel Perpect 라고 부릅니다~ )


이렇게 미리 작업을 해놓으면 좋은점은 Canvas에서 움직이는 오브젝트들의 위치값, 회전값, 크기값이


1:1 비율로 정확하게 화면에 보여진다는 점입니다. 


게임 오브젝트를 수치상으로 정교하게 표현할 수 있다는 것입니다.


잘 이해가 안되셔도 좋습니다. 이런 세팅 방법이 있구나 정도로 알고 계시고, 다음에 새로운 씬을 세팅할 때


연습하다 보면  익숙해 지실 겁니다.


( 참고 : MainCamera의 size 는 우리 게임의 세로길이 / 2  입니다.  )






이렇게 화면 세팅이 끝났으면 이제 클릭이 될 포켓볼을 화면에 배치할 차례입니다.



준비한 2개의 이미지를 Project 창에 Assets 폴더에 추가해줍니다.



우클릭 -> Create -> folder ->  이름을  'Resources' 지어줍니다 (대소문자 구분 ) -> 이 안에 파일 드래그 앤 드롭


폴더 이름을 지정해주는 것은 나중에 나오겠지만, 이미지를 불러오거나, 동적으로 교체를 할 떄 이 폴더명 안에 있어야 가능하기 때문입니다.



이번에는 버튼을 만들어 줍니다.


이번에도  위에서 생성했던 방식으로


canvas 선택 -> 우클릭 -> UI -> Button


이렇게 하면


화면에 버튼이 생성될 것입니다.




















버튼의  Inspector 로 가보면  Image, Button 이렇게 두가지 항목이 보일 것입니다.


Image 에 source Image 오른 편에 빈칸에 포켓볼 이미지를 넣어 줍니다.





그러면 화면에 있던 버튼이 포켓볼 이미지로 보이고 좀 찌그러진 모양으로 보일 것입니다.


Button Inpector에 Image에 Set Native Size  버튼을 눌러주면



이미지가 원래 사이즈의 비율로 바뀌는 것을 보실 수 있습니다.






이미지를 화면 보다 너무 크거나, 혹은 작은 이미지를 고르셨다면, Scene뷰 위에 보면 다섯개의 버튼중에


가장 오른쪽에 있는 버튼을 누르면, 이미지 크기를 조절할 수 있습니다. 


원하는 사이즈로 조절을 해 줍니다.




그리고 같은 방법으로 피카츄 이미지를 위에 포켓볼 버튼과 동일하게 만들어서 


같은 위치에 배치 해 줍니다.







그리고 피카츄 이미지는 인스펙터 좌상단에 체크박스를 해제하여 화면에서 숨겨줍니다.








이 체크박스는 앞으로 배우겠지만, 


GameObject.SetActive(true 또는 false);


라는 명령어와 같습니다.


GameObject를 숨기고 보이게 할 때 사용합니다. GameObject가 숨겨져 있을 때는 


스크립트에서 이 GameObject의 속성을 사용 할 수 없을 수 있습니다.



그리고 생성한 버튼들의 이름을 바꿔줍니다.


이름 바꾸는 것은 F2, 우클릭 rename 으로 바꿀 수 있습니다.





포켓볼 버튼은 btn_pocket


피카츄는 go_pichachu


이렇게 해줍니다,  언더바 앞에는 오브젝트의 타입을 넣어주고 언더바 뒤에는 오브젝트 이름을 넣어 준 것입니다.





이번에는 버튼을 클릭할 때마다  클릭한 값이 1씩 증가 되고 console 창에 표시되는 기능을 구현해 보겠습니다.




Project 창에서


Create -> c# script를 해서 스크립트를 생성합니다.


InGame 이라고 이름을 지어줍니다.










그리고 Canvas에  Inspector 창으로 가서 맨 아래에  AddComponent를 누르고


Scripts -> InGame 선택










그러면 Canvas에 방금 만든 InGame이라는 스크립트가 등록이 된 것을 확인 할 수 있습니다.




그리고 InGame 스크립트를 더블클릭하여 실행해 줍니다.





자 이번 강좌가 시작된 후 처음으로 스크립트를 작성해 보게 됩니다.


제가 시키는대로만 따라하시면 쉽게 이해하실 수 있으니 어렵게 생각 안하셔도 됩니다.


일단  아래와 같이 칩니다.


void Start(){


//여기에 작성

Debug.Log("Hello World!!");



}







Ctrl + S 또는 저장하고


유니티에서 상단 중앙에 플레이 버튼을 클릭하면



아무것도 안일어납니다.


다만 Console 창에 


HelloWorld!!







라고 우리가 친 메세지가 뜨는것을 확인 할 수 있습니다.


Debug.Log(" ");

//괄호 안에 따옴표 안에 쓰고자 하는 문자열을 입력 -> 따옴표 안에는 어떤 문자도 들어올 수 있습니다.



라는 명령어는 출력하는 명령어 입니다.


프로그램상에서 보이지 않는 데이터들을 유관으로 확인 할 수 있도록 출력해 주는 역할을 합니다.


자주 사용하니 외워두시기 바랍니다.



이번에는 


 void Update(){



}


요밑에 다음과 같이 써봅니다.



public void Click(){


Debug.Log("Click!!!");


}






저장하고


유니티로 돌아가서 btn_pocket Inspector에서



Button에 OnClick() 이라는 탭을 찾습니다.


아래에 +를 눌르면


몇개의 탭이 생성됩니다.


Runtime Only 밑에 none(Object) 라고 되어 있는 곳에 


Hierachy의 Canvas를 드래그해서 가져다 넣습니다. (또는 오른쪽 단추를 누르면 창이 뜨는데 Scene -> Canvas를 선택 )


그다음 오른쪽 no Function 스핀단추를 누르면 InGame이 보일 것입니다. 


InGame -> Click()








이렇게 선택해 줍니다.


그다음 재생을 누르고 게임이 시작되면


알을 클릭해 봅니다. 콘솔창에서 







Click!!


Click!!


Click!!



이렇게 메세지가 뜨는 것을 확인 하실 수 있으실 겁니다.



자 여기까지 이제 클릭커 게임의 절반을 완성하였습니다.



처음 해 보는 것이지만 따라 하다 보니 어느새 뚝딱 게임 비스무리 한 것이 완성되고 있다는 느낌이 드실 겁니다.



강좌가 길어져서 여러 편으로 나눠서 포스팅 하도록 하겠습니다.


2편에서는 몇번째 클릭했는지 데이터를 변수로 지정하는 법과


지정된 클릭번째에서 알이미지가 피카츄 이미지로 바뀌는 것을 다루도록 하겠습니다.


2편도 많이 기대해 주세요~`



감사합니다.
























댓글을 달아 주세요

  1. 서동희 2018.01.01 22:39

    감사합니다. 잘 보고 따라하고 있습니다.
    아주 쉽게, 친절하게 설명되어 있어서 따라하는 과정에 별 문제가 없이 다 잘 되네요~

    • 서동희 2018.01.01 23:26

      분명 잘 따라했는데 저는 버튼 이미지에 Button이라고 계속 써 있어서 거슬렸거든요. 그런데 어찌 하다보니 없애는 방법을 찾아내서 없앴습니다 ^^;

  2. 감자 2018.12.23 14:47

    감자합니다

  3. ㅋㅋ 2019.07.20 14:39

    이미지 추가 어떻게하나요 안되는뎅 ㅠㅠ