Tiled Wizard TilingSprite

In some games with infinite backgrounds, tile sprites can be used to achieve seamless background connection, similar to the background-repeat: repeat; function in css, and a renderer needs to be installed before use.

Demo

Install

With NPM

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

In Browser

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

Usage

  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)

Options

resource: String

Resource name

tileScale: {x: float, y: float}

Zoom

tilePosition: {x: number, y: number}

Displacement