平铺精灵 TilingSprite

在一些无限背景的游戏中可以通过平铺精灵来实现背景的无缝衔接,类似 css 中的 background-repeat: repeat; 功能,使用前需要安装渲染器。

Demo

安装

使用 NPM

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

在浏览器中

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

使用

  1. import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js'
  2. import { RendererSystem } from '@eva/plugin-renderer'
  3. import { TilingSprite, TilingSpriteSystem } from '@eva/plugin-renderer-tiling-sprite'
  4. resource.addResource([
  5. {
  6. name: 'imageName',
  7. type: RESOURCE_TYPE.IMAGE,
  8. src: {
  9. image: {
  10. type: 'png',
  11. url: 'https://gw.alicdn.com/tfs/TB1t7vtOvb2gK0jSZK9XXaEgFXa-300-431.png'
  12. }
  13. },
  14. preload: true
  15. }
  16. ])
  17. const game = new Game({
  18. systems: [
  19. new RendererSystem({
  20. canvas: document.querySelector('#canvas'),
  21. width: 750,
  22. height: 1000
  23. }),
  24. new TilingSpriteSystem()
  25. ]
  26. })
  27. const tilingSprite = new GameObject('sprite', {
  28. size: { width: 750, height: 1000 }
  29. })
  30. tilingSprite.addComponent(
  31. new TilingSprite({
  32. resource: 'imageName',
  33. tileScale: { x: 0.7, y: 0.7 },
  34. tilePosition: { x: 10, y: 40 }
  35. })
  36. )
  37. game.scene.addChild(tilingSprite)

参数

resource: String

资源名

tileScale: {x: float, y: float}

缩放

tilePosition:{x: number, y: number}

位移