H5 游戏开发:推金币

2019-11-26 16:08栏目:龙电竞官网
TAG:

H5 游戏开发:推金币

2017/11/10 · HTML5 · 1 评论 · 游戏

原文出处: 凹凸实验室   

近期参与开发的一款「京东11.11推金币赢现金」(已下线)小游戏一经发布上线就在朋友圈引起大量传播。看到大家玩得不亦乐乎,同时也引发不少网友激烈龙电竞官网,讨论,有的说很带劲,有的大呼被套路被耍猴(无奈脸),这都与我的预期相去甚远。在相关业务数据呈呈上涨过程中,曾一度被微信「有关部门」盯上并要求做出调整,真是受宠若惊。接下来就跟大家分享下开发这款游戏的心路历程。

H5游戏开发:套圈圈

2018/01/25 · HTML5 · 游戏

原文出处: 凹凸实验室   

 

H5 游戏开发:决胜三分球

2017/11/18 · HTML5 · 游戏

原文出处: 凹凸实验室   

背景介绍

一年一度的双十一狂欢购物节即将拉开序幕,H5 互动类小游戏作为京东微信手Q营销特色玩法,在今年预热期的第一波造势中,势必要玩点新花样,主要肩负着社交传播和发券的目的。推金币以传统街机推币机为原型,结合手机强大的能力和生态衍生出可玩性很高的玩法。

前言

虽然本文标题为介绍一个水压套圈h5游戏,但是窃以为仅仅如此对读者是没什么帮助的,毕竟读者们的工作生活很少会再写一个类似的游戏,更多的是面对需求的挑战。我更希望能举一反三,给大家在编写h5游戏上带来一些启发,无论是从整体流程的把控,对游戏框架、物理引擎的熟悉程度还是在某一个小难点上的思路突破等。因此本文将很少详细列举实现代码,取而代之的是以伪代码展现思路为主。

游戏 demo 地址:

前言

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

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

龙电竞官网 1

前期预研

在体验过 AppStore 上好几款推金币游戏 App 后,发现游戏核心模型还是挺简单的,不过 H5 版本的实现在网上很少见。由于团队一直在做 2D 类互动小游戏,在 3D 方向暂时没有实际的项目输出,然后结合此次游戏的特点,一开始想挑战用 3D 来实现,并以此项目为突破口,跟设计师进行深度合作,抹平开发过程的各种障碍。

龙电竞官网 2

由于时间紧迫,需要在短时间内敲定方案可行性,否则项目延期人头不保。在快速尝试了 Three.js + Ammo.js 方案后,发现不尽人意,最终因为各方面原因放弃了 3D 方案,主要是不可控因素太多:时间上、设计及技术经验上、移动端 WebGL 性能表现上,主要还是业务上需要对游戏有绝对的控制,加上是第一次接手复杂的小游戏,担心项目无法正常上线,有点保守,此方案遂卒。

如果读者有兴趣的话可以尝试下 3D 实现,在建模方面,首推 Three.js ,入手非常简单,文档和案例也非常详实。当然入门的话必推这篇 Three.js入门指南,另外同事分享的这篇 Three.js 现学现卖 也可以看看,这里奉上粗糙的 推金币 3D 版 Demo

希望能给诸位读者带来的启发

  1. 技术选型
  2. 整体代码布局
  3. 难点及解决思路
  4. 优化点

准备

龙电竞官网 3

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

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

龙电竞官网 4

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

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

技术选型

放弃了 3D 方案,在 2D 技术选型上就很从容了,最终确定用 CreateJS + Matter.js 组合作为渲染引擎和物理引擎,理由如下:

  • CreateJS 在团队内用得比较多,有一定的沉淀,加上有老司机带路,一个字「稳」;
  • Matter.js 身材纤细、文档友好,也有同事试玩过,完成需求绰绰有余。

技术选型

一个项目用什么技术来实现,权衡的因素有许多。其中时间是必须优先考虑的,毕竟效果可以减,但上线时间是死的。

本项目预研时间一周,真正排期时间只有两周。虽然由项目特点来看比较适合走 3D 方案,但时间明显是不够的。最后保守起见,决定采用 2D 方案尽量逼近真实立体的游戏效果。

从游戏复杂度来考虑,无须用到 Egret 或 Cocos 这些“牛刀”,而轻量、易上手、团队内部也有深厚沉淀的 CreateJS 则成为了渲染框架的首选。

