auto item_01 = MenuItemFont::create("Sound On");

auto item_02 = MenuItemFont::create("Sound Off");

auto toggleItem = MenuItemToggle::createWithCallback(CC_CALLBACK_1(HelloWorld::menuCallback, this), item_01, item_02, NULL);

auto item = Menu::create(toggleItem, NULL);

this->addChild(item);

메뉴의 위치를 옮기거나 정렬하기 위해서는

1) 메뉴의 자동정렬을 이용하거나

2) 메뉴와 아이템들의 좌표지정을 이용

게임 내에 사용하는 이미지들은 대개 네이밍을 전부 영문 소문자로서 구성한다.

띄어쓰기는 사용하지 않고 _를 통해 띄움을 구분한다.

숫자는 _를 쓰기도 하고 안쓰기도 하며, 대개 1대신 001등으로 사용한다.

1) 이미지를 이용한 메뉴 만들기

auto item_01 = MenuItemImage::create("btn-play-normal.png", "btn-play-selected.png", "btn-play-disable.png", CC_CALLBACK_1(HelloWorld::menuCallback, this));

item_01->setEnabled(false);

//( 기본 이미지 , 선택 이미지, 선택불가 이미지, 선택시 호출함수 ) 순으로 지정

//선택 불가 상태는 setEnabled() 함수로 설정. true일 경우 선택 가능, false일 경우 선택불가

//궁극기처럼 조건이 충족되기 전까지 false로 뒀다가 조건 충족시 true로 바꿔주는 식으로 사용

2) 스프라이트를 이용한 메뉴 만들기

auto spr01 = Sprite::create("grossini_dance_01.png");

auto spr02 = Sprite::create("grossini_dance_02.png");

auto sprItem_01 = MenuItemSprite::create(spr01, spr02,CC_CALLBACK_1(HelloWorld::menuCallback, this));

//스프라이트를 바깥에서 모두 생성해준 뒤, 생성한 스프라이트를 메뉴에 추가하여 사용하는 방식

//별로 다른건 없음

MenuItemFont는 스프라이트처럼 하나하나를 레이어에 추가시키는게 아니라, 만들어둔 아이템들을 'Menu'라는 클래스에 추가하여 생성한 뒤, 해당 메뉴를 레이어에 추가하는 것임.

즉, '스프라이트-레이어' 의 관계가 메뉴에서 '메뉴아이템-메뉴' 의 관계와 유사함.

auto item_01 = MenuItemFont::create("Play");        //play 아이템 생성

auto item_02 = MenuItemFont::create("Quit");        //quit 아이템 생성

auto menu = Menu::create(item_01, item_02, NULL);    //두개의 아이템을 추가한 메뉴 생성

//NULL은 더이상 추가할 아이템이 없다는 것을 알려주는 역할

menu->alignItemsVertically();                                    //아이템들을 수직으로 자동 정렬

//menu->alignItemsVerticallyWithPadding(20);

//이렇게 패딩을 통해 아이템들 사이에 빈 공간을 채워서 여유를 줄 수 있다.

//이렇게 정렬을 안해주면, 두 아이템이 기본값으로 추가됐기때문에 겹치게 나옴

this->addChild(menu);                    //아이템이 아닌 메뉴를 레이어에 추가

+ 메뉴/메뉴 아이템의 기본 위치값(좌표/앵커포인트)

메뉴 아이템 클릭시 동작하게 만드는 함수 추가

void playCallback(Ref* sender);

void quitCallback(Ref* sender);

+ Ref* sender란?

위의 아무 동작 안하는 메뉴들 중, play를 수정해서 클릭시 동작하게끔 함수를 바꾼다.

auto item_01 = MenuItemFont::create("Play", CC_CALLBACK_1(HelloWorld::playCallback, this));

//this는 타겟. 여기서는 playCallback이 있는 HelloWorld가 된다.

//이렇게 바꿔줌을 통해, play를 클릭하면 playCallback함수가 호출된다.

//playCallback함수의 호출과 동시에 item_01자기 자신이 함수의 파라미터로 넘어간다.

