Cocos2d-x v3 チュートリアル 2

基本コンセプト

元記事はこちらです。
Parkour Game with JavaScript (Cocos2d-JS v3.0) Chapter3

Cocos2d-xは、もともとiOS(iPhoneやiPadで採用されているOS)用にObjective-Cで開発されたゲームエンジンCocos2dをマルチプラットフォームで動作するようにc++へ移植したものです。ですから、基本的な構造はCocos2dと同じです。

Cocos2dは、３つの基本的なノード(node)から構成されています。
– Scene
– Layer
– Sprite

Scene

１つの画面を表すクラスが、Sceneクラスです。例えば、タイトルシーン、ゲーム中シーン、設定シーンなどです。

Layer

Layerクラスは、画面上に重ねあわせるレイヤー(層)を表します。半透明などにより、後ろの他のレイヤーを見ることができるようにします。ゲームの見た目を構成するのに最適です。例えば、次のような構成にすることができます。実際にゲームを制作する場合は、Layerクラスを継承したクラスを作成して重ねあわせます。

Background Layer・・・背景
Game Play Layer・・・実際のゲームプレイに必要な画像など
Status Layer・・・ゲームの状態表示

Layerstructure

Sprite

スプライト(sprite)というのは、小さな妖精の意味です。画像などのゲームの部品を入れます。キャラクタの動きなどは、スプライトを使って実現します。

座標系

Cocos2dは、OpenGLと同じ右手座標系(Right-handed Cartesian Coordinate System)を採用しています。この座標系では、右に+X、上に+Y、手前に+Zになります。Cocos2dは基本的には２D用のゲームエンジンですが、よくある２Dの左上が原点の座標ではありませんので、注意が必要です。

Coordinatesystem

Anchor Point

アンカーポイント(Anchor point)というのは、位置と回転軸の両方の基準となる点のことです。アンカーポイントは相対的な座標で表し、(0,0)は、左下の座標ということになります。中心にする場合は、(0.5f,0.5f)にします。位置を変更するためのsetPosition()関数を呼び出すと、アンカーポイントの位置がその一になるように移動します。また、回転させるとアンカーポイントを中心に回転します。

auto sprite = Sprite::create("bottomleft.png"); sprite->setAnchorPoint(Vec2(0.5f, 0.5f)); sprite->setPosition(Vec2(0.0f, 0.0f));

auto sprite = Sprite::create("bottomleft.png");

sprite->setAnchorPoint(Vec2(0.5f, 0.5f));

sprite->setPosition(Vec2(0.0f, 0.0f));

Action

アクション(Action)は、オブジェクトが実行する内容を表します。例えば、次のように使います。

// 右へ50ビクセル、上へ10ピクセル２回移動する。 sprite->runAction(MoveBy.create(2, Vec2(50, 10)));

// 右へ50ビクセル、上へ10ピクセル２回移動する。

sprite->runAction(MoveBy.create(2, Vec2(50, 10)));

Animation

スプライトアニメーションを作成して、実行することもできます。

auto animation = Animation.create(); for (int i = 1 ; i < 15 ; i ++) { std::string frameName = "Images/grossini_dance_" + ((i < 10) ? ("0" + i) : i) + ".png"; animation->addSpriteFrameWithFile(frameName); } animation->setDelayPerUnit (2.8f / 14); animation->setRestoreOriginalFrame(true); auto action = Animate.create(animation); sprite.runAction(Sequence.create(action, action. reverse()));

auto animation = Animation.create();

for (int i = 1 ; i < 15 ; i ++) {

std::string frameName = "Images/grossini_dance_" + ((i < 10) ? ("0" + i) : i) + ".png";

animation->addSpriteFrameWithFile(frameName);

}

animation->setDelayPerUnit (2.8f / 14);

animation->setRestoreOriginalFrame(true);

auto action = Animate.create(animation);

sprite.runAction(Sequence.create(action, action. reverse()));

Scheduler

スケジューラー(Scheduler)は、スケジュールの実行や停止を行います。スケージュールには、毎フレーム実行するものや秒数を指定するもの、秒数と繰り返し回数、遅延時間を指定するものが使えます。

EventManager

イベントマネージャ(Event Manger)は、ユーザのイベントに対応した処理を管理します。イベントには、タッチやキーボード、マウスによるものがあります。
イベント処理に重要なものには次のクラスがあります。
– EventListener・・・イベントを取り出して処理するためのクラス
– EventManager・・・ユーザイベントのリスナーを管理するクラス
– Event・・・イベントの内容

最初のシーンの作成

ビューのデザイン画面サイズの設定

ここでは、ゲーム画面を480×320のサイズで設定することにします。また、画面内にアスペクト比を変更することなくぴったり収めて、空いた部分は帯が入る設定にします。

#include "AppDelegate.h" #include "MenuScene.h" (省略) bool AppDelegate::applicationDidFinishLaunching() { // initialize director auto director = Director::getInstance(); auto glview = director->getOpenGLView(); if(!glview) { glview = GLView::create("My Game"); director->setOpenGLView(glview); } // ゲームの仮想画面のサイズを設定する。 glview->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL); // 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); // メニューシーンを表示する。 auto scene = MenuScene::createScene(); // run director->runWithScene(scene); return true; }

#include "AppDelegate.h"

#include "MenuScene.h"

(省略)

bool AppDelegate::applicationDidFinishLaunching() {

// initialize director

auto director = Director::getInstance();

auto glview = director->getOpenGLView();

if(!glview) {

glview = GLView::create("My Game");

director->setOpenGLView(glview);

}

// ゲームの仮想画面のサイズを設定する。

glview->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL);

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

