Cocos2D-X 를 이용하여 게임을 개발하기 위한 기초적인 프로젝트 생성방법에 대하여 설명드리겠습니다.


설치는 기본적으로 맥 베이스로 설명드리겠습니다.


 일단 Cocos2D-X 2.2 와 2.1.5 의 차이로 XCode 에 템플릿을 등록하는 install-templates-xcode.sh 이 없어졌습니다. 그래서 프로젝트 생성방법이 조금 다릅니다.


1. Cocos2D-X 다운받기



 일단 Cocos2D-X 를 다운받도록합니다. Cocos2D는 오픈소스로 무료로 다운받을수 있습니다.


다운받으러 가기 : 링크 



2. 프로젝트 생성하기



 다음은 프로젝트 생성하기 입니다. 다운받은 파일의 압축을 푸시고 터미널에서 ( 윈도우즈는 Command ) $COCOS2D_ROOT/tools/project-creator/ 로 이동하여 create_project.py 를 실행하여 보도록합니다. ( 맥에서는 기본적으로 Python 이 설치되어 있기 때문에 상관없지만 Windows 에서는 Python을 설치하셔야 합니다. )



실행을 해보셨다면 위와 같은 설명을 보실수 있습니다. 이는 프로잭트 생성방법에 관한것인대요. 


설명드리자면


./create_project.py -project 프로젝트_이름 -package 프로젝트_패키지( Identifier ) -language 프로그래밍 언어


로 보시면 될것입니다. 언어는 Cpp( C++ ) , Lua , javascript 를 지원합니다.


 만약 제가 fortune 라는 프로젝트를 생성한다고 한다면


./create_project.py -project fortune -package com.appgd.fortune -language cpp


라고 생성할 것입니다.


3. 플렛폼별 실행하여 보기 ( XCode, MAC )




프로젝트 생성시 아래와 같이 프로젝트 파일이 생성된것을 볼수 있습니다.


프로젝트 생성시 위와 같이 플렛폼별로 생성된 파일들을 볼수 있다.


IOS 나 MAC 의 경우 아래와 같이 xcodeproj 파일을 실행하여 바로 시뮬레이터를 실행하여 보시면됩니다.



 시뮬레이터 실행시 아래와 같이 cocos2dx 프로젝트가 디폴트로 설정되어서 실행이 되지 않될수도 있습니다. 아래와 같이 프로젝트를 어플리케이션으로 변경후 타겟 디바이스를 지정하여 주시기 바랍니다. ( IOS,  MAC 공통 )



 야래와 같이 컴파일링을 시작합니다. 조금 기다리셔야 합니다.



IOS 기본 프로젝트가 실행된 모습



MAC 기본 프로젝트가 실행된 모습




3-1. 플렛폼별 실행하여 보기 ( Android )



Android 의 경우가 조금 복잡한대요.


일단 Android 개발환경이 모두 설치된 상황에서 ( 참고 : http://kr.tutorialboat.com/35 ) NDK 를 추가적으로 다운받습니다.

( NDK를 사용하는 이유는 위에서 제가 cpp로 코드를 짜겠다고 설정하였기 때문입니다.  ) - ps . Windows의 NDK 설치 방법은 다릅니다. C++ 빌더를 추가적으로 설정해 주셔야 합니다.


NDK 링크 : http://developer.android.com/tools/sdk/ndk/index.html


이제 다운받은 NDK 의 압축을 풀어 주시고 eclipse 를 켜주도록합니다.


Eclipse -> 환경설정으로 이동하여


아래와 같이 이전에 받았던 NDK를 NDK_ROOT 로 지정하여 value 에는 폴더의 경로를 지정하시고 확인을 하여 주시기 바랍니다.



이제 프로젝트를 불러올 차례 인대요.


생성한 프로젝트를 바로 불러왔으면 좋겠지만 먼저 cocos2dx 의 java lib 를 import 시켜주셔야 합니다.


아래와 같이 File -> Import 로 이동하여



Existing Android Code Into Workspace 를 선택하여 줍니다.



좀 길긴하지만 cocos2dx > platform > android > java 를 선택하여 불러 오도록합니다.



Finish 를 눌러서 완료 합니다.



이제 위에서 생성한 프로젝트를 불러올 차례 입니다.


File > New > Project ... 을 선택



아래와 같이 Android Project from Existing Code 를 선택합니다.



그리고 아래와 같이 Cocos2d 폴더 안의 projects 폴더에서 생성한 프로젝트안의 proj.android 를 지정하여 불러 오도록합니다.



이제 모두 불러 오셨다면 libcocos2dx 라는 프로젝트와 함께 설정했던 프로젝트가 같이 있게 될것입니다.



이제 불러온 프로젝트를 클릭하시고 VM 혹은 장비로 실행하여 보시기 바랍니다.


아래는 제 장비인 Optimus LET 에서 실행한 모습입니다.



즐거운 개발 되시기 바랍니다. ^^



출처 : http://kr.tutorialboat.com/42

이클립스에서 Cocos2dxActivity cannot be resolved to a type라는 오류메세지가 떴을때.



혹시 proj.android/src 폴더에 들어가 보시면 org/cocos2dx 폴더가 있을겁니다 이 내부가 비어 있는건 아닌지 확인해 보세요. 원래 create-android-project.sh를 실행했을때 이부분이 자동으로 채워져야 하는데 왠일인지 생성이 되지 않는 경우가 있습니다. 이런경우엔 수동으로 복사해 주면 되는데요. cocos2d-2.0-x-2.0.4/cocos2dx/platform/android/java/src/에 들어가보시면 같은 구조의 디렉토리가 존재합니다. 이안에 있는 org 폴더를 통채로 복사해서 proj.android/src/ 에 그대로 복사해 붙여 넣은후 eclipse 에서 f5버튼으로 reflash 한후에 다시 빌드해 보시기 바랍니다. ^^




출처 : http://blog.daum.net/synsy/7664321

Fade, 이미지(CCSprite)를 점점 흐려지게 혹은 점점 진해지게 만들어 주는 액션이다.

 

※ 미리 선행되어야 할 작업 : setOpacity( 0~255가능 ) 메소드를 통해 Opacity값을 지정해주어야 함


■ FadeIn   : 현재의 opacity부터 최대opacity 255까지 지정한 duration 시간동안 점점 어두워짐 

                   ex) CCFadeIn*     in = CCFadeIn::actionWithDuration(1);

