# 微信小游戏性能优化方案

# 概述

在小游戏下开发重度游戏（尤其是重度 3D 游戏），则会面临一些问题：

逻辑计算部分用 JavaScript 实现过于耗时，尤其是动画、物理、渲染等模块中涉及大量矩阵运算的部分，并且很难应用多线程优化。
当渲染较重时，渲染模块占主线程的开销过重（主要来自于 JavaScript 与 C++之间的通信开销），并且难以避免。

为了解决这些问题，我们推出了小游戏性能优化方案。

# 更强的性能

首先来看一下小游戏性能优化方案与旧开发模式的架构对比：

架构对比

可以看到，小游戏性能优化方案对比现有小游戏增加了逻辑加速层与渲染加速层，将游戏中耗时部分的逻辑（如动画、渲染等）下沉至原生实现，使得小游戏能拥有更强的性能。平台提供辅助工具以便开发者对新能力接口进行学习，同时，方案中的新接口能力也是对外开放，欢迎开发者及第三方引擎方来进行适配及探讨交流。

# 开始开发游戏

打开已安装的开发者工具客户端，使用刚刚注册小游戏账号登记的微信账号“扫一扫”扫码即可进入小游戏开发环境。

选择左侧“小程序项目”中的“小游戏 Tab”，然后点击右侧“+”号，开始创建小游戏项目。

填写合适的项目名称，选择合适的本机空目录后，登录刚刚注册的小程序管理平台，如下图找到小程序的 AppID，填入表单的“AppId”文本框中。

填写完整后点击右下角“新建”按钮，即可完成创建小游戏。

在开发者工具中就能进入小游戏的可视化开发界面了。

接下来我们将使用小游戏框架提供的能力来完成绘制正方体旋转的基础功能。

# 创建正方体

开发者可以在左侧的 Hierarchy 标签中，右键 Main Camera 这个 entity 节点，创建一个正方体。然后点击选中 Cube 节点后可以在 Inspector 标签中设置他的 position 属性的 z 为 5，这样我们就能在游戏相机的视角中看到它了。

# 创建脚本组件

小游戏框架推荐使用 TypeScript 来编写小游戏逻辑。可以在 Project 标签右键创建一个脚本组件，并取名为 rotate。

然后可以把创建出来的脚本，从 Project 标签中左键拖到 Hierachy 的 Cube_1 节点上，这样子，我们就把脚本组件添加到了正方体节点上了，可以发现 Cube 节点的 Inspector 中就有一个 rotate 组件了。

# 保存场景

左上角的“保存”按钮，或是使用快捷键 Ctrl+S(command+S on MacOs)，就能把刚刚创建的游戏空间保存成一个场景资源。取一个 cube 的名字，这个资源就被落盘到了 assets/cube.scene 上。

# 让正方体旋转起来

工具内置了代码编辑器，开发者可以在 Project 中右键刚刚创建的 rotate.ts 脚本文件，使用内置编辑器打开。然后在代码中的 onUpdate 编写旋转的代码。onUpdate 生命周期会以 requestAnimationFrame 的频率刷新，并通过 this.entity 操纵到正方体所在的 entity。修改后记得保存代码。

public onUpdate(dt) {
  this.entity.transform.rotate(engine.Vector3.createFromNumber(15*dt, 30* dt, 45 * dt), true, false)
}

# 快速查看运行效果

这时候我们在最上方中间的2d/3d演示按钮中选择刚刚创建的 3D 场景：cube.scene。然后再点击播放，就能让游戏能运行起来。

播放的时候，开发者就能在 Game 标签中查看到正在旋转的正方形了，我们的游戏逻辑就运行起来了。同时也能在 hierarchy，inspector 标签查看实时的游戏状态。按停止以后可以回到编辑态。

# 构建游戏

回到编辑态以后，接下来我们要构建游戏，把游戏所需要的资源压缩打包。点击左上角编译构建 >> 构建工程，打开 Build 面板。点击“选择任务”，选择“微信小游戏”，然后点击“开始构建”，在 3D 入口场景中选择 cube.scene 场景。构建之后，所有的产物都会放置到minigame目录下。产物也可以使用模拟器预览来调试。