01 cocos2d-x 4.0+VS2017 开发环境搭建 及 基本结构设计

Day1

今日目标：

1.卡牌系统的开发	阳光统计，每张卡牌的描述，作为对象显示在游戏左上角。
2.定义游戏对象	植物类，豌豆射手，向日葵植物的实现；投射物类，豌豆的实现。互动元素类：阳光。豌豆射手可以定时发射豌豆作为投射物。向日葵可以产出阳光。
3.今日所需素材的搜集	豌豆静态图片，豌豆射手静态图片，向日葵静态图片，阳光静态图片。卡牌面板所需图片。

 

上午和下午的上课期间将今天的任务大致规划了一下定义好今日的目标，晚上放学开始按计划施工。

1配置环境

下载最新版cocos2dx4.0。事先已安装好vs2017。
使用https://blog.csdn.net/sunnyboychina/article/details/104711649的教程来编译cocos。
中途出现命令行运行cocos无响应。经调试发现是命令行输入python会打开 windows应用商店，用https://blog.csdn.net/u013421931/article/details/99736992 的教程解决了这个问题。

按照教程用cocos new HelloWorld -l cpp -d E:\cocos\Projects 创建项目。
因为cocos2dx 4.0比较特别，项目需要再编译一下。使用
按照教程，建立一个build文件夹，再进入这个文件夹使用 cocos run --proj-dir .. -p win32 编译。

出现问题：cmake不存在。查阅资料https://www.jianshu.com/p/921a11a93e95

将vs2017中佩戴的cmake的路径加入path环境变量，以后命令行就可以找到该命令

根据自己电脑的vs2017路径找到对应cmake路径，将其添加进path环境变量中。

等待编译，编译成功，编译过程可能很慢，如没明显报错请静静等待即可。

发现build文件夹有点多余（好像没用到）就删除了，以后编译的项目都在win32-build里。

项目比想象中的大(旧版本cocos都可以用预编译的库，这回用的是源代码)

https://blog.csdn.net/sunnyboychina/article/details/104740930 讲了如何查看自带的例子。可以用于抄官方给出现成功能的代码。（大家开发时都会查询各种博客，我抄下来也没意义，所以直接放链接大家自己去看）按照此方法将test例子编译好，注意咱们都是windows系统用 cocos run --proj-dir .. -p win32 命令编译。
回到我们的项目。我们只要打开

就可以用vs2017 编写代码了。先不改项目名了，搞过多项目之外的事情容易让项目胎死腹中。所以赶紧步入正题，抓紧写一个可以运行的demo获得正反馈。

这就是项目被vs2017打开后的样子。

设置为启动项目后，

以后就可以开始执行不调试来运行项目了，

出现此界面表示一切顺利

有运行结果，说明cocos环境搭建成功。下一步开始设计类和找资源。

2寻找资源

先把资源找好，不然一会写代码写的爽快时没资源就很烦。

要寻找的资源：豌豆静态图片，豌豆射手静态图片，向日葵静态图片，阳光静态图片。卡牌面板所需图片。

爱给网上 找到了gif图片的资源，

 

 

但因为cocos无法直接使用gif图片作为精灵，考虑两种方案，一种是手动将gif转化为几个png，然后使用。一种是导入gif库。

第二种有挑战性，所以先用第一种对付来，毕竟第一天任务不在于研究gif，在于出个demo。

https://convertio.co/zh/gif-png/ gif在线转换png，将所需要的太阳花，豌豆射手，豌豆，阳光以及卡牌转化为png序列

经过各种搜集，拼，修，转换 裁剪，终于搞到了今天需要的素材

 

最终敲定资源，全是静态图片

 

名字也先不改了，等到以后再统一格式，以后要考虑把图片用合图技术放到一张大图上，这样有利于显卡绘制游戏和读取资源。

3面向对象设计

最好设计对象使用类图来设计，但今天由于配置环境耽误太多时间，就不费事设计，还是以基本的demo为主。

卡牌系统	class cardBar:Menu; 卡牌栏，也会记录阳光的数量。根据阳光数量会显示数字。 该对象表现的行为有： addCard(card*); 添加一个卡牌 addSun(Sun*); 获得一份阳光，每份阳光数值不固定。 userCard(card*); 使用一张卡牌，会消耗对应卡牌数值的阳光。 int getSunValue();//获得当前阳光的数值 class card:ImageMenuItem; 卡牌类，一个卡牌对应一个植物。有内置的冷却时间。 float getCD();获得冷却时间 float RemainingCD();//获得还剩多久才能卡牌才能冷却完毕。 bool isReady();//判断是否准备就绪 plant* click(); 如果冷却好了则获得一个植物对象。否则获得空指针。 void place();//当前click的植物被放置。开始冷却计时。 void undoPlace();//撤销放置植物。不开始冷却计时。
植物系统	class plant:Sprite; 植物对象。具有状态机(初始，放置，死亡) 初始是透明的，当放置成功，对应的card开始冷却。 card* getCard();//获得对应的card对象。 place(Vec2*);//将植物放置在对应的点，以后需要根据地图计算网格。此时应调用card的place() undoPlace();//终止放置，比如右键取消，此时应调用card的undoPlace() class sunFlower:plant; place() override;之后会开启内部的调度器.每5s产生一个阳光。 class peaShooter:plant; place() override;//开启一个调度器，每2s产生一个豌豆。
投射物系统	class projectile:Sprite; 投射物类，表示被投射的物体。会作用于其他植物或僵尸(计算碰撞)。 class pea:projectile; 豌豆，具有豌豆的图片。
交互元素	class interactEle:Sprite; 用于交互的元素，鼠标可点击到产生效果。交互元素包括阳光，金币，奖励物品等。 class Sun:interactEle; int getSize();//获得阳光的数值，根据该数值不同，阳光的体型也会有区别 void setSize(bool changeShape) //修改阳光的数值，可选根据数值设置缩放比例。

先设计大概，应该可以勉强运行，设计到现在已经太晚了(1:08)，明天周六起来把代码实现出来。