표지

PAGE_BREAK: PageBreak

시작하면서…

스마트폰으로 게임을 하다가 ‘에이, 이 정도면 나도 만들겠다’ 라는 생각이 들때가 한번쯤은 있었을것이다. 일부는 게임 제작하는 방법에 대해 호기심을 가지고 인터넷 검색도 해보았을 것이다.

하지만 검색어에 ‘게임’ 글씨만 들어가도 게임사의 신작게임홍보 기사만 줄줄이 뜨거나 알듯 모를듯한 전문용어만 나와서 당황했으리라 생각된다.

게임 개발을 처음 하는 사람들에게는 당연히 어려워 보이는 용어들이지만, 막상 모든 전문분야가 그렇듯이 실무에서는 매일 사용하는 단어일 뿐이니까 미리 겁먹고 그럴 필요 없다.

안해 봤을 뿐이지 못하는 것은 아니다 라는 말을 하고 싶다.

다만 게임 제작은 일반 유틸리티와는 달리 그래픽, 사운드, 네트워크, 최적화알고리즘 에 걸쳐서 기기의 모든 자원을 활용하기 때문에 다른 프로그래밍보다 더 많은 관련 지식과 리소스가 필요하게 된다.

특히 인디제작자 처럼 혼자 또는 적은 팀규모 단위로 제작할때는 프로그래머가 프로그래밍 이외에도 기획,그래픽,음악등에 관여해야 되기 때문에 관련 경험과 지식을 익히는 데에는 많은 노력과 고생을 하게 될 것이다..

그래도 게임제작은 확실히 재미있다.

너무나 재미있어서 하루 아니 일주일,한달이 어떻게 갔는지도 모를 정도로 몰입도가 높은 작업이다.

여러분에게도 게임 제작이라는 것이 얼마나 재미있고 즐거운 과정인지 알려주는 고마운 게임 라이브러리가 될 것이다.

Cocos2dx 는 완전히 무료이면서도 게임을 제작하기 위한 그래픽,사운드,사용자입력등에 대한 기본적인 기능들을 미리 구현되어 있고, 상업용 게임 그 이상도 만들어 낼 수 있을 정도로 완성도가 높은 엔진이다.

덕분에 국내외를 포함해서 많은 스마트폰용 게임들이 개발기간을 단축할수 있었고, 좋은 퀄리티의 게임들을 만들수 있었다.

이미 기존의 대형게임개발사들로부터 충분히 검증된 게임엔진인 Cocos2DX 를 통해 더 멋진 인디게임을 개발하기를 바란다.

단순한 호기심이 당신의 인생을 바꾸고 열정을 불태우는 계기가 되기를 바라면서 이 책을 썼다.

게임을 만들어 볼까?
1. 게임하나 만들어 볼까!?
2. 인기 게임 만들어서 돈벌자!
3. 게임개발에 필요한 준비물
Cocos2d-x 를 설치하고 “안녕”을 실행해보자
1. Cocos2d-x 의 설치! 어렵지 않다.
2. 2.2 OS Platform 별 개발툴 설치
  1. window 용 에디터 VisualStudio 설치https://docs.google.com/document/d/1n7UwxPa-CRRQshRNPRCpUEt5F7w21kgf-ep4KAvZK1Y/edit
  2. mac 용 에디터 Xcode
  3. linux용 에디터 Eclipse
3. cocos2d-x 라이브러리 설치
  1. cocos2d-x다운로드[thkim 화면캡춰 필요]
  2. Python 설치
4. Hello Cocos2dx
  1. 프로젝트의 생성
  2. 프로젝트의 실행
Cocos2d-x 라이브러리 구조와 개념 이해
1. cocos2d-x 라이브러리 로는 어떤 게임까지 만들수 있을까
2. Cocos2d-x 의 구성과 게임 요소 개념
  1. Node
  2. Director
  3. Scene
  4. Layer
  5. Sprite
  6. Action
  7. input
  8. Sound
3. HelloWorld 의 기본 구조
  1. AppDeleGate
  2. 첫 SCENE
화면해상도, 화면 좌표계와 앵커 포인트
1. 화면해상도
2. 화면 좌표계
3. 앵커포인트
스프라이트 (캐릭터이미지) 출력
1. 스프라이트(캐릭터 이미지) 출력
  1. 이미지 파일을 이용한 스프라이트 생성
  2. 이미지의 일부분을 사각영역을 이용하여 스프라이트 생성
  3. 스프라이트 시트에서 스프라이트 만들기
  4. spriteBatchNode 를 이용해서 스프라이트 를 만들기
  5. 스프라이트 화면 화면 출력과 다양한 속성
2. 스프라이트 액션
3. 스프라이트액션 II
  1. 순차액션과 복합액션
  2. 제어액션
  3. 액션의 속도에 관한 액션
4. 콜백액션
5. 스프라이트 관계맺기
스프라이트 애니메이션
1. 준비된 여러장의 파일들을 불러들여 애니메이션 시키는 방법
2. 스프라이트 시트를 이용한 방법
  1. 외부 툴을 이용해서 스프라이트 시트용 plist 를 이용하여 애메이션을 구현하는 방법
  2. cocos Stuiod 이용해서 스프라이트 애니메이션을 구현하는 방법
3. 다관절 캐릭터 애니메이션.
  1. cocos stuio 에서 다관절 스프라이트 생성
  2. 전용툴 spine 을 이용해서 다관절 스프라이트
충돌체크
1. constrainsPoint
2. intersectsRect
사운드 출력
1. SImple Audio Engine
2. Audio Engine
입력장치
1. 터치이벤트
  1. 싱글터치 이벤트 리스너
  2. 멀티터치 이벤트 리스너
  3. 터치후 이동
  4. 터치 우선순위
2. 키보드
3. 마우스 이벤트
4. eccelator 이벤트
배경 스크롤
1. parallex scroll
2. Follow scroll
스케쥴
1. schedule
2. schedule_select
3. schedulatone
게임 메뉴 만들기
1. MenuItemLabel
2. MenuItemAtlasFont
3. MenuItemImage
4. MenuItemSprite
5. MenuItemToggle
장면전환 사용하기
1. fade
2. Flip
3. ZoomFlip
4. Zoom
5. MoveIn
6. SlideIn
7. plit
8. 그밖의 효과
게임의 상태 저장, 복구
1. 사용자 기기에 데이터를 저장하기
2. 원격지 서버에 저장하기
3. XML 게임 데이터
4. Json 게임 데이터
5. SQL 사용
GUI 기능들
1. 12.1 Normal GUI
  1. UI Button
  2. UI Checkbox
  3. Editbox
  4. Slider
2. Special GUI
  1. ScrollView
  2. Listview
  3. tableView
  4. pageview
  5. WebView
  6. ViewPlayer
3. container
파티클
1. 파티클 종류
2. particle2dx 에서 저장한 효과를 불러들이는 방법
물리효과 적용하기
1. Box2D
2. ChipMunk

부록

cocosStudio
cocosCreator
SDKBOX 서비스 이용하기
1. IAP
2. AD
3. Play Plugin
4. Sosial Sharing
5. Youtube
TiledMap
Sqlite
PAGE_BREAK: PageBreak

Chaptor 1 . 게임하나 만들어 볼까?

1.1 게임하나 만들어 볼까!?

1.2 인디 게임으로 돈 벌자.

1.3 게임개발에 필요한 준비물

PAGE_BREAK: PageBreak

1.1 게임하나 만들어 볼까!?

이제 게임의 시대가 “다시” 돌아왔다.

혜성처럼 등장한 스마트폰과 함께 게임의 역사는 그 이전과 이후로 나눌 수 있을 정도로 많은 변화를 하고 있다.

게임의 역사를 보자면 1958 년에 최초의 전자게임이 발표된 이후로 Arati, Taito(회사명)등 오락실 전용 게임이 세상을 주름잡았다가 가정용 PC 와 게임기 의 보급으로 디스켓이나 CD 등을 통한 패키지게임이 바통을 넘겨받았고, 인터넷의 보급으로 네트워크를 통한 멀티플레이 게임들이 많아지자 “PC방 또는 게임방” 이라는 신규 업종까지 생기게 되었다.

이렇게 게임계는 50여년을 끊임없이 새로운 환경에 적응하며 점점 더 발전해 가고 있었지만, 컴퓨터 또는 기계앞에 있어야만 게임을 할수 있다라는 한계점으로 인해 점점 인기가 없어지게 되었고, 결국 게임따위는 학생들이나, 할일없는 사람들이 하는 여가생활로 여기게 되었다.

상황이 이렇다 보니 게임업계도 수익성이 악화되고, 작은 여러 게임전문 개발사들은 폐업을 하는 악순환이 지속되고 있었다.

그러던중 2008 년 애플이라는 회사에서 아이폰3G(아이폰2세대) 라는 모바일 기기를 출시하면서 게임업계는 커다란 희망의 빛줄기를 보게된다.

물론 아이폰이라는 기기이전에 HP,SAMSUNG 등의 업체에서 모바일기기에서 동작되는 게임을 만들기도 했지만, 아무나 해당 기기용 프로그램을 등록하거나 실행할수 없었고, 기기의 속도나 화면 또한 제약이 너무 많아서 사실 게임개발사들로서는 그리 좋은 상황은 아니었다.

하지만 아이폰과 안드로이드폰 같은 PC 수준의 좋은 하드웨어를 갖춘 스마트기기의 등장과 함께 마켓(장터)이라는 곳에서 개발자들이 만든 프로그램을 사용자에게 직접팔거나 이용할수 있도록 오픈마켓이 형성되면서 모든 개발자들이 자신들이 만든 프로그램을 마켓에 내놓고 무료 또는 유료로 판매할수 있게 되었다.

이러한 변화는 개인개발자들에게도 큰 희망을 주었는데, 오픈마켓에서는 기존개발사들뿐만 아니라 개인개발자도 자신이 만든 게임앱을 등록하고 판매할 수 있다는 점이었다.

또한 게임개발 환경도 많이 좋아져서 cocos2d-x 나 유니티,개임샐러드등과 같은 무료 게임개발툴과 관련 오픈소스툴들로 인해 개인이 충분히 훌륭한 게임을 제작할 수 있다.

이 책을 통해 게임제작에 발을 들여놓고자 하는 독자들도 아이디어와 센스만 있다면 인기를 끌만한 게임을 충분히 만들 수 있게 될 것이다.

이제 사람들을 즐겁고 재밌게 해줄 아이디어를 가지고 게임제작의 세계로 뛰어들자 !

1.2 인기 게임 만들어서 돈 벌자.

적어도 이 책을 읽는 분들중에서는 누구나 한번쯤은 어떤 기기에서든 게임을 해보았을것이고, 게임을 구입하거나 게임을 위해 소정의 비용을 지불한 경험이 있을것이다.

개발자 입장에서 본다면 여러분이 지불한 비용이 모두 개발자에게 지급되었으면 좋겠지만, 스마트폰이 나타나기 이전까지는 혼자서 게임제작은 커녕 게임회사에서 박봉에 중노동만 하다가 너무 힘들어서 게임업계를 원망하며 영원히 떠났을지도 모른다.

하지만 이 글을 읽는 독자들은 다행히 , 스마트폰의 호황덕분에 개인이 만든 게임을 마켓장터에서 직접 판매하고 , 또 판매된것 금액만큼 내 통장으로 돈이 들어 오는 시스템이 되어 있는 세상에 살고 있다는 것이다.

최근 언론으로도 유명세를 탄 “플래피버드” 라는 초간단 게임으로 몇억원 이상 수익을 올린 사람도 있고, 3차원 사각 박스를 가지고 노는 “마인크래프트” 라는 것을 개인 취미로 만들었다가 인기가 얻게되 Microsoft(맞다.윈도우를 만든 그 회사!)에 무려 2조이상금액에 게임을 판매한 사람도 있다. 국내에서만해도 소규모 중소기업이 만든 대표적 국민게임 애니팡, 쿠키런, 아이러브커피 등도 있다.

게임을 만들어서 돈을 벌자는 것은 매우 긍정적인 생각이다, 그래야 게임의 질도 좋아지고, 개발자로서의 자긍심도 생기기 때문이다.

힘들게 고생해서 게임을 만들었는데, 그에 따른 적절한 보상을 어떻게 받을것인가?

분명히 밥도 굶어가며, 휴일도 안쉬고 열심히 했는데 주변사람들은 칭찬한마디만 할뿐 누구 하나 밥이나 고기를 사주는 사람이 없다. 이래서야 다음 차기작 게임을 만들 기분이 나겠는가?

다행히도 이런 억울한 경우를 당하지 않도록 각 통신사 마켓등에서도 게임을 유료로 판매할수 있도록 되어 있다. 또한 무료게임이라도 광고를 게임내에 설치해서 사람들이 광고를 클릭했을때 내 통장으로 얼마씩 돈이 들어오도록 서비스 해주는 업체들도 많이 있다.

게임개발에 막 입문한 개발자로서는 매우 기분좋은 소리일지도 모른다. 하지만 그만큼 게임개발에 대한 장벽도 낮아진이상 무료게임들의 퀄리티도 좋아지고 있는 만큼 경쟁을 필수이다.

내가 못 벌면 그 돈을 다른 개발자나 회사가 벌고 있다. 결국 그만큼 아이디어와 디테일로 승부해야 된다.

독특한 아이디어와 게임성으로 게임 개발자 모두 부자 되자!

googleplay_캡춰.png

PAGE_BREAK: PageBreak

1.3 게임개발에 필요한 준비물

예전(응답하라 1988 시대 같은)에는 게임을 개발하려면 전용 컴퓨터 기판(전자칩이 여러개달린)에서 프로그램을 했어야 됬다. 때문에 테스트하거나 제작할 때에 비용도 많이 들고, 이런저런 제약이 많았다.

하지만 스마트폰용 게임을 개발하기 위해서는, 개발용 컴퓨터와 스마트폰 이면 된다.

어떤 개발자는 스마트폰 없이 PC 에 스마트폰 에뮬레이터라는 가상기기프로그램을 PC 에 설치해서 앱을 올리면서 테스트하고 앱을 출시 하는 경우도 있다.

Clone of Windows 7-2016-03-26-20-16-58.png

[그림 1.3.1 Genymotion 실행화면] [그림 1-3-1] Bluestack 실행화면

기기야 당연히 테스트하거나 제대로 올라갔는지 확인하기위해 필요한것이고, 정작 게임을 개발하려면 기획, 프로그래밍, 음악, 그래픽 등이 필수 로 있어야 하는데,아래와 같은 프로그램이나 툴등을 이용한다면 그리 어렵지 않게 만들수 있을것이다.

프로그래밍 : cocos2dx, unity 등과 같은 무료이면서도 훌륭한 게임엔진을 사용한다.
그래픽 : 그림실력이 여의치 않다면, 일단 게임리소스 무료제공사이트등에서 다운받은 그래픽으로 작업을 하여 샘플 및 프로토타입을 만든다음, 친구나 가족한테 비슷한 그림으로 그려달라고 한다. 당연히 이 책에서는 게임에 바로 사용해도 될만한 이미지를 제공하고 잇다.
음악 : 어차피 가수나 뮤지션 섭외가 불가능 하니, 패턴 음악을 만드는 프로그램을 다운받아서 패턴음악으로 배경음을 만들고 효과음은 무료 효과음을 사용하거나 직접(!) 만든다. (으악, 삐융, 악,꽥,스타트,끝났어요….)

이책이 cocos2dx 게임프로그램에 대한 내용이기 때문에 다른 파트는 알아서 하시기를 바란다.다만 가능하다면 주변의 친한 친구들,꼭 그림좋아하는 친구와, 음악 좋아하는 친구들 한명쯤은 있을 것이다. 이들과 파트를 나누어서 하면 좀 더 상품성 있는 게임을 만들 수 있을 것이다.

이제 잡설은 그만 끝내고 , cocos2dx 를 설치할 컴퓨터만 준비되어 있다면 게임제작을 시작해 보자 !

PAGE_BREAK: PageBreak

Ch2. cocos2d-x 설치와 실행

2.1 Cocos2d-x 의 설치! 이제 어렵지 않다.

2.2 OS Platform 별 개발톨 설치

2.2 android 기기에서도 “안녕”을 실행해보자

2.3 ios 기기에서도 “안녕”을 실행해보자

PAGE_BREAK: PageBreak

2.0 Cocos2d-x 소개

코코넛과 비슷한 이름의 코코스 2d 는 초기에는 파이썬이라는 프로그램언어로 제작된 것인데, 이를 아이폰용으로 포팅된것을 현재의 중국 모바일 게임회사인 추콩 테스놀로지에서 멀티플랫폼용으로 제작이 가능한 cocos2d-x 라는 이름으로 무료로 개발 및 배포를 하고 있다.

[그림] cocos2d 로 시작되어 여러가지 플랫폼과 언어로 개발된 상태(출처:cocos2d-x.org)

아이폰이 등장할 당시 초기에 cocos2d 가 있어서 아이폰용 게임이 많았던 반면, 안드로이드 기기에서는 제대로 된 게임들이 나오질 못하고 있었는데, cocos2d-x 의 등장으로 인해 안도르이드와 아이폰 기기에서 모두 개발이 가능한 환경이 갖추어 지면서 대형게임사들도 cocos2dx 를 이용하여 수많은 명작 게임 타이틀을 만들수 있었다.

국내의 대부분의 게임사들도 cocos2dx 엔진을 이용하여 적어도 한개이상의 게임을 출시했을 만큼 비교적 안정적이고, 훌륭한 게임 라이브러리 엔진이다.

cocos2dx 게임 라이브러리는 c++ 로 구성되어 있기 때문에, C++ 을 컴파일,실행할수 있는 환경이라면 거의 대부분의 기기에서 실행될수 있다.

따라서 아이폰,안드로이드,윈도우,맥 등의 서로다른 OS 상에서도 구동이 가능한 게임을 만들수 있다는 것이다.

또한 최근 cocosStudio 라는 Scene(장면) 편집프로그램을 제공하고 있어서, 게임화면 구성등을 할때 쉽고 빠르게 할수 있도록 지원하고 있으며, SDK BOX 등 다양한 서드파티 프로그램과 플러그 인들을 연동하기 쉬운 환경을 제공하고 있다.

이처럼 cocos2dx 의 개발사인 추콩 테크놀로지사의 지속적인 업그레이드와 손쉬운 개발환경을 제공해 주고 있기 때문에, 인디 개발자들도 cocos2dx 를 이용하여 만드는 게임의 퀄리티도 함께 좋아지고 있는 추세다.

PAGE_BREAK: PageBreak

2.1 Cocos2d-x 의 설치! 어렵지 않다.

cocos2dx 를 설치전에 미리 알아야 할것은 cocos2dx는 게임개발 “툴”이 아니라는 것이다?

여태껏 cocos2d-x 로 게임을 만들자고 해놓고서 이제와서 게임툴이 아니라는 말해서 당황하는 독자도 있을 것이다.

그래서 게임제작 툴과 게임제작 라이브러리 에 대한 차이를 조금 알려주고 시작하겠다. 일반적으로 게임제작툴이라는 것은 게임을 제작하기 위해서 미리 정해 놓은 여러가지 기능들을 마우스로 드래그하는 방식으로 배치하고 작동시켜서 게임을 제작할수 있는 프로그램을 말한다.

반면 게임제작 라이브러리 라는 것은 제작툴처럼 편한 개발화면등은 제공하지는 않지만, 게임제작에 필요한 기능들을 한데 모은 파일이나 패키지 등을 제공하여 개발자로 하여금 해당 기능등을 사용해서 만들고자 하는 게임을 빠르고, 다양하게 만들 수 있도록 도와준다는 것이 다르다.

그럼 게임라이브러리가 게임툴보다 불편하고 안좋은 것이 아니냐 라고 불평하는 사람도 있을것이다.

물론 게임툴이 편하고 더 빠르게 게임을 제작할수는 있지만 게임이 다소 복잡해지거나 내가 원하는 기능이 게임툴에 없을경우 해당 기능을 포기해야하는 경우가 생기게 된다.그러나 게임라이브러리는 게임제작에 필요한 기능등을 사용자가 활용하고 확장해서 더 많은 기능과 원하는 기능을 만들수 있어서 자유도가 높아지기 때문에 전문적인 게임제작자들은 게임라이브러리를 이용하거나 직접만들어서 게임을 제작한다.

일반적인 게임 제작툴	게임제작 라이브러리
RPG Maker,Game Maker Studio,Construct, Game maker, RPG 쭈꾸르,VNAP…	Cocos2d-X,DirectX,LibGDX,SDL, allegro, Cairo ….

*unity 나 unreal 이라는 유(무)료 게임제작전문툴도 있다. 이프로그램들은 기존의 게임개발툴처럼 드래그드롭에서 화면배치와 구성하는등 사용자환경의 장점과 프로그램코드로 기능을 제어하는 라이브러리 장점을 합쳐서 개발하기 편하게 되어있다.

cocos2d-X 에서도 현재 cocos studio 나 cocos creator 같은 GUI 화면의 통합 개발 툴을 지속적으로 업그레이드 하고 있다.

[그림 전용 에디터 툴인 cocosstudio 와 cocos creator]

자. 그럼 cocos2d-x와 같은 게임제작 라이브러리로 어떻게 게임을 제작할까 궁금해 하리라 생각된다.

앞서 설명했듯이 cocos2d-x는 게임제작 라이브러리이기 때문에 화면에 캐릭터를 배치하거나 전체적인 화면구성은 프로그램코드로 작성해야 한다.

