new TileSprite(game, x, y, width, height, key, frame)
A TileSprite is a Sprite that has a repeating texture. The texture can be scrolled and scaled independently of the TileSprite itself.
Textures will automatically wrap and are designed so that you can create game backdrops using seamless textures as a source.
TileSprites have no input handler or physics bodies by default, both need enabling in the same way as for normal Sprites.
You shouldn't ever create a TileSprite any larger than your actual screen size. If you want to create a large repeating background
that scrolls across the whole map of your game, then you create a TileSprite that fits the screen size and then use the tilePosition
property to scroll the texture as the player moves. If you create a TileSprite that is thousands of pixels in size then it will
consume huge amounts of memory and cause performance issues. Remember: use tilePosition
to scroll your texture and tileScale
to
adjust the scale of the texture - don't resize the sprite itself or make it larger than it needs.
An important note about texture dimensions:
When running under Canvas a TileSprite can use any texture size without issue. When running under WebGL the texture should ideally be
a power of two in size (i.e. 4, 8, 16, 32, 64, 128, 256, 512, etc pixels width by height). If the texture isn't a power of two
it will be rendered to a blank canvas that is the correct size, which means you may have 'blank' areas appearing to the right and
bottom of your frame. To avoid this ensure your textures are perfect powers of two.
TileSprites support animations in the same way that Sprites do. You add and play animations using the AnimationManager. However
if your game is running under WebGL please note that each frame of the animation must be a power of two in size, or it will receive
additional padding to enforce it to be so.
Parameters
Name | Type | Description |
---|---|---|
game | Phaser.Game | A reference to the currently running game. |
x | number | The x coordinate (in world space) to position the TileSprite at. |
y | number | The y coordinate (in world space) to position the TileSprite at. |
width | number | The width of the TileSprite. |
height | number | The height of the TileSprite. |
key | string | Phaser.BitmapData | PIXI.Texture | This is the image or texture used by the TileSprite during rendering. It can be a string which is a reference to the Phaser Image Cache entry, or an instance of a PIXI.Texture or BitmapData. |
frame | string | number | If this TileSprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index. |
- Source code: gameobjects/TileSprite.js (Line 59)
Please login to continue.