Image

The Image component provides the GameObject with the ability to use Image. The Image loaded by resource can be added to the GameObject for display. Renderer needs to be installed before use

Demo

Install

With NPM

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

In Browser

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

Usage

  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. // Add image resources
  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. // Create game, add renderer
  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. // Create 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. // Add Image Component to the game object
  47. image.addComponent(
  48.   new Img({
  49.     resource:'imageName'
  50.   })
  51. )
  53. game.scene.addChild(image)

Options

resource: String

Resource name. The resource name here corresponds to the resource name in the resource information passed in by calling resource.addResource.