따라서 프로그램코드를 작성하기 위해서는 “프로그램 개발용 에디터” 등의 프로그램을 이용해서 작업해야 하는데, 사용자의 OS 에 맞는 에디터를 이용하는 것이 제일 좋다.

아래는 OS 별 권장하는 개발용 에디터 프로그램다.

플랫폼	권장개발툴
osx (맥킨토시)	Xcode,eclipse..
window	visualstudio,eclipse..
liunx	vim, eclipse..

개발자가 특정 플랫폼에서 cocos2dx 을 만들게 되면, 개발당시의 플랫폼에 영향을 받게된다. 예를 들어 osx 에서 xcode,eclipse 등의 게임을 제작한 사람이라면 ios,android 용으로 게임을 개발할수 있지만, 맥OS 에서는 윈도우 용 .exe 같은 실행화일은 만들수가 없기 때문에 윈오우용 게임을 개발하고 테스트 하기가 어렵다. 또, window 에서 visualstudio 에서 개발한다면 반대로 윈도우용 게임과 android 용 게임은 제작이 가능하지만 맥OS용 , 아이폰용게임은 제작 및 테스트 할수가 없다.

이것은 window 와 apple 간의 서로의 플랫품을 공개하지 않아서 발생하는 현상이기 떄문에 어쩔수 없다.

그래서 cocos2dx 에서는 게임을 실행하기 위한 내부의 게임 소스는 C++ 로 작성하도록 하고, 각각의 OS.별로 실행하고자 할때는 , 플랫폼로 미리 설정된 환경파일을 이용하여 게임이 컴파일 및 실행될 수 있도록 하고 있다.

이 책에서는 개발환경을 비교적 구축하기 쉬운, window 기반에서 개발하게 될 것이다.

거듭말하지만, window 에서 개발한다고 해도, cocos2dx 는 하나의 소스(원소스)로 멀티플랫폼용 게임을 만들수 있기 때문에, 개발환경은 별로 상관이 없다.

PAGE_BREAK: PageBreak

2.2 OS Platform 별 개발톨 설치

2.2.1 window 용 에디터 VisualStudio 설치

VisualStudio는 MS 사에서 나온 프로그램개발 전용 에디터이다.visualstudio는 원래 MS Window 기반의 프로그램을 작성할수 있도록 제작된 프로그램이지만, cocos2dx 는 주요소스가 C++로 되어 있어서 visual studio 를 이용해서 개발해도 된다.

우리가 이용할 visual Studio는 여러가지 버젼이 있는데, 무료이면서 가장무난하고 궁합이 맞는 버젼으로 Visual Studio 2015 Community 를 이용할것이다.

설치과정은 다음과 같다.

1.구글에서 visual studio 2015 Community (이건 무료다!!!) 를 검색한다.

2. 검색결과중

“Download Microsoft Visual Studio Express 2013 for…

[http://www.microsoft.com/ko-kr/download/details.aspx?id=44914]

3.다운로드 화면에서 [빨간색] 다운로드 버튼을 선택하다.

4.”원하는 다운로드 선택” 에서 wdexress_full.exe 만 선택하고 [next]를 클릭한다.

5.[]동의함을 체크한다음 [설치]버튼을 클릭해서 설치를 진행한다.

2.2.2 mac 용 에디터 Xcode

cocos2d-x 를 이용하여 아이폰용(IOS) 게임을 제작하려면 Mac(매킨토시) 컴퓨터에서 xcode 라는 에디터로 제작하는게 편하다. Xcode는 mac에 대부분 기본적으로 설치가 되어있기 때문에 별도의 설치과정이 필요치는 않지만 필요한 경우 애플스토어에서 설치하길 바란다.

mac에서 cocos2d-x를 사용하기 위해서는 아래와 같은 사양이 필요하다.

-Mac OS X 10.8+

-Xcode 5.1.1+

ios용 앱을 만들기 위해서 mac 에서 cocos2d-x를 설치하는 절차는 다음과 같다.

mac 용 cocos2d-x는 따로 있는게 아니기 때문에 window용 download 위치와 같은 곳에서 cocos2d-x를 다운로드 한다.

Cocos2d-x v3.3 https://cocos2d-x.org/download

다운로드한 cocos2d-x 폴더를 사용자폴더로 이동하고 setup.py 를 실행한다.

setup.py 는 파이썬 스크립트로서 파이선이 설치되어 있는 컴퓨터에서는 실행할수 있는 파일이다. 이 스크립트안에서는 각 OS 별로 시스템체크하는 부분과 android,ios 등의 앱 제작에 필요한 프로그램들이 설치되어있는지 체크하고, 사용자에게 확인하는 과정등을 진행한다.

mac os

2.2.3 linux용 에디터 Eclipse

linux에서는 eclipse 라는 무료 에디터 프로그램을 이용해서 개발을 할수 있다. eclipse 는 linux 뿐만 아니라 window,mac 에서도 모두 설치가 가능한 에디터 로서 프로그램 언어별 특징에 맞게 커스터마이징이 가능하고, 지원프로그램들도 많아서 전세계 개발자들이 많이 사용하는 에디터이다.

linux 에서는 다음과 같은 버젼이 필요하다.

cocos new 를 위한 python2.7

yum install glibc.i686 은 에뮬레이터 실행을 위한 설치

yum install zlib.i686 libstdc++ ncurses-libs libgcc

PAGE_BREAK: PageBreak

2.3 cocos2d-x 라이브러리 설치

cocos2d-x 라이브러리는 C++ 로 구성되어 있기때문에, 윈도우,리눅스,맥킨토시 에서 공통으로 사용될수 있도록 만들어져 있다. 따라서 윈도우용 cocos2dx, 매킨토시용 cocos2d-x 처럼 따로따로 있는게 아니라 하나의 라이브러리를 이용하면서 최종 게임패키지시에만 각 OS 에 맞는 환경설정을 적용하고 컴파일후 패키징하여 출시하면된다.

2.3.1 cocos2d-x다운로드[thkim 화면캡춰 필요]

1.코코스 2d-x의 공식사이트에서 [download] 를 클릭해서 다운로드 페이지로 이동한다.

2.여러가지 제품군중 [cocos2dx-x] 항목하단의 Download (최신버젼)을 클릭해서 원하는 폴더에 다운로드 한다.

Clone of Windows 7-2016-03-26-14-09-54.png

3.과정2에서 다운로드 받은 파일의 압축을 풀어서 [내 컴퓨터]의 적절한 위치로 이동한다.

(필자는 C:\cocos2dx\ 로 이동했다)

cocos2dx 설치가 너무 간단하게 끝났다. 앞서 말했듯이 라이브러리이기 때문에 압축을 푸는 과정으로 설치및 세팅이 끝난것이다.

이제 내컴퓨터에 게임개발을 할 폴더를 만들어서 하위에 프로젝트를 생성하고, 앞서 설치한 에디터(visualstudio)를 연동하여 코드를 수정하고 실행해 보자.

단, cocos2dx 에서는 프로젝트 생성할때, 각 플랫폼별로 미리 설정파일을 세팅해준 템플릿들이 있는데, 이를 직접 복사하고 설정하는 것 또한 매우 번거롭기 때문에, python 이라는 프로그램으로 만든 명령어를 통해 쉽게 관련 설정을 할수 있게 해준다.

따라서 아래의 python 이라는 프로그램은 반드시 설치하고, 경로를 pc 의 환경설정에 포함시키자.

2.3.2 Python 설치

앞서말했듯이, cocos2d-x 를 이용하여 신규 프로젝트를 생성하려면 Python이라는 프로그램을 설치해야 한다.

cocos2d-x가 라이브러리 이다 보니 신규프로젝트 생성시에 프로젝트의 초기값, 프로젝트이름등을 사용자에게 물어봐야 하는데 linux,mac,window와 같이 서로다른 OS에서 동일한 프로젝트 생성명령체계를 만들고자 채택한 방식이 Python 을 통한 프로젝트 생성,관리 방식인 것이다.

만일 Python을 통하지 않고 각 os 마다의 프로젝트 생성명령어 방식이 틀리다면 개발자에게 혼란을 야기할것이다.

Clone of Windows 7-2016-03-26-13-51-45.png

1.Python 사이트에서 [download] 를 클릭해서 다운로드 페이지로 이동한다.

2.제품군중에서 2.7 버젼을 선택하다.

3.설치가 끝나면 Python 명령어가 어디에서도 실행될수 있도록, 각 OS별 경로(Path)에 추가해야 한다.

Clone of Windows 7-2016-03-26-14-06-12.png

4.window에서의 Python경로 추가.

4.1

내컴퓨터에서 오른쪽버튼을 클릭하고 [속성]을 클릭한다.

4.2 상단탭중 [고급]탭을 선택하다

4.3 환경변수(N)을 클릭한다.

4.4 환경변수 화면중 하단 시스템 변수(S) 의 목록중 Path 라는 항목이 있는데 이를 선택하고 편집(E)를 클릭한다.

4.5 변수값 부분의 맨 끝부분에 마우스 커스를 위치시키고, 자신이 설치한 python 폴더 (필자는 “;C:\Python27″) 를 드라이브명을 포함하여 세미콜론을 앞에 붙이고 입력한다.

4.6 확인버튼을 눌러서 시스템속성창을 닫고 컴퓨터를 재부팅한다.

* mac이나 linux 에서는 bashrc 나 cshrc파일에 PATH=”$PATH”:/usr/local/python/bin 을 추가하고 export $PATH 하고 저장하면 바로 적용된다.

2.4 HelloWorld ! Cocos2dx

자.이제 진짜로 cocos2d-x 로 게임개발할 환경을 만들었다.

이제 테스트 프로그램을 설치하고 한번실행해보자.

사실 cocos2d라이브러리 안에는 무수히 많은 기능함수 파일들이 있는데 이들중에서 우리가 필요한 기능들만 따로 복사해서 게임프로젝트에 다시 세팅하는 절차는 생각보다 복잡하다.

더욱이 비쥬얼스튜디오나 xcode 같은 비쥬얼 개발툴에서 코코스라이브러리를 일일히 세팅해서 연동해 놓는다는건 육두문자가 나올만한 행동이다.

다행히 coco2dx 에서는 아까 설치했던 python 명령어로 구성된 스크립트를 제공하여 있어서, 명령어 한 줄로 신규 프로젝트 생성은 물론 각각의 개발툴, 환경에 맞는 설정화일들을 자동으로 생성할 수 있다.

2.4.1 .프로젝트의 생성

코코스가 설치된 폴더로 가서 아래와 같이 프로젝트 만들기 명령을 입력한다.

Clone of Windows 7-2016-03-27-14-12-52.png Clone of Windows 7-2016-03-26-14-49-00.png

cocos new HelloWorld -p com.khjlab.HelloWorld -l cpp -d ~/HelloWorld

1) cocos : cocos.py 파일을 실행한다. .py 파일은 파이썬이라는 프로그램에서 실행할수 있는 프로그램파일이다.
* python 이 윈도우(또는 리눅스)상의 Path 경로로 추가되어 있어야 cocos.py 가 실행된다.

2) new : 새로 생성한다는 의미

3) HelloWorld : 프로젝트의 이름(프로젝트 관리용 이름이다.)

4) -p com.MyCompany.HelloWorld : -p 는 프로젝트 이름인데, 주로 소속,회사,프로젝트이름 순으로 입력한다. 이것은 매우(!!!) 중요한 옵션으로 마켓에 올릴떄 앱마다의 고유 이름을 결정짓는데 사용된다. 만일 입력한 이름이 com.intel.test 라는 식이라면 이미 intel 에서 등록한 프로젝트 이름이라 마켓에 앱등록 자체가 거부당할지도 모른다 .따라서 절대로 중복되지 않도록 나만의 이름으로 써야한다.

*주로 com.myname.testgame1 라는 식으로 패키지명을 작성한다.

5) -l cpp : 사용언어를 지정한다. cocos 는 cpp,lua,javascript 로 프로그래밍할수 있는데, 사용언어에 따라서 프로젝트 관련 초기 파일들이 만들어진다.우리는 주로 cpp 를 사용한다.

6)-d ~/MyCompany : 새로생성되는 프로젝트가 저장될 위치를 지정한다. 프로젝트는 웬만하면 한군데에다가 몰아서 관리하는게 편하다.

이렇게 입력하면 cocos.py 파일이 실행되면서

-cocos2d 의 프로그램엔진소스

-classe : cocos2dx 폴더내의 기본템플릿 구조를 복제해서 이폴더에 저장

-proj.android : android 용 설정 파일 – 주로 eclipse 기반의 편집기에서 연동

-proj.android-studio : cocos2dx 3.7 부터는 안드로이드스튜디오용 프로젝트 파일도 제공

-proj.ios_mac : xcode 용 설정파일

-proj.win32 : window 용 visualstudio 설정파일(sln)

-proj.win10 : window10 용 설정파일

-proj.linux : linux 용 설정파일

-proj.wp8-xaml wp8 용 설정파일

-Resource : 그래픽,사운드,관련파일등의 리소스가 저장되는 곳

와 같이 cocos2dx 엔진이 복사가 되면서, 플랫폼별 설정파일들도 미리 전부 복사가된다.

이제 폴더( ~/HelloWorld)에 우리가 만들 새로운 게임 프로젝트가 생성되었다.

사실 자세히 보면 cocos2d-x-3.10\templates\cpp-template-default 의 폴더가 복사되어있는것을 알수 있다.

따라서 cocos2d-x-3.10\templates\cpp-template-default 폴더의 내용을 자신의 입맞게 바꿔놓으면, 새로운 프로젝트 생성시에 자신만의 환경을 미리 구축해 놓을수 있다.

2.4.2 .프로젝트의 실행

프로젝트 생성이 끝났으면, 좀전에 생성한 프로젝터 폴더로 가서 하위의 -proj.win32 폴더로 가서 visualstudio 용 solution 파일 sln 을 더블 클릭한다.

visualstudio 가 설치되어 있다면 프로그램이 실행되면서 다음 그림과 같은 화면이 보일것이다.

[ 솔류션 화면캡춰]

Clone of Windows 7-2016-03-26-14-49-36.png

솔류션파일이 잘 열렸다면 아래와 같이 칩멍크 등의 기본 라이브러리가 추가되어 있을것이다.

비쥬얼스튜디오의 build(f7) 을 눌러서 빌드하고 실행해보자.

그림과 같이 Hello World 가 뜨고 귀여운 코코스 화면이 떴을것이다.

Clone of Windows 7-2016-03-26-15-06-17.png

과정1에서 cocos.py 를 실행하면 classe 폴더와 Resource 폴더에 관련 파일들이 생성된다고 했었다. 그래서 아무것도 안하고도 저렇게 화면에 헬로월드가 출력된것이다.

classe 안의 초기 파일에는 아래와 같은 기능들이 프로그램되어있다.

-코코스 이미지를 화면중앙에 띄운다.

-왼쪽하단에 Debug 용 화면표시를 띄운다.

-오른쪽 하단에 종료버튼을 이미지로 만들어서 터치이벤트를 받을수 있도록 띄운다.

이화면에서는 캐릭터(?)출력,터치이벤트,화면에 스코어 표시 소리출력만 빠졌지 게임의 기본베이스는 다 표시되었다. 여기에 살을 붙이고 캐릭터를 더 배치하고 이벤트등을 넣어서 게임이 완성된다고 보면된다.

이제 우리는 본격적으로 게임개발의 첫걸음을 내딛었다고 할수 있다.

PAGE_BREAK: PageBreak

3.0 게임라이브러리 개념이해

3.1 cocos2d-x 라이브러리 로는 어떤 게임까지 만들수 있을까

3.2 cocos2d-x 게임요소개념

3.3 프로젝트 기본 설정의 설명

PAGE_BREAK: PageBreak

3.1 cocos2d-x 라이브러리 로는 어떤 게임까지 만들수 있을까

이전 챕터에서 hello world를 실행해본 독자라면 개개인에 따라서 “오~ ” 하는 사람과 “에~” 하는 사람이 있을거라 생각된다.

“오~~” 라고 작게나마 감탄했던 독자는 화면에 뭔가 출력된다는 점에서 놀랐을것이고, “에~” 했던 독자는 좀더 멋진 예제가 보여지리라 기대했던것같다.

어떤 감탄사를 냈던 간에 Hello World 예제에서는 cocos2dx로 할 수 있는 기본적인 기능을 수행하고 있다.

그림을 화면에 출력하고, 글씨도 출력하고, 프레임비율을 보여주며, 종료버튼을 터치하는것에 반응해서 실행을 종료하는 명령도 해봤다.

우리는 앞으로 hello world 에서 했던 기능들을 응용하고, 확장하고 좀더 다양한 로직을 조합해서 하나의 멋진 게임을 만들것이다.

일단 백문이 불여일견 !

자 일단 http://www.cocos2d-x.org/games 사이트를 한번 방문해 보자. 퍼즐, 슈팅, RPG, SNS 게임, 물리게임 등 우리가 한번쯤은 해봤던 게임들을 거의 모두 만들수 있다.

Clone of Windows 7-2016-03-26-15-12-54.png

cocos2d-x 의 이름에 2d 가 들어갔듯이 코코스는 초기에 2d 게임을 만들기 위한 전문 라이브러리로 출발하였다. 그래서 2d 로 구성된 게임이라면 거의 제약 없이 생각한 그대로 게임을 제작할수 있을것이다.

다만 똑같은 라이브러리를 사용하더라도 간단한 플로피버드 같은 경우 몇천라인을 넘지 않을테지만, 앵그리버드같은 경우에는 몇만 라인의 코드들로 짜여져 있을것이다.

코코스에서 제공하는 기능들만으로도 충분히 쇼케이스에 있는 게임수준을 만들수 있지만, 어떤수준의 결과물이 나오냐는 결국 개발자의 몫이다.

3.2 Cocos2d-x 의 구성과 게임 요소 개념

cocos2dx 는 게임개발에 필요한 개념과 기능들을 탑재되어 있기 때문에 용어와 개념을 잘 이해할 필요가 있다.

cocos2dx 를 이용하여 게임을 만드는 것을 한편의 영화를 만드는 것과 비슷할 수 있다.

어차피 화면이 변경되면서 주인공과 적들이 움직이고, 소리가 빵빵 터지는 것을 사용자들이 즐기도록 하는 큰 맥락은 갖기 때문이다.

따라서 한편의 영화라고 생각하고 아래의 그림을 유심히 보기 바란다.

—————————————————–

(Node)-Director -scene#1 – layer#1

-scene#2 -layer-sprite-action( )

(기획사,제작사)-감독-씬1 -무대1

-씬2 -무대2-주인공(적들)-행동

영화의 요소들과 정말 일치되지 않는가? 우리는 저기 있는 각각의 위치에 프로그램으로 적절히 배치하는 등의 “시나리오” 를 만들기만 하면 된다.

영화 요소에 대응하는 cocos2dx 의 각 용어별로 설명을 하면 다음과 같다.

3.2.1 .Node

Node 는 Cocos2dx 의 가장 상위 개념으로서 게임내에서 사용되는 모든 요소를 하위에 두고 관리를 하는 요소이다.

Node 는 기획사의 역활처럼, 게임의 전체적인흐름에 관여하고, 하위 소속된 요소들의 계층구조에 대한 관리등의 역활도 수행한다.

director,scene,sprite,layer,menu, 등의 cocos2d 모든 요소는 node 의 상속을 받는다.

3.2.2. Director

하나의 게임에 필요한 감독은 한명이다. Director 라는 개념은 감독의 권한 처럼, 각각의 요소 Scene 들을 관리하는 역활을 한다.

director 는 각 Scene 이 역활을 할것인지, 배우(스프라이트)나 사운드 처리등은 어떻게 할것 인지 결정한다.

3.2.3 Scene

director 의 관리를 받는 scene 은 화면상에 보이는 장면(화면)을 말한다.

영화에서도 타이틀씬, 로고씬, 인트로씬, 비쥬얼씬,엔딩씬 등 나뉘어져 있듯이, 우리의 게임또한 크게보면 영화와 다를게 없다.

우리는 scene 이라는 요소를 이용하여 각 scene 안에 무대에 속하는 레이어, 주인공등 스프라이트, 액션,소리등을 추가하여 하나하나의 완성된 여러 Scene 을 완성해 게임을 제작 할수 있다.

3.2.4 Layer

같은 scene 안에서도 주인공의 움직임에 따라 다른 무대가 펼쳐질수 있는데 layer 는 이런 무대를 설치하는 것을 의미하며, layer 안에 주인공등을 배치하여 해당씬을 완성할수 있도록 해주는 필수 요소이다.

cocos2dx 레이어에는 주인공,적 뿐아니라, 메뉴나 타이틀, 같은 요소들도 추가가 된다.

cocos2dx 3.0 이전에는 화명의 터치이벤트를 받기 위해서 Layer 안에 스프라이트, lable 등을 배치했다, 그러나 3.0 이후에는 모든 Node 가 터치이벤트를 받을수 있게 되어 굳이 layer 안에 캐릭터나 메뉴등을 배치하지 않아도 된다.

따라서 Layer 최근 활용도는 스프라이트들을 그룹화 해서 움직이게 하거나 동시에 효과를 주고자 할때 주로 사용된다.

3.2.5 Sprite

scene 과 layer, 즉, 무대와 장면이 준비 되어 있다면 주인공과 적, 아이템들을 올려놔야 한다.

이렇게 주인공또는 적들 등과 같이 무대상에 움직이는 모든 물체를 sprite 라고 이름지었다.

스프라이트는 보통 우리가 말하는 게임에서의 캐릭터나 아이템을 말하기도 한다.