//아이템에 해당된 함수는 클릭(터치)을 눌렀다가 뗄 시에 호출된다.

+ CC_CALLBACK_1이란?( CC_CALLBACK_n )

MenuItemFont는 말 그대로 font만 직접 입력하여 사용하는 것이기 때문에 다양한 활용도가 없다.

그래서 대신에 MenuItemLabel을 사용하면, 라벨을 이용하여 메뉴를 구성할 수 있다.

//라벨 아이템 생성

auto label_01 = Label::createWithBMFont("west_england-64.fnt", "PLAY");

auto item_01 = MenuItemLabel::create(label_01, CC_CALLBACK_1(HelloWorld::playCallback, this));

//메뉴에 추가하는 건 동일함

+메뉴별 callback을 menuCallback하나로 묶은 코드

라벨이란?

텍스트와 더불어 위치 값, 앵커 포인트 등 정보 값을 함께 가지고 있는 객체(스프라이트와 비슷)

종류 : SystemFont, TrueTypeFont, BMFont, CharMap

폰트 타입들은 

cocos메인 폴더\tests\cpp-tests\Resources\fonts

에 많이 있다. 원하는 폰트를 해당 프로젝트의 resources 폴더에 복사하여 쓰면된다.

1) SystemFont 출력

auto label = Label::createWithSystemFont("Hello world!", "Thonburi", 34, Size(150, 150), TextHAlignment::LEFT, TextVAlignment::CENTER);

label->setPosition(Point(240, 160));

label->setColor( Color3B::RED );

this->addChild(label);

//auto label = Label::createWithSystemFont( 텍스트 내용, 폰트 이름, 글씨 크기, 텍스트박스 크기, 가로정렬, 세로정렬 )

//텍스트 내용, 글꼴, 글씨 크기는 필수

//setPosition은 라벨(텍스트박스)의 위치를 의미

//정렬은 텍스트 박스 내에서 글자들의 정렬 기준을 나타냄

//시스템 폰트를 사용할 때에는 폰트를 ""로 비워두어도 무방함(대부분 pc에 없기 때문)

//#pragma execution_character_set("utf-8"); 를 추가하면 한글 폰트가 제대로 출력됨

//윈도우에서는 깨져나오지만 안드로이드에서는 제대로 나옴

2) TTF 출력

여러가지 효과를 줄 수 있는 폰트. 효과에 따라 색깔 등을 따로 줄 수 있기 때문에, 글자색을 바꿀 때 setColor를 쓰는 다른 폰트들과는 달리 setTextColor 메소드를 사용한다.

auto label = Label::createWithTTF("Hello world!", "A Damn Mess.ttf", 34);

label->setPosition(Point(240, 160));

//label->enableOutline(Color4B(0, 0, 255, 128), 3);        //외곽선 효과를 주는 함수. 색깔과 두께.

//label->enableShadow( Color4B , Size(x, y) , blur);    //색깔, 그림자의 위치(라벨 (0,0)기준),블러

//label->enableGlow( Color4B )                        //형광색 그림자같은 느낌. shadow와 비슷한 기능

this->addChild(label);

//TTF는 폰트 이름에 확장자까지 같이 적어줘야 한다.

//해당 글꼴이 프로젝트의 resources / fonts 폴더에 있어야한다.

//TTF에서 사용가능한 글자 효과 - Outline, Shadow, Glow

3) BMFont

.png파일로 만들어진 비트맵 파일을 기반으로 하여 쓰는 폰트. 한 쌍의 png/fnt파일이 둘다 필요. 다른 폰트들과 달리 글자 사이즈를 입력하지 않는다. 사실상 폰트라기보단 이미지에 가까움.

auto label = Label::createWithBMFont("bitmapFontTest.fnt", "THIS IS IT");

label->setPosition(240, 160);

label->setScale(2);

this->addChild(label);

//http://angelcode.com/products/bmfont/      여기서 bmfont제작툴을 받을 수 있다.

+TTF와 BMF의 차이

