新萄京Web前端

 新萄京Web前端     |      2019-12-05

H5游戏开发:套圈圈

2018/01/25 · HTML5 · 游戏

原文出处: 凹凸实验室   

 

金币

按正常思路,应该在点击屏幕时就在出币口创建金币刚体,让其在重力作用下自然掉落和回弹。但是在调试过程中发现,金币掉落后跟台面上其他金币产生碰撞会导致乱飞现象,甚至会卡到障碍物里面去(原因暂未知),后面改成用 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]);
      }
    }
  }
})
  • 第三阶段

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

整体代码布局

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

伪代码:

<!-- 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({...})

对象回收

这也是游戏开发中常用的优化手段,通过回收从边界消失的对象,让对象得以复用,防止因频繁创建对象而产生大量的内存消耗。

初始化

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

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

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

结语

感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

前言

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

游戏 demo 地址:

技能设计

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

抖动:这里取了个巧,是给舞台容器添加了 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 坐标值改变之后需要保持移动速度不变,不然就会产生「瞬移」(不平滑)问题。

2. 背景图

本游戏布景为游戏机及海底世界,两者可以作为父容器的背景图,把 canvas 的位置定位到游戏机内即可。canvas 覆盖范围为下图的蓝色蒙层:

图片 1

事件销毁

由于金币和奖品生命周期内使用了 Tween,当他们从屏幕上消失后记得移除掉:

JavaScript

createjs.Tween.removeTweens(this.coin);

1
createjs.Tween.removeTweens(this.coin);

至此,推金币各个关键环节都有讲到了,最后附上一张实际游戏效果:
图片 2

进针后

两个二维平面的物体交错是不能产生“穿过”效果的:

图片 3

除非把环分成前后两部分,这样层级关系才能得到解决。但是由于环贴图是逐帧图,分两部分的做法并不合适。

最后找到的解决办法是利用视觉错位来达到“穿过”效果:

图片 4

具体做法是,当环被判定成功进针时,把环刚体去掉,环的逐帧图逐渐播放到平放的那一帧,rotation 值也逐渐变为 0。同时利用 CreateJS 的 Tween 动画把环平移到针底。

进针后需要去掉环刚体,平移环贴图,这就是上文为什么环的贴图必须由 CreateJS 负责渲染的答案。

伪代码:

JavaScript

/ Object Ring afterCollision (waterful) { // 平移到针底部 createjs.Tween.get(this.texture) .to({y: y}, duration) // 消去刚体 Matter.World.remove(waterful.engine.world, this.body) this.body = null // 接下来每一 Tick 的更新逻辑改变如下 this.update = function () { const texture = this.texture if 当前环贴图就是第 0 帧(环平放的那一帧){ texture.gotoAndStop(0) } else { 每 5 个 Tick 往前播放一帧(相隔多少 Tick 切换一帧可以凭感觉调整,主要是为了使切换到平放状态的过程不显得太突兀) } // 使针大概在环中央位置穿过 if (texture.x < 200) ++texture.x if (texture.x > 213 && texture.x < 300) --texture.x if (texture.x > 462) --texture.x if (texture.x > 400 && texture.x < 448) ++texture.x // 把环贴图尽快旋转到水平状态 let rotation = Math.round(texture.rotation) % 180 if (rotation < 0) rotation += 180 if (rotation > 0 && rotation <= 90) { texture.rotation = rotation

  • 1 } else if (rotation > 90 && rotation < 180) { texture.rotation = rotation + 1 } else if (frame === 0) { this.update = function () {} } } // 调用得分回调函数 waterful.score() }
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
34
35
/ Object Ring
afterCollision (waterful) {
  // 平移到针底部
  createjs.Tween.get(this.texture)
    .to({y: y}, duration)
  // 消去刚体
  Matter.World.remove(waterful.engine.world, this.body)
  this.body = null
  // 接下来每一 Tick 的更新逻辑改变如下
  this.update = function () {
    const texture = this.texture
    if 当前环贴图就是第 0 帧(环平放的那一帧){
      texture.gotoAndStop(0)
    } else {
      每 5 个 Tick 往前播放一帧(相隔多少 Tick 切换一帧可以凭感觉调整,主要是为了使切换到平放状态的过程不显得太突兀)
    }
    // 使针大概在环中央位置穿过
    if (texture.x < 200) ++texture.x
    if (texture.x > 213 && texture.x < 300) --texture.x
    if (texture.x > 462) --texture.x
    if (texture.x > 400 && texture.x < 448) ++texture.x
    // 把环贴图尽快旋转到水平状态
    let rotation = Math.round(texture.rotation) % 180
    if (rotation < 0) rotation += 180
    if (rotation > 0 && rotation <= 90) {
      texture.rotation = rotation - 1
    } else if (rotation > 90 && rotation < 180) {
      texture.rotation = rotation + 1
    } else if (frame === 0) {
      this.update = function () {}
    }
  }
  // 调用得分回调函数
  waterful.score()
}