3.2.6 Action

scene,layer.sprite 가 준비되어 있다면 이제 “액션” 을 외쳐서 화면의 요소들을 각각의 특징에 맞게 움직여야 한다. 이때 필요한것이 액션클래스이다.

cocos2d 에서는 개발자가 스프라이트등의 액션을 좀더 유연하게 제어할수 있도록, 순차액션, 복합액션, 거꾸로액션 등 편리한 기능들을 넣어줬다.

게임내에서의 화면제어를 제외한 모든 움직임은 액션 명령어를 따른다.

3.2.7 input

cocos2dx 는 멀티플랫폼엔진이기 때문에, 터치입력뿐아니라, 마우스,키보드,조이스틱 등 다양한 사용자 입력방식을 제공해서 게임캐릭터를 움직이거나 메뉴를 터치할수 있도록 기능을 제공해준다.

3.2.8 Sound

소리 안나는 게임을 해본적이 있던가? 당연히 게임에서 효과음과 배경음악은 게임에 더욱 집중하고 재미요소를 더할수 있다.

3.2.9 그외 제공되는 다양한 확장 기능등

cocos2dx 에서는 위에서 설명한 게임개발에 필요한 기본적인 요소이외에도 아래와 같은 당양한 기능들을 추가로 제공하고 있다.

box2d, chipmonk : 실생활의 물리효과를 재현해 낼수 있는 확장기능
particle : 분수, 불꽃, 화염 등과 같은 것을 쉽게 표현해줄수 있는 확장기능
pageview, tableview, scrollview 등..

coco2dx 가 없다면 위에서 설명한것과 같은 화면처리, 배경처리, 주인공처리, 음향처리등등… 도대체 어떤것을 만들지부터 고민하고 게임 제작을 아예 포기했을지도 모른다.

다행히 cocos2dx 가 위와 같은 개념들을 미리 정립해 주었기 때문에 우리는 게임의 구현에만 집중해서 제작하면 된다..

이제 어떤 형식의 게임을 만들지 기획하고 시나리오를 짜서 , 코딩으로 옮기는 일만 하면 게임이 완성된다.

3.3 hello world 의 기본구조

우리가 앞서 실행해본 helloworld 의 구조를 통해서 즉 코코스게임엔진의 기본구조를 살펴보자.

코코스엔진은 앞서말한대로 멀티플랫폼엔진이지만, 각 기기(OS) 별로 게임을 실행하는 명령어가 다르게 접근하게 되어있는데 , 실행방식이야 어찌돼었든 코코스게임엔진내로 동일하게 진입하기 위한 시점을 AppDeleGate(대리인) 이라는 함수를 통해서 하게 하였다.

쉽게 말하자면, 서로 다른 크기의 문을 통해서 들어오는 손님을 appDelegete 가 게임안으로 안전하게 안내하는 역활을 하는 것이다. 일단 게임안으로 안내가 되면 그때부터는 cocos엔진이 가동되는것이다.

3.3.1 .AppDeleGate

앱델리게이트는 코코스의 시작지점이다. delegate 라는 용어는 대리인 등으로 해석되는데, 약간 어색하기도 한 이런 단어는 cocos2dx 가 역사적으로 ios 의 cocos2d 를 두고 있기 때문이다.

Appdelegate 에서는 opengl 화면 크기와 감독의 선임(director),첫시작할 화면의 설정등을 지정한다. 또한 초당프레임수, 게임중 전화나 기타 이유로 멈추었을때의 처리절차등을 기술한다.

우리의 예제는 C++ 언어로 되어 있기 때문에 , 선언부에 해당하는 *.h 파일과 구현부에 해당하는 *.cpp 파일로 구성되어 있다.

AppDeleGate.h :

: 헤더부부분에서는 cocos2d 엔진의 CCApplication 을 상속 받는 것에 대한 선언과 앱시작시 실행되거나 앱의 중단, 종료시에 실행된 함수들을 가상함수로 지정하여 사용자가 해당 부분에서 필요한 프로그램처리를 할수 있도록 선언할수 있다.

AppDeleGate.cpp

: 앱실행시 맨 처음으로 실행되는 파일로서 앞서 헤더파일에서 선언했듯이, 생성자함수,소멸자함수, 앱의 실행과 중단,종료시에 실행될 함수들이 실행할 내용에 대해 기술한다.

상식적으로 게임앱의 경우 맨처음 해야될것은 사용자에게 보여줄 화면의 크기와 해상도, 게임의 속도 등을 먼저 설정하거나 가능한지 확인한다음 이상이 없을때는 게임의 첫씬을 보여주도록 한다.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

177

178

179

180

181

182

183

184

185

188

189

190

191

192

193

194

195

196

197

198

199

200

#include “AppDelegate.h”

#include “HelloWorldScene.h”

USING_NS_CC;

static cocos2d::Size designResolutionSize = cocos2d::Size(480, 320);

static cocos2d::Size smallResolutionSize = cocos2d::Size(480, 320);

static cocos2d::Size mediumResolutionSize = cocos2d::Size(1024, 768);

static cocos2d::Size largeResolutionSize = cocos2d::Size(2048, 1536);

AppDelegate::AppDelegate() {

}

AppDelegate::~AppDelegate()

{

}

//if you want a different context,just modify the value of glContextAttrs

//it will takes effect on all platforms

void AppDelegate::initGLContextAttrs()

{

//set OpenGL context attributions,now can only set six attributions:

//red,green,blue,alpha,depth,stencil

GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};

GLView::setGLContextAttrs(glContextAttrs);

}

// If you want to use packages manager to install more packages,

// don’t modify or remove this function

static int register_all_packages()

{

return 0; //flag for packages manager

}

bool AppDelegate::applicationDidFinishLaunching() {

// initialize director

auto director = Director::getInstance();

auto glview = director->getOpenGLView();

if(!glview) {

#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)

glview = GLViewImpl::createWithRect(“HelloWorld”, Rect(0, 0, designResolutionSize.width, designResolutionSize.height));

#else

glview = GLViewImpl::create(“HelloWorld”);

#endif

director->setOpenGLView(glview);

}

// turn on display FPS

director->setDisplayStats(true);

// set FPS. the default value is 1.0/60 if you don’t call this

director->setAnimationInterval(1.0 / 60);

// Set the design resolution

glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);

Size frameSize = glview->getFrameSize();

// if the frame’s height is larger than the height of medium size.

if (frameSize.height > mediumResolutionSize.height)

{

director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));

}

// if the frame’s height is larger than the height of small size.

else if (frameSize.height > smallResolutionSize.height)

{

director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));

}

// if the frame’s height is smaller than the height of medium size.

else

{

director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));

}

register_all_packages();

// create a scene. it’s an autorelease object

auto scene = HelloWorld::createScene();

// run

director->runWithScene(scene);

return true;

}

// This function will be called when the app is inactive. When comes a phone call,it’s be invoked too

void AppDelegate::applicationDidEnterBackground() {

Director::getInstance()->stopAnimation();

// if you use SimpleAudioEngine, it must be pause

// SimpleAudioEngine::getInstance()->pauseBackgroundMusic();

}

// this function will be called when the app is active again

void AppDelegate::applicationWillEnterForeground() {

Director::getInstance()->startAnimation();

// if you use SimpleAudioEngine, it must resume here

// SimpleAudioEngine::getInstance()->resumeBackgroundMusic();

}

자 이제 앱델리케이터가 설정을 마무리하고 이상이 없으면 첫씬에게 안내하는데, 이때부터 본격적으로 게임이 시작되는 시점이 된다.

3.3.2.첫 SCENE

Appdeletegate 에 정의된 첫번째 SCENE 은 실제로 게임시작의 진입점이다. 따라서 제작자의 로고나 게임로딩이미지, 버젼체크등 제작자의 의도대로 프로그래밍을 하면된다.

첫게임인 HelloWorld 에서는 닫기이미지버튼과 로고이미지, helloworld 텍스트출력 을 했다.

HelloWorldScene.h :

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

177

178

179

180

181

182

183

184

185

188

189

190

191

192

193

194

195

196

197

198

199

200

#include “HelloWorldScene.h”

USING_NS_CC;

Scene* HelloWorld::createScene()

{

// ‘scene’ is an autorelease object

auto scene = Scene::create();

// ‘layer’ is an autorelease object

auto layer = HelloWorld::create();

// add layer as a child to scene

scene->addChild(layer);

// return the scene

return scene;

}

// on “init” you need to initialize your instance

bool HelloWorld::init()

{

//////////////////////////////

// 1. super init first

if ( !Layer::init() )

{

return false;

}

Size visibleSize = Director::getInstance()->getVisibleSize();

Vec2 origin = Director::getInstance()->getVisibleOrigin();

/////////////////////////////

// 2. add a menu item with “X” image, which is clicked to quit the program

// you may modify it.

// add a “close” icon to exit the progress. it’s an autorelease object

auto closeItem = MenuItemImage::create(

“CloseNormal.png”,

“CloseSelected.png”,

CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

closeItem->setPosition(Vec2(origin.x + visibleSize.width – closeItem->getContentSize().width/2 ,

origin.y + closeItem->getContentSize().height/2));

// create menu, it’s an autorelease object

auto menu = Menu::create(closeItem, NULL);

menu->setPosition(Vec2::ZERO);

this->addChild(menu, 1);

/////////////////////////////

// 3. add your codes below…

// add a label shows “Hello World”

// create and initialize a label

auto label = Label::createWithTTF(“Hello World”, “fonts/Marker Felt.ttf”, 24);

// position the label on the center of the screen

label->setPosition(Vec2(origin.x + visibleSize.width/2,

origin.y + visibleSize.height – label->getContentSize().height));

// add the label as a child to this layer

this->addChild(label, 1);

// add “HelloWorld” splash screen”

auto sprite = Sprite::create(“HelloWorld.png”);

// position the sprite on the center of the screen

sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

// add the sprite as a child to this layer

this->addChild(sprite, 0);

return true;

}

void HelloWorld::menuCloseCallback(Ref* pSender)

{

Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

exit(0);

#endif

}

몇줄되지 않지만 코코스2D 로 게임을 만드는 기본명령어는 다 들어있다.

간단하게 순서대로 설명하자면 cocos2d 엔진을 include 하고, 스크린에서 터치이벤트를 받기위해서 layer 노드를 상속받고 씬에 레이어를 추가한다. 그리고나서 로고이미지와 기타출력물을 출력하고 사용자 입력을 대기한다.

영화제작에 비교하자면 아래와 같다.

게임만들기	영화만들기
#include “cocos2d.h”	제작환경 및 장비준비
Director * director = Director :: getInstance ();	감독섭외
director-> setOpenGLView (EGLView :: getInstance ());	카메라 준비
searchPaths.push_back ( “hd” );	추가 소품 준비
CreateScene()	무대(장면)준비
HelloWorld::init()	촬영시작
auto sprite = Sprite::create(“HelloWorld.png”); this->addChild(label, 1);	배우 캐스팅
sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));	배우 배치
HelloWorld 예제에서는 빠졌지만 더 있어야 할것들
auto talentAction = JumpTo()	배우액션
sound	효과음 재생
touch	게임에만 있는 사용자 터치 반응

처음 코드를 보았을때는 알듯모를듯한 명령어뿐이었겠지만, 영화제작과 비교하면 막상 별거 없다라고 생각했을것이다.

대부분의 개발자들이 이런 기본구조에 살을 붙이고 , 로직을 첨가해서 자신만의 게임을 만드는 것이니까 용기를 가지고 계속 도전해 보자.

PAGE_BREAK: PageBreak

4.0 화면 해상도, 화면 좌표계와 앵커

4.1 화면해상도

4.2 화면좌표계

4.3 앵커포인트

PAGE_BREAK: PageBreak

cocos2dx 를 이용하여 게임을 만들고자 하는 사람들의 대부분은 모바일기기에서 돌아가는 게임,유틸리티 등을 만들고자 하기 위해서일것이다.

모바일기기는 PC 에 비해서 몇가지 단점이 있는데, 느린속도, 제한된 용량, 네트워크, 화면크기등이 있다.

이중 느린속도와 제한된 용량은 이제 거의 컴퓨터수준이상으로 빨라지고 네트워크 또한 대부분 끊김없이 원활하게 이용할수 있을정도로 발전했는데, 문제는 기기마다 각기 다른 화면크기이다.

예전에는 아이폰이 고정된 화면크기의 제품이라 크게 고민할것이 없었는데, 이제는 아이폰또한 여러가지 화면크기의 기기가 나오는 바람에 개발자들을 더욱 곤혹스럽게 하고 있다.

물론 안드로이드나, 윈도우폰 계열은 말할것도 없다.

어찌됐던 개발자는 모든 기기에서 잘돌아가고, 잘보이는 게임을 만들 의무가 있다.

[그림 ] 이런 결과를 만들지 않도록…

따라서 여러 유저들을 만족시킬수 있는 모든 화면사이즈에 대응하는 그래픽을 제공하던가, 아니면 이미지따위야 위아래,좌우로 늘어나던, 짤리던 화면크기에 따라 맘대로 변하는 코드를 적용하던가는 개발자가 정해야 한다.

생각보다 쉽지 않은 문제다.

4.1 화면해상도

cocos2dx 에서는 다양한 기기의 화면해상도에 맞게 게임의 크기와 비율을 조절할수 있도록 몇가지 함수와 공식을 제공한다.

우리가 cocos 명령어로 생성했을떄, 자동으로 입력되어 있는 appDeletegate.cpp 에 보면 게임의 해상도와 화면의 해당도를 얻어낸다음 적절한 비율로 확대,축소하는 부분이 있을것이다.

director->getOpenGLView()->setDesignResolutionSize(iScreenWidth, iScreenHeight, ResolutionPolicy::NO_BORDER);

DesignResolutionSize 는 말그대로 우리의 게임화면디자인이 몇해상도를 기준으로 작업했는지를 지정하는 것이다. 즉, 우리가 게임내에서 캐릭터를 배치할때, 화면디자인(1000,700)에서 했던 캐릭터의 위치(500,200) 값을 코딩상으로 집어넣으면, 실제 기기화면사이즈야 어떻든 간에, 생각했던 곳에 캐릭터가 위치하게 된다.

단, 디자인ResolutionSize 를 지정할때, 화면디자인과 기기해상도가 다를경우를 대비해서, 화면에 대해 디자인이 어떻게 보일것인지에 대한 결정을 한느 옵션이 다음과 같이 있다.

EXACT_FIT

이미지를 화면에 꽉차게(EXACT) 고정(FIT) 시킨다. 따라서 이미지들은 기기의 해당도에 억지로 맞추게되어 몇몇기기에서는 위,아래또는 좌우로 늘어난 상태로 보일것이다.

NO_BORDER

테두리(BORDER)없이 기기화면에 게임화면디자인이 꽉차게 보이도록 한다. 위아래,또는 좌우 쪽 한방향의 축에 이미지를 꽉 맞추되, 화면사이즈를 넘어가는 축으로의 이미지는 보이지 않게된다. 이렇게 하면 상단의 메뉴버튼등이 짤려져서 절반밖에 보이지 않을수있기 때문에, 프로그램으로 메뉴들의 위치를 조절해주는등의 작업이 필요하다.

SHOW_ALL

NO_BORDRE 와 비슷하지만, 게임화면이미지가 기기화면을 넘어가서 짤리지 않도록 , 즉 모든 게임이미지가 기기화면내에 보이도록 한다.

이렇게 하면 화면사이즈와 비율이 안맞는 축으로는 너무 작아져서, 해당축의 양쪽끝에 시커먼 여백이 생기게된다.

FIXED_HEIGHT, FIXED_WIDTH

한쪽축, 위아래(HEIGHT) 좌우(WIDTH) 으로 기기해상도 사이즈에 맞춘 비율로 나타낸다. 조절된 축으로 값이 넘칠경우에는 게임화면이미지가 짤리게 되고, 모자를 경우에는 해당축방향으로 검은색 바탕화면이 보인다.

https://coderwall.com/p/svldvw/configuration-of-multiple-resolution-in-cocos2d-x-3-0

게임화면과 관련된 설정이 하나더 있는데, setContentScaleFactor 이다.

이함수는 게임화면이미지를 기기화면에서 어떤 비율로 확대,축소되어 보여질 것인지를 결정한다.

게임화면디자인이 기기화면보다 크다면, 기기화면에 맞는 비율로 축소시켜서 화면에 보여줘야 하고, 반대라면 확대시켜서 보여준다.

pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height)

cocos2dx 를 이용해서 화면에 뭔가를 출력하거나, 움직이기 위해서는 위치를 나타내는 좌표계와 움직임의 기준점이 되는 앵커를 이해해야 한다.

4.2 화면 좌표계

화면좌표계는 수학시간에 익히 배웠던 x-y 좌표계와 동일하게 1사분면으로 되어 있다. 따라서 게임캐릭터를 오른쪽으로 이동하면 x 좌표값은 증가할테고, 위로 이동하면 y 좌표값이 증가할것이다.

cocos2dx 는 내부적으로 사용하는 opengl 이라는 3D 그래픽 API 를 이용하기 때문에, 좌표값도 opengl 의 좌표값을 따르기 때문이다.

4.3 앵커포인트

앵커포인트라는 것은, 캐릭터의 기준점을 말한다. 기준점이란 캐릭터가 이동하거나, 회전,크기조절등의 변형이 이루어 질때 기준이 되는 곳이다.

만일 캐릭터의 기준점을 배꼽위치로 두었다면, 캐릭터가 회전할때, 배꼽을 중심으로 회전할것이고, 발밑으로 두었다면, 발밑을 중심으로 회전하게 될것이다.

앵커포인트가 중요한 이유는 어떤 캐릭터를 가상의 건물에 올려 놓았는데, 캐릭터의 기준점이 배꼽의 위치가 되어 있다면, 프로그램소스코드로 캐릭터를 건물높이 값에 놓았을때, 캐릭터는 배꼽부분이 건물 끝에 걸쳐져 있어서 매우 이상하게 보여질것이기 때문이다.

따라서 캐릭터의 생김새에 맞게 적절한 앵커포인트를 지정해야 나중에 액션을 하거나, 다른 캐릭터에 올라탈때 어색하지 않게 된다.

앵커포인트를 지정하는 방법은 스프라이트 속성항목에서 자세히 설명하겠다.

PAGE_BREAK: PageBreak

5.스프라이트

5.1 스프라이트(캐릭터 이미지) 출력

5.3.1 이미지 파일을 이용한 스프라이트 생성

5.3.2 이미지의 일부분을 사각영역을 이용하여 스프라이트 생성

5.3.3. 스프라이트 시트에서 스프라이트 만들기

5.3.4 spriteBatchNode 를 이용해서 스프라이트 를 만들기

5.3.5. 스프라이트 화면 화면 출력과 다양한 속성

5.3.6 스프라이트 액션

5.2.스프라이트액션 II

5.5.1. 순차액션과 복합액션

5.5.2 제어액션

5.5.3 액션의 속도에 관한 액션

5.3.콜백액션

5.5.스프라이트 관계맺기

PAGE_BREAK: PageBreak

5.1 스프라이트(캐릭터 이미지) 출력

게임에서는 처음부터 끝까지 로고, 메뉴, 캐릭터, 배경등 여러가지 다양한 이이미지를 화면에 출력하는 작업이 대부분이다.

cocos2dx 에서는 우리가 준비한 이런 이미지들을 화면에 출력하기 쉽고, 게임캐릭터 이미지 출력에 유용한 여러가지 속성값과 함수들을 제공하고 있다.

cocos2dx 에서는 사용자가 준비한 이미지를 스프라이트로 로드하기 위해 몇가지 방법을 제안하고 있다.

4.3.1 이미지 파일을 이용한 스프라이트 생성

기본적으로 이미지파일 png,jpeg,tiff 파일을 이용해서 스프라이트를 생성할수 있다.

auto mySprite = Sprite::create(“mysprite.png”);

이것이 이미지 파일을 이용하여 스프라이트를 생성하는 가장 기본적인 방법이다.

이미지 파일은 Resource 라는 폴더와 appDelegate 에서 추가로 지정되어 있는 searchpath 에서 찾아보고 있으면 불러들여 스프라이트에 Texutre(질감)으로 입혀놓는 원리다.

이와 같이 스프라이트를 생성해도 좋지만 한가지 생각해봐야 될것은, PC 나 모바일 기기등에서 게임을 만들때 가장 속도에 영향을 주는 것은 저장장치로부터 자료를 읽어내는 것이다.

그런데 sprite::create 로 하나하나 일일히 이미지를 로드해서 스프라이트를 만들면 매번 저장장치를 읽어야 하기 때문에 게임로딩시간이 매우 느려지게 된다.

인디게임처럼 규모가 작고, 캐릭터가 몇개 등장하지 않는 게임에서는 이러한 방식으로 스프라이트를 생성해도 좋지만, 게임캐릭터의 종류와 아이템등이 무수히 많은 게임에서는 앞으로 설명할 스프라이트 시트라는 것을 주로 이용한다.

4.3.2 이미지의 일부분을 사각영역을 이용하여 스프라이트 생성

스프라이트를 생성할때, 이미지의 특정 사각 영역을 일부분 잘라붙여서 출력하는 기능이다.

나중에 설명할 spriteBatchNode , 또는 하나의 배경이미지로부터 일부분만 가져와서 출력하는등의 작업에 사용된다.

auto mySprite = Sprite::create(“mysprite.png”, Rect(0,0,40,40));

이미지에서 Rect 으로 지정한 좌표상의 사각영역에 해당하는 부분만 화면에 출력한다.

