Sprite

A sprite is a picture that packs multiple pictures, which can reduce the number of HTTP requests and save memory space. A renderer needs to be installed before use.

Demo

Install

With NPM

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

In Browser

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

Usage

  1. import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  3. import {Sprite, SpriteSystem} from '@eva/plugin-renderer-sprite'
  5. resource.addResource([
  6.   {
  7.     name:'spriteName',
  8.     type: RESOURCE_TYPE.SPRITE,
  9.     src: {
  10.       image: {
  11.         type:'png',
  12.         url:'https://gw.alicdn.com/tfs/TB1ONLxOAL0gK0jSZFAXXcA9pXa-900-730.png'
  13.       },
  14.       json: {
  15.         type:'json',
  16.         url:'https://pages.tmall.com/wow/eva/ad317f6aea149d9a8b34a517e5df2caf.json'
  17.       }
  18.     },
  19.     preload: true
  20.   }
  21. ])
  23. const game = new Game({
  24.   systems: [
  25.     new RendererSystem({
  26.       canvas: document.querySelector('#canvas'),
  27.       width: 750,
  28.       height: 1000,
  29.       backgroundColor: 0x101010
  30.     }),
  31.     new SpriteSystem()
  32.   ]
  33. })
  35. const gameObj1 = new GameObject('gameObject1', {
  36.   size: {width: 200, height: 244 },
  37.   position: {
  38.     x: 0,
  39.     y: 0
  40.   }
  41. })
  43. const spriteCom1 = new Sprite({
  44.   resource:'spriteName',
  45.   spriteName:'symbol_1'
  46. })
  48. gameObj1.addComponent(spriteCom1)

Options

resource: String

Resource Name

spriteName: String

Sprite id