解说cocos2d-x初学者教程（1）

本篇所用的Cocos2d-x版本为：Cocos2d-x 3.2

当我们完成Cocos2d-x相关的配置部署后，通常会创建第一个测试项目。此时，我们首先看到的往往是“HelloWorld”。我在学习时也是如此，那么接下来，我们就来探究一下“HelloWorld”项目给我们展示了什么。

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer {
public:
// 静态创建一个Scene类
static cocos2d::Scene* createScene();

// 重载基类Layer的init函数
virtual bool init();

// 按钮关闭回调函数
void menuCloseCallback(cocos2d::Ref* pSender);

// 手动实施，静态创建HelloWorld方法
CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"

using namespace cocos2d;

Scene* HelloWorld::createScene() {
// scene 场景 是一个自动释放对象
auto scene = Scene::create();

// layer 图层 是一个自动释放对象
auto layer = HelloWorld::create();

// scene场景添加一个layer图层
// scene是layer的父级，layer是scene的子级
scene->addChild(layer);

// 返回场景
return scene;
}

// on “init” you need to initialize your instance
bool HelloWorld::init() {
// 1. 基类Layer初始化
if (!Layer::init()) {
// 初始化失败
return false;
}

// 通过单例导演类获取OpenGL视图的可见大小
Size visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();

// 创建一个图像菜单按钮
// 1. Normal状态，图片路径 2. Selected状态 图片路径 3. 按钮回调事件
auto closeItem = MenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this)
);

// 设置坐标
closeItem->setPosition(Vec2(
origin.x + visibleSize.width - closeItem->getContentSize().width / 2,
origin.y + closeItem->getContentSize().height / 2
));

// 创建一个菜单，将图像菜单按钮加入到Menu
auto menu = Menu::create(closeItem, nullptr);
menu->setPosition(Vec2::ZERO);

// 本类指针添加menu为子级，显示层级为1
this->addChild(menu, 1);

// 创建一个文本框
// 1. 文本字符串 2. 文本字体 3. 字体大小
auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);

// 定位文本框到屏幕中心
label->setPosition(Vec2(
origin.x + visibleSize.width / 2,
origin.y + visibleSize.height - label->getContentSize().height
));

// 添加文本框到当前图层
this->addChild(label, 1);

// 创建一个精灵
auto sprite = Sprite::create("HelloWorld.png");

// 定位精灵到屏幕中心
sprite->setPosition(Vec2(
visibleSize.width / 2 + origin.x,
visibleSize.height / 2 + origin.y
));

// 添加精灵到当前图层
this->addChild(sprite, 0);

return true;
}

void HelloWorld::menuCloseCallback(Ref* pSender) {
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.", "Alert");
return;
#endif

Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
exit(0);
#endif
}

总体而言，通过“HelloWorld”项目，我们接触到了7个重要的类：Scene、Layer、Menu、Sprite、LabelTTF、MenuItemImage、Ref。接下来，我将详细介绍在我理解中这些类的作用。

它们之间的关系

Scene

我们可以将Scene类比为地球，而Layer则像是地球上可区分的大陆、海洋或国家。Menu、Sprite、LabelTTF、MenuItemImage、Ref等就如同地球上的生物或建筑。若把Scene看作宇宙，那么Layer就是一颗颗星球，而其他类则是星球的组成部分。

从技术角度来看，简单地说，Scene是一个场景；深入来讲，Scene是渲染树（后续会详细介绍）。在Cocos2d项目中，只能有一个主场景。即便有多个场景，也只能在当前场景上进行操作，若要切换场景，必须执行相应的切换操作（NotificationNode后续再讨论）。这意味着游戏只能有一个场景在导演类中运行。这也导致我在初学阶段习惯将Scene作为主管理器，通过手动切换不同的Layer来实现所需的界面效果。官方提供的示例通常执行的是切换场景操作，大家可以根据自己的理解和项目需求来灵活运用。

以“HelloWorld”项目为例，我们可以看到以下代码：

auto layer = HelloWorld::create();

这里的HelloWorld既是一个场景，也是一个图层。说它是场景，是因为HelloWorld类实现了静态单例创建场景的接口，可供Director导演类加载，具体代码可在AppDelegate.cpp文件中查看：

bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if (!glview) {
glview = GLViewImpl::create("My Game");
director->setOpenGLView(glview);
}

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

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

// run
director->runWithScene(scene);

return true;
}

说它是图层，是因为HelloWorld本身继承自Layer类：

class HelloWorld : public cocos2d::Layer {
// ...
};

在createScene方法中，我们将HelloWorld图层添加到了场景中：

auto layer = HelloWorld::create();
scene->addChild(layer);

由此我们可以思考，是否可以单独创建一个场景作为管理器，通过添加不同的Layer类来实现特定的功能呢？这也是我养成将Scene作为管理器习惯的原因。

Layer

Layer就像是地球，如果Scene是太阳系，那么Layer就是地球。我们就如同生活在地球上的Sprite精灵等。Layer是承载Menu、Sprite、LabelTTF等元素的基础，正因为它承载了众多元素，所以才具有重要的价值。

Sprite等

Sprite是Cocos2d-x提供的最基础元素之一，它类似于生活在地球上的人类、动画、植物、建筑等。在学习Cocos2d-x时，建议同学们从最基础的元素开始了解，例如Sprite有多种创建方式，每种方式的效果和用途都有所不同。通过深入了解这些基础元素，逐步掌握Menu、Layer、Scene等类的使用，当你对它们非常熟悉时，就可以利用它们构建出精彩的游戏世界。

第一篇教程就介绍到这里，我们下期再见！