이런 기능이 왜 필요할까 라고 생각할수도 있겠지만, 앞서 말했듯이, 게임로딩의 속도도 높이고 메모리 낭비도 줄이기 위해서, 캐릭터이미지들을 모아둔 하나의 큰이미지를 이용하여 딱한번만 이미지파일을 읽어서 여러개의 스프라이트로 만들고자 할때, 큰이미지에 각각위치한 캐릭터들의 픽셀위치와 영역크기를 가져와서 지정해야 한다.

이럴때 필요한게 Create a Sprite with a Rect 이다. 하지만 캐릭터가 100개(이정도는 작은거다.) 정도되는 하나의 이미지에서 일일히 픽셀위치과 크기를 계산해서 스프라이트를 생성하는 것은 노가다에 가깝다.

그래서 아래에 소개할 스프라이트 시트방식을 많이 사용한다.

4.3.3. 스프라이트 시트에서 스프라이트 만들기

드디어 스프라이트 시트에 대해 소개할 순간이다.

앞서 설명한 대로 스프라이트를 일일히 로드하는 것은 매우 비효율적인 방법이었다. 그리고 Rect 를 이용하여 일일히 좌표를 계산해서 스프라이트를 생성하는 것은 괴로운 작업이었다.

그래서 등장한것이 스프라이트시트를 이용한 방법이다.

이름에서 알수 있듯이 하나의 시트이미지에 여러가지 캐릭터, 아이템등을 모아놓고, 이를 딱한번만 로드해서 로딩시간과 메모리, 렌더링 성능을 개선할수 있는 기능이다.

스프라이트 시트 방식으로 로드 하려면, 먼저 스프라이트 이미지에 각각 위치되어 있는 캐릭터, 아이템등의 위치와 크기정보를 가지고 있는 정보 파일(.plist 파일)이 있어야 한다.

plist 파일은 xml 형식의 text 로 되어 있지만, 이를 직접 만들 필요가없다. 아래와 같은 다양한 툴들이 무료로 제공되고 있어서 이들 프로그램을 이용하여 최적화된 스프라이트시트를 생성할수 있다

스프라이트시트를 이용하여 실제 게임에서 사용한 스프라이트를 생성할때는, 기존과는 약간 다른 방식으로 한다.

cocos2dx 에서는 spriteFrameCache 라는 것을 통해서 스프라이트시트파일을 읽어들여 메모리에 FrameCashe 라는 등록하게 된다.

// load the Sprite Sheet
auto spritecache = SpriteFrameCache::getInstance();

// the .plist file can be generated with any of the tools mentioned below
spritecache->addSpriteFramesWithFile(“sprites.plist”);

메모리에 저장된 프레임 캐시를 이용하여, plist 에서 정의된 캐릭터이미지의 원본파일명( alias) 을의 정보(해당 캐릭터의 좌표값, 크기) 이용하여 스프라이트를 생성한다.

auto mysprite = Sprite::createWithSpriteFrameName(“Blue_Front1.png”);

4.3.4 spriteBatchNode 를 이용해서 스프라이트 를 만들기

cocos2dx 에는 spriteBatchNode 라는 것이 또 있다. 이것은 스프라이트 의 로딩과 출력속도를 개선하기 위한 기능이다.

SpriteBatchNode 라는 특별한 Node 를 만들어서, 그 노드의 하위로 등록된 스프라이트들은 화면에 출력시에 상위의 노드에 지정된 이미지를 참고해서 한번에 출력한다.

보통 스프라이트를 생성하면 그에 해당하는 Texture( 이미지, 재질 ) 가 같이 할당이 되는데, cocos2dx 에서는 화면에 각 스프라이트를 출력할때, 각각의 Texture 데이터를 읽어서 출력한다.

때문에 ,100개의 스프라이트를 생성했다면, 당연히100 개의 스프라이트에 포함되어 있는 texture(실제 출력될 이미지) 를 읽어서 출력해야 한다. 상식적으로는 당연한 얘SP기지만, 무엇보다 최적화를 중요시하는 게임개발에 있어서는 이런 부분도 개선할 여지가 있다.

SpriteBatchnode 는 이런부분을 개선하기 위해서, bathnode 의 하위 node 로 등록된 스프라이트들을 batch node 한번의 출력으로 모두 출력하게 한다는 점이다.

spriteBatchnode 를 사용할떄 주의할점이 있는데, 스프라이트 배치 노드의 하위로 추가된 스프라이트들의 texture(이미지)들은 개별적으로 바꿀수가 없다.

스프라이트배치노드 를 생성할때 지정된 이미지를 하위 스프라이트에서 출력하는 것이기 때문이다.

따라서 스프라이트배치노드로 생성된 스프라이트들을 이미지를 게임중간에 바꾸고 싶다면, textureCache 를 생성한다음, 생성된 textureCache 이미지를 스프라이트배치노트의 Atlas 이미지에 적용하면 된다.

4.3.5. 스프라이트 화면 화면 출력과 다양한 속성

스프라이트를 생성했으면, Layer 에 출력을 해야 화면에 보이게 된다. 우리의 캐릭터를 화면에 나타나게 하려면 아래와 같이 하면된다.

auto mySprite = Sprite::create(“mysprite.png”);

// DEFAULT anchor point for all Sprites
mySprite->setAnchorPoint(0.5, 0.5);
// position a sprite to a specific position of x = 100, y = 200.
mySprite->setPosition(Vec2(100, 200));
this->addChild(mySprite);

cocos2dx 는 게임엔진답게 캐릭터를 화면에 출력할때 여러가지 속성을 부여할수 있다.

setAnchorPoint

앞서 화면좌표를 설명할때, 앵커포인트가 스프라이트의 이동,회전,크기조절등의 기준점이 된다고 말했었다. 따라서 일단 스프라이트를 생성하면 앵커포인트를 먼저 정의해 주는게 상식이다.

앵커 포인트는 캐릭터의 크기에 관계없이 x 축,y 축 모두 0 ~ 1 까지의 값을 가진다.

즉, 왼쪽하단은 0,0 값이며, 중앙부분은 0.5,0.5, 발밑은 0.5,0 머리끝은 0.5,1 값이다.

설명그림

setposition (

화면상의 캐릭터의 x,y 좌표를 point 함수를 이용하여 지정한다.

point 함수는 두개의 좌표 ( x , y ) 값을 가지는 단순한 함수이다.

앵커포인트에 따라 캐릭터가 어떻게 놓여지는지 보자

setRotattion

스프라이트를 시계방향 또는 반시계 방향으로 회전한다. 회전값은 실제의 각도계와는 0점의 기준이 조금 다른데, y 축방향으로 0 으로 설정되어 있다.

로테이션 또한 앵커 포인트의 영향을 받는다.

set scale

스프라이트를 x,y 축에 균등하게 크기조절하거나, x 또는 y 축 한쪽으로만 크기를 조절할수도 있다.

스케인 또한 앵커포인트의 영향을 받는다.

skew

스프라이트를 x,y 축에 균등하게 비틀거나 , x 또는 y 축 한쪽으로만 비틀기를 조절할수도 있다.

스케인 또한 앵커포인트의 영향을 받는다.

skew 는 setRotationSkew 가 있다.

setflipx

x축 방향으로 스프라이트를 좌우 반전한다.

setflipy

y축 방향으로 스프라이트를 좌우 반전한다.

color

스프라이트의 색상을 변경한다. Color3B 함수에 색상3요소 RGB 값 (0~255) 값을 지정해주면 스프라이트에 마치 해당색상으로 셀로판지를 댄것과 같은 효과를 줄수 있다.

이런 기능은 캐릭터가 적에게 맞아서 대미지를 입을때 ,순간적으로 빨간색으로 잠시 변하는 등과 같은 효과를 줄때 매우 유용하다.

opacity

스프라이트에 투명도를 줘서, 유령처럼 희뿌옇게 보일수 있도록 할수 있다.

setvisible

스프라이트를 화면에서 감추거나 나타나도록 할수 있다.

4.3.6 스프라이트 액션

스프라이트가 움직이고, 회전하고, 투명해 지는등 게임에서의 캐릭터 역활을 하려면 액션을 지정해야 한다.

cocos2dx 에서는 스프라이트 속성에 대한 기본적인 액션을 아래와 같이 정해준다.

위치

-MobeBy, MoveTo

-JumpBy,JumpTo

-BezierBy, BezierTo

-Place

회전

-RateBy, RotateTo

크기

-Scaleby, ScaleTo

가시성

-Show,Hide,Blink,ToggleVisiblity

투명도

-FadeIn

FadeOut

Fadeto

색상변경

TintBy, TintTo

같은 액션이라도 moveBy 와 MoveTo 처럼 , 두개로 나뉘는게 있는데

~By : 스프라이트의 현재 속성값에 입력된 수치만큼 해당액션을 더한다. 즉 ‘여기서 부터 세발자국 앞으로 ‘ 라는 표현처럼, 현재 상태에서 추가로 더해질 상태값을 지정하는것이다.

~To : 입력된 수치까지 해당액션을 수행한다. 즉, ‘저기로 가’ 라는 표현처럼, 현재 위치나 속성과는 상관없이, 최종상태값을 지정하는 것이다.

캐릭터를 화면 중앙까지 보내거나, 데미지를 입었을때 뒤로 한번 튕겨져 나간다거나, 불투명 유령처럼 서서히 변하는 작업등을 할때 쓰인다.

1.MoveBy , MoveTo

[위그림] MoveBy 는 현재위치에서 입력된 좌표값을 더해서 이동

[아래그림 MoveTo 는 입력된 좌표까지만 이동

-MoveBy

현재 위치에서 얼마나 더 이동할것인지 정하는 액션이다. 앞서설명한대로 By 명령이기 떄문에, 입력된 수치만큼을 현재위치에서 더해서 이동하게 된다. 예를 들어 현재 위치가 100,100 이고 moveby 가 50,20 으로 준다면 캐릭터는 화면상의 1650,120 으로 이동하게 될것이다.

예를 들어 스코반처럼 블럭이동하는 게임에서는 블럭한개를 옆으로 이동하기 위해서, 화면상의 블럭좌표를 일일히 기억해서 계산하는 것을 매우 불편하다. 이때, moveBy 를 이용하여 불럭의 크기만큼 이동시키면 매우 쉬워진다.

MoveBy*pAction = MoveBy::create(2.0, Point(400, 100));

-.MoveTo

지정된 위치로 캐릭터를 무조건 이동시킨다. 게임내에서 화면을 터치한 부분까지 캐릭터를 이동시키는 등의 작업을 할때 ,,moveto 는 더없이 유용하다.

MoveTo*pAction = MoveTo::create(2.0, Point(400, 100));

-옵션

2-1 JumpBy, JumpTo

-JumpBy

Jump 액션은 지정된 시간동안, 현재 위치에서 지정된 위치값을 더해서 이동하면서, 지정된 높이만큼 점프하듯이 튕기면서 움직이는 액션이다.
JumpBy*pAction2 = JumpBy::create(2.0, Point(400, 100), 100, 2);

-jumpTo

JumpyYo 는 지정된 시간동안, 무조건 지정된 위치값까지 이동하면서, 지정된 높이만큼 점프하듯이 ㅋ튕기면서 움직이는 액션이다.

JumpTo *pAction2 = JumpTo::create(2.0, Point(400, 100), 100, 2);

-옵션

3-1BezierBy

[ To 앱션과 By 얙션의 다른 결과

MoveBy 은 입력된 수치로 직선이동을 하여 이동시키는 액션이었다, 하지만 게임을 만들다 보면, 공이나 폭탄을 던진다던지, 물흐르듯이 이동하는 액션을 주고 싶을때가 있다. 이럴때 곡선경로로 이동시켜주는 액션인 Bezier 를 사용하면 어렵지 않게 구현할수 잇다.

Bezier는 n 개의 점을 이용해서, 쉽게 곡선을 만들어 낼수 있는 하나의 알고리즘이다.

따라서 Bezier 곡선을 이용하기 위해서는 n 개의 제어점을 미리 생성하면 , 제어점내에서 bezier 곡선은 자동으로 생기게 된다.

단, bezier 곡선알고리즘은 많은 연산이 필요하기 때문에, cocos2dx 에서는 제어점2개와 도착점1개를 가지는 3차 베이저 곡선만 생성할수 있다.

먼저 제어점을 만들자.

ccBezierConfig bezier;

bezier.controlPoint_1 = Point(100, 200);

bezier.controlPoint_2 = Point(300, 00);

bezier.endPosition = Point(300, 150);

BezierTo * pAction = BezierTo::create(2.0f, bezier);

-BezierBy

-BezierBy액션은 현재 위치를 시작점으로 도착점을 더한 최종위치까지 베지어 곡선으로 이동하게 된다.

, BezierTo

-BezierBy액션 현재 위치를 시작점으로 하여 절대좌표인 도착점까지 베지어 곡선으로 이동하게된다. To 액션은 스프라이트의 현재 위치가 시작점이 되기 때문에 같은 도착점과 제어점 이라도 다른 베지어 곡선이 될수도 있다.

bezier Curve 의 제어점에 의한 곡선 변화를 온라인으로 테스트 해볼수 있는 사이트가 있다. http://cubic-bezier.com/

4.Place

스프라이트의 위치를 지정하는 액션이다, 스프라이트 속성을 바꾸는 setposition 과 기능은 거의 같지만 Place 액션은 “Action” 이기 때문에, 나중에 나올 순차액션,복합액션 등 여러 액션을 조합할때 스프라이트의 위치를 정할때 매우 유용하다.

5.RodateBy, RotateTo

스프라이트의 회전값 또한 액션으로 지정해서 움직일수 있다.

-RateBy,

: 현재의 각도 속성에 지정된 값만큼 회전시킨다. 회전값은 기본적으로 +(오른쪽회전) 이지만, – (왼쪽회전) 값을 입력하면 왼쪾으로 회전하게 된다.

RotateTo

: 현재의 값은 무시하고 입력된 회전값까지 스프라이트를 회전시킨다. RotateTo 는 RotateBy 와 다른점이 있는데, RotateBy 는 입력된 값에 따라서 + 는 시계방향, – 는 반시계방향으로 사용자가 지정해서 회전시킬수 있었다.

하지만 RotateTo 는 지정된 회전값에 최종적으로 도달하기 위해서, 회전 방향을 가장 가까운 방향쪽으로 회전하게 된다.

RotateTo *pAction2 = RotateTo::create(2.0, 210);

6.scaleBy, scaleTo

-ScaleBy : 현재크기에서 지정된 크기만큼 크기를 조절해준다.

-ScaleTo : 스프라이트의 기본 크기로부터 지정된 크기까지 크기를 조절해준다.

6.Show

화면에 스프라이트를 보여줄때 사용되는 액션이다, 스프라이트 속성중에 setVisible 이 있지만, 이액션은 ‘Action’ 이기 때문에 ,Place 와 비슷하게 순차액션,복합액션 등 여러 액션을 조합할때유용하다..

7.HIde

화면에 스프라이트를 안보이게 할때 사용되는 액션이다. 이액션또한 조합액션을 만들때 유용하다.

8.Blink

지정된 시간만큼 객체를 보였다가 숨겼다가, 즉 깜박이게 하는 액션이다.

게임에서 주인공이 대미지를 입었을떄, 몇초동안 깜박이면서 잠시 무적상태가 되는데, 이떄처럼 깜박이는 효과를 간단하게 낼수 있다.

9.ToggleVisibility

객체가 현재 화면상에서 보여지고 있는지 안보여지고 있는지 모르는 상태일때, 보여주기 속성값을 현재와는 반대로 설정하도록 하는 액션이다.

즉, 현재 객체가 화면에 보여지는 상태라면, ToggleVisibility 를 한번 실행하면 안보여지는 상태가 된다.

게임에서 주인공이 밟고 지나간 블럭만 특정표시가 나타났다가 , 다시 되돌아 가면 표시가 지워지는 것처럼, show,hide 를 지정하기 번거로운 상황에서 toggleVisibility 를 쓰면 편하다.

Fade 효과

Fade 효과는 영화에서 주로 로고등이 나올때 많이 사용되는 효과로서, 화면상에 서서히 나타났다가 서서히 사라지는 표현을 하기 위해 사용된다. cocos2dx 에서도 이러한 효과를 쉽게 내기 위해서 서서히 나타나는 fadein 과 서서히 사라지는 fadeout 액션을 제공하고 있다.

10.

FadeIN

: FadeIn 액션은 지정된 시간동안 객체의 투명도를 0에서 255로 서서히 나타나도록 해주는 액션이다. 게임에서 메뉴가 서서히 보여지는 것과 같은 효과를 낼수 있다.

11.fadeout

: Fadein 과는 반대로 완전하게 보이는 객체의 투명도,즉 투명도값으로 치자면 255에서 0 으로 지정된 시간동안 사라지게 한다. 게임 나 아이템등이 사라지게 할때 사용된다.

단, fade out 를 사용할때, 주의할것이 있는데, fadeout 으로 객체를 완전 투명하게 만들었다고 해도 화면상에는 투명인채로 계속남아있기 때문에, 충돌처리, 다른캐릭터와 겹침처리등의 연산처리는 계속되고 있다는 점이다. 충돌처리가 되고 있다면 보이지도 않는데서 캐릭터들이 마구 부짖힐것이고, 겹침처리가 되고 있다면 원하는 캐릭터가 터치가 안될수도 있다.

12.FadeTo

fadeto 는 지정된 시간동안 사용자가 직접지정한 투명도로 변경하는 액션이다.

fadeTo 를 사용하면 게임캐릭터가 특정 건물에 들어갔을때, 건물외관을 불투명하게 바꾼다던지 하는 등의 효과를 낼수 있다.

13.색상

객체 속성중 setColor 속성을 바꾸어 주는 액션이다. 지정된 시간동안 지정한 RGB 컬러값으로 변경하는 액션이다.

TintBy

현재의 객체 색상에서 지정된 시간동안 지정된 delta RGB 색상값을 이용하여, 원래 객체의 픽셀마다 정의된 RGB 값을 변경하는 액션이다.

위의 그림에서 볼수 있듯이, TintBy 에서는 현재의 색상채널에서 지정된 값만큼 채널값을 이동시킨다.

TintTo

현재의 객체 색상채널을 지정된 시간동안 지정된 RGB 색상으로 바꾸어 준다.

4.2.스프라이트액션 II

4.4.1. 순차액션과 복합액션

앞서 소개한 액션들은 단순히 한가지 작업만 하는 액션이다. 하지만 게임을 만들다 보면 한번의 터치로도 여러가지 추가 액션이 실행되거나, 두가지 이상의 액션이 동시에 구현되야 될 경우가 있다.

물론 기본액션들을 스택이나 큐등에 담아서, 쓰레드등으로 순차 또는 동시다발 액션을 구현할수 있다.

하지만 그런 구현조차 매우 번거롭고 까다로울수 있기 때문에, cocos2dx 에서는 순차액션과 복합액션에 대한 처리를 해주는 두가지 특별한 액션을 추가했다.

Sequence

Sequence 는 여러개의 개별액션들을 순서대로 진행될수 있도록 하는 액션이다.
게임에서 적들이 화면에 나타난후 잠시 멈춰있다가, 주인공을 향해 빠르게 공격하는 것을 구현하고자 할때, 시퀀스액션으로 move(나타남)->delay(대기)->move(공격) 처럼순서대로 액션을 지정하면 된다.
Sequence 는 callback 이라는 것을 추가로 지정할수 있는데, 위의예제같은 경우라면, 적들이 마지막 시퀀스액션인 공격을 끝낸다음에는 메모리에서 해제하거나, 재활용을 위해서 적스프라이트의 정보를 초기화 해야 하는데, 이때 필요한것이 callback 함수이다.
callback 함수에 대한 설명은 다음 챕터에서 자세히 설명한다.

Spawn

spawn 은 여러개의 개별액션들을 하나로 묶어서, 동시다발적으로 실행할수 있도록 하는 액션이다.

spawn 는 callback 이라는 것을 추가로 지정할수 있는데, 위의예제같은 경우라면, 적들이 마지막 시퀀스액션인 공격을 끝낸다음

에는 메모리에서 해제하거나, 재활용을 위해서 적스프라이트의 정보를 초기화 해야 하는데, 이때 필요한것이 callback 함수이다.

게임캐릭터가 앞으로 나가면서 회전을 하는 액션등을 만들때 유용하다.

4.4.2 제어액션

Reserve

지정된 액션을 받대로 실행하는 액션이다. 모든 액션에 대해 꺼꾸로 진행이 가능하다.

로보캅이라는 영화에 나오는 주인공의 눈에는 붉은 광선이 오른쪽에서 왼쪽으로 왔다갔다 하는데, Reserve 액션을 이용하면 한쪽방향의 액션만 가지고도 똑같은 효과를 쉽게 낼수 있다.

Repeat

지정된 액션을 여러번에 걸쳐서 반복해야 되는 상황이라면 Repear 액션을 지정하면 코드의 양을 줄이면서도 쉽게 구현할수 있다. 아이템샵에서 망치로 뭔가를 만들고 있는듯한 조연급 캐릭터를 만들때, repeat 액션과 delay 액션으로 3초간격으로 망치질을 3번씩해대는 애니메이션을 만들수 있다.

,Repeatfoever

지구 주변을 한없이 돌아가는 달처럼 계속 반복해야되는 액션이 필요하다면 repeatforever 를 사용하면 된다.

4.4.3 액션의 속도에 관한 액션

Delaytime

squence 액션을 사용할때, 다른 액션이 진행되다가 잠깐 몇초동안 아무일없이 대기할 필요가 있을때가 종종있다. 이럴떄에 시퀀스 액션의 중간에 delaytime 을 넣으면 지정된 시간만큼 아무 액션없이 기다렸다가 다음액션을 수행한다.

7.speed 액션

speed 액션은 주로 기존의 액션에 대해 진행속도를 빠르게 하거나, 느리게 하는 용도로 사용된다.

게임캐릭터가 아이템을 먹은후에 이동이 빨라진다거나, 독버섯등을 먹어서 느려지거나 할때 유용하다. 또한 게임레벨이 높아질수록 적들의 움직임에 전체적으로 빨라지게 하고 싶다면, speed 액션에 전달해주는 값만 높여줘서 게임레벨을 조절하는 것도 가능하다.

6.Ease 액션

ease 액션은 다른 액션의 진행속도에 대한 제어를 다양하게 할수 있도록 도와주는 헬퍼성격의 액션이다.

게임내에서 모든 캐릭터가 로봇트 처럼 딱딱하게 움직이기만 한다면, 잘만들고도 뭔가 어색함이 생길수도 있다.

Ease 액션을 이용하면, 닌텐도의 소닉처럼 처음에는 느렸지다가 급격하게 빠르게 이동하는 역동적인 액션도 가능하다.

Ease 액션에는 여러가지 In, Out 액션들이 있는데, In 계열 액션들은 액션초기의 변화량을 세밀하게 하다가 중간부터 끝나는 시점까지는 변화량을 많이 주는 것이고, Out 계열의 액션은 반대로 액션 초기부터 변화량을 급격히 주다가 끝나는 시점이 될수록 변화량을 세밀하게 준다.

ease graph 의 변화를 볼수 있는 사이트 http://easings.net/

Easein : 액션초기에는 천천히 값을 변화시키다가 나중이 될수록 값을 급격히 변화시킨다.
(적용 예: 천천히 비상하는 비행기의 상승곡선)

EaseOut : 액션초기에는 급격히 변화시켰다가 나중이 될수록 천천히 변화시킨다.
(적용 예:하늘로 발사된후 일정고도에 진입한 로켓, 비행기)

EaseInout : 액션초기에는 천천히 값을 변화시키고, 중간지점에 가까울수록 급격하게 변화시킨다음, 액션 종료 시점이 가까울수록 다시 천천히 변화시킨다.

(적용 예:궤도에 진입하는 비행기)

EaseOutIn :

(적용 예: 하늘로 쏘아 올린후 재점화를 하는 로켓, 불꽃놀이)

EaseExponential

기존의 Ease 액션에 Exp 를 곱한 값을 적용하기 떄문에, 작은 변화는 더욱 세밀하게 해주고 급격한 변화는 더욱 급격하게 변화는 액션을 만들어 준다.

EaseExponentialin : EaseIn 과 같은 액션이지만 그 값에 Log 를 곱한 결과로 액션이 수행된다.

(적용 예: 제자리에서 힘을 모은뒤, 급가속하는 자동차, 황소 캐릭터등)

EaseExponentialOut : EaseOut 과 같은 액션이지만 그 값에 Log 를 곱한 결과로 액션이 수행된다.

(적용 예:급정지 하는 캐릭터)

EaseExponentialInout : EaseInout 같은 액션이지만 그 값에 Log 를 곱한 결과로 액션이 수행된다.

EaseSine Action

기존의 Ease 액션에 Sine 함수를 적용한 결과이기 때문에, 액션의 곡선도가 매우 부드러운 액션을 수행할수 있다.

EaseInSine : EaseIn 과 같은 액션이지만 그 값에Sine 함수를 적용한 결과로 액션이 수행된다.

EaseOutSine : EaseOut 과 같은 액션이지만 그 값에 Sine 함수를 적용한 결과로 액션이 수행된다.

EaseInoutSine : EaseInout 같은 액션이지만 그 값에 Sine 함수를 적용한 결과로 액션이 수행된다.

EaseElastic ACtion

요즘 게임들에서는 메뉴들이 마치 말랑말랑한 젤리처럼 튀어나오는 효과를 많이 볼수 있다.

EaseElastic 을 이용하면 그런 효과들을 낼수 있다.

EaseElasicIN : 액션초기에는 작은 변화를 주지만, 액션중간 종료까지는 크고작은 값으로 변화시켜서 액션을 수행한다.

EaseElasicIOut: 액션초기에는 초기부터 중간까지는 크고 작은 값으로 변화를 주지만,종료가 가까워 질수록 작은 변화를 준다.

EaseElasticInout : 액션초기와 종료에는 작은 변화를 주고, 중간지점에서는 크고 작은값으로 변화를 주어서 갑자기 튀어 나오는 듯한 효과를 낼수 있다.

EaseBounse

트램블린을 타고 성으로 점프해서 진격하는 게임이나을 구상했거나, 하늘에서 아이템이 떨어지는 효과를 내고 싶다면 EaseBounce 액션으로 하면된다. Bounce 에서 알수 있듯이 통통튕기는 효과를 낼수 있따.

EaseBounceIn : 액션초기에는 적은 변화였다가, 중간지점부터는 큰값으로 변화시켜, 마치 트램블린에서 점프뛰는듯한 효과를 낼수 있다.

EaseBounceOut: 하늘에서 아이템이 떨어질떄, MoveBy 로 그냥 툭 하고 떨어지면 뭔가 어색할수도 있다. 이럴때 EaseBounseOut 을 이용하면, 하늘에서 떨어진 아이템은 땅에서 몇번더 살짝 튕다가 멈추는 효과를 낼수 있다.

EaseBounceInout : 액션의 초기와 끝부분에는 작은 변화를 주고 중간부분에서는 큰변화를 주는 액션이다. 하늘과 땅에 모두 트램블린이 설치되어 양쪽으로 통통 튀기는 게임을 만든다면 이 액션을 추천하고 싶다.

EaseBack

버스나 대형트럭같은 스틱자동차를 타면 언덕에서 출발할떄, 잠시 뒤로 밀렸다가 앞으로 출발하는 것을 경험할수 있다. 게임에서도 그와 같은 효과를 내고 싶을떄는 Easeback 액션을 이용하면된다.

EaseBackIn : 액션초기에는 마이너스 변화값을 주고, 중간부터는 급격히 변화를 주는 액션이다. 버스처럼 뒤로 살짝 밀렸다가 전진하는 액션효과를 낼수 있다.

EaseBackOut : 액션초기에는 플러스 영역까지 급격하게 변화를 주어서 중간부터는 서서히 지정된 값까지 도달하게 하는 액션이다.

EaseBackInout : 액션초기와 종료시점에는 한계치를 넘는 변화량을 주는 액션이다. 짐캐리의 연기같은 오버액션을 표현할떄 유용하다.

4.3.콜백액션

Squence 액션을 이용해서 캐릭터 애님이션을 할때 시퀀스 에 포함된 모든 액션이 끝나면, 캐릭터의 상태를 변화하거나 , 적절한 변화를 줘야 할때가 있다.

Squence 액션을 설명할때 나왔던것처럼, 적비행기가 시퀀스액션으로 이동을 끝났을때, 화면밖으로 이동된 적캐릭터는 메모리에서 해제하거나, 다시 초기화해서 또 써먹을수 있게 해야한다. 또한, 주인공캐릭터가 적에게 맞아서 뒤로 굴러넘어진 다음에는 주인공의 에너지를 감소시켜야 하는데 이럴때 주로 callback 액션을 이용하다.

callback 액션은 시퀀스의 중간중간에 수시로 추가하여 삽입할수 있다.

callback 액션의 선언과 형식은 간단하지만, 그 안에서 다양한 일들을 할수 있기 떄문에, 유용하고 복잡한 처리를 할수 있다.

Callback 액션은 미리 정의된 콜백함수를 형식에 맞게 호출해서, 처리하는 것을 기본으로 한다.

callback 함수에는 두가지로 구분되는데,callFunc 와 callFuncN 이 있다.

callFunc

callFunc 함수는 현재 시퀀스 액션을 실행하는 게 누군지 알 필요없을때 주로 사용된다.

‘까마귀 날자 배 떨어진다’ 라는 속담이 있다. 까마귀가 날아가는것과 배가 떨어지는 것은 순차적으로 발생된 상황이지만, 두캐릭터의 연관성은 전혀없다.

callFunc 로 까마귀가 날아가는 시퀀스 액션을 시작하면, 배를 땅으로 떨어지도록 구현하면된다.

기본적인 콜백함수인 callFunc 는 아래와 같이 선언하고 사용한다.

auto callbackJump = callFunc::create([](){
log(“Jumped!”);
});

위의 예제에서는 create 부분에 인라인 함수를 사용했느데, Jumped 라는 글씨 출력말고도 추가로 여러가지 작업을 하게 되면 인라인 함수의 내용이 너무 커지고 소스관리도 어렵게 된다.

그래서 cocos2dx 에서는 CC_CALLBACK_0 라는 매크로 함수를 제공하고 있다.

CC_CALLBACK_0(실행할함수 , callFunc액션자신) 이렇게 선언하고 사용할수 있다.

실행할 함수는 다른 곳에서 함수로 선언하여 지정하면된다.

auto callbackJump = callFunc::create();

HelloWorld::flydown(){

CCLOG(‘배 떨어지유’);

}

게임에서 터치를 할때마다 점프하면서 앞으로 한칸 나가는 토끼캐릭터가 있다고 하자. 재미를 위해서 점프후 착지할때 소리가 같이 나도록 하고 싶다면,callback 함수에 소리 나오는 부분을 정의하면 된다.

–소리나오는 소스

callfuncN

callFuncN 에서 N 은 cocos2dx 의 Node (최상위 객체) 를 뜻하는 것으로, callback 액션을 실행하는 노드(스프라이트,레이어등) 를 전달할수 있도록 해줍니다.

CALLBACK_1,CALLBACK_2 매크로를 사용하며, 아래와 같다.

CallBack_1 에서는 sender 라는 현재의 노드를 전달해주게 되는데, 이것은 액션을 실행중인 스프라이트(또는 레이어등) 이다.

실제로 게임에서는 callFunc 보다 callFuncN 을 더 많이 사용하게 되는데, 액션을 수행중이거나 수행종료가 된 캐릭터에게 에너지를 뺴앗는다던지, 일시적으로 속성이 강화 된다던지 하는 작업을 하기 위해서는 액션중인 캐릭터를 전달받아서 처리해야되기 때문이다.

CallFuncN::create( CC_CALLBACK_1(GameLayer::callback, this)), NULL);

void GameLayer::callback(Node* sender )

{

// sender 는 액션을 실행한 바로 그녀석!

}

CallBack_2 는 액션을 수행중인 Node 스프라이트(또는 레이어) 와 터치이벤트의 좌표를 전달해 준다.

CallFuncN 에서의 CC_CALLBACK_1 은 액션을 수행중인 노드)스프라이트나 레이어등) 을 지정된 함수에 전달하여 준다.

