精灵图 Sprite

      精灵图是将多张图片打包的一张图片，可以减少 HTTP 请求次数，节省内存空间，使用前需要安装渲染器。

      Demo

      安装

      使用 NPM

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

      在浏览器中

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

      使用

      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)

      参数

      resource: String

      资源名称

      spriteName： String

      精灵图 id

      ,