Game

Game is a runtime of game. Through the methods on the Game instance, the game is controlled to pause and continue. By adding the System to the Game, the game can support different abilities, which are displayed by adding components to the GameObject.

Create a game

<style>
  #canvas {
    width: 100%;
    height: auto;
  }
</style>
<canvas id="canvas"></canvas>

import {Game} from '@eva/eva.js'
import {RendererSystem} from '@eva/plugin-renderer'

// Create a rendering system
const rendererSystem = new RendererSystem({
  canvas: document.querySelector('#canvas'), // Optional, automatically generate canvas and hang on game.canvas
  width: 750, // required
  height: 1000, // required
  transparent: false, // optional
  resolution: window.devicePixelRatio / 2, // Optional, if it is 2 times the image design, it can be divided by 2
  enableScroll: true, // Enable page scrolling
  renderType: 0 // 0: automatic judgment, 1: WebGL, 2: Canvas, it is recommended to use Canvas below android6.1 ios9, business judgment is required.
})

// Initialize the game
const game = new Game({
  frameRate: 60, // optional
  autoStart: true, // optional
  systems: [rendererSystem]
})

Add system

There are two ways to add a system. One is to pass in the systems parameter of the constructor when the Game is instantiated. For example, the rendererSystem rendering capability is necessary and can be added in this way. The other is to call the addSystem method on the game instance after the game is created. Eva.js provides many systems. These systems are used as plug-ins in a package. For example, if we want to detect the frame rate, we can use the @eva/plugin-stats plug-in.

import {StatsSystem} from '@eva/plugin-stats'

const statsSystem = new StatsSystem({
  show: true, // Set here whether to display the fps panel
  style: {
    x: 0, // The values ​​here are all percentages of the screen width, unit vw
    y: 50,
    width: 20,
    height: 12
  }
})

game.addSystem(statsSystem)

Get system

import {StatsSystem} from '@eva/plugin-stats'

const stats = game.getSystem(StatsSystem) // Get system through class
// or
const stats = game.getSystem('StatsSystem') // Get system by system name

Start the game

game.start()

Pause the game

It is recommended to pause the game when the app exits to the background and start after returning

game.pause()

Multi-scene management

Switch scene

import {Scene} from '@eva/eva.js'

const scene = new Scene('bg')

game.loadScene({
  scene,
  mode: LOAD_SCENE_MODE.SINGLE
})

Render to multiple canvases

In the project, the game will be rendered on a default canvas by default. When we need to render on multiple canvases, we can render the scene on another canvas.

import {Scene, LOAD_SCENE_MODE} from '@eva/eva.js'

const scene = new Scene('bg')

game.loadScene({
  scene,
  mode: LOAD_SCENE_MODE.MULTI_CANVAS,
  params: {
    // This is the same as the RendererSystem parameter
    canvas: document.querySelector('#canvas'), //Optional, automatically generate canvas and hang on game.canvas
    width: 750, //Required
    height: 1000, // required
    transparent: false, // optional
    resolution: window.devicePixelRatio / 2, // Optional, if it is 2 times the image design, it can be divided by 2
    enableScroll: true, // Enable page scrolling
    renderType: 0
    // 0: automatic judgment, 1: WebGL, 2: Canvas, it is recommended to use Canvas under android6.1 ios9, business judgment is required.
  }
})

Ticker

add function in per frame

It is recommended that the update method in the Component add the function to be executed per frame, or you can use the add method, which will be executed after the lateUpdate of all systems is executed

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

})

修改游戏播放速度

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