Quick start

    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):

    Install

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

    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.         url:'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp'
    10.       }
    11.     },
    12.     preload: true
    13.   },
    14.   {
    15.     name:'image2',
    17.     src: {
    18.       image: {
    19.         type:'png',
    20.         url:'https://gw.alicdn.com/tfs/TB15Upxqk9l0K4jSZFKXXXFjpXa-750-1624.jpg'
    21.       }
    22.     },
    23.     preload: true
    24.   }
    25. ])

    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
    • 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.   canvas: document.querySelector('#canvas'), // Optional, automatically generated canvas hanging on game.canvas
    6.   width: 750,
    7.   height: 1000,
    9.   resolution: window.devicePixelRatio / 2, // Optional, if it is 2 times the image design, it can be divided by 2
    10.   enableScroll: true, // Enable page scrolling
    11.   renderType: 0 // 0: automatic judgment, 1: WebGL, 2: Canvas, it is recommended to use Canvas below android6.1 ios9, business judgment is required.
    12. })
    14. // Create GameObject
    15. const game = new Game({
    16.   frameRate: 60, // Optional, game frame rate, default 60
    17.   autoStart: true, // optional, start automatically
    18.   systems: [rendererSystem]
    19. })

    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

    1. npm i @eva/plugin-renderer @eva/plugin-renderer-img

    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')

    Are you ready?

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