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

添加系统

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

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

获取系统

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

开始游戏

  1. game.start()

暂停游戏

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

  1. game.pause()

多场景管理

切换场景

  1. import { Scene } from '@eva/eva.js'
  2. const scene = new Scene('bg')
  3. game.loadScene({
  4. scene,
  5. type: LOAD_SCENE_MODE.SINGLE
  6. })

渲染到多个 canvas

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

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