图片 Image

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

Demo

安装

使用 NPM

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

在浏览器中

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

使用

import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'
import { Img, ImgSystem } from '@eva/plugin-renderer-img'

// 添加图片资源
resource.addResource([
  {
    name: 'imageName',
    type: RESOURCE_TYPE.IMAGE,
    src: {
      image: {
        type: 'png',
        url: 'https://gw.alicdn.com/imgextra/i1/O1CN01376pu91tylcmKqXIt_!!6000000005971-2-tps-658-1152.png'
      }
    },
    preload: true
  }
])

// 创建 game，添加渲染器
const game = new Game({
  systems: [
    new RendererSystem({
      canvas: document.querySelector('#canvas'),
      width: 750,
      height: 1000
    }),
    new ImgSystem()
  ]
})

// 创建 game object
const image = new GameObject('image', {
  size: { width: 750, height: 1319 },
  origin: { x: 0, y: 0 },
  position: {
    x: 0,
    y: -319
  },
  anchor: {
    x: 0,
    y: 0
  }
})

// 为 game object 添加 Image Component
image.addComponent(
  new Img({
    resource: 'imageName'
  })
)

game.scene.addChild(image)

参数

resource: String

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