另外需要考虑的是是否需要引入物理引擎,这点需要从游戏的特点去考虑。本游戏涉及重力、碰撞、施力等因素,引入物理引擎对开发效率的提高要大于学习使用物理引擎的成本。因此权衡再三,我引入了同事们已经玩得挺溜的 Matter.js。( Matter.js 文档清晰、案例丰富,是切入学习 web 游戏引擎的一个不错的框架)

开始

技术实现

因为是 2D 版本,所以不需要建各种模型和贴图,整个游戏场景通过 canvas 绘制,覆盖在背景图上,然后再做下机型适配问题,游戏主场景就处理得差不多了,其他跟 3D 思路差不多,核心元素包含障碍物、推板、金币、奖品和技能,接下来就分别介绍它们的实现思路。

整体代码布局

在代码组织上,我选择了面向对象的手法,对整个游戏做一个封装,抛出一些控制接口给其他逻辑层调用。

伪代码:

<!-- index.html --> <!-- 游戏入口 canvas --> <canvas id="waterfulGameCanvas" width="660" height="570"></canvas>

1
2
3
<!-- index.html -->
<!-- 游戏入口 canvas -->
<canvas id="waterfulGameCanvas" width="660" height="570"></canvas>

// game.js /** * 游戏对象 */ class Waterful { // 初始化函数 init () {} // CreateJS Tick,游戏操作等事件的绑定放到游戏对象内 eventBinding () {} // 暴露的一些方法 score () {} restart () {} pause () {} resume () {} // 技能 skillX () {} } /** * 环对象 */ class Ring { // 于每一个 CreateJS Tick 都调用环自身的 update 函数 update () {} // 进针后的逻辑 afterCollision () {} }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// game.js
/**
* 游戏对象
*/
class Waterful {
  // 初始化函数
  init () {}
  
  // CreateJS Tick,游戏操作等事件的绑定放到游戏对象内
  eventBinding () {}
  
  // 暴露的一些方法
  score () {}
  
  restart () {}
  
  pause () {}
  
  resume () {}
  
  // 技能
  skillX () {}
}
/**
* 环对象
*/
class Ring {
  // 于每一个 CreateJS Tick 都调用环自身的 update 函数
  update () {}
  
  // 进针后的逻辑
  afterCollision () {}
}

JavaScript

// main.js // 根据业务逻辑初始化游戏,调用游戏的各种接口 const waterful = new Waterful() waterful.init({...})

1
2
3
4
// main.js
// 根据业务逻辑初始化游戏,调用游戏的各种接口
const waterful = new Waterful()
waterful.init({...})

一、初始化游戏引擎

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

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

JavaScript

... Config.isAntialias = true; // 抗锯齿 Laya.init(1334, 750, Laya.WebGL); // 初始化一个画布,使用 WebGL 渲染,不支持时会自动切换为 Canvas Laya.stage.alignV = 'top'; // 适配垂直对齐方式 Laya.stage.alignH = 'middle'; // 适配水平对齐方式 Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL; // 始终以横屏展示 Laya.stage.scaleMode = "fixedwidth"; // 宽度不变,高度根据屏幕比例缩放,还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式 ...

1
2
3
4
5
6
7
8
...
Config.isAntialias = true; // 抗锯齿
Laya.init(1334, 750, Laya.WebGL); // 初始化一个画布,使用 WebGL 渲染,不支持时会自动切换为 Canvas
Laya.stage.alignV = 'top'; // 适配垂直对齐方式
Laya.stage.alignH = 'middle'; // 适配水平对齐方式
Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL; // 始终以横屏展示
Laya.stage.scaleMode = "fixedwidth"; // 宽度不变,高度根据屏幕比例缩放,还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式
...

障碍物

通过审稿确定金币以及奖品的活动区域,然后把活动区域之外的区域都作为障碍物,用来限制金币的移动范围,防止金币碰撞时超出边界。这里可以用 Matter.js 的 Bodies.fromVertices 方法,通过传入边界各转角的顶点坐标一次性绘制出形状不规则的障碍物。 不过 Matter.js 在渲染不规则形状时存在问题,需要引入 poly-decomp 做兼容处理。

龙电竞官网 5

JavaScript

