平铺精灵 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.2.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}

      位移

      ,