快速开始

Demo 项目

基于 webpack 创建的 demo 项目：https://github.com/eva-engine/start-demo 使用CDN的方式开发互动游戏：https://github.com/eva-engine/start-demo 多平台发布的脚手架，支持Web/微信小游戏: https://github.com/eva-engine/eva-multi-platform-demo

安装

使用 NPM

  1. npm install @eva/eva.js

在浏览器中

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

Introduce Eva.js in the form of CDN in the browser, all objects will be bound to window.EVA, and the plugins used in the future will be bound to window.EVA.plugin. For details, please refer to: [Development based on CDN] (cdnIntro)

创建画布

Eva.js 依赖于 HTML 中的 canvas 进行绘制。如果设计稿中的宽高是固定的（例如 750px*1000px）又占满全屏，我们可以设置 canvas 的 css 宽度为 100%，高度为 auto。

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

添加资源

在创建游戏之前，我们需要添加资源文件到资源管理器中，这里我们添加两个图片资源。当然还可以添加龙骨动画、spine 动画资源，更多请看资源管理。

  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. ])

创建游戏

Eva.js 内核是一个非常轻量级的运行时，其他功能都是通过插件的方式实现的，如果想实现游戏最基础的渲染能力，需要安装渲染插件 @eva/plugin-renderer。

  1. npm i @eva/plugin-renderer
  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, // 可选，游戏帧率，默认60
  18.   autoStart: true, // 可选，自动开始
  19.   systems: [rendererSystem]
  20. })

当然这样只让 Eva.js 有了基础的渲染能力，但是 canvas 上还没有展示任何元素，接下来我们将添加 gameObject，它将会展现在画布上。

添加游戏对象

创建完游戏后，我们需要在游戏里面添加一个游戏对象，并且给游戏对象添加组件。游戏对象是游戏中最基本的可操作单位，而组件则赋予了游戏对象各种能力，比如 Img 组件让一个 gameObject 展示一张图片。

  • 使用 NPM
  1. npm i @eva/plugin-renderer
  • 在浏览器中
  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>
  6. <script src="//unpkg.com/@eva/plugin-renderer-img@1.2.x/dist/EVA.plugin.renderer.img.min.js"></script>
  1. import { GameObject } from '@eva/eva.js'
  2. import { Img, ImgSystem } from '@eva/plugin-renderer-img' // 引入渲染图片所需要的组件和系统
  4. game.addSystem(new ImgSystem()) // 给游戏添加渲染图片的能力
  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) // 把游戏对象放入场景，这样画布上就可以显示这张图片了

组件管理

获取组件

方式 1：创建时保留组件

  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)

方式 2：创建后从游戏对象上获取

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

修改组件属性

  1. img.resource = 'image2' // 切换资源名称，要确保资源已经被添加到资源管理器

准备好了吗？

刚刚介绍了 Eva.js 最简单的 demo，接下来我们看一些 2D 互动游戏常用能力。