CC_CALLBACK_2 는 노드와 좌표정보를 전달하여 준다.

CC_CALLBACK_3 는 게임콘트롤러의 정보를 전달하여 준다.

PAGE_BREAK: PageBreak

4.4.스프라이트 관계맺기

게임캐릭터를 디자인할때 하나의 이미지로만 디자인해 버리면 무기,모자, 신발 등 여러가지 아이템을 장착한 모든 상황을 이미지로 만들어야 되기 때문에 작업효율성이 좋지 않게 된다.

따라서 대부분의 게임들은 기본캐릭터에 모자,갑옷,신발 등의 아이템들을 장착해서 캐릭터에 마치 붙어 잇는것처럼 움직이도록 하고 있다.

단순하게 생각하면, 기본캐릭터의 움직임과 장착아이템들을 모두 같은 수치로 이동시키고, 회전시키는 등의 액션을 주면 되겠지만, 각 스프라이트의 앵커 포인트의 영향 등을 고려해보면 실제로 여간 쉽지 않은 작업이 된다.

그래서 cocos2dx 에는 스프라이트들간에 부모와 자식 관계처럼 종속관계를 만들수 있게 해준다.

부모로 지정된 스프라이트가 이동을 하면 하위자식 캐릭터들은 별다른 액션을 지정하지 않아도 부모를 따라서 동시에 이동하게 된다.

이동 액션이야 x,y 좌표이동이라서 간단해서 종속관계에 대한 이득이 없어 보이지만, 회전,크기조절 등의 수학적연산이 들어가는 액션이라면 종속관계를 지정헀다는 것에 대해 다행이라고 생각할수 있다.

그림,회전,크기조절등…

위에서 보듯이, 종속관계를 지정하지 않은 두개의 스프라이트는 매우 복잡한 수학적 연산을 하고 있다.

종속관계는 주로 장착된 아이템, 에너지바, 애완캐릭터 등에 활용된다.

PAGE_BREAK: PageBreak

샘플게임 1.

booksample1

모기 잡기

PAGE_BREAK: PageBreak

6. 스프라이트 애니메이션

5.1 준비된 여러장의 파일들을 불러들여 애니메이션 시키는 방법

5.2 스프라이트 시트를 이용한 방법

5.2.1 외부 툴을 이용해서 스프라이트 시트용 plist 를 이용하여 애메이션을 구현하는 방법

5.2.2 cocos Stuiod 이용해서 스프라이트 애니메이션을 구현하는 방법

5.3 다관절 캐릭터 애니메이션.

5.3.1 cocos stuio 에서 다관절 스프라이트 생성

5.3.2 전용툴 spine 을 이용해

PAGE_BREAK: PageBreak

애니메이션은 기본적으로 여러장의 그림을 빠르게 바꿔서 보여줌으로서 마치 캐릭터가 움직이고 있는것처럼 표현하는 기법이다.

게임캐릭터도 기본적으로 걷고, 때리고, 상처를 입고, 죽는 등의 여러가지 행동을 취하게 되는데, 이때 각 행동마다 여러장의 이미지를 적용한다면, 유저들이 좀더 재미잇고, 게임에 빠져들게 될것이다.

cocos2dx 는 애니메이션기능을 쉽게 만들고 적용할수 있는 기능을 제공한다.

6.1 준비된 여러장의 파일들을 불러들여 애니메이션 시키는 방법

각 행동마다 미리 준비된 여러장의 파일들을 불러들여 스프라이트의 (애니메이션)프레임 에 추가시켜 runAction 을 통해서 애니메이션을 할수 있다.

이미지파일을 각각 불러들여서 , 애니메이션 프레임에 넣는 방식은 가장 고전적인 방법이고 간편하다. 하지만, 시스템작동중에 가장 느린 과정인 파일읽어들이기를 이미지파일갯수만큼 하기 때문에 로딩과정에서 속도가 매우 느리고 쓸데없이 메모리를 낭비하는 단점이 있다.

6.2 스프라이트 시트를 이용한 방법

스프라이트 시트는 어렸을때 누구나 한번쯤 사봤을 인기캐릭터 스티커가 모음을 생각하면 된다.

제조사 입장에서는 인기캐릭터의 여러가지 모양을 한장에 모아서 판매함으로서, 개별판매할때보다 포장지, 재고현황, 수익마진 등에서 더 이익을 낼수 있기 떄문에 스티커 모음,즉 스프라이트 시트를 사용한 것이다. 단, 구매가격이 개별판매가 보다 비싸다는 단점이 있다.

스프라이트 시트를 이용한 방식또한, 여러장의 이미지를 한장의 큰이미지에 몰아넣고, 게임내에서 딱 한번만 로드 하여 메모리에 올려놓는 방식이다.

이렇게 함으로서, 5.1 에서 처럼 수십개에 해당하는 개별파일을 읽어들일때 생기는 속도 저하를 줄일수 있으며, 메모리에 올라간 시트이미지를 이용해서 빠르게 애니메이션 프레임을 생성할수 있다.