TTF는 벡터 방식으로 처리하기 때문에 BMF에 비해 폰트 처리 속도가 느린 편(폰트 양이 많이 않다면 크게 차이 안나옴)

텍스트 양이 많고 글자 크기의 변화가 없다면 BMF가 성능적 측면에서 훨씬 이득

4) CharMap

BMF와 달리, fnt파일이 따로 없이 사용자가 파일의 정보를 직접 지정할 수 있게 한 폰트.

단, 각 글자의 높이/너비가 동일해야하며, 글자의 순서가 아스키코드의 순서와 동일하게 하여 이미지 파일을 만들어야 한다. 대개 숫자를 라벨로 출력할 때 많이 사용된다.

int score = 331245;            //게임에서 사용되는 점수

auto label = Label::createWithCharMap("no_01.png", 33, 45, '0');

label->setString(StringUtils::format("%d", score) );        //점수를 라벨에 출력하기위해 사용

label->setColor(Color3B::WHITE);

label->setPosition(240, 160);

this->addChild(label);

//(이미지 파일 명, 한 글자당 넓이, 한 글자당 높이, 첫 시작 문자의 아스키 코드 값) 순서로 초기화

+ Color3B와 Color4B의 차이점?

3B는 R, G, B의 3개 속성을 가진 기본 컬러고, 4B는 이 RGB에 투명도까지 더한 것.

+ getString / setString 함수를 이용해 라벨의 내용을 가져오거나 설정한다.

+ Label에 %d와 같이 변수를 사용할 경우, StringUtils::format을 사용하여 텍스트를 입력한다.

+ 코드상의 문제가 없는데 폰트 관련하여 문제가 생겼을 경우

1) 다른 폰트를 로드하여 써본다 -> 될 경우 폰트 파일의 문제

2) 다른 내용(영어/한글 등)을 써서 해본다

화면을 구성하는 여러가지 스프라이트들의 z축 위치를 관리하기 위해서 enum을 사용하면 편하다.

enum Z_ORDER

{

BG,            //0

PLAYER,    //1

ENEMY,    //2

UI_TEXT = 10,        //중간에 임의로 값을 지정해줄 수 있음. 단 이 경우 다음것에도 영향을 줌

GAMEOVER            //10다음이니 11로 지정됨

};

이렇게 Z_ORDER를 설정한 뒤, addchild를 통해 스프라이트를 화면에 추가할 경우

this->addchild( spr , Z_ORDER::PLAYER );

이와 같은 식으로 해당 스프라이트의 z축 크기를 설정해서 추가할 수 있다.

//HelloWorldScene.cpp / bool HelloWorld::init() 내부에 구현

//현재 생성되어있는 화면의 사이즈를 구하여 저장

auto director = Director::getInstance();

auto WinSize = director->getWinSize();

//좌측 하단 첫번째 스프라이트 추가

auto Sprite_Grossini01 = Sprite::create("grossini.png");

Sprite_Grossini01->setAnchorPoint(Vec2(0, 0));

Sprite_Grossini01->setPosition(WinSize.ZERO);

this->addChild(Sprite_Grossini01);

//화면 정중앙 스프라이트 추가

auto Sprite_Grossini02 = Sprite::create("grossini.png");

Sprite_Grossini02->setAnchorPoint(Vec2(0.5, 0.5));

Sprite_Grossini02->setPosition(WinSize.width/2, WinSize.height/2);

this->addChild(Sprite_Grossini02);

//화면 우측 거대 스프라이트 추가

auto Sprite_Grossini03 = Sprite::create("grossini.png");

Sprite_Grossini03->setAnchorPoint(Vec2(1, 0));

Sprite_Grossini03->setPosition(WinSize.width, 0);

Sprite_Grossini03->setScale(2);

this->addChild(Sprite_Grossini03);

//화면 중앙 하단 스프라이트 추가

auto Sprite_Sister01 = Sprite::create("grossinis_sister1.png");

Sprite_Sister01->setAnchorPoint(Vec2(0.5, 0));

Sprite_Sister01->setPosition(WinSize.width/2, 0);

this->addChild(Sprite_Sister01);

