HTML5 2D 游戏开发结束游戏（4）监控帧速率，必要时显示一条警告

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-19 19:09 | 只看该作者

HTML5 2D 游戏开发结束游戏（4）监控帧速率，必要时显示一条警告

监控帧速率，必要时显示一条警告和运行在严格控制环境中的控制台游戏不一样，HTML5 游戏运行比较混乱。视频播放器、OS 备份软件，甚至一些普通的东西（像带有半透明背景的终端窗口）都可能使得性能最佳的游戏大打折扣。因为您无法控制 HTML5 游戏的运行环境，因此，您必须监控帧速率，当游戏慢得难以承受时向玩家发出警告。图 7 显示了 Snail Bait 的警告：
图 7. 运行缓慢警告

在警告玩家游戏运行太慢时，Snail Bait 会显示当前帧速率。Snail Bait 通过在运行时将帧速率插入其他静态文本中完成这一操作。清单 7 显示了此静态文本的 HTML：
清单 7. 运行缓慢警告的 HTML

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
36
37
38

<html>
  <body>
   <div id='arena'>
      ...

      

      <div id='running-slowly'>

         <h1>Snail Bait is running slowly</h1>

         <p id='slowly-warning'></p>

         <p>High-performance applications, such as video players or
         software that backs up your computer, can slow this game down.
         For best results, hide all other windows on your desktop and
         close CPU- or GPU- intensive apps when you play HTML5 games.
         </p>

         <p>You should also upgrade your browser to the latest version and make
         sure that it has hardware accelerated HTML5 Canvas. Any version of Chrome
         starting with version 18, for example, has hardware accelerated
            Canvas. Here is a link where you can download the
            <a href='http://www.google.com/chrome/'>latest version of Chrome</a>.
         </p>

         <a id='slowly-okay' href='#'>
            Okay
         </a>

         <a  id='slowly-dont-show' href='#'>
            Do not show this warning again
         </a>
      </div>
      ...
   </div>
  </div>
</div>

清单 8 显示了 Snail Bait 如何显示和隐藏运行缓慢警告：
清单 8. 显示和隐藏运行缓慢警告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

SnailBait.prototype = {
  ...
  revealRunningSlowlyWarning: function (now, averageSpeed) {
   this.slowlyWarningElement.innerHTML =
   "Snail Bait is running at " +
   "<font color='red'> averageSpeed.toFixed(0)" + "</font>" +
   " frames/second (fps), but it needs more than " +
   this.runningSlowlyThreshold + " fps for the game to work correctly."

   this.runningSlowlyElement.style.display = 'block';

   setTimeout( function () {
      snailBait.runningSlowlyElement.style.opacity = 1.0;
   }, this.SHORT_DELAY);

   this.lastSlowWarningTime = now;
  },

  hideRunningSlowlyWarning: function () {
   snailBait.runningSlowlyElement.style.display = 'none';
   snailBait.runningSlowlyElement.style.opacity = 0;
  },
  ...
};

当 Snail Bait 显示运行缓慢警告时，它会创建警告文本，然后将该文本分配给 slowly-warning 段落元素。然后将该元素的 display 属性设置为 block ，以便让浏览器显示它。不过，该元素最初是透明的，因此会有一个短暂的延时，revealRunningSlowlyWarning() 方法将该元素的透明度设置为 1.0，使其变成不透明的。该设置触发了一个 CSS 转换，元素从透明逐渐变成不透明大约需要 1 秒钟的时间。清单 9 显示了 running-slowly 警告元素的 CSS：
清单 9. running-slowly 警告元素的 CSS

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

#running-slowly {
  position: absolute;
  width: 600px;
  margin-top: 85px;
  margin-left: 90px;
  text-align: center;
  background: rgba(255,255,255,0.85);
  text-align: left;
  padding: 0px 20px 20px 20px;
  color: navy;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;

  -webkit-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
  -moz-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
  -o-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
  box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;

  opacity: 0;
  display: none;

  z-index: 2;
}

当 Snail Bait 运行时，它会监控帧速率，如清单 10 所示：
清单 10. 监控帧速率

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
36

SnailBait.prototype = {
  ...
  animate: function (now) {
   if (snailBait.paused) {
      setTimeout( function () {
         requestNextAnimationFrame(snailBait.animate);
      }, snailBait.PAUSED_CHECK_INTERVAL);
   }
   else {
      snailBait.fps = snailBait.calculateFps(now);

      if (snailBait.windowHasFocus && !snailBait.paused &&
         snailBait.showSlowWarning &&
         now - snailBait.lastSlowWarningTime >
         snailBait.FPS_SLOW_CHECK_INTERVAL) {
         snailBait.checkFps(now);
      }

      snailBait.draw(now);
      requestNextAnimationFrame(snailBait.animate);
   }
  },

  checkFps: function (now) {
   var averageSpeed;

   this.updateSpeedSamples(snailBait.fps);

   averageSpeed = this.calculateAverageSpeed();

   if (averageSpeed < this.runningSlowlyThreshold) {
      this.revealRunningSlowlyWarning(now, averageSpeed);
   }
  },
  ...
};

每隔 FPS_SLOW_CHECK_INTERVAL 秒（这里设置成 4 秒），Snail Bait 就会通过更新一组速度样本和计算平均速度来检查帧速率。如果平均速度小于游戏缓慢运行阈值，Snail Bait 就会显示运行缓慢警告。清单 11 显示了更新速度样本和计算平均速度的 Snail Bait 方法：
清单 11. 更新速度样本并计算平均速度

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

SnailBait.prototype = {
  ...
  updateSpeedSamples: function (fps) {
   this.speedSamples[this.speedSamplesIndex] = fps;

   if (this.speedSamplesIndex !== this.NUM_SPEED_SAMPLES-1) {
      this.speedSamplesIndex++;
   }
   else {
      this.speedSamplesIndex = 0;
   }
  },

  calculateAverageSpeed: function () {
   var i,
   total = 0;

   for (i=0; i < this.NUM_SPEED_SAMPLES; i++) {
      total += this.speedSamples;
   }

   return total/this.NUM_SPEED_SAMPLES;
  },
  ...
};

当玩家单击运行缓慢警告的 OK按钮时，Snail Bait 会隐藏警告并重置速度样本。当玩家单击 Do not show this warning again 按钮时，Snail Bait 会隐藏警告并设置一个标记，以便不再监控帧速率。这两个事件处理程序的代码如清单 12 所示：
清单 12. 运行缓慢事件处理程序

1
2
3
4
5
6
7
8
9
10

snailBait.slowlyDontShowElement.onclick = function (e) {
  snailBait.hideRunningSlowlyWarning();
  snailBait.showSlowWarning = false;
};

snailBait.slowlyOkayElement.onclick = function (e) {
  snailBait.hideRunningSlowlyWarning();
  snailBait.speedSamples = [60,60,60,60,60,60,60,60,60,60]; // reset
};

收藏分享评分

回复引用

订阅 TOP

返回列表

HTML5 2D 游戏开发 结束游戏（4）监控帧速率，必要时显示一条警告

HTML5 2D 游戏开发 结束游戏（4）监控帧速率，必要时显示一条警告

HTML5 2D 游戏开发结束游戏（4）监控帧速率，必要时显示一条警告

HTML5 2D 游戏开发结束游戏（4）监控帧速率，必要时显示一条警告