H5 游戏开发:决胜三分球

前言

本次是与腾讯手机充值合作推出的活动,用户通过氪金充值话费或者分享来获得更多的投篮机会,根据最终的进球数排名来发放奖品。

用户可以通过滑动拉出一条辅助线,根据辅助线长度和角度的不同将球投出,由于本次活动的开发周期短,在物理特性实现方面使用了物理引擎,所有本文的分享内容是如何结合物理引擎去实现一款投篮小游戏,如下图所示。

show

准备

layaAir

此次我使用的游戏引擎是 LayaAir,你也可以根据你的爱好和实际需求选择合适的游戏引擎进行开发,为什么选择该引擎进行开发 ,总的来说有以下几个原因:

  • LayaAir 官方文档、API、示例学习详细、友好,可快速上手
  • 除了支持 2D 开发,同时还支持 3D 和 VR 开发,支持 AS、TS、JS 三种语言开发
  • 在开发者社区中提出的问题,官方能及时有效的回复
  • 提供 IDE 工具,内置功能有打包 APP、骨骼动画转换、图集打包、SWF转换、3D 转换等等

matterjs

物理引擎方面采用了 Matter.js,篮球、篮网的碰撞弹跳都使用它来实现,当然,还有其他的物理引擎如 planck.js、p2.js 等等,具体没有太深入的了解,Matter.js 相比其他引擎的优势在于:

  • 轻量级,性能不逊色于其他物理引擎
  • 官方文档、Demo 例子非常丰富,配色有爱
  • API 简单易用,轻松实现弹跳、碰撞、重力、滚动等物理效果
  • Github Star 数处于其他物理引擎之上,更新频率更高

开始

一、初始化游戏引擎

首先对 LayaAir 游戏引擎进行初始化设置,Laya.init 创建一个 1334×750 的画布以 WebGL 模式去渲染,渲染模式下有 WebGL 和 Canvas,使用 WebGL 模式下会出现锯齿的问题,使用 Config.isAntialias 抗锯齿可以解决此问题,并且使用引擎中自带的多种屏幕适配 screenMode

如果你使用的游戏引擎没有提供屏幕适配,欢迎阅读另一位同事所写的文章【H5游戏开发:横屏适配】

二、初始化物理引擎、加入场景

然后对 Matter.js 物理引擎进行初始化,Matter.Engine 模块包含了创建和处理引擎的方法,由引擎运行这个世界,engine.world 则包含了用于创建和操作世界的方法,所有的物体都需要加入到这个世界中,Matter.Render 是将实例渲染到 Canvas 中的渲染器。

enableSleeping 是开启刚体处于静止状态时切换为睡眠状态,减少物理运算提升性能,wireframes 关闭用于调试时的线框模式,再使用 LayaAir 提供的 Laya.loadingnew Sprite 加载、绘制已简化的场景元素。

engine-and-world

scene

三、画出辅助线,计算长度、角度

投球的力度和角度是根据这条辅助线的长短角度去决定的,现在我们加入手势事件 MOUSE_DOWNMOUSE_MOVEMOUSE_UP 画出辅助线,通过这条辅助线起点和终点的 X、Y 坐标点再结合两个公式: getRadgetDistance 计算出距离和角度。

四、生成篮球施加力度

大致初始了一个简单的场景,只有背景和篮框,接下来是加入投篮。

每次在 MOUSE_UP 事件的时候我们就生成一个圆形的刚体, isStatic: false 我们要移动所以不固定篮球,并且设置 density 密度、restitution 弹性、刚体的背景 sprite 等属性。

将获得的两个值:距离和角度,通过 applyForce 方法给生成的篮球施加一个力,使之投出去。

五、加入其他刚体、软体

现在,已经能顺利的将篮球投出,现在我们还需要加入一个篮球网、篮框、篮架。

通过 Matter.js 加入一些刚体和软体并且赋予物理特性 firction 摩擦力、frictionAir 空气摩擦力等, visible: false 表示是否隐藏,collisionFilter 是过滤碰撞让篮球网之间不产生碰撞。

body

六、判断进球、监听睡眠状态

通过开启一个 tick 事件不停的监听球在运行时的位置,当到达某个位置时判定为进球。

另外太多的篮球会影响性能,所以我们使用 sleepStart 事件监听篮球一段时间不动后,进入睡眠状态时删除。

到此为止,通过借助物理引擎所提供的碰撞、弹性、摩擦力等特性,一款简易版的投篮小游戏就完成了,也推荐大家阅读另一位同事的文章【H5游戏开发】推金币 ,使用了 CreateJS + Matter.js 的方案,相信对你仿 3D 和 Matter.js 的使用上有更深的了解。

最后,此次项目中只做了一些小尝试,Matter.js 能实现的远不止这些,移步官网发现更多的惊喜吧,文章的完整 Demo 代码可【点击这里】

如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏

参考

Matter.js

LayaAir Demo

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部