//화면 중앙 상단 뒤집어진 스프라이트 추가

auto Sprite_Sister02 = Sprite::create("grossinis_sister2.png");

Sprite_Sister02->setAnchorPoint(Vec2(0.5, 0));

Sprite_Sister02->setPosition(WinSize.width/2, WinSize.height);

Sprite_Sister02->setRotation(180);

this->addChild(Sprite_Sister02);

기본 자료형(32bits)

1) 정수형 (32bit기준)

int : 4byte

short int : 2byte

long int : 4byte

unsigned int : 4byte

unsigned short int : 2byte

->운영체제의 32/64에 따라 달라질 수 있음

2) 실수형

float : 4byte (3.2f)

double : 8byte (3.4)

long double : 8byte 

+ 서로 다른 자료형 간의 연산은 더 큰 형으로 자동 형변환

ex)  int a와 float b의 합의 결과는 float형

3) 문자형

char : 1byte ('a', '5')

함수 네이밍 룰 : 

1) 동사+대상 

ex) addChild : 더한다+자식 -> 자식을 추가하는 함수

2) 첫 글자는 소문자로 시작

ex)

bool isTrue()

int sprData;

클래스 네이밍 룰 :

1) 모든 단어의 첫 글자는 대문자로 사용

ex) class SpriteBatchNode

AppDelegate.cpp 에서

director->setDisplayStats( true/false )        //현재 표현된 화면에 대한 성능 분석 표시 여부

- DisplayStats 분석

GL calls : Draw call이 일어난 횟수

+ 단순 계산은 CPU 자체에 부하가 거의 없다.

하드웨어에 가장 큰 부하가 걸리는 시점?

->CPU에서 GPU로 데이터를 보낼때(Draw call) 가장 큰 비용이 듦

이런 부분을 해소하기 위해 COCOS에서는 Sprite Cache를 사용한다(사용할 스프라이트를 미리 GPU에 올려두는 작업인 듯)

HelloWorldScene.cpp 에서

init 함수 내부 청소

menuCloseCallback 함수 삭제

하면 cocos프로젝트 기본형 완성

cocos에서 사용되는 자료구조들의 기본 개념

Texture : 이미지 그 자체

Sprite : 이미지와 이미지의 정보값까지 포함한 것.

Text : 글자 그 자체

Label : 글자의 내용과 그 글자의 정보값까지 포함한 것.

- cocos2d-x 개발 환경 필수 요소

cocos2d-x 폴더

NDK

1) cocos2d-x 설치

cocos2d-x.org에서 최신 버전을 다운받아서 압축을 풀면 바로 사용 가능.

별도의 실행파일이나 설치과정이 존재하지 않음.

alpha/beta/rc등의 이름이 붙은 버전은 불안정한 테스트버전이니 왠만하면 피하도록.

(작성일 기준 3.2버전)

압축 해제된 폴더의 하위 폴더 설명

- cocos : 실질적인 기능들을 담은 코드들이 존재.

 audio : 하드웨어의 특성을 타는 오디오 특성상 다양한 플랫폼에 대응하는 폴더가 존재.

 deprecated : 나중에 지원하지 않을지도 모르는 기능들. 여기 있는 것들은 되도록 사용하지 않는 것을 권장함.

editor-support : 에디터와 연동할 수 있도록 하는 부분. 

- extention : cocos2d-x 자체에 추가된 새로운 기능들.

- external : 기존에 있던 다른 기능들을 가져다 쓸 수 있게 하는 부분.

2) Python 설치

cocos2d-x용 프로젝트 생성을 위해 Python을 설치해야함.

https://www.python.org -> downloads -> windows -> python2.7.8

cocos2d-x용 프로젝트 생성에 사용할 뿐, Python언어를 이용한 코딩은 하지 않음.

설치 후, 환경변수의 Path에 Python이 설치된 폴더의 경로를 추가.

(시스템->고급 시스템 설정->고급 탭의 환경변수->하단의 시스템 변수의 Path를 편집)