// メニューシーンを表示する。

auto scene = MenuScene::createScene();

// run

director->runWithScene(scene);

return true;

}

メニューシーンの作成

Visual StudioのプロジェクトエクスプローラーのParkourプロジェクトのClassesフォルダを右クリックして、「追加(D)」から「新しい項目(W)」を選択します。
開いたダイアログの一番下の、「場所(L)」の参照ボタンを押して、同じプロジェクトのClassesフォルダに変更します。
名前を「MenuScene.cpp」に変更します。
「追加(A)」ボタンで追加します。
同様にして、「MenuScene.h」ファイルも追加します。
「HelloWorldScene.h」の内容を「MenuScene.h」にコピーします。
「HELLOWORLD_SCENE」を「MENU_SCENE」にすべて置換します。
クラス名を「MenuScene」にします。
CREATE_FUNC()マクロの引数も「MenuScene」に変更します。
「HelloWorldScene.cpp」の内容を「MenuScene.cpp」にコピーします。
「HelloWorld」を「MenuScene」にすべて置換します。
ヘッダファイルの指定を「MenuScene.h」に修正します。
「MenuScene.png」を「HelloWorld.png」に戻します。
この状態で実行して、「Hello World」画面が表示されるのを確認します。
「helloBG.png」、「start_n.png」、「start_s.png」をResourcesフォルダに追加します。
「MenuScene.cpp」と「MenuScene.h」を書き換えます。

Resdirectory

#include "MenuScene.h" USING_NS_CC; Scene* MenuScene::createScene() { // 'scene' は autorelease オブジェクト auto scene = Scene::create(); // 'layer' は autorelease オブジェクト auto layer = MenuScene::create(); // レイヤーをシーンの子として追加する。 scene->addChild(layer); // シーンを返す。 return scene; } // "init" では、インスタスの初期化を行う。 bool MenuScene::init() { ////////////////////////////// // 1. 最初に親クラスの初期化を行う。 if (!Layer::init()) { return false; } // 2. 画面サイズを取得する。 Size visibleSize = Director::getInstance()->getVisibleSize(); Vec2 origin = Director::getInstance()->getVisibleOrigin(); // 3. 中心を計算する。 auto centerpos = visibleSize / 2; // 4. 背景画像を作成し、位置と中心を設定する。 auto spritebg = Sprite::create("helloBG.png"); spritebg->setPosition(centerpos); addChild(spritebg); // 5. メニューのフォントのサイズを設定する。 MenuItemFont::setFontSize(60); // 6. メニューを作成し、onPlayイベントコールバック関数を設定する。 auto menuItemPlay = MenuItemImage::create( "start_n.png", "start_s.png", CC_CALLBACK_1(MenuScene::onPlay, this)); auto menu = Menu::create(menuItemPlay, NULL); addChild(menu); return true; } // メニュー項目が押された場合のコールバック関数。 void MenuScene::onPlay(Ref* pSender) { log("==onPlay clicked"); }

#include "MenuScene.h"

USING_NS_CC;

Scene* MenuScene::createScene()

{

// 'scene' は autorelease オブジェクト

auto scene = Scene::create();

// 'layer' は autorelease オブジェクト

auto layer = MenuScene::create();

// レイヤーをシーンの子として追加する。

scene->addChild(layer);

// シーンを返す。

return scene;

}

// "init" では、インスタスの初期化を行う。

bool MenuScene::init()

{

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

// 1. 最初に親クラスの初期化を行う。

if (!Layer::init())

{

return false;

}

// 2. 画面サイズを取得する。

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

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

// 3. 中心を計算する。

auto centerpos = visibleSize / 2;

// 4. 背景画像を作成し、位置と中心を設定する。

auto spritebg = Sprite::create("helloBG.png");

spritebg->setPosition(centerpos);

addChild(spritebg);

// 5. メニューのフォントのサイズを設定する。

MenuItemFont::setFontSize(60);

// 6. メニューを作成し、onPlayイベントコールバック関数を設定する。

auto menuItemPlay = MenuItemImage::create(

"start_n.png",

"start_s.png",

CC_CALLBACK_1(MenuScene::onPlay, this));

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

addChild(menu);

return true;

}

// メニュー項目が押された場合のコールバック関数。

void MenuScene::onPlay(Ref* pSender)

{

log("==onPlay clicked");

}

#ifndef __MENU_SCENE_H__ #define __MENU_SCENE_H__ #include "cocos2d.h" class MenuScene : public cocos2d::Layer { public: // cppにはidがないので、クラスのインスタンスのポインタを返すことを推奨する。 static cocos2d::Scene* createScene(); // init()関数は、cocos2d-iphoneでは、idを返すが、cocos2d-xはブール値を返す。 virtual bool init(); // static create()を自前でで実装する。 CREATE_FUNC(MenuScene); static void onPlay(Ref* pSender); }; #endif // __MENU_SCENE_H__

#ifndef __MENU_SCENE_H__

#define __MENU_SCENE_H__

#include "cocos2d.h"

class MenuScene : public cocos2d::Layer

{

public:

// cppにはidがないので、クラスのインスタンスのポインタを返すことを推奨する。

static cocos2d::Scene* createScene();

// init()関数は、cocos2d-iphoneでは、idを返すが、cocos2d-xはブール値を返す。

virtual bool init();

// static create()を自前でで実装する。

CREATE_FUNC(MenuScene);

static void onPlay(Ref* pSender);

};

#endif // __MENU_SCENE_H__