■ FadeOut : 현재의 opacity부터 최저 opacity 0까지 지정한 duration 시간동안 점점 밝아짐

                   ex) CCFadeOut* out = CCFadeOut::actionWithDuration(2);

■ FadeTo   : 현재의 opacity부터 내가 지정한 opacity까지 밝거나 혹은 어두워짐
                   ex) CCFadeTo* fadeto = CCFadeTo::actionWithDuration(3150);

 

   나는 메뉴가 선택되었을 때 팝업이 뜨면서 그 뒷 배경들은 점점 어두워지는 느낌을 표현하고 싶었다. 

   즉, 팝업은 FadeOut으로 밝아지고- 배경은 FadeIn으로 어두워지는것!

   그런데 내 생각과 다르게 FadeIn 메소드는 점점 어두워지면서 아예 까만색으로 아랫 노드를 완전히 가려버리는 문제가 있었다. 나는 뒤에 있는 배경을 반투명하게 가리고 싶은 건데 말이지. 알고보니 특정 Opacity까지만 내려가도록 설정해주는 FadeTo 라는 기특한 메소드가 있다. 현재의 opcity값과 메소드에 파라매터로 주어지는 Opacity값 중 어느 쪽이 크고 작냐에 따라 혼자서 FadeIn/Out 양쪽을 다 소화해낸다. 0 → 150 으로 Opacity를 주니 뒷 배경을 적절하게 가려주어서 만족.

 

   아래는 소스코드.

   쇼 팝업/ 하이드 팝업 메소드를 만들어 주고, 터치이벤트에서 해당 함수들을 호출하도록 한다. 배경을 반쯤 어둡게 덮는 레이어(alphaLayer)는 어두워지고, 팝업(popupbox)은 밝아진다. 랄까 팝업은 최초 Opacitiy가 0이라 더 밝아질 것도 없어서 '점점 밝아지는' 느낌은 안 나는데, 그런게 필요하다면 Opacity값을 수정하면 되겠다.

 

[팝업 컨트롤]

void XXX::showPopupBox(int menu) 
{

    alphaLayer->setIsVisible(true);

    popupBox->setIsVisible(true);

    
     // init에서 0값을 주었다고 여기에서 opacity셋팅을 빼먹으면

     // 처음 한 번만 페이드효과가 먹고, 그 이후부터는 페이드없이 바로 나타나는 불상사 발생 

    alphaLayer->setOpacity(0);

    popupBox ->setOpacity(0);

      

    CCFadeTo*  fadeto = CCFadeTo::actionWithDuration(2150);

    CCFadeIn*   fadein = CCFadeIn::actionWithDuration(2);   

  

    alphaLayer->runAction(fadeto);

    popupBox ->runAction(fadein);

}


void XXX::hidePopupBox() 
{

    popupBox->setIsVisible(false);

    alphaLayer->setIsVisible(false);

    // 이론적으로 opacty를 여기에서 0으로 주면 감춰져서 보이지 않을 것으로 생각했는데 그렇게 안 된다.

    // 왜일까- 잘 모르겠지만 우선 show와 hide에 각각 setIsVisible설정

}

 

[팝업 Sprite생성]

