精灵图 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.0.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'
  4. resource.addResource([
  5. {
  6. name: 'spriteName',
  7. type: RESOURCE_TYPE.SPRITE,
  8. src: {
  9. image: {
  10. type: 'png',
  11. url: 'https://gw.alicdn.com/tfs/TB1ONLxOAL0gK0jSZFAXXcA9pXa-900-730.png'
  12. },
  13. json: {
  14. type: 'json',
  15. url: 'https://pages.tmall.com/wow/eva/ad317f6aea149d9a8b34a517e5df2caf.json'
  16. }
  17. },
  18. preload: true
  19. }
  20. ])
  21. const game = new Game({
  22. systems: [
  23. new RendererSystem({
  24. canvas: document.querySelector('#canvas'),
  25. width: 750,
  26. height: 1000,
  27. backgroundColor: 0x101010
  28. }),
  29. new SpriteSystem()
  30. ]
  31. })
  32. const gameObj1 = new GameObject('gameObject1', {
  33. size: { width: 200, height: 244 },
  34. position: {
  35. x: 0,
  36. y: 0
  37. }
  38. })
  39. const spriteCom1 = new Sprite({
  40. resource: 'spriteName',
  41. spriteName: 'symbol_1'
  42. })
  43. gameObj1.addComponent(spriteCom1)

参数

resource: String

资源名称

spriteName: String

精灵图 id