怎样制作基于Cocos2d-x的SLG游戏－第1章

在前两年《QQ农场》比较流行的时候，想必大家都曾被它虐过千百遍吧。如今，虽然《QQ农场》的热潮已经告一段落，但随着手机游戏的日益发展，更多的农场手游开始兴起，比如同为腾讯旗下的《全民农场》，它便是以其更丰富的内容、更贴近现实的社交互动玩法，将QQ农场取而代之。所以竟然大家都这么热爱农场游戏，那我们接下来就来自己制作一款类似的SLG游戏吧。

SLG游戏既策略模拟类游戏，它可以分很多类型，像农场游戏这样的模拟经营游戏只是其中的一种。农场游戏可以让玩家扮演一个农场的经营者，玩家通过购买种子，耕种、浇水、施肥、除草、收获果实，最后出售给市场来实现整个经营过程，它让玩家在经营农场的同时也可以感受到“作物养成” 带来的乐趣。本款游戏我们将使用目前最新的Cocos2d-x 3.2引擎，同时结合Tiledmap以及Cocos Studio来制作。所以，在此之前请大家先下载好引擎，TiledMap编辑器和Cocos Studio编辑器。
创建项目

如果要说到环境搭建，那又该是一篇长篇大论了，所以详细步骤请参见http://cn.cocos2d-x.org/article/。
Cocos2d-x创建项目的方式一直都在不停的改动，所以这里我觉得很有必要给大家介绍下如何创建项目。
创建3.2的项目其实很简单，打开终端（Windows是cmd）进入到引擎文件夹目录，然后输入以下命令就可以创建。

1
cocos new SLG -p com.cocos2dx.rs -l cpp -d /Users/cocos2d-x/workspace/cocos2dx/cocos2d-x-3.2/projects

