Skip to main content

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

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

In Browser

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

Usage

import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
import {RendererSystem} from '@eva/plugin-renderer'
import {TilingSprite, TilingSpriteSystem} from '@eva/plugin-renderer-tiling-sprite'

resource.addResource([
{
name:'imageName',
type: RESOURCE_TYPE.IMAGE,
src: {
image: {
type:'png',
url:'https://gw.alicdn.com/tfs/TB1t7vtOvb2gK0jSZK9XXaEgFXa-300-431.png'
}
},
preload: true
}
])

const game = new Game({
systems: [
new RendererSystem({
canvas: document.querySelector('#canvas'),
width: 750,
height: 1000
}),
new TilingSpriteSystem()
]
})

const tilingSprite = new GameObject('sprite', {
size: {width: 750, height: 1000}
})

tilingSprite.addComponent(
new TilingSprite({
resource:'imageName',
tileScale: {x: 0.7, y: 0.7 },
tilePosition: {x: 10, y: 40}
})
)

game.scene.addChild(tilingSprite)

Options

resource: String

Resource name

tileScale: {x: float, y: float}

Zoom

tilePosition: {x: number, y: number}

Displacement

If you have any questions or need our help with development, please scan the code to contact us.
X