原生canvas游戏性能优化

2,918 阅读6分钟

随着微信小游戏的推出,其全面支持以往的H5游戏开发,微信借小游戏的社交方式彻底激活小程序。同样的,也算是重新吹起了H5游戏的风口。

可以预见的是,借助小游戏的风,前端游戏开发这一分支也会燃起来了。在游戏开发中,最令人难受的也许就是性能优化了吧。本人在整理过往几次游戏开发的经历中,总结了一些常被忽视的优化小措施,与诸君分享。


针对游戏性能优化,首先,我们要知道我们优化的目标是什么?往往我们觉得性能优化很难,是因为我们不确定优化目标是什么,针对什么进行优化。

在我看来,性能优化的实质,实际上就是尽可能的减少等待时间和内存使用。

有了目标有好办了,接下来,我们需要知道我们通过优化哪些目标可以减少代码执行和内存使用。我粗略的分为了3个方面:

  • Canvas,原生canvas游戏,首要目标自然就是canvas
  • 内存使用,果7之前safari运行内存只有100M,滥用内存直接给你强制锁死
  • 多线程,两条腿走路肯定比一条腿快多了啊

Canvas

离屏canvas

场景:针对需要大量使用且绘图繁复的静态场景

实现:对象内放置一个私有canvas,初始化时将静态场景绘制完备,需要时直接拷贝内置canvas的图像即可

//每一帧重绘时
setInterval(function () {

    context.fillRect(x,y,width,height)
    context.arc(x,y,r,sA,eA)
    context.strokeText('hehe', x, y)
    
}, 1000/60)

设置离屏canvas

let background = {
    width: 400,
    height: 400,
    canvas: document.createElement('canvas'),
    init: () => {
        let self = this
        let ctx = self.canvas.getContext('2d')
        
        self.canvas.width = self.width
        self.canvas.height = self.height

        ctx.fillRect(x,y,width,height)
        ctx.arc(x,y,r,sA,eA)
        ctx.strokeText('hehe', x, y)

    }
    
}

background.init()

setInterval(() => {

    context.drawImage(background.canvas, background.width, background.height, 0, 0);
    
}, 1000/60)

不设置离屏canvas的情况下,每帧绘制会调用3次绘图api;设置离屏canvas后,每帧只用调用一次api。

实质:减少调用api的次数,减少代码执行语句,从而减少每帧渲染时间,从而提高动画流程度。

状态修改

场景:针对需要频繁修改canvas对象的渲染状态 (fillStyle, strokeStyle ...)

实现:按canvas状态分别绘制,而不是按对象进行绘制

混合绘制

for (let i = 0; i < line.length; i++) {

    let e = line[i]

    context.fillStyle = i % 2 ? '#000': '#fff'

    context.fillRect(e.x, e.y, e.width, e.height)

}

不同状态分别绘制:

context.fillStyle = '#000'

for (let i = 0; i < line.length / 2 - 1; i++) {

    let e = line[i * 2 + 1]

    context.fillRect(e.x, e.y, e.width, e.height)

}

context.fillStyle = '#fff'

for (let i = 0; i < line.length / 2 - 1; i++) {

    let e = line[i * 2]
    
    context.fillRect(e.x, e.y, e.width, e.height)

}

前后比较看,虽然循环次数没变,但循环内调用的语句变少了,即不在循环内修改canvas状态了。

实质:减少canvas api的调用,不用在每次根据对象属性去修改canvas的状态,而是将具有相同状态的对象提出,批量渲染。

分层和局部重绘

场景:针对场景中大背景变化缓慢,而角色的状态变换频繁

实现:将场景按状态变换快慢进行层次划分,设置不同的透明度和z-index进行层级叠加。

实质:通过分层,对连续帧中的相同场景不重复渲染,减少渲染所需的canvas api的调用。

但在微信小游戏中,本方法不能使用,因为微信小游戏中有全局唯一canvas,其他canvas都是离屏canvas,不能显示。

requestAnimationFrame

这个不存在什么场景,就是一把梭,无脑直接上RAF,别再setInterval了。

简单点说,RAF是浏览器根据页面渲染的情况,自行选择下一帧绘制的时机。

但是有一个tip需要注意,RAF不管理回调函数,即在RAF回调被执行前,如果RAF多次调用,其回调函数也会多次调用。所以需要做好防抖节流。不然会导致RAF的回调函数在同一帧中重复调用,造成不必要的计算和渲染的消耗。

const animation = timestamp => console.log('animation called at', timestamp)

window.requestAnimationFrame(animation)
window.requestAnimationFrame(animation)

内存优化

对象池

场景:针对游戏中需要频繁更新和删除 的角色

实现:对象池维护一个装着空闲对象的池子,如果需要对象的时候,不是直接new,而是从对象池中取出,如果对象池中没有空闲对象,则新建一个空闲对象。

const __ = {
  poolDic: Symbol('poolDic')
}

/**
 * 简易的对象池实现
 * 用于对象的存贮和重复使用
 * 可以有效减少对象创建开销和避免频繁的垃圾回收
 * 提高游戏性能
 */
export default class Pool {
  constructor() {
    this[__.poolDic] = {}
  }

  /**
   * 根据对象标识符
   * 获取对应的对象池
   */
  getPoolBySign(name) {
    return this[__.poolDic][name] || ( this[__.poolDic][name] = [] )
  }

  /**
   * 根据传入的对象标识符,查询对象池
   * 对象池为空创建新的类,否则从对象池中取
   */
  getItemByClass(name, className) {
    let pool = this.getPoolBySign(name)

    let result = (  pool.length
                  ? pool.shift()
                  : new Object()  )

    return result
  }

  /**
   * 将对象回收到对象池
   * 方便后续继续使用
   */
  recover(name, instance) {
    this.getPoolBySign(name).push(instance)
  }
}

实质:减少内存的使用。每次创建一个对象,都需要分配一点内存,而由于浏览器的回收机制,导致会有大量无用的对象的累加,白白消耗大量的内存。


多线程

Worker

场景:针对需要进行大量计算任务

实现:使用worker单独开启线程进行并行计算,主线程仍执行自己的任务。

实质就是并行计算,避免进程堵塞。任务计算需要的时间是不会减少的,形象点来说就是从一条腿走路变成两条腿走路

//main.js
//创建worker线程
let worker = new Worker('worker.js')
//监听worker线程的返回事件
worker.onmessage = (e) => {
    //e worker线程的返回对象
}
//发送消息
worker.postMessage(obj)

//worker.js
//监听主线程的执行请求
onmessage = (e) => {
    //执行对象e
    
    postMessage(result)
}

实质:并行计算,可以认为计算任务与主线程工作是异步的,互不干扰。因为是将计算任务全部交给worker,所有计算时间是不会减少的。

对象池不仅可以针对对象,还可以针对worker进行线程池的管理,有兴趣的朋友可以试试。


其实除了上述3个方面,还有一个非常重要的优化目标,那就是网络优化,但这也是我们常说的浏览器性能优化的终点内容,所以关于网络优化,各位就请移步其他大神的文章,我也就不再卖弄我那一点三脚猫技术了。各位朋友有什么其他的优化措施的,欢迎交流。