图片 Image

Image 组件为 GameObject 提供了使用过图片的能力，可以将 resource 加载的图片添加到 GameObject 上展示出来。使用前需要安装渲染器

Demo

安装

使用 NPM

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

在浏览器中

  1. <script src="https://unpkg.com/@eva/plugin-renderer-img@1.1.x/dist/EVA.plugin.renderer.img.min.js"></script>

使用

  1. import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js'
  2. import { RendererSystem } from '@eva/plugin-renderer'
  3. import { Img, ImgSystem } from '@eva/plugin-renderer-img'
  5. // 添加图片资源
  6. resource.addResource([
  7.   {
  8.     name: 'imageName',
  9.     type: RESOURCE_TYPE.IMAGE,
  10.     src: {
  11.       image: {
  12.         type: 'png',
  13.         url: 'https://gw.alicdn.com/imgextra/i1/O1CN01376pu91tylcmKqXIt_!!6000000005971-2-tps-658-1152.png'
  14.       }
  15.     },
  16.     preload: true
  17.   }
  18. ])
  20. // 创建 game，添加渲染器
  21. const game = new Game({
  22.   systems: [
  23.     new RendererSystem({
  24.       canvas: document.querySelector('#canvas'),
  25.       width: 750,
  26.       height: 1000
  27.     }),
  28.     new ImgSystem()
  29.   ]
  30. })
  32. // 创建 game object
  33. const image = new GameObject('image', {
  34.   size: { width: 750, height: 1319 },
  35.   origin: { x: 0, y: 0 },
  36.   position: {
  37.     x: 0,
  38.     y: -319
  39.   },
  40.   anchor: {
  41.     x: 0,
  42.     y: 0
  43.   }
  44. })
  46. // 为 game object 添加 Image Component
  47. image.addComponent(
  48.   new Img({
  49.     resource: 'imageName'
  50.   })
  51. )

参数

resource: String

资源名，这里的资源名对应的是调用 resource.addResource 传入的资源信息中的资源名。