教你用Cocos2d-x 3.4制作一个简单的游戏

本教程将带你从头到尾了解如何使用Cocos2d-x 3.4为智能手机制作一个2D游戏。

安装Cocos2d-x

Cocos2d-x 3.x配备了新的安装程序，入门变得前所未有的简单！你只需下载最新的Cocos2d-x安装程序（可以是3.4版本或其他版本），然后在终端输入python setup.py，将cocos添加到环境变量。

脚本运行后，你需要重启终端或设备，以使配置生效。

Hello World

首先，让我们创建一个简单的Hello World项目。

打开终端，切换到你打算放置项目的目录，然后输入cocos new，你将获得如下提示。根据提示信息，输入cocos new -p com.wangshaui.helloworld -l cpp HelloWorld，若获得相应信息，则表示项目创建成功。

运行已创建完成的项目，你将看到相应效果。点击左下角的按钮，即可退出游戏。在本教程中，你将和Cocos2d-x一起见证奇迹。

忍者登场！

在忍者登场之前，你需要做一些美术相关的工作。

步骤一：准备资源

下载该项目的资源包，解压文件，并将资源文件放在Resource文件夹中。

步骤二：修改代码

打开HelloWorldScene.cpp。这里的代码用于显示之前场景，也是建立游戏的理想位置。在修改代码之前，先仔细查看以下示例代码：

bool HelloWorld::init()
{
// 1. super init first
if ( !Layer::init() )
{
return false;
}

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

// 2. add a menu item with "X" image, which is clicked to quit the program
//    you may modify it.
// add a "close" icon to exit the progress. it's an autorelease object
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));

// create menu, it's an autorelease object
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Vec2::ZERO);
this->addChild(menu, 1);

// 3. add your codes below...
// add a label shows "Hello World"
// create and initialize a label
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);

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

return true;
}

如果你要添加一个忍者到场景中，可参考以下提示：

• 在不久前添加进项目的ResourcePack中找到忍者的图片。
• 你仅仅需要修改一行代码！

解决方法

1. 在HelloWorldScene.h中加入一个私有变量

Sprite* _player;

2. 在HelloWorldScene.cpp中加入如下代码

_player = Sprite::create("player-hd.png");
_player->setPosition(visibleSize.width/8, visibleSize.height/2);
this->addChild(_player);

构建并运行项目，看看忍者在不打怪兽的时候会做些什么。然而，忍者一生都在训练战斗，所以接下来我们要添加一些怪兽去挑战忍者。

一个凶猛的怪兽出现了

接下来，我们要在场景中加入一些怪兽。对于有经验的忍者来说，静止的怪兽没有挑战，所以我们要让这些怪兽动起来。我们将创造一个怪兽，让它略微向右偏离屏幕，并为它们建立一个Action，使其从右边移动到左边。

在HelloWorldScene.cpp中加入以下代码：

void HelloWorld::addMonster(float dt)
{
// 1
Size visibleSize = Director::getInstance()->getVisibleSize();

Sprite* MonsterExample = Sprite::create("monster-hd.png");
MonsterExample->setPosition(
visibleSize.width + MonsterExample->getContentSize().width,
MonsterExample->getContentSize().height/2 + CCRANDOM_0_1()*(visibleSize.height - MonsterExample->getContentSize().height/2));

// 2
Monster.push_back(MonsterExample);
this->addChild(Monster.back());

// 3
MoveTo* Move = MoveTo::create(3, Vec2(-Monster.back()->getContentSize().width/2, Monster.back()->getPosition().y));
Monster.back()->runAction(Move);
}

代码解释

• 获取屏幕分辨率：通过Director::getInstance()->getVisibleSize()获取屏幕的可见大小。
• 存储怪兽：Monster是一个std::vector<Sprite*>类型的变量，用于存储怪兽。
• 控制怪兽移动：使用Cocos2D的MoveTo动作，让怪兽从起始点（略微偏离屏幕向右）移动到终点（略微偏离屏幕向左），使其迅速从屏幕右边移动到左边。MoveTo动作需要设置持续时间，表示怪兽穿越屏幕所需要的时间，持续时间越短，怪兽移动速度越快。

现在，你已经有方法添加一个怪兽到场景中。但一个怪兽对于有经验的忍者来说很难构成威胁，所以我们要创建一个怪物刷新器。

Cocos2d拥有一个调度程序，允许你每X.X秒回调一次，这样就能创建一个怪物刷新器，让它每X秒加入一个新的怪兽到场景中。

打开HelloWorldScene.cpp，在init方法中加入如下代码：

this->schedule(schedule_selector(HelloWorld::addMonster), 1);

这样会添加一个回调计时器，让之前添加的addMonster方法每1秒添加一个怪兽。

注意，当你创建addMonster方法时，会有一个名为dt的参数，它代表增量时间，即找出之前时间与当前时间的不同之处。调度器要求每个方法都拥有这样一个参数，但在本教程中不会用到它。

构建并运行项目，现在你能看见众多的怪兽飞过屏幕！

Hadouken

不幸的是，你的忍者还没有足够的等级去发射火球，所以你需要依靠专业的投射技能去消灭这些怪兽。握住手里剑，让我们添加一些投掷动作。

你将再次用到MoveTo，但这次不像之前的移动那样简单，你需要让手里剑从_player->getPosition移动到点击点。如果你想沿着点击的方向投掷手里剑穿越整个屏幕，需要运用一些基本的数学矢量知识（例如向量的加减），Cocos2D包含有好用的矢量处理功能，如ccpAdd和cppSub。

学会触摸

1. 在HelloWorldScene.h中添加如下代码

virtual bool onTouchBegan(Touch* pTouch, Event* pEvent);
virtual void onTouchMoved(Touch* pTouch, Event* pEvent);
virtual void onTouchEnded(Touch* pTouch, Event* pEvent);

并添加一个私有变量：

EventListenerTouchOneByOne* touch_listener;

这个变量用于监听单点触摸事件。

2. 在HelloWorldScene.cpp的init中添加相应代码（原文此处代码未完整给出，需补充完整才能实现触摸功能）

通过以上步骤，你可以逐步完成一个简单2D游戏的制作，让忍者与怪兽展开战斗。