H5 游戏开发:推金币

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

原文出处: 凹凸实验室   

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

三、刚体

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

图片 5

为了模拟环在水中运动的效果,可以选择给环加一些空气摩擦力。另外在实物游戏里,环是塑料做成的,碰撞后动能消耗较大,因此可以把环的 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
})

奖品

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

3. rotation 值

同理,为了使得环与针相垂直,rotation 值不能太接近 90 度。经试验后规定 0

下图这种过大的倾角逻辑上是不能进针成功的:

图片 6

调试方法

由于用了物理引擎,当在创建刚体时需要跟 CreateJS 图形保持一致,这里可以利用 Matter.js 自带的 Render 为物理场景独立创建一个透明的渲染层,然后覆盖在 CreateJS 场景之上,这里贴出大致代码:

JavaScript

Matter.Render.create({ element: document.getElementById('debugger-canvas'), engine: this.engine, options: { width: 750, height: 1206, showVelocity: true, wireframes: false // 设置为非线框,刚体才可以渲染出颜色 } });

1
2
3
4
5
6
7
8
9
10
Matter.Render.create({
  element: document.getElementById('debugger-canvas'),
  engine: this.engine,
  options: {
    width: 750,
    height: 1206,
    showVelocity: true,
    wireframes: false // 设置为非线框,刚体才可以渲染出颜色
  }
});

设置刚体的 render 属性为半透明色块,方便观察和调试,这里以推板为例:

JavaScript

this.pusher.body = Matter.Bodies.trapezoid( ... // 略 { isStatic: true, render: { opacity: .5, fillStyle: 'red' } });

1
2
3
4
5
6
7
8
9
this.pusher.body = Matter.Bodies.trapezoid(
... // 略
{
  isStatic: true,
  render: {
    opacity: .5,
    fillStyle: 'red'
  }
});

效果如下,调试起来还是很方便的:

图片 7

1. 到达针顶

到达针顶是环进针成功的必要条件。

控制对象数量

随着游戏的持续台面上累积的金币数量会不断增加,金币之间的碰撞计算量也会陡增,必然会导致手机卡顿和发热。这时就需要控制金币的重叠度,而金币之间重叠的区域大小是由金币刚体的尺寸大小决定的,通过适当的调整刚体半径让金币分布得比较均匀,这样可以有效控制金币数量,提升游戏性能。

优化

技术实现

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

结语

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

1 赞 收藏 评论

图片 8

背景介绍

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

2. 动画帧

环必须垂直于针才能被顺利穿过,水平于针时应该是与针相碰后弹开。

当然条件可以相对放宽一些,不需要完全垂直,下图红框内的6帧都被规定为符合条件:

图片 9

为了降低游戏难度,我规定超过针一半高度时,只循环播放前6帧:

JavaScript

this.texture.on('animationend', e => { if (e.target.y < 400) { e.target.gotoAndPlay('short') } else { e.target.gotoAndPlay('normal') } })

1
2
3
4
5
6
7
this.texture.on('animationend', e => {
  if (e.target.y < 400) {
    e.target.gotoAndPlay('short')
  } else {
    e.target.gotoAndPlay('normal')
  }
})

技术选型

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

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

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

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

相关资源

Three.js 官网

Three.js入门指南

Three.js 现学现卖

Matter.js 官网

Matter.js 2D 物理引擎试玩报告

游戏 createjs h5 canvas game 推金币 matter.js

Web开发

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室()

上次更新:2017-11-08 19:29:54

2 赞 收藏 1 评论

图片 10

1. 物理世界

为了模拟真实世界环在水中的向下加速度,可以把 y 方向的 g 值调小:

JavaScript

engine.world.gravity.y = 0.2

1
engine.world.gravity.y = 0.2

左右重力感应对环的加速度影响同样可以通过改变 x 方向的 g 值达到:

JavaScript

// 最大倾斜角度为 70 度,让用户不需要过分倾斜手机 // 0.4 为灵敏度值,根据具体情况调整 window.addEventListener('deviceorientation', e => { let gamma = e.gamma if (gamma < -70) gamma = -70 if (gamma > 70) gamma = 70 this.engine.world.gravity.x = (e.gamma / 70) * 0.4 })

1
2
3
4
5
6
7
8
// 最大倾斜角度为 70 度,让用户不需要过分倾斜手机
// 0.4 为灵敏度值,根据具体情况调整
window.addEventListener('deviceorientation', e => {
  let gamma = e.gamma
  if (gamma < -70) gamma = -70
  if (gamma > 70) gamma = 70
  this.engine.world.gravity.x = (e.gamma / 70) * 0.4
})

性能/体验优化