[스프라이트 시트 수동좌표 샘플[

5.2.1 외부 툴을 이용해서 스프라이트 시트용 plist 를 이용하여 애메이션을 구현하는 방법

앞서 스프라이트 시트를 이용하여 이미지들을 읽어들일때에, 일일히 캐릭터이미지의 좌표를 계산하여 다소 번거로운 점이 있었다.

cocos2dx 는 plist 라는 xml 형식으로 된 파일을 이용해서 스프라이트시트에서의 캐릭터위치정보를 쉽고 빠르게 알아낼수 있도록 해준다. 스프라이트시트 plist 에는 실제시트이미지의 파일이름과 시트안에 포함된 각각의 캐릭터 이미지들의 크기,좌표정보들이 xml 형식으로 저장되어 있다.

*별도표기 plist

일단 코드를 한번 보자.,

보시다시피, 게임캐릭터를 불러내기 위해서 시트내에서의 캐릭터이미지위치과 크기등을 계산할필요없이, 시트에 포함될때 사용된 원래의 이미지네임을 이용하여 간편하게 로드할수 있다.

plist 파일은 xml 포맷이기 때문에, 직접만들수도 있지만 그것조차 꽤 쉽지 않기 때문에, ZWOPTEX , TexturePacker라는 툴을 잉요하면 쉽게 만들수 있다.

5.2.2 cocos Stuiod 이용해서 스프라이트 애니메이션을 구현하는 방법

cocos2dx 에서 제공하는 cocos studio 는 Scene 을 구성하고 스프라이트 애니메이션을 미리보기 할수 있는 에디터 프로그램이다.

사실 기존까지는 Scene 구성과 스프라이트 애니메이션을 미리보기할수가 없어서 매번 실행해보는 수밖에 없어서 작업시간이 매우 더디게 도는 경우도 있었다.

하지만 이제는 cocos stuido editor 덕분에 스프라이트 애니메이션을 화면으로 보면서 직접수정 할수 있게 되어 작업효율을 높일수 있고, 디자이너와의 분업이 가능하게 되었다.

[그림 : 스프라이트]

https://www.youtube.com/watch?v=nC5-tcXFhhY 참고

http://discuss.cocos2d-x.org/t/import-scene-from-cocostudio-into-code/18456/36

http://cocos.sonarlearning.co.uk/docs/importing-a-scene-into-cocos

http://genieker.tistory.com/72

http://choiarchive.blogspot.kr/search/label/Cocos2d-x%203.0?updated-max=2014-06-07T01:17:0%2B09:00&max-results=1&pgno=2

6.3 다관절 캐릭터 애니메이션.

지금까지 한장한장의 그림을 바꿔가면서 캐릭터를 움직이는 원시적인 방식의 애니메이션을 설명했다.

하지만 요즘은 머리,어깨, 무릎,팔 과 같은 다관절로 구성된 자연스러운 게임 캐릭터들이 대부분이다.

게임캐릭터들을 한장한장 그린것으로 이용한다면, 그 한장마다의 이미지 퀄리티는 매우 높을수도 있겠지만, 아이템을 추가 장착한다거나, 다른 자세를 취해야 할경우에는 그수에 맞게 x n 만큼 작업을 해야 하기 때문에 시간과 비용이 많이 든다.

반면 다관절 캐릭터로 만들경우는, 추가장착아이템이 있을때는 아이템만 게임캐릭터의 해당파트에 자식스프라이트로 장착해주거나 교체하면 되기 때문에, 작업이 매우 간단하다.

또한 캐릭터의 액션을 실행시 최소한 각 파트가 따로따로 움직이는 것처럼 표현되기 때문에 게임의 완성도도 높아지고, 사용자들의 몰입도도 높아질수 있다.

다만 다관절 캐릭터를 만들기 위해서는 각 관절파트마다 이음새가 자연스러워 보이도록 디자인 해야 되고, 각 관절을 연결해서 자연스럽게 움직임이 표현될수 있도록 설정해야 한다.

5.3.1 cocos stuio 에서 다관절 스프라이트 생성

cocos studio 의 놀라운 점은 skeleton 애니메이션을 보면서 직접 만들수 있다는 점이다.

이전 까지는 전문툴을 이용해서 할수 밖에 없었기 떄문에, 다관절 애니메이션의 제작이 매우 번거롭기 까지 했다.

하지만 cocoss studio 의 등장과 함께 스프라이트 애니메이션은 별도의 툴을 사용하지 않아도, 충분히 다관절 애니메이션을 만들수 있게 되었다.

[그림 예제]

auto Chick = CSLoader::createNode(“Skeleton.csb”);

this->addChild(Chick);

Chick->setPosition(Point(240, 20));

cocostudio::timeline::ActionTimeline* action = CSLoader::createTimeline(“Skeleton.csb”);

action->play(“jump”, true);

Chick->runAction(action);

5.3.2 DragonBones, spine 등 관련 툴 을 이용해서 다관절 스프라이트 생성

spine 은 다관절 캐릭터 생성/편집 전문 프로그램으로서, cocosstudio 가 나오기 이전까지는 cocos2dx 에서 다관절 캐릭터를 생생할때 거의 유일하게 사용되던 프로그램이다.

spine 은 cocos2dx 전용툴은 아니고, 다른 라이브러리에도 사용될수 있는 범용적인 프로그램이다.

http://edoli.tistory.com/82

PAGE_BREAK: PageBreak

샘플게임 2.

booksample2

선생님 몰래 춤추기

PAGE_BREAK: PageBreak

7. 충돌체크

7.1 constrainsPoint

7.2 intersectsRect

PAGE_BREAK: PageBreak

게임에서 충돌 체크는 말할것도 없이 중요하다. 캐릭터와 캐릭터 간의 충돌, 미사일과 적, 주인공과의 충돌, 아이템끼리의 충돌등 모든 캐릭터와 아이템들은 충돌체크를 통해서 서로 상호 작용을 한다.

기본적으로 캐릭터간의 충돌체크를 하기위해서는 캐릭터끼리 서로 겹치는지 체크를 해서, 겹친다면 충돌했다고 판단하고 그에 따른 적절한 상황처리를 하면된다.

게임제작을 해보지 않은 사람이라면, 캐릭터끼리 옷깃만 스쳐도 충돌처리가 되는것으로 생각하지만, 사실은 개발자가 충돌체크를 별도로 해줘야 된다.

cocos2dx 에서는 constainsPoint 와 intersectsRect 두개로 충돌체크를 할수 있따.

7.1 constrainsPoint

주로 마우스로 화면을 터치했을때, 터치한 좌표가 특정 캐릭터나 아이템의 영역안에서 터치했는지 체크할수 있는 기능이다.

이 기능은 캐릭터간의 충돌체크에는 무리가 있기 때문에, 캐릭터간의 충돌은 intersectsRect 로 해야한다.

[예제. 터치해서 풍선을 터트리는 방법]

7.2 intersectsRect

두 캐릭터(또는 아이템) 간의 충돌체크를 하기위한 것으로, intersects Rectangle 의 줄임말이다.

즉, 화면에 보이는 두 캐릭터의 외곽크기(rectangle) 가 서로 겹쳐지는지 확인할수 있다.

intersectsRect 를 사용하기 위해서는 캐릭터의 외곽크기 getBoundBox 를 먼저 알아낸다음,이를 비교하여 켭져 있는지 확인하고, 그에 따른 적절한 처리를 해주면된다.

이 메쏘드는 단순히 겹쳐져 있는가만 체크할뿐 다른 처리는 안해주기 때문에, 충돌후에 에너지가 감소하거나, 소리가 나는 등의 처리는 개발자가 별도로 처리해줘야 한다.

[예제. 우주선과 비행기의 충돌

PAGE_BREAK: PageBreak

샘플게임 3.

booksample3

애니곤 피하기

PAGE_BREAK: PageBreak

샘플게임 4.

booksample4

플래피버드

PAGE_BREAK: PageBreak

8. 사운드

7.1 SImple Audio Engine

7.2 Audio Engine

PAGE_BREAK: PageBreak

cocos2dx 의 사운드 라이브러리는 3.3 버젼이전과 이후버젼으로 나뉜다.

2.x 부터 3.3 버전 까지는 Simple Audio Engine 이라는 것을 사용했지만, 3.3 이후에는 AudioEngine 이라는 것이 추가되었다.

물론 simpleaudio engine 도 여전히 사용할수 있지만, 되도록이면 sound enginge 의 사용 하기를 권한다.

8.1 SImple Audio Engine

cocos2dx 3.3 이전에 주로 사용되던 Simple Audio Engine 은 1개의 배경음과 여러개의 효과음을 구분하여 재생할수 있었다. Simple 의 단어가 들어간것처럼 간단하게 음악과 효과음을 재생할수 있다.

심플오디오 엔진에서는 배경음악과 효과음을 따로 구분하여 재생하도록 되어 있다.

효과음은 한번에 여러개의 소리를 재생할수 있지만, 배경음악은 오직 1개만 재생할수 있다.

●효과음 내기

– SimpleAudioEngine::sharedEngine()->playEffect(“effect.wav”);

●효과음 미리 로딩 – 용량이 큰 파일을 재생하는데 시간이 걸리기 때문에 미리 메모리에 준비시킨다.

– SimpleAudioEngine::sharedEngine()->preloadEffect(“effect.wav”);

●효과음 메모리 해제

– SimpleAudioEngine::sharedEngine()->unloadeffect(EFFECT_FILE);

●배경음 내기

– SimpleAudioEngine::sharedEngine()->playBackgroundMusic(“background.mp3”,true);

●배경음 일시 정지

– SimpleAudioEngine::sharedEngine()->pauseBackgroundMusic();

●배경음 다시 시작

– SimpleAudioEngine::sharedEngine()->resumeBackgroundMusic();

●배경음 정지

– SimpleAudioEngine::sharedEngine()->stopBackgroundMusic();

●배경음 재시작

– SimpleAudioEngine::sharedEngine()->playBackgroundMusic(“background.mp3”, true);

●배경음 미리 로딩

– SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic(“background.mp3”);

●배경음 메모리 해제

– SimpleAudioEngine::sharedEngine()->stopBackgroundMusic(true);

●예제

– HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include “cocos2d.h”

class HelloWorld : public cocos2d::CCLayerColor

{

public:

virtual bool init();

static cocos2d::CCScene* scene();

CREATE_FUNC(HelloWorld);

void doSound(CCObject* pSender);

};

#endif // __HELLOWORLD_SCENE_H__

– HelloWorldScene.cpp

#include “HelloWorldScene.h”

#include “SimpleAudioEngine.h”

using namespace cocos2d;

using namespace CocosDenshion;

CCScene* HelloWorld::scene()

{

CCScene *scene = CCScene::create();

HelloWorld *layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

if ( !CCLayerColor::initWithColor(ccc4(255, 255, 255, 255)) )

{

return false;

}

/////////////////////////////

CCMenuItemFont* Item=CCMenuItemFont::create(“effect”, this, menu_selector(HelloWorld::doSound));

Item->setColor(ccc3(0,0,0));

CCMenu* pMenu=CCMenu::create(Item, NULL);

pMenu->setPosition(ccp(250,50));

this->addChild(pMenu);

return true;

}

void HelloWorld::doSound(CCObject* pSender)

{

SimpleAudioEngine::sharedEngine()->playBackgroundMusic(“Sound/background.mp3”,true);

}

Platforms	supported BGM formats
Android	formats that android.media.MediaPlayer support.
iOS	It supports the same formats as CocosDenshion in cocos2d-iphone. MP3 and CAF are recommended
Windows Desktop	.mid and .wav are supported. Note that mp3 is not supported.

Sound Effects

Platform	supported sound effects formats
Android	Supports .ogg best, not so good for .wav format.
iOS	.mp3, .wav, .caf
Windows Desktop	.mid and .wav only

void preloadBackgroundMusic( music files ); // loading music

void playBackgroundMusic( music files , bool); // playing music , true represent cycles play , false does not mean circulation

void pauseBackgroundMusic(); // suspended

void resumeBackgroundMusic(); // are continuously

void stopBackgroundMusic(); // stop

void rewindBackgroundMusic(); // played from the beginning

bool isBackgroundMusicPlaying(); // is playing

void setBackgroundMusicVolume(); // set the volume

float getBackgroundMusicVolume(); // acquisition volume

void preloadEffect( sound files )

void unloadEffect( sound files )

int playEffect( sound files , whether repeated ) // returns a sound id here as the logo

void stopEffect( sound ID )

void stopAllEffects()

void pauseEffect( sound ID )

void pauseAllEffects()

void resumeEffect( sound ID )

void resumeAllEffects()

float getEffectsVolume()

void setEffectsVolume()

8.2 Audio Engine

Simple Audio Engine 도 사용하기는 편했지만, 너무 Simple 하다보니 여러개의 효과음과 배경음을 구현하고자 하는 데는 한계가 있었다.

개선된 Audio Engine 은 배경음과 효과음을 따로 구분하지 않고, 각각의 소리를 아이디(id) 로 구분하여 id 단위로 재생하고 관리할수 있도록 했다.

SoundEngine 에서는 특정 사운드의 재생이 끝난후 지정된 callback 함수를 실행할수 있고, 현재 재생하고 있는 사운드의 위치(밀리초단위) 를 제어 하는등, simle audio engine 에 비해 다양한 플레이상태를 제어할수 있다.

audioid = AudioEngine::play2d(“Kalimba.mp3”);

AudioEngine::setFinishCallback(audioid, CC_CALLBACK_2(HelloWorld::finishCallBack, this));

end ()

Release objects relating to AudioEngine. More…

getDefaultProfile ()

Gets the default profile of audio instances. More…

play2d (const std::string &filePath, bool loop=false, float volume=1.0f, const AudioProfile *profile=nullptr)

Play 2d sound. More…

setLoop (int audioID, bool loop)

Sets whether an audio instance loop or not. More…

isLoop (int audioID)

Checks whether an audio instance is loop. More…

setVolume (int audioID, float volume)

Sets volume for an audio instance. More…

getVolume (int audioID)

Gets the volume value of an audio instance. More…

pause (int audioID)

Pause an audio instance. More…

pause ( local audioID)

Pause an audio instance. More…

pauseAll ()

Pause all playing audio instances.

resume (int audioID)

Resume an audio instance. More…

resume ( local audioID)

Resume an audio instance. More…

resumeAll ()

Resume all suspended audio instances.

stop (int audioID)

Stop an audio instance. More…

stop ( local audioID)

Stop an audio instance. More…

stopAll ()

Stop all audio instances.

setCurrentTime (int audioID, float sec)

Sets the current playback position of an audio instance. More…

setCurrentTime ( local audioID, local sec)

Sets the current playback position of an audio instance. More…

getCurrentTime (int audioID)

Gets the current playback position of an audio instance. More…

getCurrentTime ( local audioID)

Gets the current playback position of an audio instance. More…

getDuration (int audioID)

Gets the duration of an audio instance. More…

getState (int audioID)

Returns the state of an audio instance. More…

getState ( local audioID)

Returns the state of an audio instance. More…

setFinishCallback (int audioID, const std::function &callback)

setFinishCallback ( local audioID, local int, local callback)

getMaxAudioInstance ()

Gets the maximum number of simultaneous audio instance of AudioEngine.

setMaxAudioInstance (int maxInstances)

Sets the maximum number of simultaneous audio instance for AudioEngine. More…

setMaxAudioInstance ( local maxInstances)

Sets the maximum number of simultaneous audio instance for AudioEngine. More…

uncache (const std::string &filePath)

Uncache the audio data from internal buffer. More…

uncacheAll ()

Uncache all audio data from internal buffer. More…

uncacheAll ()

Uncache all audio data from internal buffer. More…

getProfile (int audioID)

Gets the audio profile by id of audio instance. More…

getProfile (const std::string &profileName)

Gets an audio profile by name. More…

getProfile ( local profileName)

Gets an audio profile by name. More…

preload (const std::string &filePath)

Preload audio file. More…

preload ( local filePath)

Preload audio file. More…

preload (const std::string &filePath, std::function callback)

Preload audio file. More…

preload ( local filePath, local callback)

Preload audio file. More…

PAGE_BREAK: PageBreak

샘플게임 5.

booksample8

피아노

PAGE_BREAK: PageBreak

9. 입력 이벤트 리스너

9.1.1 싱글터치 이벤트 리스너

9.1.2 멀티터치 이벤트 리스너

6.1.3 터치후 이동

6.1.4 터치 우선순위

9.2 키보드

9.3 마우스 이벤트

9.4 eccelator 이벤트

PAGE_BREAK: PageBreak

cocos2dx 는 멀티플랫폼 게임개발 엔진이기 때문에, 터치를 비롯해서 다양한 입력이벤트를 이용할수 있다.

터치,

키보드

마우스

사용자정의

5.1 터치이벤트

coco2dx 에서는 복잡하고 까다로운 터치이벤트 처리를 편하고, 쉽게 할수 있도록 기능이 준비되어 있다.

터치이벤트는 싱글터치이벤트 리스너와 멀티 터치 이벤트 리스너로 나뉜다.

이벤트 리스너 라는 말이 조금 생소할수도 있는데, 말그대로 이벤트를 전송받을 대기(listen) 을 하는 것을 말한다. 즉, 사용자가 언제 어디를 터치하거나 입력할지 모르는 상태이기 때문에, 리스너라는 대기조를 등록하여 입력신호가 들어올때 적절한 작업을 수행할수 있도록 한다.

터치 이벤트 리스너는 터치이벤트에 대한 callback 함수를 지정해야 하는데 다음과 같다.

onToucheBegan : 터치를 시작할때 발생하는 이벤트로서, 터치한 개수와 상태,좌표등을 파악한다.

onTouchMoved : 터치상태로 화면을 드래그(이동) 했을때 발생하는 이벤트로서, 터치한 개수와 상태,좌표등을 파악한다.

onTouchEnded : 터치했던 손가락을 띄었을때 발생하는 이벤트로서, 터치한 개수와 상태,좌표등을 파악한다.

onTouchCancled : 터치상태가 취소되었을때, 주로 시스템적인 이유나 화면을 벗어난경우에 발생하는 이벤로서, 터치한 개수와 상태,좌표등을 파악한다.

onTouchLongClicked : 싱글터치일때만 발생하는 이벤트로서, 터치한 상태로 계속 있으면 , 마치 모바일 기기에서 롱터치 한것과 같은 이벤트를 발생한다.

발생된 이벤트에는 각각 callback 함수를 지정해야 하는데, CC_CALLBACK_2 매크로를 이용하면 , 터치된 이벤트와 좌표정보를 인자로 넘겨줄수있다.

앞서 배웠지만, 다시설명하자면 callback 함수는 어떤 상황이 전개된후에, 실행하는 후처리 함수로서, 상황발생된 객체로부터 전달받은 인자를 이용하여, 적절한 작업을 수행할수 있도록 하는 프로그래밍 기법이다.

터치이벤트에서도 callback 함수를 이용하여 터치가 시작된후 작업처리해야될것, 예를 들어 화면을 터치 했는데, 터치 좌표가 주인공 캐릭터에 포함되는지, 아닌지를 판단하는 등의 작업을 한다.

TouchMove 에서도 터치하면서 이동하는 좌표를 callback 함수에 넘겨주어, 캐릭터가 동시에 이동할수 있도록 callback 함수에서 조작해야 주어야 한다.

5.1.1 싱글터치 이벤트 리스너

게임화면을 터치 했을때 터치한 상태와 좌표를 기억하고 있다가, callback 함수에 인자로 전달해준다.

싱글 터치는 기본적으로 한번에 하나의 터치에 대한 정보만 알아차릴수 있다. 따라서 단순처리만으로도 진행되는 간단한 게임이 있다면 싱글터치를 이용하면 된다.

5.1.2 멀티터치 이벤트 리스너

멀티터치 이벤트 리스너는 한번에 두개 이상의 동시에 발생되는 터치에 대한 정보를 알아낼수 있다.

터치된 정보들은 터치된 순서에 따라 각각 touches 라는 vector 에 저장되고, 그 정보를 가지를 callback 함수에 인자로 전달해서 멀티터치된 스프라이트등에 대한 처리를 할수 있게 한다.

게임내에서 조작버튼등을 추가하고자 한다면 반드시 멀티터치 이벤트를 이용해야 한다.

*단 아이폰에서는

setMultipleTouchEnabled 메소드를 추가해야한다.

6.1.3 터치후 이동

화면을 터치했다면, 터치한 상태에서 그대로 손가락을 움직여서 스프라이트를 움직이는것을 구현할수 있다.

6.1.4 터치 우선순위

화면을 터치 했을때 가장 문제가 되는게, 화면상에서 겹쳐져 있는 캐릭터중에 누구를 터치한것인지 알아차리는 것이다. 물론 화면상으로는 가장 앞으로 나와있는 캐릭터가 선택되겠지만, 경우에 따라서는 주인공 캐릭터만 선택되야 할때도 있다.

터치는 객체 속성중에 z-order 라는 속성의 값이 높은순서대로 터치이벤트가 발생된다.

z-order 는 화면에 출력할때의 순서를 나타내기도 한다, 따라서 z-order 를 바꾸어 줌으로서 현재 터치한 객체를 화면의 가장 맨앞으로 정렬을 바꿀수 있다.

주로 숨은 그림 찾기등에서 일단 클릭한 물체는 눈에 띌수 있도록 맨앞으로 튀어와야 하는 경우에 사용된다.

그런데 캐릭터중에서 z-order 는 낮지만, 터치가 가장먼저 되었으면 하는 등의 상황이 생길수도 있다. z-order 를 높여주면 화면의 맨앞에 배치되기 때문에, z-order 를 높일수도 없는 상황이다.

이럴때는 객체의 속성중에 우선순위 Priority 라는 값을 강제로 조절해 주는 기능을 사용하면 , 낮은 z-order 의 객체라도 먼저 선택될수 있다.

5.2 키보드

키보드 이벤트 리스너는 키를 누르거나 떼었을때 두가지 이벤트가 있다.

키보드 이벤트도 마찬가지로 CC_CABLLBACK_2 매크로를 이용하는데, 어떤 키가 눌렸는지 정보를 전달한다.

onkeyPressed : 키를 눌렀을때 발생하는 이벤트이다, keyCode(ascii) 값을 체크해서 키에 맞는 적절한 처리를 하면된다.

onKeyReloaded :키를 떼었을때 발생하는 이벤트이다. keyCode(ascii) 값을 체크해서 키에 맞는 적절한 처리를 하면된다.

http://adolchristin.tistory.com/category/%EA%B0%9C%EC%9D%B8%20%EA%B0%9C%EB%B0%9C/Cocos2d-x

http://www.gamefromscratch.com/page/Cocos2d-x-CPP-Game-Programming-Tutorial-Series.aspx

http://www.gamefromscratch.com/post/2014/10/07/Cocos2d-x-Tutorial-Series-Handling-the-Keyboard.aspx

auto K_listner = EventListenerKeyboard::create();

K_listner->onKeyPressed = CC_CALLBACK_2(Main::onKeyPressed, this);

K_listner->onKeyReleased = CC_CALLBACK_2(Main::onKeyReleased, this);

_eventDispatcher->addEventListenerWithSceneGraphPriority(K_listner, this);

void Main::onKeyPressed(cocos2d::EventKeyboard::KeyCode keyCode, cocos2d::Event* event)

{

}

void Main::onKeyReleased(cocos2d::EventKeyboard::KeyCode keyCode, cocos2d::Event* event)

{

5.3 마우스 이벤트

pc 용 게임을 개발한다면, 마우스 이벤트를 사용할수 있다. 마우스 이벤트는 onScroll 이벤트 만 추가되었다는 것만 빼고는 싱글 터치이벤트와 거의 비슷하다.

마우스 이벤트는 마우스 객체 자체에 클릭정보와 위치 정보를 포함하고 있기 때문에, callback 함수에 CC_CALLBACK_1 을 제공한다.

void onMouseDown(Event *event) 화면상에서 마우스를 클릭했을때 발생하는 이벤트이다. callback 함수로 전달받은 마우스 이벤트 정보를 이용하여, 클기한 마우스 버튼번호와 위치를 알수 있다.

void onMouseMove(Event *event) : 화면상에서 마우스를 이동했을때 발생하는 이벤트이다. mouseup이벤트가 발생하기 전에는 마우스 move 상태이다.

void onMouseUp(Event *event) : 마우스의 버튼을 떼었을때 발생하는 이벤트이다.

void onMouseScroll(Event *event); : 마우스의 스크롤 버튼을 움직였을때 발생하는 이벤트이다. 스크롤 버튼의 움직임값을 전달받는다.

http://www.gamefromscratch.com/post/2014/10/03/Cocos2d-x-Tutorial-Series-Handling-Touch-and-Mouse-Input.aspx

5.4 eccelator 이벤트

acceletomete 이벤트 리스너는 기기의 기울임을 감지하는 이벤트 인다.

CC_CALLBACK_2 매크로를 적용해서, 기기의 X,y,z 축으로의 기울기값을 전달한다.

단.이기능을 사용하려면 ,Device::setAccelerometerEnabled(true); 이 되어 있어야한다.

5.5 커스텀 이벤트

cocos2dx 를 이용하여 게임을 제작할때, 새로운 입력기기등을 개발해서 적용하고 싶다면 custom 이벤트를 이용해서 제작할수 있다.

Custom 이벤트는 굳이 입력이벤트 뿐 아니라, 여러가지 다른 상황에서의 사용자 이벤트를 만들수 있도록 해주기 위해 있는것이다.

예를 들어 별도의 터치 디바이스를 장착한 기기에서 터치상태를 받고 싶으면, custom 이벤트를 통해서, 기기에서 전해주는 신호값들을 전달받아서 cocos2dx 내에서 적절한 처리를 할수 있다.

https://github.com/jwvg0425/ProjectArthas/wiki/cocos2d-x-%ED%81%B4%EB%9E%98%EC%8A%A4%EA%B0%84-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%86%B5%EC%8B%A0%EB%B0%A9%EB%B2%95

joystick

http://prog3.com/sbdm/blog/cheyiliu/article/details/43404961

가상조이스틱

http://cholol.tistory.com/267

http://qiita.com/makanai/items/564b0ea8c9b56752c052

PAGE_BREAK: PageBreak

샘플게임 6.

booksample7 멀티터치

booksample5 글자맞추기

booksample 6 키패드

PAGE_BREAK: PageBreak

샘플게임 7.

booksample5 글자맞추기

booksample 6 키패드

PAGE_BREAK: PageBreak

샘플게임 8.

booksample 6 키패드

PAGE_BREAK: PageBreak

10. 배경스크롤

10.1 단순한 배경 스크롤 방식

10.2 ParallaxNode

PAGE_BREAK: PageBreak

진행형 게임에서 캐릭터는 움직이는데 배경은 안움직이면 얼마나 어색한지 두말해야 잔소리다.

퍼즐형 게임을 제외하고는 거의 모든 게임이 배경이 스크롤 되는데, 가장 전통적인 방법으로 뒤의 배경이미지 한장을 조금씩 움직여서 스크롤 하는 방식과 여러장의 배경은 서로 각자 다른 속도로 움직여서 원근감이 느껴지도록 스크롤하는 Parallax(시차) 방식, 하나의 배경을 작은 타일크기로 구성하고 각 타일을 조합해 붙여서 동적인 배경을 만드는 방식등이 있다.

전통적인 배경스크롤은 단순히 배경이미지를 스프라이트로 지정한다음, 스케쥴등을 통해서 같이 조금씩 움직여 주면 되지만, 원근감을 느낄수 있는 parallax 방식은 구현하기가 다소 번거롭다.

하지만 cocos2dx 에서는 ParallaxNode 기능을 제공하고 있어서 이를 이용하면 쉽고 빠르게 만들수 있다.

10.1 단순한 배경 스크롤 방식

배경이 단순하거나 굳이 복잡한 원근감이 필요없는 경우라면, 배경이 될이미지를 스프라이트로 지정해서, 두장을 서로 교묘히 연결해서 좌우방향으로 무한 반복하면 된다.

이때 한장의 이미지만 사용할경우, 이미지의 끝부분이 화면안쪽으로 들어올경우 짤림현상이 되는데, 이를 방지하고자, 두개의 똑같은 이미지를 연결해서 짤림현상이 안타나나도록 하기 위해서서다.

10.2 ParallaxNode

cocos2dx 에서는 parallexNode 라는 원근배경스크롤을 지원하는 기능을 제공한다.

시차(Paralex ) 효과는 사용자가 직접 코드로도 충분히 구현할수 있지만, 번거롭게 직접작성하는것 보다 Parallexnode 를 사용하는 편이 낳다.

일단 ParallaxNode 를 생성하고 추가한다음, 각각 원근에 따른 배경 스프라이트를 배치한다.

파라랙스노드가 행동할 액션들을 지정한다.

파라랙스 노드를 실행한다.

패러럭스 모드를 사용할때 조금 까다로운 부분이 있는데, 이동속도를 달리하는 배경의 경우 배경이 끊어졌다가 다시 이어지는 현상을 방지하기 위해서는 모든 배경을 이음새에 맞게 디자인해야한ㄷ.ㅏ

PAGE_BREAK: PageBreak

샘플게임 9.

booksample 9 배경스크롤

PAGE_BREAK: PageBreak

11. 게임 흐름을 관리하는 스케쥴

schedule

schedule_select

schedule atone

PAGE_BREAK: PageBreak

스케쥴은 게임에서 어떤 아이템을 클릭했을때, 몇초후에 해당 액션이 나타나도록 할때나, 게임에서 적 캐릭터가 일정 주기로 나올때, 또는 주인공의 무기에서 총알이 0.3 로 간격으로 나와야 할때 등에 사용한다.

스케쥴은 반드시 콜백 함수와 함께, 시간,반복횟수, 대기시간을 지정해서 생성한다.

스케쥴.jpg

스케쥴2.jpg

schedule : 스케쥴을 생성한다.

schedule_select 에서는 스케쥴을 실행할때마다 실행할 콜백함수를 지정한다.

schedulatone : 지정된 대기시간후에 스케쥴을 한번만 실행한다.

http://study-cocos2d-x.info/move-object/123/

PAGE_BREAK: PageBreak

샘플게임 …돼지 낚시(또는 디펜스)

PAGE_BREAK: PageBreak

12. 메뉴 만들기

http://wonderpla.net/blog/engineer/CCMenu_AlignItems/

8.1 MenuItemLabel

8.3 MenuItemAtlasFont

8.5 MenuItemImage

8.4 MenuItemSprite

8.6 MenuItemToggle

PAGE_BREAK: PageBreak

게임 초기화면에는 게임시작, 순위보기, 게임종료 등 다양한 메뉴들이 구성되어 있다.

이런 메뉴들을 만들기 위해서 cocos2dx 에서는 쉽게 메뉴를 생성할수 있도록 기능을 제공한다.

메뉴만들기 명령어 같은 경우도 메뉴를 터치하거나 변경한다음, 메뉴에 맞게 처리해야 할것들은 callback 함수를 통해서 할수 있다.

메뉴는 보통 한개가 아니라 여러개가 세트로 나오기 때문에, Menu 항목에 Menuitem 들을 지정하고 배치하는 과정으로 생성할수 있다.

메뉴 아이템으로 생성할수 있는 메뉴 타입은 다음과 같다.

8.1 MenuItamFont

단순 Font 로 메뉴를 만들어 주는 기능이다.

auto item_1 = MenuItemFont::create(“Play” , CC_CALLBACK_1(HelloWorld::menuCallback, this));

8.1 MenuItemLabel

Label 에서 폰트와 크기등을 조절해서 만들어둔 Label 로 메뉴를 만들어 준다. 다국어 지원을 하는 메뉴를 만든다면 이 기능을 사용하면 좋다.

8.3 MenuItemAtlasFont

이미지로 글씨를 만드는 AtlasFont 로 메뉴를 만든다.

auto menuatlas = MenuItemAtlasFont::create(“012345″,”mypfs.png”,16,16,’0′);

auto menu = Menu::create(menuatlas, NULL);

menu->alignItemsVertically();

this->addChild(menu);

http://blackotter.tistory.com/archive/201602?page=2

8.5 MenuItemImage

평상시 이미지와 선택할때 이미지, 선택할수 없을때 이미지 로 구성된 메뉴를 만들수 있다.

8.4 MenuItemSprite

스프라이트를 이용이용하여 메뉴를 만들수 있다. 스프라이트이기 때문에, 애니메이션 메뉴 등을 설정할수 있다.

8.6 MenuItemToggle

전기 스위치 버튼처럼 toggle 되는 메뉴를 만들수 있따.

PAGE_BREAK: PageBreak

13. Scene

PAGE_BREAK: PageBreak

지금 까지는 하나의 Scene 에서 샘플을 만들어 보고 연습했지만, 실제 게임에서는 인트로->메인메뉴화면->튜토리얼->게임화면->게임종료->순위게시판 등과 같이 여러개의 장면으로 이루어 진다.

위와 같이 여러개의 Scene 을 준비해 놓고 적절한 상황에 맞게 Scene 을 바꿔주어야 되는데, cocos2dx 에서는 Scene 간의 전환시에 다양한 효과를 낼수 있게 해준다.

먼저 가장 기본적으로 Scene 의 전환은 replace, pop, push 라는 3가지 방식으로 실행된다.

replace

현재의 Scene 을 미리만들어둔 Scene 으로 교체를 한다. Replace 라는 단어에서 알수 있듯이, 완전히 교체를 하는 것이 때문에, 기존 scene 에 담아두었던 모든 정보도 같이 메모리에서 해제된다.

주로 게임시작시 인트로, 메인화면, 순위 보드 등 1회성으로 보여줘야 할경우에 많이 사용된다.

pop, push

pop 과 push 는 한 세트로서 현재의 Scene 에서 이전 Scene 을 꺼내서(pop) 돌아거거나, 새로운 씬을 추가(push) 하는 것이다.

영화에서라면 주인공이 잠시 과거를 회상하기 위한 장면들이 펼쳐지다가 과거회상이 끝나면, 현재로 돌아가는 것과 같은 효과라고 할수 있다.

pop 과 push 는 이전씬에 대한 정보를 메모리에 남겨둠으로서, 언제든지 다시 돌아갈수 있는 상황을 만들어두는 것이기 때문에, 너무 많은 정보를 가지고 있는 Scene 에서 대해서는 주의해야 한다..

6.1.1 fade

TransitionFade : 두 씬이 차례로 어두워졌다가, 다시 밝아지는 전형적인 영화기법 효과

TransitionCrossFade : 두 씬이 동시에 더워졌다가, 다시 밝아지는 효과

TransitionFadeTR : 왼쪽하단부터 오른쪽 상단까지 타일블럭이 작아지는 페이드 효과

TransitionFadeBL : 오른쪾상단부터 왼쪽 하단까지 타일블럭이 작아지는 페이드 효과

TransitionFadeUp : 밑에서 위로 여러개의 가로바가 순차적으로 작아지는 페이드 효과

TransitionFadeUp : 위에서 아래로 여러개의 가로바가 순차적으로 작아지는 페이드 효과

6.1.2 Flip

TransitionFlipX: X축(좌우) 로 마치 종이판넬을 뒤집듯이 화면전환 효과
TransitionFlipY: Y축(상하) 로 마치 종이판넬을 뒤집듯이 화면전환 효과
TransitionFlipAngular : x,y 축으로 동시에 뒤집어서, 비스듬이 뒤집히는 화면전환 효과

6.1.3 ZoomFlip

TransitionZoomFlipX : flipX 효과 중간에 화면을 축소시켰다가 확대시켜면서 더 입체적인 효과

TransitionZoomFlipY: flipY 효과 중간에 화면을 축소시켰다가 확대시켜면서 더 입체적인 효과

TransitionZoomFlipAngular : TransitionFlipAngular 효과 중간에 화면을 축소시켰다가 확대시켜면서 더 입체적인 효과

6.1.4 Zoom

TransitionRotoZoom : 현재 Scene 이 회전하면서 작아졌다가, 새로운씬이 회전하면서 나타나는 효과

TransitionJumpZoom : 현재 SCene 이 왼쪽으로 통통튀기면서 작아지고, 새로운씬이 점프하면서 뒤어들어오는 효과

6.1.5 MoveIn

TransitionMoveInL:현재 씬의 위로 새로운 Scene 이 왼쪽에서 오른쪽으로 나오는 효과

TransitionMoveInR:현재 씬의 위로 새로운 Scene 이 오른쪽에서 왼쪽으로 나오는 효과

TransitionMoveInT:현재 씬의 위로 새로운 Scene 이 위에서 아래로 나오는 효과,

TransitionMoveInB::현재 씬의 위로 새로운 Scene 이 아래에서 위로 나오는 효과

6.1.6 SlideIn

TransitionSlideInL:새로운 씬이 현재 씬을 왼쪽으로 밀면서 나오는 효과

TransitionSlideInR:새로운 씬이 현재 씬을 오른쪽으로 밀면서 나오는 효과

TransitionSlideInT:새로운 씬이 현재 씬을 아래쪽으로 밀면서 나오는 효과

TransitionSlideInB:새로운 씬이 현재 씬을 위쪽으로 밀면서 나오는 효과

6.1.7 Split

TransitionSplitCols: 화면을 X축으로 여러개의 등분해서 각각 위와 아래로 이동되면서 나타나는 효과 TransitionSplitRows : 화면을 Y축으로 여러개의 등분해서 각각 위와 아래로 이동되면서 나타나는 효과

6.1.8 Progress

TransitionProgressRadialCW: 시계방향으로 돌면서 새 Scene 을 현재 씬의 위에 채워 나가는 효과, TransitionProgressRadialCCW: 반시계방향으로 돌면서 새 Scene 을 현재 씬의 위에 채워 나가는 효과,

TransitionProgressHorizontal : 새 Scene 을 현재 씬위에 왼쪽에서 오른쪽으로 채워나가는 효과 TransitionProgressVertical : 새 Scene 을 현재 씬위에 위쪽에서 아래쪽으로 채워나가는 효과

TransitionProgressInOut : 새 Scene 을 현재 씬의 가운데에서부터 점점 채워나가는 효과

6.1.9 그밖의 효과

TransitionShrinkGrow : 현재 씬은 축소되면서, 동시에 새씬이 확대되며 나타나나는 효과

TransitionTurnOffTiles : 화면을 여러개의 타일로 만들어서 각 타일들이 새로운 신으로 교체되는 모자이크 효과

TransitionPageTurn : 종이 페이지를 넘기듯이 화면전환이 이루지는 효과

이상 cocos2dx 에서 제공하는 여러가지 화면효과를 확인했다.

cocos2dx 는 opengl 기반의 엔진이기 때문에, 사용자가 화면전환효과를 따로 만들어서 사용할수도 있따.

PAGE_BREAK: PageBreak

샘플게임

booksample 10

PAGE_BREAK: PageBreak

14.게임 상태 데이터 저장, 복구

PAGE_BREAK: PageBreak

게임실행시 사용자가 설정한 게임설정값이나 사용자의 로그인 정보, 사용자가 획득한 점수, 레벨, 구입한 아이템 보유상황등을 게임이 실행되는 기기에 저장해야 할 필요가 있다.

저장된 정보는 게임을 다시 실행시에 불러들여서 그 시점부터 게임을 진행할수 있도록 해줘야 한다.

게임의 데이터를 저장하는 방법은 여러가지가 있지만, 주로 사용하는 방법은 다음과 같다.

1.사용자 기기에 직접 저장한다.

2.원격지서버에 저장한다.

http://discuss.cocos2d-x.org/t/a-simple-tutorial-how-to-use-sqlite-in-cocos2d-x-tutorial-by-yuye/10677

.1 사용자 기기에 데이터를 저장하기

android 나 ios, pc 는 각각 파일시스템과 환경이 다르기 때문에, 이를 직접 구현하려면 매우 번거로운 작업이 될수도 있는데, cocos2dx 에서는 UseDefault 라는 기능을 제공해서 개발자가 OS 환경에 상관없이 편하게 빠르게 사용자 데이터를 저장할수 있도록 해준다.

UserDault 로 저장된 데이터는 게임앱이 종료되어도, 기기에 저장되어 있으며, 앱을 삭제하기 전 까지는 지워지지 않는다.

저장되는 데이터는 몇가지로 나뉜다.

String (문자열) 데이터

Integer (숫자) 데이터

Float (실수)데이터

Double (배수) 데이터

Bool (참,거짓 데이터)

UserDefault 는 게임앱을 실행하는 사용자의 기기에 데이터 단순 xml 형태로 저장한다. xml 형태의 데이터는 악의적인 사용자가 게임데이터를 조작할수 있으며, 이를 블로그등에 공개해 버리면 게임의 재미와 생명주기, 아이템판매수익은 더더욱 짧아지게 될것이다.

따라서 사용자가 조작하면 안되는 사용자레벨,획득점수,로그인 정보, 구입한 아이템보유상황 등은 별도의 암호화 (encryption) 를 해서 저장하는게 좋다.

UserDefault 는 저장과 로드가 간편하긴 하지만, 게임에서 100~1000 개 단위의 아이템에 대한 상태정보를 저장하려 한다면 해당 데이터의 키값과 밸류 값을 지정하는데에 매우 번거로울수있다. 그리고 하나의 기기에서 꼭 한명만 게임을 즐기라는 법은 없다. 여러사람이 하나의 기기를 통해 각자의 사용자정보로 게임을 즐기게 되면 사용자별로 데이터를 구분하고 해당사용자에 대한 데이터만 가져와야 한다.

이때는 차라리 sqlite 라는 경량 데이터베이스를 이용해서 아이템별, 스테이지별, 사용자별로 테이블화 시켜서 sql 명령으로 해당사용자에 대한 데이터만 로드하는 방법을 사용하는게 좋다.

sqlite 를 사용하는 방법은 부록 C 에 있다.

.2 원격지 서버에 저장하기

게임데이터를 원격지 서버에 저장하기 위해서는 http 표준 프로토콜을 이용해서 Get, Put 메쏘드등을 이용해서 데이터를 이용할수 있다.

사실 http 프로토콜로 데이터를 주고받는 기능을 구현하려면 별도의 책을 읽어야 할 정도로 방대하고 생각해야 될 부분도 많다.

하지만 다행스럽게도 cocos2dx 는 개발자가 간편하고 빠르게 사용할수 있도록 http 클래스를 제공한다.

http requset 를 이용해서 우리 서버에 저장된 데이터는 사용자가 게임앱을 실수로 삭제해도, 서버에 보관되어 있는 데이터를 이용해서 복구할수도 있다.

또한 서버로 전송된 사용자 데이터는 게임스크린샷 (binary) 데이터전송, 데이터베이스, 암호화 등을 서버스크립트를 통해 안전하게 보관할수 있으며, 사용자 이용 통계등 다양한 자료로 활용할수도 있다.

다만 개별 서버를 이용하고자 할때는 , 별도의 서버를 구축하고, 서버용 스크립트 언어나 프로그램을 따로 숙지해야 하는데 이러한 과정이 쉽지는 않다.

위의 그림에서 보았듯이 http 를 이용해서 데이터를 저정하려면, 반드시 서버가 있어야 한다.

서버호스팅을 이용하는 방법과 amazone 처럼 가상서버를 제공하는 곳을 이용하는 방법이 있다.

단, 서버에서 OS 설치후 , http 서비스를 실행한다음, jsp,asp,php 등으로 구성한 서버처리용 언어로 게임에서 던져주는 데이터를 서버에 저장하거나 저장된 데이터를 각상황에 맞게 처리후 돌려주는 과정이 필요하다.

이러한 과정은 초보자들에게는 굉장히 어렵고, 게임만들기보다 훨씬 복잡할수도 있다.

HttpRequest* request = new HttpRequest();

request->setRequestType(HttpRequest::Type::GET);

request->setUrl(“http://www.khjlab.com”);

bool isNetWork = false;

request->setResponseCallback([=] (HttpClient* client, HttpResponse* response)

{

if(!response || !response->isSucceed())

{

// No internet connection

CCLOG(“No internet connection”);

}

else

{

// Internet available

CCLOG(“Internet connection available %d”, response->getResponseCode());

}

});

request->setTag(“Get test”);

HttpClient::getInstance()->send(request);

request->release();

cocos2dx

userdate 저장

http://albatrus.com/main/cocos2d/6232

http://zzaps.tistory.com/193

사용자 게임데이터, 리더보드(순위) 등의 데이터를 쉽고 편하게 설정과 관리할수 있도록 해주는 google play serviec 라는게 있다.

부록 D 에 있다.

3.XML 게임 데이터

http://cerulean85.tistory.com/46

Medium.com에서 보기

http://albatrus.com/main/cocos2d/6239

http 로 다른 외부의 데이터(날씨데이터, 다른 서비스의 사용자목록데이터등) 를 가져올때 XML 이라는 구조화된 형식으로 가져와서 처리해야 할 경우가 있다.

XML 형식은 구조화된 키-밸류 값을 효율적으로 저장하는 방식으로 상위데이터-하위데이터로 계층화 상태로 저장되어 있는 데이터이다.

따라서 XML 의 구조를 읽어서 계층화 된 단게의 데이터를 효율적으로 읽어 들이는 과정을 거쳐야 제대로 된 데이터를 읽어 들여서 게임에 사용할수 있다.

cocos2dx 에서는 기본적으로 포함된 tinyxml2 (external/tinyxml2/tinyxml2.h) 를 이용하여 간단하게 xml 을 파싱할수 있다.

4.Json 게임 데이터

Json 데이터 형식은 최근 많이 사용되고 있는 데이터 형식이다. 과거 xml 은 불필요한 태그와 복잡한 계층관계로 인해 읽어들이고 저장하기가 매우 어려웠다.

json 데이터 형식은 이러한 단점을 없애고, 데이터를 object 형태로 직관적으로 저장하여, 읽기쉽고,제작하기 쉽게 되어 있다.

cocos2dx 에서는 기본적으로 포함된 rapidjson 을 이용해서 간단하게 jspn 을 파싱할수 있다.

http://bravecanary.com/blog/?p=210

http://albatrus.com/main/cocos2d/6237

5.SQL 사용

The solution, quite simply, is to link sqlite3 to your project. Libraries need to be linked (via the linker) for you to be able to use them. Head over here and download the pre-compiled binaries for your platform of choice (in this case, Win32). You may also choose to compile sqlite3 from source. You should end up with a .lib file. Go to Project -> Configuration Properties -> Linker -> General -> Additional Include Directories and add the path to your library file to it. Then go to Linker -> Input -> Additional Dependencies and put in sqlite3.lib.

링커에 sqlite3.lib 지정하면 끝

android. http://qiita.com/kiarina/items/adaf00ddd8df04f3d9cc

sqlite3 *pdb = NULL;

std::string path = FileUtils::getInstance()->getWritablePath() + “cocossave.db3”;

log(“FileUtils::getInstance()->getWritablePath()%s”, FileUtils::getInstance()->getWritablePath().c_str());

std::string sql;

int result;

//result = sqlite3_open_v2(path.c_str(), &pdb, SQLITE_OPEN_CREATE | SQLITE_OPEN_READWRITE, NULL);

result = sqlite3_open(path.c_str(), &pdb);

if (result != SQLITE_OK)

log(“open database failed, number%d”, result);

sqlite3_close(pdb);

PAGE_BREAK: PageBreak

샘플게임

booksample 11

게임상태 저장

PAGE_BREAK: PageBreak

샘플게임

booksample 11

http json xml

PAGE_BREAK: PageBreak

15.GUI

PAGE_BREAK: PageBreak

http://yannickloriot.com/

게임개발시 꼭 필요하지만 만들기가 매우 번거롭고 귀찮은 게 UI 기능 제작이다. 튜토리얼 이미지, 사용자이름 입력박스, 아이템리스트, 스크롤리스트 뷰, 웹페이지 보여주기 등 자잘하게 할것이 많아서 막상 게임 개발전에 UI 기능을 만들다가 지쳐버리는 경우도 있다.

cocos2dx 에서는 개발자들의 편의를 위해서 게임제작시 꼭 필요 몇가지 UI 를 제공하고 있다.

cocos2dx 에서는 gui 를 크게 두가지로 나누어서 제공하고 있다.

Normal GUI : button , text, slider, textfield 등

Container GUI : Layout, ScrollView, Page 등

Normal GUI 는 일반적인 UI 구성에 필요한 간단한 버튼, 조절바, 문장출력 , 문장입력필드 등으로 구성되어 있는 반면에 , Container GUI 는 여러가지 UI 를 포함하여 특별하게 동작하는 것들로 구성되어 있다.

12.1 Normal GUI

12.0 LABLE

게임화면에 점수표시, 글씨출력 등은 레이블을 이용하여 할수 있다. 레이블은 아래과 같이 여러가지 형식으로 출력할수 있다.

12.0.1

createWithSystemFont: 현재 실행중인 시스템의 폰트를 사용하여 출력

auto Label = Label::createWithSystemFont(“Hello Sugoi”,”dotum”,34,Size(300,100),

createWithTTF : TTF 폰트를 이용하여 화면에 글씨 출력

createWithBMFont: 출력하고자 하는 글씨를 이미지형태로 저장한 폰트파일을 불러들여 화면에 출력

createWithCharMap: png 등의 이미지파일을 이용하여 간단한 숫자, 문자를 출력할수 있도록 해준다.

12.0 UI Text 로 바꿈.

12.1 UI Button

버튼 형태의 UI 를 만들어 준다. 버튼은 상태에 따라 normal, pressed 가 있다.

#include “MyScene.h”

#include “iostream”

using namespace cocos2d;

bool MyScene::init() {

Sprite* bg = Sprite::create(“background.png”);

this->addChild(bg);

ui::Button* btn = ui::Button::create(“button-image.png”);

btn->setPosition( Vec2(200.f, 200.f) );

btn->addTouchEventListener( CC_CALLBACK_0(MyScene::buttonPressed, this) );

this->addChild(btn);

return true;

}

void MyScene::buttonPressed() {

std::cout << “PRESSED 0” << std::endl;

}

12.2. UI Checkbox

체크박스 UI 를 만들어 준다. check 박스는 현재 선택되어 있는지, 선택할수 있는지 등의 속성과 체크할때와 체크를 해제할때에 이벤트를 발생시켜 적절한 상황 처리를 할수 이싿.

auto check_box = (チェックボックス取得処理は省略)

check_box->setSelected( true ); // チェックを入れる

//check_box->setSelected( false ); // チェックを外す

check_box->addEventListener( [=]( cocos2d::Ref* target , cocos2d::ui::CheckBox::EventType event_type ) {

if( event_type == cocos2d::ui::CheckBox::EventType::SELECTED )

{

// チェックを入れた時に通る

}

else

{

// チェックを外した時に通る

}

} );

12.3 Editbox

사용자입력대호상자를 만들고 게임에서 로그인하거나, 별명을 입력할때, 해당기기의 키보드를 보여준다.

입력된 값은 이벤트로 받아서 저장할수 있다.

http://rudalstb.tistory.com/41

http://genieker.tistory.com/62

https://kagato0110.wordpress.com/2015/05/25/cocos2dx-c-editbox-how-to-retrieve-multiple-text-data-from-editbox/

12.4 UITextFiled 로 바꿈

12.9 Slider

어떤 값에 대해서, 사용자에게 직접 수치를 조절하게 하는 기능을 만들때, 슬라이더뷰를 사용한다.

http://genieker.tistory.com/archive/20141210

http://wonderpla.net/blog/engineer/cocos2d-x_cccontrol/

Stepper

http://wonderpla.net/blog/engineer/cocos2d-x_cccontrol/

경로에 engroot 추가해야된

Switch

http://wonderpla.net/blog/engineer/cocos2d-x_cccontrol/

ColorPicker

http://wonderpla.net/blog/engineer/cocos2d-x_cccontrol/

pontensionmeter

12.2 Special GUI

12.5 ScrollView

ScrollView 는 내부에 지정된 컨텐츠를 상하,좌우로 스크롤을 할수 있는 뷰로서, 주로 리스트뷰, 테이블뷰 등과 함께 사용된다.

http://qiita.com/noprops/items/b46134090a7024bd5a50

http://qiita.com/Riyaaaa_a/items/ec2360c4a443e6d1be85

http://qiita.com/otmb/items/6e5c941bcdefd3e89c57

12.4 Listview

리스트뷰는 목록을 표시할때, 사용한다. 리스트뷰를 사용할때 화면을 넘어가거나 길이가 길어지는 등의 현상이 생기기 때문에 ,주로 scrollview 와 함께 사용된다.

http://www.bkjia.com/qtjc/764353.html

http://mgstyt.blogspot.kr/2015/11/cocos2dx-uilistview.html

http://blog.csdn.net/star530/article/details/37371211

12.6 tableView

작은 아이템들을 한 화면에 효과적으로 보이기 위해서 테이블 뷰를 사용해서 보여준다.

스크롤 뷰와 함께 사용된다.

http://iscene.jimdo.com/2015/02/10/cocos2d-x-ver-3-x-%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AAtableview/

http://blog.naver.com/PostView.nhn?blogId=cloudlevel&logNo=50171381168

12.8 pageview

게임시작전에 게임의 소개, 튜토리얼 안내 등 몇페이지에 걸쳐서 보여줘야할 자료가 있다면 pageview 를 이용하면 된다.

http://genieker.tistory.com/93

http://raharu0425.hatenablog.com/entry/2014/07/01/190613

http://tristore.net/?p=1729

12.10 WebView

게임내에서 웹페이지를 보여줄 필요가 있을때 webview 를 사용한다.

auto webView = cocos2d::experimental::ui::WebView::create();

webView->loadURL(“http://yahoo.co.jp”);

// ポジションとサイズを調整

Size screen = Director::getInstance()->getOpenGLView()->getDesignResolutionSize();

webView->setAnchorPoint(Vec2::ANCHOR_MIDDLE_RIGHT);

webView->setContentSize(Size(screen.width/2, screen.height));

webView->setPosition(Vec2(screen.width, screen.height/2));

this->addChild(webView);

12.11 ViewPlayer

게임내에서 동영상을 보여줄 필요가 있을때 viewPlayer 를 사용하면 된다.

13.container

PAGE_BREAK: PageBreak

샘플 GUI

booksample15

ui1

PAGE_BREAK: PageBreak

샘플 GUI

booksample15

ui2

PAGE_BREAK: PageBreak

16. 파티클

13.1 파티클 종류

13.1 particle2dx 에서 저장한 효과를 cocos2d

PAGE_BREAK: PageBreak

파티클 시스템은 불꽃, 안개, 폭발, 구름, 비나 눈 내리를 효과, 물튀김효과 처럼 이미지로는 다소 표현하기 어려운 것들을 쉽게 표현할수 있도록 도와준다.

같은 게임이라도 파티클 시스템을 사용하지 않는게임과 그렇지 않은 게임과는 퀄리티가 차이가 나 보일수 있기 때문에, 적절한 파티클의 사용은 적은 노력으로도 게임의 완성도를 높일수 있는 좋은 방법이라고도 할수 있다.

cocos2d 에서 만들어 주는 파티클의 종류는 다음과 같다.

ParticleFire : 불이 타오르는 것과 같은 효과

13.1 파티클 종류

ParticleSun : 이글거리는 태양 효과

ParticleFireworks : 불꽃놀이 효과

ParticleGalaxy : 우주 성단(별과 가스의 무리) 효과

ParticleMeteor : 유성이 떨어지는 효과

ParticleSpiral : 은하계의 블랙홀처럼 나선모양(spiral) 처럼 회전하는 효과

ParticleExplosion : 폭발하듯이 터지는 효과

ParticleSmoke : 먼지가 일어나는 효과

ParticleSnow : 하얀 눈이 내리는 효과

ParticleRain : 비내리는 효과

ParticleFlower : 아침햇살에 꽃 주변이 반짝반짝 빛나는 것과 같은 효과

cocos2dx 에서는 위에서 처럼 간단하게 지정만 하면 될 정도의 파티클 효과를 제공하고 있다.

이 책에서는 기본값으로 예제를 살펴보았지만, 색상, 중력, 바람등 여러가지 옵션을 설정해서 같은 효과도록 전혀다른 결과물을 낼수 도 있다.

게임에 적용하기 위해서는 모든 효과들을 살펴보고 상세한 옵션들을 수정해 가면서 적용해야 되는데, 이런 과정을 좀더 쉽게 해주기 위해서 http://particle2dx.com/ 같은 사이트에서 미리보기 한다음 , export 해서 cocos2dx 에서 다시 불러들여서 작업할수 있다.

13.1 particle2dx 에서 저장한 효과를 cocos2dx 에서 불러들이는 방법

particle2dx.com 은 cocos2dx 와 corona 게임엔진에서 사용할수 있는 파티클에 대해서 미리보기와 저장을 할수 있다.

모든 기능이 무료이지만, chrome , firefox 등의 웹브라우져에서 실시간으로 옵션과 색상을 조절해가면서 미리보기를 할수 있다는건 다른 상용툴 부럽지 않다.

particle2dx 에서 편집한 파티클 정보를 plist 파일로 저정할수 있기 때문에,

cocos2dx 에서 가져와서 이용하는건 매우 간단하다.

먼저 particl2dx 사이트에 접속한다.
몇가지 주메뉴가 있는데 다음과 같다.

Color&Shape : 색상과 파티클의 입자모양을 지정한다.

Motion : 파티클입자의 생명주기, 각도, 중력 등의 입자운동을 결정한다.

Template : 미리 지정된 여러가지 파티클을 선택한다.

Export : cocos2dx 나 corona 엔젠용 파티클 파일로 저장한다.

3) 과정2에서 여러가지 파티클 속성을 수정한다음, Export 메뉴를 클릭해서 png 파일을 파함하는 plist 파일 또는 png 파일을 별도로 저장하는 옵션을 선택해서 저장한다.

4) cocos2dx 에서 파티클 지정시 과정3에서 저장했던 plist 파일을 지정해 주면된다.

ParticleStystemQuad::create(“my_particle_sample.plist”)

파티클 효과는 게임이 사실감있고 화려하게 보이도록 하는데 일등공신이다. 하지만 파티클은 내부적으로 엄청난 수학적 계산과 리소스를 잡아먹기 때문에 너무 남발하면 게임전체가 느려질수 도 있으니 적절히 사용하는게 좋다.

PAGE_BREAK: PageBreak

샘플게임

booksample 14

PAGE_BREAK: PageBreak

17. 물리엔진

http://stackoverflow.com/questions/4778068/cocos2d-and-chipmunk-making-bodies-ignore-gravity

http://stackoverflow.com/questions/22709079/ignore-collisions-in-chipmunk-cocos2d-v3-but-gravity-still-affects-body

http://stackoverflow.com/questions/10394776/how-to-remove-gravity-from-chipmunk

http://forum.spritebuilder.com/t/ignore-all-collisions-but-have-gravity-affect-the-chipmunk-physics-object/12770

PAGE_BREAK: PageBreak

앵그리 버드(c) novid 게임이 전세계적으로 인기를 끈 적이 있었다. 주인공새들을 고무새총쏘듯이 뒤로 당겼다가 놓으면 앞으로 날라가서, 돼지들을 맞추거나 지형을 무너트려 돼지들이 떨어지도록 하는 게임이다.

앵그리 버드가 사람들의 이목을 끈이유는 게임에서 새를 튕며내면, 실제세상에서 공을 던진것처럼 매우 자연스럽게 날아가고, 또 날아간후에도 공이 굴러떨어지는 등의 현실감있는 표현때문이었다.

물리엔진은 위와같이 현실세계에서 일어나는 물리현상을 게임에서 그대로 구현되도록 도와주는 프로그램이다.

cocos2dx 에서는 box2d 라는 물리엔진과 ,chipmunk 라는 물리엔진을 같이 제공하고 있다.

box2d 는 앵그리버드에서 사용된 오래부터 많이 사랑받고 있는 게임엔진이지만, 사용법과 설정이 다소 어려운 점이 있어서, cocos2dx 에서는 같은 기능을 하면서도 사용이 쉬운 chipmunk 개발하는 것을 권장하고 있다.

이책에서는 chipmunk 부분만 설명한다.

14.1 chipmunk

http://whitemiracle.tistory.com/entry/IOS-Cocos2d-%EB%AC%BC%EB%A6%AC%EC%97%94%EC%A7%84-Box2d-%EB%B2%88%EC%97%AD

http://kblog.jaey.ca/post/On-Chipmunk-Physics-Engine.aspx

14.2 Box2D

PAGE_BREAK: PageBreak

샘플게임 침멍크

PAGE_BREAK: PageBreak

샘플게임 박스 2d

PAGE_BREAK: PageBreak

18.SDKBOX

PAGE_BREAK: PageBreak

게임을 제작할때 게임내에서 유료아이템판매나 광고를 게재해서 수익을 낼 필요가 있다.

또한 게임내에서 획득한 점수를 공유하도록 해서 사용자들이 지속적으로 게임을 플레이 하도록 하는게 좋다.

좀더 나아가서 게임 사용자들의 나라, 이용시간대 등을 분석하여 향후 업그레이드에 반영하면, 사용자들의 취향에 딱 맞는 게임으로 발전할수 있다.

이러한 서비스들은 각각 외부업체들이 기능을 제공해 주고 있다. 하지만 “각각”의 업체들마다 적용방법과 제공하는 API 등이 모두 제각각이라서 제작게임에 적용하려면 간단한 게임이라도 개발기간보다, 이들 외부 기능적용하는게 더 시간이 걸릴수도 있다.

다행히도 COCOS2DX 에 공식 써드파티 SDK 로 된 SDKBOX 라는 서비스가 있어서, 앞서말한 여러가지 API들을 쉽고 빠르게 적용할수 있다.

http://www.cocos2d-x.org/sdkbox [화면캡춰]

사실 광고개제, 아이템등록판매, 사용자분석, SNS 공유등은 게임제작기능과는 관련이 없다고 할수 있다.

하지만 게임을 만들다 보면 sdkbox 에서 제공하는 몇가지 기능들이 꼭 필요하게 될수 있으니, 반드시 관련 샘플들은 꼭 한번씩 실행해 보기 바란다.

대표적인 서비스는 다음과 같다.

앱내 결제 (In App Purchase

: 아이폰용 앱과 안드로이드용 앱에는 아이템등 디지털상품을 온라인으로 편하게 구매할 수 있는 시스템들이 갖추어져 있다. 이들 아이템들은 개발자가 OS 별 앱관리웹화면 에서 직접 상품을 만들어서 판매할수 있다.

또한 각 OS별 라이브러리 적용은 아이폰,안드로이드 OS별로 각각 다르게 되어 있고, 과정 또한 꽤 복잡하다.

SDKBOX 의 InAppPurchase 기능을 이용하면, 개발자가 각각의 OS별 라이브러이를 따로 받아서 적용할 필요없이, SDKBOX 콘솔명령어 한번에 라이브러리가 다 받아지고 , 관련설정도 OS 마다 자동설정되어 진다.

개발자는 앱스토어 나 구글개발자 화면에서, 판매아이템의 고유키(아이디) 값을 지정만 해주면 바로 결제시스템이 연동되기 때문에 아이템결재 시스템에 대한 시간을 아낄수 있다.

ADS

: 게임내에 배너광고를 게재 하기 위한 서비스로서, 광고플랫폼을 제공하는 여러가지 광고회사를 지원한다.

광고제공 회사들은 , 사용사용자가 클릭 또는 보는 것만으로도 개발자에게 수익을 배분해 주기 때문에 인디개발자들에겐 매우 필요한 서비스이다.

SDKBOX 에서 제공하는 광고업체는 대표적으로 (구글)admob , InMobi, Adclony, ChartBoost 등의 업체가 있다.

http://www.sdkbox.com/integrations%5B화면캡춰%5D

광고서비스도 개발자가 SDKBOX 콘솔 명령어 한번으로 지정한 광고업체의 관련 라이브러리가 설정되기 때문에, 개발자는 해당 광고업체에서 할당받은 광고개제 아이디만 지정하면 된다.

Play Plugin

: 사용자들이 게임을 즐기면서 점수를 공유하고, 업적을 달성한 것을 기록하고자 할때, 아이폰에서는 GAme Center , 안드로이드에서는 Google Play 라는 서비스를 주로 이용한다.

사실 각각의 OS 에서 개별적으로 이런 시스템을 적용시키는데에도 상당한 노력이 들지만, SDKBOX Play Plugin 을 이용하여 그나마 조금 수월하게 적용할수 있다.

Ratings & Reviews

: 리뷰와 별점 시스템을 통해서 사용자와 소통할수 있도록 앱평가하기, 리뷰달기 등의 팝업창을 제공한다.

인디게임이라도 구글마켓과 앱스토어에서 피쳐드 에 뽑힌다면 사용자수와 게임을 통한 수익이 거의 수직상승선을 보이게 되는데 , 최소한 사용자평가(별)이 4.0 이상이어야 하기 때문에 평가와 리뷰는 중요하다.

Social Sharing

: FACEBOOK 과 TWITTER 등을 통해 사용자들이 게임을 공유할수 있도록 해준다.

–각각의 소스는 sdksample 로 끝.

을 게임내에서 적용하려면,

하고 나면, 게임에 아이템결제시스템(인앱결재), 외부광고, SNS 공유, 사용자분석 등의

—–

SDKBOXは、現在下記のサービスに対応しています。

– Google Play In-app Billing

– App Store In-app Purchase

– Google Analytics

– Flurry Analytics

– Tune

– Kochava

– AdColony

– Chartboost

– Vungle

===IAP

Supported app stores: Apple, Google, AmazonNEW, and Playphone.

한글설명

http://gilgamesstudio.blogspot.kr/2016/01/cocos2d-x-3x-310-sdkbox-iap.html

—–

FACEBOOK

http://wonderpla.net/blog/engineer/Cocos2d-x_FacebookWithSDKBOX/

http://developer.wonderpla.net/entry/blog/engineer/Cocos2d-x_FacebookWithSDKBOX/

UnityADs

http://wonderpla.net/blog/engineer/UnityAds_with_Cocos2dx/

Admob :: 17_admob

https://github.com/sdkbox/sdkbox-sample-admob

http://studio.cretia.net/blog/344

http://gilgamesstudio.blogspot.kr/2016/01/cocos2d-x-3x-310-sdkbox-iap.html

youtube

https://github.com/sdkbox/sdkbox-sample-youtube

cocos2dx 강좌

표지

시작하면서…

목차

Chaptor 1 . 게임하나 만들어 볼까?

1.1 게임하나 만들어 볼까!?

1.2 인기 게임 만들어서 돈 벌자.

1.3 게임개발에 필요한 준비물

Ch2. cocos2d-x 설치와 실행

2.0 Cocos2d-x 소개

PAGE_BREAK: PageBreak

2.1 Cocos2d-x 의 설치! 어렵지 않다.

2.2 OS Platform 별 개발톨 설치

2.2.1 window 용 에디터 VisualStudio 설치

2.2.2 mac 용 에디터 Xcode

2.2.3 linux용 에디터 Eclipse

2.3 cocos2d-x 라이브러리 설치

2.3.1 cocos2d-x다운로드[thkim 화면캡춰 필요]

2.3.2 Python 설치

2.4 HelloWorld ! Cocos2dx

2.4.1 .프로젝트의 생성

2.4.2 .프로젝트의 실행

3.0 게임라이브러리 개념이해

3.1 cocos2d-x 라이브러리 로는 어떤 게임까지 만들수 있을까

3.2 Cocos2d-x 의 구성과 게임 요소 개념

3.2.1 .Node

3.2.2. Director

3.2.3 Scene

3.2.4 Layer

3.2.5 Sprite

3.2.6 Action

3.2.7 input

3.2.8 Sound

3.2.9 그외 제공되는 다양한 확장 기능등

3.3 hello world 의 기본구조

3.3.1 .AppDeleGate

3.3.2.첫 SCENE

4.0 화면 해상도, 화면 좌표계와 앵커

PAGE_BREAK: PageBreak

4.1 화면해상도

4.2 화면 좌표계

4.3 앵커포인트

5.스프라이트

PAGE_BREAK: PageBreak

5.1 스프라이트(캐릭터 이미지) 출력

4.3.1 이미지 파일을 이용한 스프라이트 생성

4.3.2 이미지의 일부분을 사각영역을 이용하여 스프라이트 생성

4.3.3. 스프라이트 시트에서 스프라이트 만들기

4.3.4 spriteBatchNode 를 이용해서 스프라이트 를 만들기

4.3.5. 스프라이트 화면 화면 출력과 다양한 속성

4.3.6 스프라이트 액션

4.2.스프라이트액션 II

4.4.1. 순차액션과 복합액션

4.4.2 제어액션

4.4.3 액션의 속도에 관한 액션

4.3.콜백액션

4.4.스프라이트 관계맺기

샘플게임 1.

6. 스프라이트 애니메이션

6.1 준비된 여러장의 파일들을 불러들여 애니메이션 시키는 방법

6.2 스프라이트 시트를 이용한 방법

5.2.1 외부 툴을 이용해서 스프라이트 시트용 plist 를 이용하여 애메이션을 구현하는 방법

5.2.2 cocos Stuiod 이용해서 스프라이트 애니메이션을 구현하는 방법

6.3 다관절 캐릭터 애니메이션.

5.3.1 cocos stuio 에서 다관절 스프라이트 생성

5.3.2 DragonBones, spine 등 관련 툴 을 이용해서 다관절 스프라이트 생성

샘플게임 2.

7. 충돌체크

7.1 constrainsPoint

7.2 intersectsRect

샘플게임 3.

샘플게임 4.

8. 사운드

8.1 SImple Audio Engine

8.2 Audio Engine

샘플게임 5.

9. 입력 이벤트 리스너

5.1 터치이벤트

5.1.1 싱글터치 이벤트 리스너

5.1.2 멀티터치 이벤트 리스너

6.1.3 터치후 이동