Plugin.md 5.3 KB
Newer Older
O
migrate  
oceanxiao 已提交
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
# 使用Loader进行游游戏加载

## 一、什么是Unity Loader?
Unity Loader是在微信小游戏环境加载Unity WebGL游戏的加载与适配器,使用微信小游戏插件技术开发,功能包括:
- WebAssembly代码分包加载与编译
- 资源加载与编译
- 启动进度显示
- 缓存策略
- 数据上报

## 二、如何使用Unity Loader插件
生成微信小游戏项目时,转换工具会在`game.json`中声明:
```json
"plugins": {
    "UnityPlugin": {
        "version": "major.minor.patch", // 可切换版本号
        "provider": "wxe5a48f1ed5f544b7",
        "contexts": [
            {
                "type": "isolatedContext"
            }
        ]
    }
}
```
这部分配置表示使用Unity Loader插件进行游戏加载,开发者无需手动修改

首次使用时,会提示添加插件,按提示添加即可
<image src="../image/addPlugin.png">

## 三、配置Unity Loader功能
### 3.1 封面视频
O
oceanxiao 已提交
33
由于Unity WebGL启动加载需要一定时间,因此需要使用视频或图片等内容作为过渡以留住玩家。Unity Loader默认使用视频+进度信息呈现,开发者可以自定义封面视频,可参考[启动Loader视频规范](video.md)进行配置。
O
migrate  
oceanxiao 已提交
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144


### 3.2 预加载资源
为了充分利用网络带宽,在网络空闲时,比如下载完小游戏分包和首包资源后,可以预加载游戏需要用到的AB包。
``` js
let managerConfig = {
  /* 省略其他配置 */

  /** 
   * 假设: AB包打包到 path1/StreamingAssets/WebGL这个目录下; STREAMING_CDN是以path1为根路径上传到服务器的CDN地址
   */
  // 需要在网络空闲时预加载的资源,支持如下形式的路径。
  preloadDataList: [
    // '$STREAM_CDN/StreamingAssets/WebGL/textures_8d265a9dfd6cb7669cdb8b726f0afb1e',
    // '/WebGL/sounds_97cd953f8494c3375312e75a29c34fc2'
  ],
}
```

## 3.3 缓存策略
由于缓存目录最大不可超过200M,在下载资源包、下载AB包时,若剩余空间不足以缓存,会进行缓存淘汰。目前规则比较简单,如下:
1. 如果所需空间过大,超过最大限制:下载完成后不缓存文件,也不执行清理逻辑,直接返回下载内容。
2. 清理部分文件可以缓存新文件:按最近使用时间从前往后排序清理,直到清理出所需空间。

> 因为文件解压只能解压到用户目录,所以,若压缩文件过大,无法解压到用户目录时,会返回失败。
 

### 3.4 可交互视频
***这个配置目前不是对所有游戏适用***
可交互视频相比默认版本的启动页,交互性更强,用户可以通过操作(目前是点击)来切换画面。
可交互视频实际是多段视频,通过点击来切换视频。
视频是流式加载,但也需要平衡好视频质量和视频大小,避免抢占带宽,影响游戏主要启动流程。
``` js
// 是否开启可交互视频
const NEED_INTERACTION = false

// 需要使用可交互视频方案时,需要引入这两个文件
import PageManager from './loading/pageManager'
import VideoManager from './loading/videoManager'

if (NEED_INTERACTION) {
  const videoManager = new VideoManager({
    // 填写一个或多个视频视频地址,可选择传入视频封面
    videoList: [
      // {
      //   src: '',
      //   poster: ''
      // },
      // {
      //   src: '',
      //   poster: ''
      // }
    ]
  })
  const pageManager = new PageManager({
    // jumpBtnImg: 'images/jump-btn.png', // 跳过按钮图片地址,可本地,可远程
    // continueBtnImg: 'images/PageTip.png', // 点击继续按钮图片地址,可本地,可远程
  })
  managerConfig = {
    ...managerConfig,
    // 可交互视频相关配置
    finalPageVideoUrl: '', // 点击跳过后,循环播放的视频地址,不传默认使用LOADING_VIDEO_URL
    videoManager,
    pageManager,
    probability: 0.3, // 可交互视频出现概率
  }

  // 点击跳过按钮
  pageManager.eventEmitter.once('jumpClick', () => {
    const gameManager = GameGlobal.manager
    if (gameManager) {
      gameManager.reportJump()
      gameManager.showFinalPage()
    }
  })
  // 点击继续按钮
  pageManager.eventEmitter.on('continueClick', () => {
    videoManager.continue()
  })
  // 可交互视频播放完毕
  videoManager.once('allvideoEnd', () => {
    const gameManager = GameGlobal.manager
    pageManager.hideContinueBtn()
    gameManager && gameManager.showFinalPage()
  })
  // 每段视频开始前,隐藏点击继续按钮
  videoManager.on('oneVideoStart', () => {
    pageManager.hideContinueBtn()
  })
  // 每段视频播放完毕,显示点击继续按钮
  videoManager.on('oneVideoEnd', () => {
    pageManager.showContinueBtn()
  })
}
```
### 3.5 手动可配置参看
`game.js`中修改插件配置
### 基本配置
```js
let managerConfig = {
  DATA_FILE_MD5: "$DATA_MD5", // 转换脚本自动填写,无需关注
  CODE_FILE_MD5: "$CODE_MD5", // 转换脚本自动填写,无需关注
  GAME_NAME: "$GAME_NAME", // 转换脚本自动填写,无需关注
  DATA_FILE_SIZE: "$DATA_FILE_SIZE", // 资源文件大小,自动填写无需关注

  APPID: "$APP_ID", // 转换脚本自动填写,无需关注
  LOADING_VIDEO_URL: "$LOADING_VIDEO_URL", // 默认加载视频地址
  DATA_CDN: "$DEPLOY_URL", // 下载资源文件的CDN
  STREAMING_CDN: "$STREAM_CDN", // AB包存放地址,有用到AB包时需要填写
}
```