平铺精灵 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'
  5. resource.addResource([
  6.   {
  7.     name: 'imageName',
  8.     type: RESOURCE_TYPE.IMAGE,
  9.     src: {
  10.       image: {
  11.         type: 'png',
  12.         url: 'https://gw.alicdn.com/tfs/TB1t7vtOvb2gK0jSZK9XXaEgFXa-300-431.png'
  13.       }
  14.     },
  15.     preload: true
  16.   }
  17. ])
  19. const game = new Game({
  20.   systems: [
  21.     new RendererSystem({
  22.       canvas: document.querySelector('#canvas'),
  23.       width: 750,
  24.       height: 1000
  25.     }),
  26.     new TilingSpriteSystem()
  27.   ]
  28. })
  30. const tilingSprite = new GameObject('sprite', {
  31.   size: { width: 750, height: 1000 }
  32. })
  34. tilingSprite.addComponent(
  35.   new TilingSprite({
  36.     resource: 'imageName',
  37.     tileScale: { x: 0.7, y: 0.7 },
  38.     tilePosition: { x: 10, y: 40 }
  39.   })
  40. )
  42. game.scene.addChild(tilingSprite)

参数

resource: String

资源名

tileScale： {x: float, y: float}

缩放

tilePosition：{x: number, y: number}

位移