Cocos2d-x 공부(HelloWorld편)

지금까지 SpriteKit에서 개발했지만 Android에서도 앱을 출시하고 싶은 Cocos2d-x를 만져 보겠습니다.

참조 등

Cocos2d-x 공식 사이트

Cocos2d-x 공식 참조

환경 구축

Windows

기쥬 메모 - Cocos2d-x 개발 환경 구축

Mac

Mac에서 Cocos2d-x를 사용하여 iOS 및 Android 앱 개발을 시작하기 위한 환경 구축 메모

【cocos2d-x 3.3】Mac로 Android판의 환경 구축

Cocos2d-x 프로젝트 생성

Cocos2d-x 프로젝트를 만들 루트 폴더로 이동하여 cocos 명령에서 프로젝트를 생성합니다.

$ cd /cocos2d/
$ cocos new MyGame -p com.mycompany.mygame -l cpp

HelloWorld

위에서 만든 프로젝트에 iOS용 프로젝트가 포함되어 있으므로 시작하고 작동하는지 확인합니다.

장면의 작동 방식

Cocos2d-x에서는, 타이틀 씬이나 게임 씬 등, 각 씬마다 화면(씬)을 준비해, 그 위에 레이어를 배치해 스프라이트(객체)를 배치해 갑니다.
HelloWorld 프로젝트에는 다음과 같은 코드가 작성되어 있으며 클래스 메서드 create()를 사용하여 객체를 생성합니다.
이 create 메소드를 사용하면, autorelease 된 상태로 오브젝트가 생성되는 것 같습니다.

HelloWorldScene.cpp

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;
}

원 포인트

USING_NS_CC;
namespace로서 cocos2d를 사용하는 것을 선언하는 매크로로, 이후 "cocos2d::"를 생략 가능하고, "using namespace cocos2d"와 동등한 의미를 가지는 것 같습니다.

AppDelegate.cpp

#include "HelloWorldScene.h"

// create a scene. it's an autorelease object
auto scene = HelloWorld::createScene();

배경 및 문자 표시

HelloWorld 프로젝트에서는 아래의 Resources 폴더에 리소스가 저장됩니다.


HelloWorldScene.cpp

// 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);

Resources 바로 아래에 위치한 HelloWorld.png가 참조되고 있음을 알 수 있습니다. 여기서는 Vec2 클래스를 사용하여 배경 이미지의 좌표를 설정합니다. 기본적으로 앵커 포인트(스프라이트의 중심 좌표)가 (0.5,0.5)로 설정되어 있기 때문에 화면 크기의 절반 위치에 오도록 설정되어 있습니다. 또한 만든 배경 이미지를 표시하기 위해 this (HelloWorld 장면)에 addChild하고 있습니다.

마찬가지로 아래 코드에서 레이블이 추가되었음을 알 수 있습니다.

HelloWorldScene.cpp

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);

엉망이지만 HelloWorld의 분석은 끝납니다.
다음 번에는 애니메이션을 만들거나 터치 이벤트를 받고 응용 프로그램을 만들고 싶습니다.