制作手游中的方向轮盘

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容