如下图：
!(http://cn.cocos2d-x.org/upload ... 31.png)
说明：

new：new后是项目名
-p ：-p后是包名
-l ：-l后是语言（cpp指c++）
-d ：-d后是项目生成路径

如果一切无误，那等待几分钟以后你就可以在给定的目录下找到新建的项目了。打开项目工程后，下面我们就可以开始游戏的制作了。
前期准备

打开工程后，运行程序，你会发现它不是一个空的项目，在Classes和Resource文件夹下Cocos2d-x已经给出了一些实质性的东西，当然这些不是一定都有用的，它们存在的目的是为了给我们展示一个典型的Cocos2d-x的例子。
除了AppDelegate.h 和 AppDelegate.cpp文件，这两个文件夹下其他的东西都是可被删除的（不过在删除之前，可以先看一下HelloWorld类，了解下它的类结构、类方法，以便对Cocos2d-x进行初步的学习，也方便初学者依葫芦画瓢再写一个类似的场景）。AppDelegate类是创建项目时自动生成的一个类，它控制着游戏的生命周期，是Cocos2d-x游戏的通用入口文件，类似于一般 Windows 工程中main函数所在的文件。
打开AppDelegate.cpp文件，在游戏加载期的最后一个applicationDidFinishLaunching()函数中我们可以设置第一个启动的游戏场景，如下：

1
2
auto scene = GameScene::createScene();
director->runWithScene(scene);




GameScene是我们新建的一个游戏场景，下面会讲解。
分辨率适配

在我的游戏中，首先第一件事还是做分辨率适配，这是个恒古不变的定律。现如今市场中各种屏幕尺寸和分辨率的移动设备层出不穷，为了更好地适应这些设备，游戏的分辨率适配是十分有必要的。
在农场游戏中，很最要的一点就是实现大地图背景的拖动、放大缩小等操作，所以可想而知，我们的地图不是全部都显示在屏幕内的，也就是说，我们不能像之前的方式那样把整个显示内容做适配，我们应该留有一定的边距供玩家拖动。如下图所示：
!(http://cn.cocos2d-x.org/upload ... 51.png)
同样是在applicationDidFinishLaunching函数中，我们添加如下一段代码对游戏做分辨率适配，以便它能更好的适应不同的运行环境。

1
2
3
4
5
glview->setDesignResolutionSize(480.0f, 320.0f, ResolutionPolicy::FIXED_HEIGHT);
std::vector searchPath;
searchPath.push_back("H_1920");
FileUtils::getInstance()->setSearchPaths(searchPath);
director->setContentScaleFactor(1440.0f / 320.0f);




分辨率适配的原理，建议大家阅读一下：http://cn.cocos2d-x.org/articl ... zh.md这篇文章，虽然它不是针对最新版Cocos2dx引擎，但它还是能很清楚的告诉你分辨率适配的原理和方法。
还有要说明的一点是，我们的游戏地图的高为1920，分辨率适配时则只设为了1440，意思就是说，我们本该全在屏幕内的内容留出了4分之一的高度在屏幕外。
编辑游戏地图

模拟经营游戏中，游戏地图多为拼接而成，这里我们用http://cn.cocos2d-x.org/articl ... zh.md编辑器（Tiled Map Editor）来制作游戏的地图，它可以把编辑后的地图文件保存为TMX格式的文件，能被Cocos2d-x很好的支持。http://cn.cocos2d-x.org/articl ... zh.md(Tile Map)不但生成简单，而且可以灵活的用于引擎中。关于http://cn.cocos2d-x.org/articl ... zh.md的介绍可参考http://cn.cocos2d-x.org/articl ... zh.md一文。接下来我们开始创建地图。
运行TiledMap编辑器，新建一个地图文件。填写如下对话框：
!(http://cn.cocos2d-x.org/upload ... 56.png)
在地图方向选项内，可以选择正常、45度(传说中的2.5D)和45度交错，这里我们选择45度。接下来需要设置地图大小，这里的数值是指有多少格tile元件，并不是像素，这里我们选择30×30的地图。
最后是确定tile元件的大小，根据美工提供的地面元件大小设置，这个教程里，我们使用128×64的大小。
在地图大小一栏中，你可以看到最终的地图大小为3840 * 1920。
点击确认之后，你可能已经发现了，这个游戏地图它是菱形的，如下图所示。
!(http://cn.cocos2d-x.org/upload ... 65.png)
这里你可能会想，为什么要菱形的啦，选择45度交错建一个接近矩形的不行吗？呵呵，其实这样也是可以的，只不过啦，Cocos2d-x引擎中默认是不支持45度交错的，如果需要在引擎中加载这种交错的地图必须自己修改引擎代码（看到这，是不是整个人都不好了），而且在修改过后还不能正确的得到地图的大小，需要自己编写计算大小的公式代码。鉴于这一点，我在想，难道《全名农场》、《请叫我海盗》等游戏地图的四个角都不能被点击操作都是因为这个原因吗？ 哈哈，就当是我想多了吧。其实菱形就菱形吧，其他的游戏也都这样，可以在菱形地图的下层贴一层背景来掩盖这一现象。
接下来，我们还是回到正题开始拼接地图吧。选择地图－》新图块，然后填写如下所示的对话框。
!(http://cn.cocos2d-x.org/upload ... 76.png)
选择浏览按钮，将准备好的图块文件载入编辑器。接着设置图块的宽度和高度（默认情况下是一个tile元件的大小，但），根据图块文件中图块的大小来设置。边距、间距什么的，可不做修改，0就好。
最后选中相应的图块，拖动到渲染区拼一个理想的地图。
!(http://cn.cocos2d-x.org/upload ... 14.png)
暂时我们就只简单的拼一个地图就可以了，后面再根据游戏需要，设置一些必要的对象和属性。
加载地图资源

新建一个GameScene场景，加载游戏地图。不过在此之前，请把编辑好的tmx和图块文件拷贝到Resource文件夹下。GameScene的结构和HelloWorld差不多，照着HelloWorld类依葫芦画瓢就可以建一个。你可以先看看它是如何实现的，再实现自己的类。这里就不多说了。
在Cocos2d-x中使用TMX，有以下流程供你参考：

首先用地图编辑器编辑你的地图，导出成TMX 格式。
将导出的TMX 文件和相关图片放在工程的Resoure文件夹下。
使用Cocos2d-x中TMXTileMap 类的create方法创建地图对象，TMX 文件的解析是引擎内部完成的，所以我们不需要担心。TMXTileMap 是Node 的子类，因此只要添加到场景中即可。
通过TMXTileMap，可以获得其他相关对象，比如单个瓦片（属Sprite类），比如对象组(ObjectGroup类)，比如层（TMXLayer类）等；你可以通过TMXLayer类修改，删除或者添加某个网格位置的瓦片，这样可以动态的修改地图了，你还可以进行其他的操作，相关的API 我们后面使用到了再做讲解。
在GameScene类的init函数中添加如下的代码创建游戏地图：

1
2
3
4
5
6
7
8
9
10
11
12
mapLayer = LayerColor::create(Color4B(78,127,41,255));
this->addChild(mapLayer,-1);

auto map = TMXTiledMap::create("mymap4.tmx");
mapLayer->setContentSize(map->getContentSize());
mapLayer->addChild(map, 10);

auto treeSprite = Sprite::create("1.png");
treeSprite->setAnchorPoint(Vec2(0, 0));
treeSprite->setPosition(Vec2(0, 0)),
treeSprite->setScale(2);
mapLayer->addChild(treeSprite, 11);

代码中新建了一个带颜色的背景层，背景层的尺寸等于加载的TMX地图大小。接着把地图和如下的一个遮盖层（其实就是为了防止菱形的地图看起来那么突兀而添加的一层）依次添加到层上。
!(http://cn.cocos2d-x.org/upload ... 66.png)
运行程序，你将看到如下图所示的游戏场景：
!(http://cn.cocos2d-x.org/upload ... 28.png)
本教程的美术资源不是很完善，大家就将就看吧，见谅！
下章我们将实现游戏背景的单指拖动，双指缩放的功能，以及利用Cocos Studio来制作一个支持多分辨率的UI系统。