Cocos2d-x v3.6制作射箭游戏(二)
2015-09-05 21:27
169 查看
上章我们创建并加载了游戏地图,接下来的两章我们将实现如下的效果。
![](http://api.cocoachina.com/uploads/20150625/201506251004187466.gif)
在开始之前,先给大家道个歉,因为前几周忙,没有时间写教程,所以迟迟都没更新,让有些童鞋久等了,见谅哦!!
本章我们的主要任务是创建射箭的弓箭手(也就是游戏猪脚),并且让这个猪脚随着触摸点的改变不断的旋转手中的弓箭。
分析:
对于这个射箭的角色而言,它能不停的射出弓箭。当我们按住屏幕上某点时,会从该角色拿弓箭的手的位置“画”一条标注箭支运动轨迹的红线(看似抛物 线);当在屏幕上滑动手指或鼠标时,这条红线会随着触摸点的位置不停的变换轨迹;当松开屏幕上的手指或鼠标时,会射出一支弓箭,这支弓箭会按最终的红线路 径移动。另外,玩家手中的弓箭会随着屏幕上的手指或鼠标旋转。
以上的各方法都是我们这两章需要实现的,其他更多的方法我们将在后面需要的时候再扩充。
其中
ccQuadBezierConfig是我们新定义的一个结构体,后面我们会详细的讲解。
下面我们就从上到下依次来看看以上的各方法。
下面我们接着来看看 createPlayer 方法,该方法将初始化我们的 Player 角色,代码如下所示:
createPlayer 方法中我们将创建如下所示的一个游戏角色。
![](http://api.cocoachina.com/uploads/20150625/201506251005113376.jpg)
因为没有找到合适的游戏资源(原游戏中得到的资源都是零件,要使用需要把它们一帧一帧重组),所以我们的游戏一切从简,不整那些复杂的。
这里我们只把角色简单分成了两个部分,第一部分当然是玩家的身体playerbody,第二部分是随着触摸点/鼠标旋转的手和弓箭playerarrow。(PS:当然因为资源限制这个原因,可能会稍稍降低咱游戏的档次,应该不能怪我啰!O(∩_∩)O~)
设置playerbody位置时,你可能已经发现,我们并没有把角色身体设置在传入的playerPos处,而是对它稍微做了一定的调整。这是因为
我们传入的位置它是紧贴本格瓦片底部的(我们制作tmx文件时,需要这样做。上章没说清楚,这章补起,要记住哦!)。如下图所示:
![](http://api.cocoachina.com/uploads/20150625/201506251006122519.jpg)
Y值坐标也不可太接近本格瓦片底部,也就是不要设为9.990,9.998这类太接近10的,因为 tmx
文件中存放的坐标值是整数,如果设为9.990,9.998,那么存放的值会是9.990 X 32 = 319.68 = 320,同理 9.998 X
32 也是 320。320 对于瓦片大小是32 X 32的地图来说是个特殊的数字,因为 320 /32 =
10。这样在程序中就会误以为9.990,9.998之类的点是坐标上的第10个点。
而且上章我们也说过,由于分辨率适配的原因,对象组中对象的位置与实际的位置是有一定的偏差的,所以我们在设置角色身体位置时,需要修正这些偏差。
以上代码中设置位置的原理图如下:
![](http://api.cocoachina.com/uploads/20150625/201506251008052690.jpg)
其中,对象组在 X 轴上的偏移值我们把它保存在了 GameManager 中,而 GameManager 是个单例类,后面章节我们会详细的讲解。当然如果你现在就想运行代码,那就先把
创建好角色后,接下来我们需要创建角色的血量条,血量条可通过 Cocos2d-x 中封装好的进度条类 ProgressTimer 来创建。其代码段如下:
rotateArrow方法的参数为触摸点的位置。
获取角色弓箭在游戏场景中位置;
计算弓箭的旋转角度。
这里利用三角正切函数来计算,原理如下图所示:
![](http://api.cocoachina.com/uploads/20150625/201506251009138662.png)
vector(offX,offY) 是触摸点到弓箭之间的向量,通过 getAngle 方法,我们可以得到 vector 向量与X轴之间的弧度。
再者,我们需要把弧度 rotateRadians 转化为角度,
控制旋转角度的范围,即只让它在角色右半边内旋转。
计算弓箭旋转时间。
speed表示炮塔旋转的速度,0.5 / M_PI其实就是 1 / 2PI,它表示1秒钟旋转1个圆。
rotateDuration表示旋转特定的角度需要的时间,计算它用弧度乘以速度。
让弓箭执行旋转动作。
在 Cocos2d-x 3.x 引擎中,实现触摸响应的流程基本是一致的。所以在 3.6 中,其过程依旧是:
重载触摸回调函数;
创建并绑定触摸事件;
实现触摸回调函数。
所以我们要测试弓箭是否跟随触摸点旋转,第一步请先在 GameScene 中重写如下的触摸回调函数,并声明变量:
接着,我们需要在 GameScene 的 init 初始化函数中创建并绑定触摸事件,并先随便创建一个 Player 对象,用于测试。如下:
Player 的位置是固定的,我们当然不能随便设,这里只是为了测试。后面的章节中我们会创建一个类来专门管理从 TiledMap 中得到的对象,包括Player、敌人、道具,砖块等。
以上 plist 和 pvr.ccz文件是我们的打包资源,它们是用 Texturepacker 编辑器打包而来。更多详细内容请点此查看。
绑定好触摸事件后,最后我们需要实现它们,代码如下:
在 onTouchBegan 和 onTouchMoved 函数中,处理方法是一样的。即当当前触摸点与之前的触摸点不一致时,就旋转 Player 的弓箭。
getLocation 方法将 touch 对象中保存的屏幕坐标转换成我们需要的 Cocos2d 坐标。
分不清屏幕坐标和Cocos2d 坐标的童鞋请参考Cocos2d-x3.0坐标系详解一文。
当触摸结束时,Player 对象需要射出弓箭,这个我们暂时不写。
运行游戏,此时你就可以看到想要的效果了。关于本章资源,请点此下载。
![](http://api.cocoachina.com/uploads/20150625/201506251004187466.gif)
在开始之前,先给大家道个歉,因为前几周忙,没有时间写教程,所以迟迟都没更新,让有些童鞋久等了,见谅哦!!
本章我们的主要任务是创建射箭的弓箭手(也就是游戏猪脚),并且让这个猪脚随着触摸点的改变不断的旋转手中的弓箭。
分析:
对于这个射箭的角色而言,它能不停的射出弓箭。当我们按住屏幕上某点时,会从该角色拿弓箭的手的位置“画”一条标注箭支运动轨迹的红线(看似抛物 线);当在屏幕上滑动手指或鼠标时,这条红线会随着触摸点的位置不停的变换轨迹;当松开屏幕上的手指或鼠标时,会射出一支弓箭,这支弓箭会按最终的红线路 径移动。另外,玩家手中的弓箭会随着屏幕上的手指或鼠标旋转。
Player 类
下面我们一起来创建这个 Player 猪脚类,其初步定义如下:其中
CC_SYNTHESIZE宏的作用是定义一个保护型的变量,并声明一个getfunName函数和setfunName函数,你可以用getfunName函数得到变量的值,用setfunName函数设置变量得值。如:
CC_SYNTHESIZE(int, playerHp, PlayerHp);定义了一个整型的 playerHp 变量,同时还声明了 getPlayerHp() 和 setPlayerHp() 两个方法。
ccQuadBezierConfig是我们新定义的一个结构体,后面我们会详细的讲解。
下面我们就从上到下依次来看看以上的各方法。
创建角色
首先是 Player 的初始化(init)和创建(create),这里我们通过给定 Player 的位置来创建该角色,而这个传入的坐标位置应该是我们从 TiledMap 的对象层中读取到的位置(上章有讲)。具体代码如下:![](http://api.cocoachina.com/uploads/20150625/201506251005113376.jpg)
因为没有找到合适的游戏资源(原游戏中得到的资源都是零件,要使用需要把它们一帧一帧重组),所以我们的游戏一切从简,不整那些复杂的。
这里我们只把角色简单分成了两个部分,第一部分当然是玩家的身体playerbody,第二部分是随着触摸点/鼠标旋转的手和弓箭playerarrow。(PS:当然因为资源限制这个原因,可能会稍稍降低咱游戏的档次,应该不能怪我啰!O(∩_∩)O~)
设置playerbody位置时,你可能已经发现,我们并没有把角色身体设置在传入的playerPos处,而是对它稍微做了一定的调整。这是因为
我们传入的位置它是紧贴本格瓦片底部的(我们制作tmx文件时,需要这样做。上章没说清楚,这章补起,要记住哦!)。如下图所示:
![](http://api.cocoachina.com/uploads/20150625/201506251006122519.jpg)
Y值坐标也不可太接近本格瓦片底部,也就是不要设为9.990,9.998这类太接近10的,因为 tmx
文件中存放的坐标值是整数,如果设为9.990,9.998,那么存放的值会是9.990 X 32 = 319.68 = 320,同理 9.998 X
32 也是 320。320 对于瓦片大小是32 X 32的地图来说是个特殊的数字,因为 320 /32 =
10。这样在程序中就会误以为9.990,9.998之类的点是坐标上的第10个点。
而且上章我们也说过,由于分辨率适配的原因,对象组中对象的位置与实际的位置是有一定的偏差的,所以我们在设置角色身体位置时,需要修正这些偏差。
以上代码中设置位置的原理图如下:
![](http://api.cocoachina.com/uploads/20150625/201506251008052690.jpg)
其中,对象组在 X 轴上的偏移值我们把它保存在了 GameManager 中,而 GameManager 是个单例类,后面章节我们会详细的讲解。当然如果你现在就想运行代码,那就先把
GameManager::getInstance()->getObjectPosOffX()部分去掉吧。
创建好角色后,接下来我们需要创建角色的血量条,血量条可通过 Cocos2d-x 中封装好的进度条类 ProgressTimer 来创建。其代码段如下:
旋转角色弓箭
接下来我们来让 Player 的弓箭部分跟随着触摸点/鼠标旋转。所以我们定义了如下的函数:获取角色弓箭在游戏场景中位置;
计算弓箭的旋转角度。
这里利用三角正切函数来计算,原理如下图所示:
![](http://api.cocoachina.com/uploads/20150625/201506251009138662.png)
vector(offX,offY) 是触摸点到弓箭之间的向量,通过 getAngle 方法,我们可以得到 vector 向量与X轴之间的弧度。
再者,我们需要把弧度 rotateRadians 转化为角度,
CC_RADIANS_TO_DEGREES就是能把弧度转化为角度的宏。转化时乘 -1 是因为Cocos2d-x中规定顺时针方向为正,这与我们计算出的角度方向相反,所以转化的时候需要把角度a变为-a。
控制旋转角度的范围,即只让它在角色右半边内旋转。
计算弓箭旋转时间。
speed表示炮塔旋转的速度,0.5 / M_PI其实就是 1 / 2PI,它表示1秒钟旋转1个圆。
rotateDuration表示旋转特定的角度需要的时间,计算它用弧度乘以速度。
让弓箭执行旋转动作。
触摸响应
好了,现在 Player 就初步定义好了。接下来,我们回到游戏场景把Player加入进去,并来测试下弓箭是否跟随触摸点旋转。在 Cocos2d-x 3.x 引擎中,实现触摸响应的流程基本是一致的。所以在 3.6 中,其过程依旧是:
重载触摸回调函数;
创建并绑定触摸事件;
实现触摸回调函数。
所以我们要测试弓箭是否跟随触摸点旋转,第一步请先在 GameScene 中重写如下的触摸回调函数,并声明变量:
以上 plist 和 pvr.ccz文件是我们的打包资源,它们是用 Texturepacker 编辑器打包而来。更多详细内容请点此查看。
绑定好触摸事件后,最后我们需要实现它们,代码如下:
getLocation 方法将 touch 对象中保存的屏幕坐标转换成我们需要的 Cocos2d 坐标。
分不清屏幕坐标和Cocos2d 坐标的童鞋请参考Cocos2d-x3.0坐标系详解一文。
当触摸结束时,Player 对象需要射出弓箭,这个我们暂时不写。
运行游戏,此时你就可以看到想要的效果了。关于本章资源,请点此下载。
相关文章推荐
- Cocos2d-x v3.6制作射箭游戏(一)
- Cocos2d-x tinyxml2用于xml的解析,自动生成xml文件和解析xml文件
- Cocos2d-JS 创建node节点示例
- cocos2dx游戏优化
- cocos2dv2项目转换为ARC支持的项目
- cocos2dv2项目转换为ARC支持的项目
- cocos2dv2项目转换为ARC支持的项目
- Cocos2dx_可擦除Layer
- Cocos2dx_有限状态机_2
- Cocos2dx_有限状态机_1
- Ubuntu14.04+eclipse下cocos2d-x3.6正式版环境的搭建
- Ubuntu下搭建Cocos2D-X 3.6开发环境
- cocos2d-x经验分享
- 基于cocos2dx 2.x做的一些shader效果Demo
- cocos植物大战僵尸(二)主菜单场景:单例类
- quick-cocos2d-x基于源码加密打包功能的更新
- quick-cocos2d-x数据存储之GameState
- Cocos2d-x学习笔记之世界坐标系、本地坐标系、opengl坐标系、屏幕坐标系
- cocos2d中的屏幕坐标系和OPenGL坐标系转换
- cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境