World.add(this.world, [ Bodies.fromVertices(282, 332,[ // 顶点坐标 { x: 0, y: 0 }, { x: 0, y: 890 }, { x: 140, y: 815 }, { x: 208, y: 614 }, { x: 548, y: 614 }, { x: 612, y: 815 }, { x: 750, y: 890 }, { x: 750, y: 0 } ]) ]);

1
2
3
4
5
6
7
8
9
10
11
12
13
World.add(this.world, [
  Bodies.fromVertices(282, 332,[
    // 顶点坐标
    { x: 0, y: 0 },
    { x: 0, y: 890 },
    { x: 140, y: 815 },
    { x: 208, y: 614 },
    { x: 548, y: 614 },
    { x: 612, y: 815 },
    { x: 750, y: 890 },
    { x: 750, y: 0 }
  ])
]);

初始化

游戏的初始化接口主要做了4件事情:

  1. 参数初始化
  2. CreateJS 显示元素(display object)的布局
  3. Matter.js 刚体(rigid body)的布局
  4. 事件的绑定

下面主要聊聊游戏场景里各种元素的创建与布局,即第二、第三点。

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

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

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

JavaScript

... this.engine; var world; this.engine = Matter.Engine.create({ enableSleeping: true // 开启睡眠 }); world = this.engine.world; Matter.Engine.run(this.engine); // Engine 启动 var render = LayaRender.create({ engine: this.engine, options: { wireframes: false, background: "#000" } }); LayaRender.run(render); // Render 启动 ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
this.engine;
var world;
this.engine = Matter.Engine.create({
    enableSleeping: true // 开启睡眠
});
world = this.engine.world;
Matter.Engine.run(this.engine); // Engine 启动
var render = LayaRender.create({
    engine: this.engine,
    options: { wireframes: false, background: "#000" }
});
LayaRender.run(render); // Render 启动
...

龙电竞官网 6

龙电竞官网 7

JavaScript

... // 加入背景、篮架、篮框 var bg = new this.Sprite(); Laya.stage.addChild(bg); bg.pos(0, 0); bg.loadImage('images/bg.jpg'); ...

1
2
3
4
5
6
7
...
// 加入背景、篮架、篮框
var bg = new this.Sprite();
Laya.stage.addChild(bg);
bg.pos(0, 0);
bg.loadImage('images/bg.jpg');
...

推板

  • 创建:CreateJS 根据推板图片创建 Bitmap 对象比较简单,就不详细讲解了。这里着重讲下推板刚体的创建,主要是跟推板 Bitmap 信息进行同步。因为推板视觉上表现为梯形,所以这里用的梯形刚体,实际上方形也可以,只要能跟周围障碍物形成封闭区域,防止出现缝隙卡住金币即可,创建的刚体直接挂载到推板对象上,方便后续随时提取(金币的处理也是一样),代码大致如下:
JavaScript

var bounds = this.pusher.getBounds(); this.pusher.body =
Matter.Bodies.trapezoid( this.pusher.x, this.pusher.y, bounds.width,
bounds.height }); Matter.World.add(this.world,
[this.pusher.body]);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f3a3238851771206130-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238851771206130-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238851771206130-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238851771206130-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238851771206130-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238851771206130-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238851771206130-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238851771206130-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f3a3238851771206130-1" class="crayon-line">
var bounds = this.pusher.getBounds();
</div>
<div id="crayon-5b8f3a3238851771206130-2" class="crayon-line crayon-striped-line">
this.pusher.body = Matter.Bodies.trapezoid(
</div>
<div id="crayon-5b8f3a3238851771206130-3" class="crayon-line">
  this.pusher.x,
</div>
<div id="crayon-5b8f3a3238851771206130-4" class="crayon-line crayon-striped-line">
  this.pusher.y,
</div>
<div id="crayon-5b8f3a3238851771206130-5" class="crayon-line">
  bounds.width,
</div>
<div id="crayon-5b8f3a3238851771206130-6" class="crayon-line crayon-striped-line">
  bounds.height
</div>
<div id="crayon-5b8f3a3238851771206130-7" class="crayon-line">
});
</div>
<div id="crayon-5b8f3a3238851771206130-8" class="crayon-line crayon-striped-line">
Matter.World.add(this.world, [this.pusher.body]);
</div>
</div></td>
</tr>
</tbody>
</table>
  • 伸缩:由于推板会沿着视线方向前后移动,为了达到近大远小效果,所以需要在推板伸长和收缩过程中进行缩放处理,这样也可以跟两侧的障碍物边沿进行贴合,让场景看起来更具真实感(伪 3D),当然金币和奖品也需要进行同样的处理。由于推板是自驱动做前后伸缩移动,所以需要对推板及其对应的刚体进行位置同步,这样才会与金币刚体产生碰撞达到推动金币的效果。同时在外部改变(伸长技能)推板最大长度时,也需要让推板保持均匀的缩放比而不至于突然放大/缩小,所以整个推板代码逻辑包含方向控制、长度控制、速度控制、缩放控制和同步控制,代码大致如下:
JavaScript

var direction, velocity, ratio, deltaY, minY = 550, maxY = 720,
minScale = .74; Matter.Events.on(this.engine, 'beforeUpdate',
function (event) { // 长度控制(点击伸长技能时) if
(this.isPusherLengthen) { velocity = 90; this.pusherMaxY = maxY; }
else { velocity = 85; this.pusherMaxY = 620; } // 方向控制 if
(this.pusher.y &gt;= this.pusherMaxY) { direction = -1; //
移动到最大长度时结束伸长技能 this.isPusherLengthen = false; } else
if (this.pusher.y &lt;= this.pusherMinY) { direction = 1; } //
速度控制 this.pusher.y += direction * velocity; //
缩放控制,在最大长度变化时保持同样的缩放量,防止突然放大/缩小 ratio
= (1 - minScale) * ((this.pusher.y - minY) / (maxY - minY))
this.pusher.scaleX = this.pusher.scaleY = minScale + ratio; //
同步控制,刚体跟推板位置同步 Body.setPosition(this.pusher.body, { x:
this.pusher.x, y: this.pusher.y }); })

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-23">
23
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-24">
24
</div>
<div class="crayon-num" data-line="crayon-5b8f3a3238855483243812-25">
25
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f3a3238855483243812-26">
26
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f3a3238855483243812-1" class="crayon-line">
var direction, velocity, ratio, deltaY, minY = 550, maxY = 720, minScale = .74;
</div>
<div id="crayon-5b8f3a3238855483243812-2" class="crayon-line crayon-striped-line">
Matter.Events.on(this.engine, 'beforeUpdate', function (event) {
</div>
<div id="crayon-5b8f3a3238855483243812-3" class="crayon-line">
  // 长度控制(点击伸长技能时)
</div>
<div id="crayon-5b8f3a3238855483243812-4" class="crayon-line crayon-striped-line">
  if (this.isPusherLengthen) {
</div>
<div id="crayon-5b8f3a3238855483243812-5" class="crayon-line">
    velocity = 90;
</div>
<div id="crayon-5b8f3a3238855483243812-6" class="crayon-line crayon-striped-line">
    this.pusherMaxY = maxY;
</div>
<div id="crayon-5b8f3a3238855483243812-7" class="crayon-line">
  } else {
</div>
<div id="crayon-5b8f3a3238855483243812-8" class="crayon-line crayon-striped-line">
    velocity = 85;
</div>
<div id="crayon-5b8f3a3238855483243812-9" class="crayon-line">
    this.pusherMaxY = 620;
</div>
<div id="crayon-5b8f3a3238855483243812-10" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f3a3238855483243812-11" class="crayon-line">
  // 方向控制
</div>
<div id="crayon-5b8f3a3238855483243812-12" class="crayon-line crayon-striped-line">
  if (this.pusher.y &gt;= this.pusherMaxY) {
</div>
<div id="crayon-5b8f3a3238855483243812-13" class="crayon-line">
    direction = -1;
</div>
<div id="crayon-5b8f3a3238855483243812-14" class="crayon-line crayon-striped-line">
    // 移动到最大长度时结束伸长技能
</div>
<div id="crayon-5b8f3a3238855483243812-15" class="crayon-line">
    this.isPusherLengthen = false;
</div>
<div id="crayon-5b8f3a3238855483243812-16" class="crayon-line crayon-striped-line">
  } else if (this.pusher.y &lt;= this.pusherMinY) {
</div>
<div id="crayon-5b8f3a3238855483243812-17" class="crayon-line">
    direction = 1;
</div>
<div id="crayon-5b8f3a3238855483243812-18" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f3a3238855483243812-19" class="crayon-line">
  // 速度控制
</div>
<div id="crayon-5b8f3a3238855483243812-20" class="crayon-line crayon-striped-line">
  this.pusher.y += direction * velocity;
</div>
<div id="crayon-5b8f3a3238855483243812-21" class="crayon-line">
  // 缩放控制,在最大长度变化时保持同样的缩放量,防止突然放大/缩小
</div>
<div id="crayon-5b8f3a3238855483243812-22" class="crayon-line crayon-striped-line">
  ratio = (1 - minScale) * ((this.pusher.y - minY) / (maxY - minY))
</div>
<div id="crayon-5b8f3a3238855483243812-23" class="crayon-line">
  this.pusher.scaleX = this.pusher.scaleY = minScale + ratio;
</div>
<div id="crayon-5b8f3a3238855483243812-24" class="crayon-line crayon-striped-line">
  // 同步控制,刚体跟推板位置同步
</div>
<div id="crayon-5b8f3a3238855483243812-25" class="crayon-line">
  Body.setPosition(this.pusher.body, { x: this.pusher.x, y: this.pusher.y });
</div>
<div id="crayon-5b8f3a3238855483243812-26" class="crayon-line crayon-striped-line">
})
</div>
</div></td>
</tr>
</tbody>
</table>
  • 遮罩:推板伸缩实际上是通过改变坐标来达到位置上的变化,这样存在一个问题,就是在其伸缩时必然会导致缩进的部分「溢出」边界而不是被遮挡。

龙电竞官网 8

所以需要做遮挡处理,这里用 CreateJS 的 mask 遮罩属性可以很好的做「溢出」裁剪:

JavaScript

var shape = new createjs.Shape(); shape.graphics.beginFill('#ffffff').drawRect(0, 612, 750, 220); this.pusher.mask = shape

1
2
3
var shape = new createjs.Shape();
shape.graphics.beginFill('#ffffff').drawRect(0, 612, 750, 220);
this.pusher.mask = shape

最终效果如下:

龙电竞官网 9

一、CreateJS 结合 Matter.js

阅读 Matter.js 的 demo 案例,都是用其自带的渲染引擎 Matter.Render。但是由于某些原因(后面会说到),我们需要使用 CreateJS 去渲染每个环的贴图。

不像 Laya 配有和 Matter.js 自身用法一致的 Render,CreateJS 需要单独创建一个贴图层,然后在每个 Tick 里把贴图层的坐标同步为 Matter.js 刚体的当前坐标。

伪代码:

JavaScript

createjs.Ticker.addEventListener('tick', e => { 环贴图的坐标 = 环刚体的坐标 })

1
2
3
createjs.Ticker.addEventListener('tick', e => {
  环贴图的坐标 = 环刚体的坐标
})

使用 CreateJS 去渲染后,要单独调试 Matter.js 的刚体是非常不便的。建议写一个调试模式专门使用 Matter.js 的 Render 去渲染,以便跟踪刚体的运动轨迹。

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

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

JavaScript

... var line = new this.Sprite(); Laya.stage.addChild(line); Laya.stage.on(this.Event.MOUSE_DOWN, this, function(e) { ... }); Laya.stage.on(this.Event.MOUSE_MOVE, this, function(e) { ... }); Laya.stage.on(this.Event.MOUSE_UP, this, function(e) { ... }); ...

1
2
3
4
5
6
7
...
var line = new this.Sprite();
Laya.stage.addChild(line);
Laya.stage.on(this.Event.MOUSE_DOWN, this, function(e) { ... });
Laya.stage.on(this.Event.MOUSE_MOVE, this, function(e) { ... });
Laya.stage.on(this.Event.MOUSE_UP, this, function(e) { ... });
...

JavaScript

... getRad: function(x1, y1, x2, y2) { // 返回两点之间的角度 var x = x2

  • x1; var y = y2 - x2; var Hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var angle = x / Hypotenuse; var rad = Math.acos(angle); if (y2 < y1) { rad = -rad; } return rad; }, getDistance: function(x1, y1, x2, y2) { // 计算两点间的距离 return Math.sqrt(Math.pow(x1 - x2, 2)
  • Math.pow(y1 - y2, 2)); } ...
1
2
3
4
5
6
7
8
9
10
11
12
13
...
getRad: function(x1, y1, x2, y2) { // 返回两点之间的角度
    var x = x2 - x1;
    var y = y2 - x2;
    var Hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    var angle = x / Hypotenuse;
    var rad = Math.acos(angle);
    if (y2 < y1) { rad = -rad; } return rad;
},
getDistance: function(x1, y1, x2, y2) { // 计算两点间的距离
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}
...

金币

按正常思路,应该在点击屏幕时就在出币口创建金币刚体,让其在重力作用下自然掉落和回弹。但是在调试过程中发现,金币掉落后跟台面上其他金币产生碰撞会导致乱飞现象,甚至会卡到障碍物里面去(原因暂未知),后面改成用 TweenJS 的 Ease.bounceOut 来实现金币掉落动画,让金币掉落变得更可控,同时尽量接近自然掉落效果。这样金币从创建到消失过程就被拆分成了三个阶段:

  • 第一阶段

点击屏幕从左右移动的出币口创建金币,然后掉落到台面。需要注意的是,由于创建金币时是通过 appendChild 方式加入到舞台的,这样金币会非常有规律的在 z 轴方向上叠加,看起来非常怪异,所以需要随机设置金币的 z-index,让金币叠加更自然,伪代码如下:

JavaScript

var index = Utils.getRandomInt(1, Game.coinContainer.getNumChildren()); Game.coinContainer.setChildIndex(this.coin, index);

1
2
var index = Utils.getRandomInt(1, Game.coinContainer.getNumChildren());
Game.coinContainer.setChildIndex(this.coin, index);
  • 第二阶段

由于金币已经不需要重力场,所以需要设置物理世界的重力为 0,这样金币不会因为自身重量(需要设置重量来控制碰撞时移动的速度)做自由落体运动,安安静静的平躺在台面上,等待跟推板、其他金币和障碍物之间产生碰撞:

JavaScript

this.engine = Matter.Engine.create(); this.engine.world.gravity.y = 0;

1
2
this.engine = Matter.Engine.create();
this.engine.world.gravity.y = 0;

由于游戏主要逻辑都集中这个阶段,所以处理起来会稍微复杂些。真实情况下如果金币掉落并附着在推板上后,会跟随推板的伸缩而被带动,最终在推板缩进到最短时被背后的墙壁阻挡而挤下推板,此过程看起来简单但实现起来会非常耗时,最后因为时间上紧迫的这里也做了简化处理,就是不管推板是伸长还是缩进,都让推板上的金币向前「滑行」尽快脱离推板。一旦金币离开推板则立即为其创建同步的刚体,为后续的碰撞做准备,这样就完成了金币的碰撞处理。

JavaScript

Matter.Events.on(this.engine, 'beforeUpdate', function (event) { // 处理金币与推板碰撞 for (var i = 0; i < this.coins.length; i++) { var coin = this.coins[i]; // 金币在推板上 if (coin.sprite.y < this.pusher.y) { // 无论推板伸长/缩进金币都往前移动 if (deltaY > 0) { coin.sprite.y += deltaY; } else { coin.sprite.y -= deltaY; } // 金币缩放 if (coin.sprite.scaleX < 1) { coin.sprite.scaleX += 0.001; coin.sprite.scaleY += 0.001; } } else { // 更新刚体坐标 if (coin.body) { Matter.Body.set(coin.body, { position: { x: coin.sprite.x, y: coin.sprite.y } }) } else { // 金币离开推板则创建对应刚体 coin.body = Matter.Bodies.circle(coin.sprite.x, coin.sprite.y); Matter.World.add(this.world, [coin.body]); } } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Matter.Events.on(this.engine, 'beforeUpdate', function (event) {
  // 处理金币与推板碰撞
  for (var i = 0; i < this.coins.length; i++) {
    var coin = this.coins[i];
    // 金币在推板上
    if (coin.sprite.y < this.pusher.y) {
      // 无论推板伸长/缩进金币都往前移动
      if (deltaY > 0) {
        coin.sprite.y += deltaY;
      } else {
        coin.sprite.y -= deltaY;
      }
      // 金币缩放
      if (coin.sprite.scaleX < 1) {
        coin.sprite.scaleX += 0.001;
        coin.sprite.scaleY += 0.001;
      }
    } else {
      // 更新刚体坐标
      if (coin.body) {
        Matter.Body.set(coin.body, { position: { x: coin.sprite.x, y: coin.sprite.y } })
      } else {
        // 金币离开推板则创建对应刚体
        coin.body = Matter.Bodies.circle(coin.sprite.x, coin.sprite.y);
        Matter.World.add(this.world, [coin.body]);
      }
    }
  }
})
  • 第三阶段

随着金币不断的投放、碰撞和移动,最终金币会从台面的下边沿掉落并消失,此阶段的处理同第一阶段,这里就不重复了。

二、环

本游戏的难点是要以 2D 去模拟 3D,环是一点,进针的效果是一点,先说环。

环由一个圆形的刚体,和半径稍大一些的贴图层所组成。如下图,蓝色部分为刚体:

龙电竞官网 10

伪代码:

JavaScript

class Ring { constructor () { // 贴图 this.texture = new createjs.Sprite(...) // 刚体 this.body = Matter.Bodies.circle(...) } }

1
2
3
4
5
6
7
8
class Ring {
  constructor () {
    // 贴图
    this.texture = new createjs.Sprite(...)
    // 刚体
    this.body = Matter.Bodies.circle(...)
  }
}

四、生成篮球施加力度

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

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

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

JavaScript

... addBall: function(x, y) { var ball = Matter.Bodies.circle(500, 254, 28, { // x, y, 半径 isStatic: false, // 不固定 density: 0.68, // 密度 restitution: 0.8, // 弹性 render: { visible: true, // 开启渲染 sprite: { texture: 'images/ball.png', // 设置为篮球图 xOffset: 28, // x 设置为中心点 yOffset: 28 // y 设置为中心点 } } }); } Matter.Body.applyForce(ball, ball.position, { x: x, y: y }); // 施加力 Matter.World.add(this.engine.world, [ball]); // 添加到世界 ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
addBall: function(x, y) {
    var ball = Matter.Bodies.circle(500, 254, 28, { // x, y, 半径
        isStatic: false, // 不固定
        density: 0.68, // 密度
        restitution: 0.8, // 弹性
        render: {
            visible: true, // 开启渲染
            sprite: {
                texture: 'images/ball.png', // 设置为篮球图
                xOffset: 28, // x 设置为中心点
                yOffset: 28 // y 设置为中心点
            }
        }
    });
}
Matter.Body.applyForce(ball, ball.position, { x: x, y: y }); // 施加力
Matter.World.add(this.engine.world, [ball]); // 添加到世界
...

奖品

由于奖品需要根据业务情况进行控制,所以把它跟金币进行了分离不做碰撞处理(内心是拒绝的),所以产生了「螃蟹步」现象,这里就不做过多介绍了。

三、刚体

为什么把刚体半径做得稍小呢,这也是受这篇文章 推金币 里金币的做法所启发。推金币游戏中,为了达到金币间的堆叠效果,作者很聪明地把刚体做得比贴图小,这样当刚体挤在一起时,贴图间就会层叠起来。所以这样做是为了使环之间稍微有点重叠效果,更重要的也是当两个紧贴的环不会因翻转角度太接近而显得留白太多。如图:

龙电竞官网 11

为了模拟环在水中运动的效果,可以选择给环加一些空气摩擦力。另外在实物游戏里,环是塑料做成的,碰撞后动能消耗较大,因此可以把环的 restitution 值调得稍微小一些。

需要注意 Matter.js 中因为各种物理参数都是没有单位的,一些物理公式很可能用不上,只能基于其默认值慢慢进行微调。下面的 frictionAir 和 restitution 值就是我慢慢凭感觉调整出来的:

JavaScript

this.body = Matter.Bodies.circle(x, y, r, { frictionAir: 0.02, restitution: 0.15 })

1
2
3
4
this.body = Matter.Bodies.circle(x, y, r, {
  frictionAir: 0.02,
  restitution: 0.15
})

五、加入其他刚体、软体

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

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

JavaScript

... addBody: function() { var group = Matter.Body.nextGroup(true); var netBody = Matter.Composites.softBody(1067, 164, 6, 4, 0, 0, false, 8.5, { // 篮球网 firction: 1, // 摩擦力 frictionAir: 0.08, // 空气摩擦力 restitution: 0, // 弹性 render: { visible: false }, collisionFilter: { group: group } }, { render: { lineWidth: 2, strokeStyle: "#fff" } }); netBody.bodies[0].isStatic = netBody.bodies[5].isStatic = true; // 将篮球网固定起来 var backboard = Matter.Bodies.rectangle(1208, 120, 50, 136, { // 篮板刚体 isStatic: true, render: { visible: true } }); var backboardBlock = Matter.Bodies.rectangle(1069, 173, 5, 5, { // 篮框边缘块 isStatic: true, render: { visible: true } }); Matter.World.add(this.engine.world, [ // 四周墙壁 ... Matter.Bodies.rectangle(667, 5, 1334, 10, { // x, y, w, h isStatic: true }), ... ]); Matter.World.add(this.engine.world, [netBody, backboard, backboardBlock]); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
...
addBody: function() {
    var group = Matter.Body.nextGroup(true);
    var netBody = Matter.Composites.softBody(1067, 164, 6, 4, 0, 0, false, 8.5, { // 篮球网
        firction: 1, // 摩擦力
        frictionAir: 0.08, // 空气摩擦力
        restitution: 0, // 弹性
        render: { visible: false },
        collisionFilter: { group: group }
    }, {
        render: { lineWidth: 2, strokeStyle: "#fff" }
    });
    netBody.bodies[0].isStatic = netBody.bodies[5].isStatic = true; // 将篮球网固定起来
    var backboard = Matter.Bodies.rectangle(1208, 120, 50, 136, { // 篮板刚体
        isStatic: true,
        render: { visible: true }
    });
    var backboardBlock = Matter.Bodies.rectangle(1069, 173, 5, 5, { // 篮框边缘块
        isStatic: true,
        render: { visible: true }
    });
    Matter.World.add(this.engine.world, [ // 四周墙壁
        ...
        Matter.Bodies.rectangle(667, 5, 1334, 10, { // x, y, w, h
            isStatic: true
        }),
        ...
    ]);
    Matter.World.add(this.engine.world, [netBody, backboard, backboardBlock]);
}

龙电竞官网 12

技能设计

写好游戏主逻辑之后,技能就属于锦上添花的事情了,不过让游戏更具可玩性,想想金币哗啦啦往下掉的感觉还是很棒的。

抖动:这里取了个巧,是给舞台容器添加了 CSS3 实现的抖动效果,然后在抖动时间内让所有的金币的 y 坐标累加固定值产生整体慢慢前移效果,由于安卓下支持系统震动 API,所以加了个彩蛋让游戏体验更真实。

CSS3 抖动实现主要是参考了 csshake 这个样式,非常有意思的一组抖动动画集合。

JS 抖动 API

JavaScript

// 安卓震动 if (isAndroid) { window.navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; window.navigator.vibrate([100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100]); window.navigator.vibrate(0); // 停止抖动 }

1
2
3
4
5
6
// 安卓震动
if (isAndroid) {
  window.navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
  window.navigator.vibrate([100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100]);
  window.navigator.vibrate(0); // 停止抖动
}

伸长:伸长处理也很简单,通过改变推板移动的最大 y 坐标值让金币产生更大的移动距离,不过细节上有几点需要注意的地方,在推板最大 y 坐标值改变之后需要保持移动速度不变,不然就会产生「瞬移」(不平滑)问题。

四、贴图

环在现实世界中的旋转是三维的,而 CreateJS 只能控制元素在二维平面上的旋转。对于一个环来说,二维平面的旋转是没有任何意义的,无论如何旋转,都只会是同一个样子。

想要达到环绕 x 轴旋转的效果,一开始想到的是使用 rotation + scaleY。虽然这样能在视觉上达到目的,但是 scaleY 会导致环有被压扁的感觉,图片会失真:

龙电竞官网 13

显然这样的效果是不能接受的,最后我采取了逐帧图的方式,最接近地还原了环的旋转姿态:

龙电竞官网 14

龙电竞官网 15

注意在每个 Tick 里需要去判断环是否静止,若非静止则继续播放,并将贴图的 rotation 值赋值为刚体的旋转角度。如果是停止状态,则暂停逐帧图的播放:

JavaScript

// 贴图与刚体位置的小数点后几位有点不一样,需要降低精度 const x1 = Math.round(texture.x) const x2 = Math.round(body.position.x) const y1 = Math.round(texture.y) const y2 = Math.round(body.position.y) if (x1 !== x2 || y1 !== y2) { texture.paused && texture.play() texture.rotation = body.angle * 180 / Math.PI } else { !texture.paused && texture.stop() } texture.x = body.position.x texture.y = body.position.y

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 贴图与刚体位置的小数点后几位有点不一样,需要降低精度
const x1 = Math.round(texture.x)
const x2 = Math.round(body.position.x)
const y1 = Math.round(texture.y)
const y2 = Math.round(body.position.y)
if (x1 !== x2 || y1 !== y2) {
  texture.paused && texture.play()
  texture.rotation = body.angle * 180 / Math.PI
} else {
  !texture.paused && texture.stop()
}
  
texture.x = body.position.x
texture.y = body.position.y

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

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

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

JavaScript

... Matter.Events.on(this.engine, 'tick', function() { countDown++; if (ball.position.x > 1054 && ball.position.x < 1175 && ball.position.y > 170 && ball.position.y < 180 && countDown > 2) { countDown = 0; console.log('球进了!'); } }); Matter.Events.on(ball, 'sleepStart', function() { Matter.World.remove(This.engine.world, ball); }); ...

1
2
3
4
5
6
7
8
9
10
11
12
...
Matter.Events.on(this.engine, 'tick', function() {
    countDown++;
    if (ball.position.x > 1054 && ball.position.x < 1175 && ball.position.y > 170 && ball.position.y < 180 && countDown > 2) {
        countDown = 0;
        console.log('球进了!');
    }
});
Matter.Events.on(ball, 'sleepStart', function() {
    Matter.World.remove(This.engine.world, ball);
});
...

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

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

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

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:H5 游戏开发:推金币