cocos2d-x 포코팡 류 게임만들기!! - 13 - 화면 전환

지금까지는 게임화면을 만드는 것에만 집중했었는데요. 이번에는 화면을 전환하는 방법에 대해 확인해보겠습니다. 일반적으로 'Scene'이라고 부르는데요. 게임을 진행하던 HelloWorldScene과는 달리, 초기화면을 구성하는 Scene을 만들어보겠습니다. 이 두 개의 Scene은 완전히 대등한 관계라고 할 수 있는데요. 마치 한 장면 장면이 연결되어 한 편의 드라마나 영화가 되는 것처럼, 게임 또한 여러 장면을 구성하고 장면들을 연결하여 하나의 게임을 완성할 수 있습니다.

- 13 - 화면 전환

1. 초기화면 구성

---

게임을 구성하는 장면은 아주 다양합니다. 실제 게임을 진행하는 장면도 있고, 게임을 처음 켰을 때 나오는 회사마크도 장면이라고 할 수 있고요. 초기 메뉴도 장면, 게임이 종료되고 점수가 나오는 장면, 순위를 매기는 장면 등, 게임을 만드는 사람이 자유롭게 장면들을 만들 수 있지요.

여기서는 Opening 화면과 지금까지 만들었던 게임화면 두 개로 구성하고, Opening 화면을 처음 보여주고, 여기서 화면을 클릭하면 게임화면으로 넘어가게 구성해보겠습니다.

/Classes/OpeningScene.h

#ifndef __OPENING_SCENE_H__
#define __OPENING_SCENE_H__

#include "cocos2d.h"
#include "HelloWorldScene.h"

using namespace cocos2d;

class Opening : public cocos2d::CCLayer
{
private:
    CCSize _screenSize;
    
public:
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  

    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::CCScene* scene();
    
    // implement the "static node()" method manually
    CREATE_FUNC(Opening);

    void createGameScene(void);
    void changeScene(void);

    virtual void ccTouchesBegan(CCSet* pTouches, CCEvent* event);
    ~Opening(void);
};

#endif // __OPENING_SCENE_H__

처음 HelloWorldScene 파일을 만들 때와 동일하게 class를 구성합니다. createGameScene() 함수에서 기본적인 게임 정보를 초기화하고요. changeScene()으로 실제 화면을 전환합니다. 터치를 하는 순간 화면을 바꿀 생각이기 때문에 ccTouchesBegan()만 있으면 될 것 같습니다. 그러면 실제 구현 부분을 확인해보겠습니다.

/Classes/OpeningScene.cpp

#include "OpeningScene.h"

USING_NS_CC;

Opening::~Opening()
{
}

CCScene* Opening::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();

    // 'layer' is an autorelease object
    Opening *layer = Opening::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 Opening::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    createGameScene();

    this->setTouchEnabled(true);

    return true;
}

HelloWorldScene에 비해 따로 특징적인 부분은 없습니다. init() 부분에서 createGameScene()으로 기본 정보를 초기화하고 setTouchEnabled(true)로 터치입력을 가능하게 해줍니다.

/Classes/OpeningScene.cpp

void Opening::createGameScene(void)
{
    _screenSize = CCDirector::sharedDirector()->getWinSize();

    CCSprite* openingImage = CCSprite::create("startbg.png");
    openingImage->setPosition(ccp(_screenSize.width * 0.5f,
            _screenSize.height * 0.5f));
    this->addChild(openingImage);
}

초기화면으로 사용할 이미지를 생성하고요. 화면 중앙에 잘 배치해줍니다. 초기화면에는 아래의 이미지를 사용하도록 하겠습니다. 프로젝트에 잘 추가해주도록 합니다.

/Classes/OpeningScene.cpp

void Opening::changeScene(void)
{
    CCScene* pScene = HelloWorld::scene();

    CCTransitionScene* pTran = CCTransitionFade::create(1.0f, pScene);

    CCDirector::sharedDirector()->replaceScene(pTran);
}

void Opening::ccTouchesBegan(CCSet* pTouches, CCEvent* event)
{
    changeScene();
}

화면을 터치하는 순간 changeScene()을 통해서 Game Scene으로 전환하려고 하는데요. changeScene() 함수 내용을 보면, 지금까지 게임을 구현했던 HelloWorld 클래스에 대한 scene()을 만들고, sharedDirector()->replaceScene(pTran)으로 화면을 전환하게 됩니다. replaceScene()에 전달되는 pTran 값을 보면 CCTransitionFade 라는 클래스를 사용하게 되는데요. Scene이 서로 점점 교차되면서 전환되는 효과를 보여줄 수 있습니다. 여기서는 1초 동안 현재 화면에서 HelloWorld화면으로 전환하는 것을 의미합니다.

화면 전환 효과는 굉장히 다양하게 줄 수 있는데요. 여기서 사용한 Fade효과 외에도 Zoom, Move, Flip 등 이름만 들어도 대충 이해할 수 있는 다양한 효과들을 제공하고 있습니다. cocos2d-x 사이트에도 간략하게 정보를 제공하고 있고요. youtube 등에서도 실제 전환하는 영상을 찾아볼 수 있습니다.

http://www.cocos2d-x.org/wiki/Transitions

초기화면까지 모두 만들었습니다. 빌드는 문제없이 잘되는 것 같은데, 처음 화면은 그대로 게임화면이 나오네요. 어플 실행 시 초기화면부터 나오도록 변경해야겠습니다. AppDelegate.cpp 에서 간단하게 바꿀 수 있습니다.

/Classes/AppDelegate.cpp

#include "AppDelegate.h"
#include "HelloWorldScene.h"
#include "OpeningScene.h"
    
USING_NS_CC;

AppDelegate::AppDelegate() {

}   

AppDelegate::~AppDelegate()  
{   
}           
    
bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    CCDirector* pDirector = CCDirector::sharedDirector();
    CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
    
    pDirector->setOpenGLView(pEGLView);
    
    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(768, 1280,
            kResolutionExactFit);
    // turn on display FPS
    pDirector->setDisplayStats(true);

    // set FPS. the default value is 1.0/60 if you don't call this
    pDirector->setAnimationInterval(1.0 / 60);

    // create a scene. it's an autorelease object
//  CCScene *pScene = HelloWorld::scene();
    CCScene *pScene = Opening::scene();

    // run
    pDirector->runWithScene(pScene);

    return true;
}

조금 전에 만들었던 OpeningScene.h 헤더파일을 추가하고요. 초기 Scene으로 되어있던 HelloWorld::scene() 대신 Opening::scene()을 추가해줍니다. 이전 HelloWorld::scene() 라인은 주석처리 또는 삭제해서 실행되지 않게 해주시면 될 것 같습니다.

빌드를 하고 실행하면 초기화면부터 잘 뜨는군요! 터치를 하면 게임화면으로 스윽~ 넘어가게 됩니다.

---

다음에는 "시간제한"을 추가하여, 게임 중에 시간이 모두 지나면 다시 초기화면으로 돌아가게 만들어보겠습니다. 

읽어주셔서 감사합니다!! 끝.