图片 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.2.x/dist/EVA.plugin.renderer.img.min.js“></script>

      使用

      1. import { Game, GameObject, resource, RESOURCETYPE } 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. )
      53. game.scene.addChild(image)

      参数

      resource: String

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

      ,