制作手游中的方向轮盘

img

作为农药迷这个场景有没有让你热血沸腾,不过小编不打算讨论游戏的玩法,让我们把关注点放在左下角的方向控制轮盘上

img

这个是在手游领域中很常见的用于控制方向的轮盘,在主流的竞技手机游戏中都用到它作为角色控制的重要组件。现在小编教大家如何利用高中学习到的三角函数来制作这个轮盘。

我们都知道高中学习到的笛卡尔二维坐标系是垂直方向为y轴,水平方向为x轴的直角坐标系,其中y轴上方为正数下方为负数,x轴的右边为正数坐标为负数,交叉点为原点(0,0),如

img

在游戏开发中定位目标位置时也用到了二维直角坐标系,只不过会有点差别。如下图,区别在于y轴下方为正数,上方为负数,屏幕的左上角为原点。

img

讲完区别后,我们再来分析下我们需要制作的场景:

img

我们需要在屏幕左下角制作一个圆形区域的控制轮盘,在圆形区域内转动圆盘时,就会控制到屏幕中间小鸟的飞行方向。

如果只是这样看图的话,估计很多人会比较懵逼,不知道如何下手,这个时候就用到考试时候常用的手段,把需要分析的对象用线连起来:

img

这么看就很清晰了。我们在转盘上用手指滑动方向时,水平方向上手指与转盘中心连线夹角θ,其实就是作用到小鸟飞行方向的弧度。我们只需要求出θ角,然后利用三角函数就可以求出单位时间内需要作用到小鸟xy轴方向上的单位速度(x4,y4),用小鸟本身的位置坐标(x3,y3)加上(x4,y4)就可以达到控制小鸟飞行方向的目的。

不知道大家注意没有,上面的θ角并不是我们生活里经常使用的角度,它在三角函数求解时,用的是弧度。那为什么不用角度而是要用弧度?在有角度表示的情况下,为什么会出现弧度制?

解释弧度制时,不如我们先来讨论下,角度制是如何出现的。

在公元前约300年古巴比伦时期,古巴比伦人认为地球是宇宙的中心,我们的太阳是绕着地球转的。他们发现从春分日到秋分日,太阳划过半个圆的轨迹,刚好等于180个太阳大小的直径,而且他们当时使用的是60进制法,于是便把一个圆周划分成360份,也就是我们现在理解的360度。但对于现在我们使用十进制法来说,显然计算起来并不方便。

那么弧度制能解决什么问题呢?我们知道弧度其实是可以转化为直线的运动

img

在汽车轮胎上安装传感器,只需要测出车胎的转速(比如10弧度/秒),乘以半径(比如1米),就得到了汽车的直线速度(这里就是10米/秒)。在航海单位中,海里定义为子午线1角分的长度。

img

回到求解夹角θd 问题上,相信这难不倒社会主义高中生。我们回顾一下向量的知识,用向量AC减去向量AB等于向量BC,这样就可以得到一个,以B为原点,来求BCD夹角θ。

img

这时候就可以利用三角函数来求解了,根据tanθ=(y2-y1)/(x2-x1)就可以得到弧度θ的值。假设速度为s, 则x4=scosθ,y4=ssinθ。

分析到这里,我们就可以开始写代码了!这里我们使用国产的游戏引擎白鹭来实现这个需求。

白鹭的开发语言使用的是Typescript,是目前前端开发中比较火的一个JavaScript超集。不过发明这门编程语言的安德斯·海尔斯伯格正是c#的首席架构师,所以同一个爹生的语言,定有八分相像!这难不倒c#出身的小编。

img

小编用的引擎版本是5.2.30。我们把游戏屏幕设置为横屏,游戏设置如下:

img

打开egret wing 编辑器,在终端输入命令:egret run -a 便可启动项目。

img

这里小编不打算一行行讲解代码实现,只挑一些重点实现讲解下,如果有兴趣的同学可以在评论区找我要项目代码。

我们先删除掉项目自带的案例代码,然后为小鸟创建一个游戏对象bird。游戏对象里都会有移动的方法,按照面向对象的思想,我们可以把这个方法抽象成一个父类OperaObject,在父类里定义移动方法,然后让游戏对象去继承父类的移动方法。

img

在屏幕做下角创建圆形区域的轮盘,在这个轮盘范围定义点击侦听事件、移动侦听事件和触摸弹起侦听事件,在这些事件里面获取到手指触摸的坐标,然后利用上面的三角函数去求解。

img

之后将求解到的速度去移动小鸟的位置即可。我们看下效果。

img

good!目标到此也就完成了,不过没有背景显得有点单调,咱们可以再美化一下吧。那么问题来了,我们如何来添加背景,让玩家感觉小鸟是一直在飞的呢?我们可以从王宝强开飞机里得到答案

img
img

我们的宝强哥本人其实一直没动,动的是他背后的那条毛巾,来回甩动的毛巾会让人产生王宝强在高速飞行的错觉。所以我们在设置游戏背景的时候也是如此。让背景动,游戏人物不动。首先找一张左右两边可以无缝连接的背景图

img

然后实例化两份背景A和B, 当A的最右边开始移入舞台时,让B的左边接上去,当A的最右边移出舞台时又转过去继续对接B的最右边,这样一直循环下去。

img
img
img

由此,我们的背景也就搞定了,效果如下:

img

此外白鹭还支持部署成微信小程序,我们来看下如何部署。我们点开发布设置

img

选择微信小游戏设置,然后输入在微信小游戏中申请的appid

img
img

完成之后我们打开微信开发者工具,将游戏项目导入进去,可以看到游戏的效果。

img

然后点击预览,扫描生成的预览二维码,看看在手机上的效果如何

img

好啦,我们的游戏轮盘也就制作完成了。

你可能感兴趣的:(制作手游中的方向轮盘)