封面插件背景

小游戏首屏启动优化有很多最佳实践，其中一个最佳实践是游戏首包仅绘制一张最简单的静态图，玩家能够在最短的时间内看到游戏元素进而提升游戏的启动留存。不少开发者也在社区分享过自己的最佳实践，如：

cocos微信小游戏启动首屏优化：https://developers.weixin.qq.com/community/develop/article/doc/000664e86b4bf007962c012a256013 

小游戏首屏启动优化：https://developers.weixin.qq.com/community/develop/article/doc/000cee6e568e80f09a9981b0c56413。

这些最佳实践的普遍思路在于不依赖游戏引擎用 WebGL 来绘制一张最简单的静态图，不依赖游戏引擎是基于首包尽可能小的出发点，仅仅绘制一张静态图是因为如果做比较复杂一点的交互需要一个相对完善一点的渲染引擎，代码包体积又会变大。

为了能够既满足启动的最佳实践又能够让封面图交互相对丰富，我们封装了封面图插件。

封面图插件介绍

封面插件将绘制静态图的 WebGL 逻辑封装在插件内，同时为了能够做更加丰富的交互，基础库内置了渲染引擎，基于渲染引擎我们能够做更加丰富的封面图模板，如静态图模板、多图切换模板、进度条模板等，其架构图如下所示：

开发者改造成本

1. 设计游戏启动封面图（依赖于设计资源，如果有图直接使用即可）；

2. 更改游戏初始化流程，将游戏代码都改成子包加载方式，首帧逻辑改为初始化插件并异步加载游戏代码执行真正的游戏初始化（1 -  2天）；

在有封面图资源的前提下，预计1 - 2 天即可完成接入；

封面图插件优势

1. 内置渲染引擎：官方维护，封面图阶段可以做到相对丰富的交互而无需游戏额外下载渲染引擎（基础库静默更新）；

2. 插件优势：不占游戏代码包体积，使用的游戏越多，玩家本地命中插件的概率越大；

3. 大DAU游戏验证：插件已邀请百万DAU级别游戏内测接入，可放心接入；

应用案例1

接入游戏：《贪吃蛇大作战》

接入表现：

1.启动封面图

2.衔接到游戏自己的资源loading界面

3.正式进入游戏

优化效果：

接入封面图插件的版本主要是对首包代码进行拆分，减小启动阶段下载量

接入前：首包3.5M

接入后：首包613KB；封面图展示阶段下载2.1M游戏必要的脚本分包

安卓：优化后总启动耗时3.8s，提升39%；

iOS：优化后启动耗时2.1s，提升44%；

应用案例2

接入游戏：《星途WeGoing》

接入表现：封面图 -> 游戏loading -> 正式进入游戏

数据效果

安卓：优化后总启动耗时 2.3s，提升34%；

iOS：优化后启动耗时 1.6s，提升33%；

接入方式

game.json声明插件

{
  "plugins": {
    "MinigameLoading": {
      "version": "latest",
      "provider": "wxbd990766293b9dc4",
      "contexts": [{
        "type": "isolatedContext"
      }]
    }
  }
}

获取contextType及contextAttributes

// 这段代码需要在游戏画面渲染后执行。避免影响游戏获取context
let ctx = GameGlobal.canvas.getContext('2d')
if (ctx) {
	console.log('contextType: 2d; ', 'contextAttributes: ', ctx.getContextAttributes())
} else {
	ctx = GameGlobal.canvas.getContext('webgl')
	console.log('contextType: webgl; ', 'contextAttributes: ', ctx.getContextAttributes())
}

game.js渲染封面

try {
  // 在加载子包前，先加载封面插件
  GameGlobal.LoadingManager = requirePlugin('MinigameLoading', {
    customEnv: {
      wx,
      canvas: GameGlobal.canvas, // 传入主屏canvas
    }
  }).default
  
  GameGlobal.LoadingManager.create({
    // 填写图片模板
    images: [{
        src: "images/p1.png",
        showDuration: 300,
        hideDelay: 1000,
        hideDuration: 300,
      },
      {
        src: "images/p2.png",
        showDuration: 300,
        hideDelay: 1000,
        hideDuration: 300,
      }
    ],
    // 接入封面插件前主屏contexttype
    contextType: 'webgl',
    // 接入封面插件前，getContext时，传入的contextAttributes
    contextAttributes: {},
  }).then(() => {
    // 封面已显示
  }).catch((err) => {})
} catch (err) {
  console.error(err)
}

隐藏封面

GameGlobal.LoadingManager.destroy().then(() => {
  // callback
})

小游戏改造示例：https://github.com/zhangjunkunn/cocos-blackjack

添加插件需要申请，请添加研发助手7号申请使用

未添加插件会在开发者工具控制台抛出错误，请点击添加插件，并联系助手通过申请。

联系我们

有任何问题（如游戏改造遇到困难，改造之后启动数据有疑惑）可以添加下面的微信号联系我们。