cocos2d-x初学者教程（一）

从最初接触Cocos2d-x 1.04到现在的Cocos2d-x 3.3Final，我都未曾深入细致地分析过其核心底层。因此，对于初学者，我建议先不要触碰这部分内容，以免陷入困惑，最好由简入深逐步学习。接下来，我将简要介绍我熟悉的Cocos2d-x HelloWorld示例。本篇教程使用的Cocos2d-x版本为3.2。

一、创建第一个测试项目

当完成Cocos2d-x的相关配置后，通常会创建第一个测试项目。初次运行项目时，我们看到的往往是“HelloWorld”界面。下面我们来分析HelloWorld示例代码。

1. 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__

2. HelloWorldScene.cpp文件

#include "HelloWorldScene.h"

USING_NS_CC;

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, NULL);
menu->setPosition(Vec2::ZERO);

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

//////////////////////////////
// 3. 创建一个文本框
// 1. 文本字符串 2. 文本字体， 3. 字体大小
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);

// 创建一个精灵
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);

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。下面我们来深入了解它们。

1. 类之间的关系

我们可以通过形象的比喻来理解它们之间的关系。如果把Scene比作地球，那么Layer就像是地球上的大陆、海洋或国家；如果把Scene看作宇宙，那么Layer就是一颗颗星球，而Menu、Sprite、LabelTTF、MenuItemImage、Ref等则是星球的组成部分。

2. Scene类

• 概念：简单来说，Scene是一个场景；从深入的角度讲，Scene是渲染树（后续会详细介绍）。在Cocos2d项目中，同一时刻只能有一个主场景在运行，若要切换场景，则必须进行场景切换操作。
• 使用方式：官方提供的demo中，我们可以创建一个Scene并添加不同的Layer，也可以根据不同的Scene创建不同的Layer。以HelloWorld示例为例，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`，只是因为实现了静态单例创建场景的方法，才使得它可以作为场景使用。在`createScene`方法中，我们可以看到加载了`HelloWorld`图层：

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

### 3. Layer类
Layer就像是承载Menu、Sprite、LabelTTF等元素的“土壤”。如果把Scene比作太阳系，那么Layer就是地球，而Sprite等元素则是生活在地球上的生物或建筑。

### 4. Sprite类
Sprite是Cocos2d-x提供的基础元素之一，它可以代表游戏中的人类、动画、植物、建筑等。在学习Cocos2d-x时，建议先从最基础的元素开始了解，例如Sprite的创建方式及其效果，然后逐步深入学习Menu、Layer、Scene等。

## 三、总结
本篇教程通过HelloWorld示例，介绍了Cocos2d-x中Scene、Layer、Sprite等关键类的基本概念和使用方法。希望初学者能够从这些基础内容入手，逐步掌握Cocos2d-x开发。下一期我们将继续深入探讨相关内容。