void XXX::init()
{ 

    ////////// Pop-up

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

    popupBox = new CCSprite();

    popupBox->init();

    popupBox->setPosition(ccp(0,0));

    

    CCSprite* bgBox = CCSprite::spriteWithFile("pop_box.png");

    bgBox->setScale(0.7);

    bgBox->setPosition(ccp((float)screenSize.width/2, (float)screenSize.height/2));

    popupBox->addChild(bgBox,  10);

    

    btnCancle = CCMenuItemImage::itemFromNormalImage("btn_cancle.png","btn_cancle.png",

                                                                                this,menu_selector(EbookHome::popupCancleCallback) );

    btnCancle->setPosition(ccp((float)screenSize.width/2+210, (float)screenSize.height/2+80));

    

    btnRestart = CCMenuItemImage::itemFromNormalImage("btn_start.png","btn_start.png",

                                                                                this,menu_selector(EbookHome::popupRestartCallback) );

    btnRestart->setPosition(ccp((float)screenSize.width/2-100, (float)screenSize.height/2-40));

    

    btnResume = CCMenuItemImage::itemFromNormalImage("btn_resume.png","btn_resume.png",

                                                                                 this,menu_selector(EbookHome::popupResumeCallback) );

    btnResume->setPosition(ccp((float)screenSize.width/2+100, (float)screenSize.height/2-40));

    

    CCMenu* popupBtns = CCMenu::menuWithItems(btnCanclebtnRestartbtnResumeNULL);

    popupBtns->setPosition(ccp(0,0));

    popupBox->setOpacity(0);

    popupBox->addChild(popupBtns, 11);

    this->addChild(popupBox10);

    

    alphaLayer = new CCLayerColor();

    alphaLayer->initWithColor(ccc4f(0,0,0,0));

    alphaLayer->setOpacity(0);

    this->addChild(alphaLayer9);

    

    hidePopupBox();

}


출처 : http://deng-i.net/category/%EA%B3%B5%EB%B6%80%ED%95%98%EB%8A%94%20%EA%B0%9C%EB%B0%9C%EC%9E%90/Cocos%202d-x%20

cocos2d-x 에서 레이어를 통해 게임 화면을 구성합니다.


이미지 출처 : http://www.learn-cocos2d.com


이런식으로 말이죠. 레이어를 풀스크린으로 쓰면 상관이 없지만 간혹 특정 크기에 맞춰야 할때가 있습니다. 화면을 분할하여 좌측, 우측 레이어를 구분해서 사용한다던가 할때 말이죠. cocos2d-x의 Layer 클래스는 상위 Node 클래스를 상속 받기 때문에 setContentSize 인터페이스를 사용할 수 있습니다.


하지만 이 인터페이스를 통해 크기를 조절한다 해도 실제 화면에서 보면 아무런 변화가 없습니다.


아래의 그림은 960 x 640 해상도에서 집과 캐릭터를 메인 레이어에 출력한 화면입니다. 이 메인 레이어 사이즈는 가로 해상도의 반인 480 x 640으로 설정해준 상태입니다(하늘 배경은 백그라운드 레이어 ).



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
bool CGameScene::InitLayer( void )
{
    bool bRet = false;
    do
    {
        // super init first
        CC_BREAK_IF( !CCScene::init() );
 
        // 배경 레이어
        CGameSceneBGLayer* pBGLayer = CGameSceneBGLayer::create();
        CC_BREAK_IF( !pBGLayer );
        this->addChild( pBGLayer, 0, CHILD_LAYER_BACKGROUND );
 
        // 메인 레이어
        CGameSceneMainayer* pMainLayer = CGameSceneMainLayer::create();
        CC_BREAK_IF( !pMainLayer );
        pMainLayer->setContentSize( CCSizeMake( 480, 640 ) );
        this->addChild( pMainLayer, 0.5, CHILD_LAYER_MAIN );
 
        bRet = true;
    } while (0);
 
    return bRet;
}

하지만 실제 화면은 960 x 640 풀 사이즈로 나오고 있습니다. 가로 사이즈 480으로 설정한대로라면 오른쪽에 있는 집, 대머리 캐릭터는 짤려야 정상인데 말이죠. 레이어가 설정해준 480 x 640의 크기로 출력되게 하려면 Layer 클래스를 상속 받아 visit 함수를 아래와 같이 재정의 해주어야합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
void CClippingLayer::visit()
{
    glPushMatrix();
    glEnable( GL_SCISSOR_TEST );
 
    CCSize contentSize = getContentSize();
    CCEGLView::sharedOpenGLView()->setScissorInPoints( getPosition().x, getPosition().y,
        contentSize.width, contentSize.height );
 
    CCNode::visit();
 
    glDisable( GL_SCISSOR_TEST );
    glPopMatrix();
}

이 후 메인레이어를 새로 정의한 CClippingLayer를 상속 받아 사용하면...



이제 원했던대로 메인 레이어가 반만 출력됩니다.



출처 : http://kindtis.tistory.com/489

+ Recent posts