High Performance HTML5 Game

HTML5游戏性能优化技巧

编写中

低性能设备兼容策略

概述

开发者应该了解到，无论如何进行优化，都无法越过HTML5在低端机上表现不佳这个硬伤。所以我们暂时放下优化技巧不表，专心于解决当设备性能很差时，开发者应使用何种技巧，让游戏看起来尽可能的也有相对好的体验。我们的工作就是，当帧频降低时，游戏逻辑应该仍然表现正常，这主要包含以下两点：

• 游戏的运行节奏没有因为低帧频降低而降低
• 游戏未因为帧频降低而导致BUG产生

准备工作

首先，开发者应该在自己的开发环境上模拟低端机环境，最简单的方法就是将游戏帧频从默认值60修改为15或者30。

egret 1.0.2之前的版本没有提供修改帧频的函数，开发者请自行hack，或者将引擎升级到 1.0 Final版本（1.0.3），在 egret_loader.js 中修改

context.deviceContext = new egret.HTML5DeviceContext(15) 

来修改帧频

解决游戏的运行节奏降低的问题

在帧频降低后，游戏出现的一个常见的问题是游戏整体节奏被降低了，以一个飞行射击游戏为例，原来一架敌机会在6秒内向下移动 720 像素，在帧频从60修改为15后，敌机的移动变得非常缓慢，变成了约24秒向下移动720像素。

如果出现类似情况，请确认开发者是否编写过如下的代码

class Fighter extends egret.DisplayObjectContainer {
    public onEnterFrame():voi{
        this.y += 20;
    }
}
```

显然，在帧频降低的情况下，会导致游戏出现上述问题，开发者应该如此修改代码

class Fighter extends egret.DisplayObjectContainer { public onEnterFrame( dt:number ):void{ this.y += 0.12 * dt; // dt表示从上一帧到现在经过的毫秒数 } }

这里的逻辑应该如此理解： 飞机的期望速度是6秒720像素，即1秒120像素，即 120 * ( dt / 1000) 像素。

当开发者进行如此设置后，就会发现，无论游戏帧频被设置为多少，飞机都会恰好在6秒内完成720单位的移动，在这种情况下，帧频降低只会让飞机的飞行轨迹有一定的“跳跃感”，但是不会不会对游戏自身的节奏造成影响。