+ 환경 변수의 상단 '사용자 변수'는 현재 로그온 중인 유저가 접근 가능/하단의 시스템 변수는 글로벌

opengameart.org - 게임과 관련된 오픈 리소스들이 모여있는 사이트

- 초기 설정

명령 프롬프트에서 cocos2d-x가 있는 폴더로 이동 후, 'python setup.py' 입력

- 프로젝트 생성

cocos2d-x 폴더로 이동

cocos new [프로젝트 명] -p [패키지명] -l [개발언어] 

[프로젝트 명]: 프로젝트의 이름

[패키지 명]: 어플리케이션의 고유 ID와 같음. 이걸로 어플리케이션 간 구분을 함. 이게 중복되는 것은 마켓에 등록 불가. 대개 [단체형태].[단체이름].[프로젝트명] 형식으로 구성.ex)com.3plab.test2014

[개발언어]: 개발에 이용할 언어를 선택. 대개 cocos2d-x의 경우 cpp로 대동단결.

이렇게 해서 생성에 성공한 프로젝트는 cocos2d-x 폴더 내부에 프로젝트 명과 같은 폴더에 위치한다.

- 프로젝트 폴더 분석

Classes :  유저가 직접 수정할 코드 파일들이 있는 위치.

Resources : 코딩할 때 사용할 리소스들이 있는 위치.

cocos2d : cocos 폴더 내에 있던 것들이 그대로 복사되어 옴.

2.x버전에서는 cocos폴더를 링크하여 사용했기 때문에 프로젝트 폴더를 옮기면 경로가 바뀌어 컴파일이 안됨. 3.x에서는 cocos폴더를 그대로 가져오기때문에 프로젝트 폴더를 옮겨도 그대로 실행 가능.

- What is cocos2d-x?

cocos2d-x는 중국의 추콩chukong에서 서포트하는 게임 엔진.

iOS기반의 cocos2d 엔진을 왕저Zhe Wang가 개조해서 멀티플랫폼을 지원하는 cocos2d-x를 만듦.

중국에서 출시 게임 중 50%이상의 점유율을 가짐.

최근 3D기능까지 추가하고 있으며, 2D에 집중중인 Unity와 필연적으로 한판 붙게 될 듯.

cocos라는 이름으로 Unity같이 완전한 하나의 개발툴로 만들어질... 지도 모른다.

무료 엔진이기 때문에 test를 위한 버전들이 올라 올 수도 있다.(Beta/rc가 붙어있는건 가급적 받지마라)

- About cocos2d-x

cocos2d-x는 C++ 11버전을 따르고 있다.

가볍다.(동일 게임을 cocos2d-x/Unity3D로 각각 개발하면 cocos2d-x기반이 훨씬 작고 가볍다)

그러니까 빠르다.

2D 엔진이긴 하지만 OpenGL을 이용한 3D가 기반이다.

(OpenGL은 화면평면을 기준으로 유저쪽으로 가까워질수록 좌표값이 증가/DirectX는 반대)

cocos2d-x가 c++보다 쉽다 - 기본 기능만으로도 충분히 결과를 낼 수 있다.

Code IDE (Lua + js 개발환경 통합). C++도 추가할 계획.

Cocos Studio - UI, Animation 등등의 에디터들을 제공.

 엥간히 잘 모르는 상황에 대해서는 cocos2d-x 공홈의 forum쪽에 가서 검색해보면 다 나온다.

+ etc

MacOS에 익숙해지는 것이 좋다.

대부분의 모바일 게임 회사에서는 Mac을 선호한다.

Mac에서는 android/iOS 다 개발 가능하지만, iOS는 Mac에서만 가능하기 때문.

또한 Mac은 하드웨어만 사면 대부분의 관련 software들이 공짜.

컴투스/게임빌은 현재 카톡런칭을 하지않고 글로벌 진출을 하고 있음.

(서머너즈 워가 한달 200억 가량 찍음)

요즘은 대부분 Skeleton Animation을 사용(비용이 적게 들고 편하기 때문)

놀랍게도 모두의 마블도  cocos2d-x로 만들어졌다.