Quick start

Demo project

Demo project created based on webpack: https://github.com/eva-engine/start-demo

Demo project created based on webpack with cdn: https://github.com/eva-engine/start-demo-with-cdn

Demo project build for multi platform(Web/Wechat minigame): https://github.com/eva-engine/eva-multi-platform-demo

Install

With NPM

  1. npm install @eva/eva.js

In Browser

  1. <script src="https://unpkg.com/@eva/eva.js@1.2.x/dist/EVA.min.js"></script>

在浏览器中以CDN的形式引入Eva.js，所有的对象将会绑定在 window.EVA 上，未来所用到的插件都会绑定在window.EVA.plugin上。详情参考：基于CDN开发

Create a canvas

Eva.js relies on canvas in HTML for drawing. If the width and height in the design draft are fixed (for example, 750px*1000px) and occupy the full screen, we can set the CSS width of the canvas to 100% and the height to auto.

  1. <style>
  2.   #canvas {
  3.     width: 100%;
  4.     height: auto;
  5.   }
  6. </style>
  7. <canvas id="canvas"></canvas>

Add resource

Before creating the game, we need to add resource files to the resource manager, here we add two image resources. Of course, you can add keel animation and spine animation resources. For more information, please see Resource Management.

  1. import {resource, RESOURCE_TYPE} from '@eva/eva.js'
  3. resource.addResource([
  4.   {
  5.     name:'image1',
  6.     type: RESOURCE_TYPE.IMAGE,
  7.     src: {
  8.       image: {
  9.         type:'png',
  10.         url:'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp'
  11.       }
  12.     },
  13.     preload: true
  14.   },
  15.   {
  16.     name:'image2',
  17.     type: RESOURCE_TYPE.IMAGE,
  18.     src: {
  19.       image: {
  20.         type:'png',
  21.         url:'https://gw.alicdn.com/tfs/TB15Upxqk9l0K4jSZFKXXXFjpXa-750-1624.jpg'
  22.       }
  23.     },
  24.     preload: true
  25.   }
  26. ])

Create a game

The Eva.js kernel is a very lightweight runtime, and other functions are implemented through plug-ins. If you want to achieve the most basic rendering capabilities of the game, you need to install the rendering plug-in @eva/plugin-renderer.

  • With NPM
  1. npm i @eva/plugin-renderer
  • In Browser
  1. <!-- import PixiJS -->
  2. <script src="//unpkg.com/pixi.js@4.8.9/dist/pixi.min.js"></script>
  3. <!-- import RendererAdapter -->
  4. <script src="//unpkg.com/@eva/renderer-adapter@1.2.x/dist/EVA.rendererAdapter.min.js"></script>
  5. <script src="https://unpkg.com/@eva/plugin-renderer@1.2.x/dist/EVA.plugin.renderer.min.js"></script>
  1. import {Game} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  4. // Create a rendering system
  5. const rendererSystem = new RendererSystem({
  6.   canvas: document.querySelector('#canvas'), // Optional, automatically generated canvas hanging on game.canvas
  7.   width: 750,
  8.   height: 1000,
  9.   transparent: false,
  10.   resolution: window.devicePixelRatio / 2, // Optional, if it is 2 times the image design, it can be divided by 2
  11.   enableScroll: true, // Enable page scrolling
  12.   renderType: 0 // 0: automatic judgment, 1: WebGL, 2: Canvas, it is recommended to use Canvas below android6.1 ios9, business judgment is required.
  13. })
  15. // Create GameObject
  16. const game = new Game({
  17.   frameRate: 60, // Optional, game frame rate, default 60
  18.   autoStart: true, // optional, start automatically
  19.   systems: [rendererSystem]
  20. })

Of course, this only allows Eva.js to have basic rendering capabilities, but no elements have been displayed on the canvas. Next, we will add gameObject, which will be displayed on the canvas.

Add GameObject

After creating the game, we need to add a GameObject to the game, and add component to the GameObject. The GameObject is the most basic operable unit in the game, and the component gives the GameObject various abilities. For example, the Img component allows a gameObject to display a picture.

  1. npm i @eva/plugin-renderer @eva/plugin-renderer-img
  1. import { GameObject } from '@eva/eva.js'
  2. import {Img, ImgSystem} from '@eva/plugin-renderer-img' // Introduce the components and systems needed to render pictures
  4. game.addSystem(new ImgSystem()) // Add the ability to render pictures to the game
  6. const gameObject = new GameObject('gameObj1', {
  7.   size: {
  8.     width: 658,
  9.     height: 1152
  10.   }
  11. })
  13. gameObject.addComponent(
  14.   new Img({
  15.     resource:'image1'
  16.   })
  17. )
  19. game.scene.addChild(gameObject) // Put the GameObject into the scene so that the picture can be displayed on the canvas

Component Management

Get components

Method 1: Keep components when creating

  1. const img = gameObject.addComponent(
  2.   new Img({
  3.     resource:'image1'
  4.   })
  5. )
  6. // or
  7. const img = new Img({ resource:'image1' })
  8. gameObject.addComponent(img)

Method 2: Obtain from the GameObject after creation

  1. const img = gameObject.getComponent(Img)
  2. // or
  3. const img = gameObject.getComponent('Img')

Modify component properties

  1. img.resource ='image2' // Switch the resource name, make sure the resource has been added to the resource manager

Are you ready?

Just introduced the simplest demo of Eva.js, let’s look at some 2D interactive games Common Ability.