,

      游戏 Game

      Game 是游戏对象，通过 Game 实例上的方法，控制游戏暂停、继续。通过将 System 添加到 Game 上让游戏能够支持不同的能力，这些能力都是通过组件添加到 GameObject 上展现出来的。

      创建游戏

      1. <style>
      2.   #canvas {
      3.     width: 100%;
      4.     height: auto;
      5.   }
      6. </style>
      7. <canvas id=“canvas”></canvas>
      1. import { Game } from ‘@eva/eva.js’
      2. import { RendererSystem } from ‘@eva/plugin-renderer’
      4. // 创建渲染系统
      5. const rendererSystem = new RendererSystem({
      6.   canvas: document.querySelector(‘#canvas’), // 可选，自动生成canvas 挂在game.canvas上
      7.   width: 750, // 必填
      8.   height: 1000, // 必填
      9.   transparent: false, // 可选
      10.   resolution: window.devicePixelRatio / 2, // 可选, 如果是2倍图设计 可以除以 2
      11.   enableScroll: true, // 允许页面滚动
      12.   renderType: 0 // 0:自动判断，1: WebGL，2:Canvas，建议android6.1 ios9 以下使用Canvas，需业务判断。
      13. })
      15. // 初始化游戏
      16. const game = new Game({
      17.   frameRate: 60, // 可选
      18.   autoStart: true, // 可选
      19.   systems: [rendererSystem]
      20. })

      添加系统

      有两种方式添加系统，一种是在 Game 实例化的时候，传入构造函数的 systems 参数中，比如 rendererSystem 渲染能力是必备的，可以通过这种方式添加。另外一种是在创建游戏后调用游戏实例上面的 addSystem 方法添加。Eva.js 提供了很多系统，这些系统都是作为插件单独在一个 package 中，比如，如果我们想检测帧率，可以使用 @eva/plugin-stats 插件。

      1. import { StatsSystem } from ‘@eva/plugin-stats’
      3. const statsSystem = new StatsSystem({
      4.   show: true, // 这里设置是否显示 fps 面板
      5.   style: {
      6.     x: 0, // 这里的数值全部都是屏幕宽度的百分比 单位vw
      7.     y: 50,
      8.     width: 20,
      9.     height: 12
      10.   }
      11. })
      13. game.addSystem(statsSystem)

      获取系统

      1. import { StatsSystem } from ‘@eva/plugin-stats’
      3. const stats = game.getSystem(StatsSystem) // 通过类获取系统
      4. // or
      5. const stats = game.getSystem(‘StatsSystem’) // 通过系统名获取系统

      开始游戏

      1. game.start()

      暂停游戏

      建议在应用退出到后台时暂停游戏，返回后开始

      1. game.pause()

      多场景管理

      切换场景

      1. import { Scene } from ‘@eva/eva.js’
      3. const scene = new Scene(‘bg’)
      5. game.loadScene({
      6.   scene,
      7.   mode: LOAD_SCENE_MODE.SINGLE
      8. })

      渲染到多个 canvas

      在项目中，游戏默认会渲染到一个默认 canvas 上，当我们会有渲染到多个 canvas 上的需求，可以将该场景渲染到另一个 canvas 上。

      1. import { Scene, LOAD_SCENE_MODE } from ‘@eva/eva.js’
      3. const scene = new Scene(‘bg’)
      5. game.loadScene({
      6.   scene,
      7.   mode: LOAD_SCENE_MODE.MULTI_CANVAS,
      8.   params: {
      9.     // 这里和RendererSystem 参数相同
      10.     canvas: document.querySelector(‘#canvas’), //可选，自动生成canvas 挂在game.canvas上
      11.     width: 750, //必填
      12.     height: 1000, // 必填
      13.     transparent: false, // 可选
      14.     resolution: window.devicePixelRatio / 2, // 可选, 如果是2倍图设计 可以除以 2
      15.     enableScroll: true, // 允许页面滚动
      16.     renderType: 0
      17.     // 0:自动判断，1: WebGL，2:Canvas，建议android6.1 ios9 以下使用Canvas，需业务判断。
      18.   }
      19. })

      Ticker

      增加每帧执行的方

      建议在Component中的update方法实增加每帧执行的方法，也可以使用add 方法，该方法将会在所有System的lateUpdate执行后执行

      1. game.ticker.add((e: UpdateParams)=>{
      3. })

      修改游戏播放速度

      1. game.ticker.setPlaybackRate(1.5) // 1.5倍速播放
      ,