文章编写日期：2019-06-08 18:15:15
最近有一个需求是协助游戏项目组开发一个上课中用到的小游戏，游戏内容大概就是给主角换衣服，通过2个帽子、2身衣服排列组合成4套衣服给主角穿上，特意记录一下在游戏开发中遇到的问题和大题思路
游戏开发流程
- 需求方提出游戏的大概思路
- 游戏策划根据需求设计大概的游戏布局，以及一些基本的玩法
- RD和美术同步开始自己的工作
- 美术和RD工作都完成以后，策划会在creator上把美术资源和代码绑定上
- 需求方check正式完成的游戏
开发之前需要了解的
- cocos creator的版本对应的就是cocos2d.js的版本
- cocos creator、cocos2d-x 引擎、OpenGL都是基于笛卡尔坐标系。在前端中没有经过特殊设置的时候，所有的left、top都是基于左上角的原点来定位的。但是在笛卡尔坐标系中都是基于左下角
- 所有子节点的偏移都是基于父节点，就类似于父节点设置来postion:relative、子节点设置postion: absolute一样的效果
- 骨骼动画一般都是基于egret DragonBones或者spine来设计，然后导出为json数据
- animation组件和骨骼动画使用场景不一样，animation一般用于一些比较简单比如放大缩小等
搭建简易游戏场景
根据策划内容，把大致的node节点和场景布局都创建出来
canvas: 视图最外层节点 pigDress: 当前场景最外层节点 （可能有多个场景） bg：当前场景背景图
FinalShow：游戏结束动画 drawline：画线脚本
场景布局
1、2、3、4对应4件衣服
绑定拖拽事件
绑定拖拽事件有2种方式
1: 在代码中给node节点手动绑定事件
node.on(cc.Node.EventType.TOUCH_START, self.onTouchStart);
// touch move
node.on(cc.Node.EventType.TOUCH_MOVE, self.onTouchMove);
// touch end
node.on(cc.Node.EventType.TOUCH_END, self.onTouchEnd);
2: 通过EventHandler方式
这种方式的思路大概就是当我们拖拽1这个图片的时候，首先触发一个DragEventTrigger内的touch事件，这个touch事件再通过emit的形式触发对应封装好业务逻辑的函数
碰撞
我们绑定好事件以后，下一步就是再拖拽1、2、3、4的过程中移动对应的衣服，在鼠标抬起的时候进行碰撞检测
1: touchmove中把手指的触点转换为本地坐标
const localPos = event.target.parent.convertTouchToNodeSpace(event);
event.target.setPosition(localPos);
2: touchend的时候需要把当前拖动衣服的本地坐标转换为世界坐标，主角的坐标也转换为世界坐标，然后才能进行碰撞检测，除非他们父节点一样才能使用本地坐标进行碰撞检测。 碰撞检测我们是通过intersects api来完成的，当然也可以通过碰撞检测组件来完成
3: 碰撞检测失败是需要把当前位置回归原位的
event.target.setPosition(cc.v2(0, 0));
播放骨骼动画
当组合成功一套以后会播放spine骨骼动画，一个spine骨骼动画上会有好多组动画，根据不同的结果播放不同的动画name即可
// run就是spine骨骼动画list中的某一个动画名字
this.spine = this.getComponent('sp.Skeleton');
this.spine.setAnimation(0, 'run', true);
总结
- 由于第一次做游戏cocos creater用的不太熟练，并且就给了3天的开发时间，比较紧张，代码层面还有很大的优化空间
- 此文只是大概介绍了一下这个游戏开发大题思路，还有很多细节涉及到业务不在此文一一展示
