nkholski / phaser-animated-tiles Goto Github PK

View Code? Open in Web Editor NEW

123.0 6.0 28.0 3.01 MB

A plugin that adds support for animated tiles to Phaser 3

Home Page: http://metroid.niklasberg.se/phaser-animated-tiles/

License: MIT License

JavaScript 96.81% HTML 3.19%

phaser-animated-tiles's Introduction

Phaser 3 Animated Tiles Plugin

A simple plugin with a simple purpose: to add support for animated tiles to Phaser 3 (3.8.0+) as exported from Tiled.

The bundled example is available live here: http://metroid.niklasberg.se/phaser-animated-tiles/

The plugin is also used in this platformer example: https://github.com/nkholski/phaser3-es6-webpack

The plugin is based on Photonstorms plugin template: https://github.com/photonstorm/phaser3-plugin-template

Latest build can be found in the dist folder or NPM: https://www.npmjs.com/package/phaser-animated-tiles

Run npm install and then npm run build to build the plugin.

Features

This plugin supports unlimited maps, layers and tilesets simultaneously. There are methods to control animations globally, within specified tilemaps or layers. Those methods can control such things as playback-rate both for all tiles and for specified tiles. ATM it's up to you to keep track on indicies for maps you add and their layers. For most cases that shouldn't be a problem. If you just want to support animated tiles exactly as specified in Tiled you need three lines; one to preload the plugin, one to register it in your create method and one to initilize it for your map.

Future

I have a few stuff I would like to add, of which some might be YAGNI:

PutTile as the native API but will push the tile to the update list for that tile gid. If you put a tile over an animated tile, that tile should instead be removed from the list. The latter is just needed if the new gid is a part of the current anim, but still nice to have.
Define animations programmatically.
And if 2 is done: Allow animated rotation (probably 45 degree steps only), flipping and alpha. Tint? Stuff that Phaser supports.
Method to reset everything to their first frame.

Install repository

Clone the repository from git and run npm i and you're set to go.

Demo / Dev

The plugin is bundled with a demo which is also used for testing during development. npm run demo or npm run dev

Build plugin

Build the plugin including minified version: npm run build

How to use the plugin

1. Load the plugin

Please check out these Phaser 3 demos http://labs.phaser.io/index.html?dir=plugins/&q= for various methods to load the plugin as a scene plugin.

2. Use the plugin API

To initilize the plugin you just need to pass the tilemap you want to animate to the plugin. The plugin requires a dynamic layers to work.

function create ()
{
    this.sys.animatedTiles.init(map);
}

This is actually all you need to do but you may control the plugin calling methods with "this.sys.animatedTiles.methodName()". (The inconsistency between passing a tilemap and a mapindex will be solved by excepting both in all concerned methods. Methods to find tilemaps, layers and tiles will be added.)

Current list of methods:

Method	Args	Usage
resetRates	mapIndex?: int	Sets playback rate to 1 globally and for each individual tile, pass mapIndex to limit the method to that map
setRate	rate: int, gid?: int, map?: Phaser.Tilemap	Sets playback multiplier to 'rate'. A rate of 2 will play the animation twice as fast as configured in Tiled, and 0.5 half as fast. If a gid is specified the rate is exclusively set for that tile. If the global rate is set to 0.5 and the rate of a tile is set to 2 it will play as configured in Tiled (0.5*2 = 1). Pass tilemap to limit the method to that map.
resume	layerIndex?:int, mapIndex?:int	Resume tile animations globally if no layerIndex is set (may be overridden by layers), otherwise for that layer only. Pass mapIndex to limit the method to that map.
pause	layerIndex?:int, mapIndex?:int	Resume tile animations globally if no layerIndex is set and overrides layer settingsm, otherwise for that layer only. Pass mapIndex to limit the method to that map.
updateAnimatedTiles	TODO	Tell the plugin when you have added new animated tiles to layers after initialization. Needed to detect new animations.

phaser-animated-tiles's People

Contributors

Stargazers

Watchers

phaser-animated-tiles's Issues

tiled v1.2.0

After editing the map using the latest version of tiled, the plugin doesn't work

Lag on first frame

Either it's repeated twice or the delaytime is doubled.

Received error when loading my map

I received the following error when calling this.animatedTiles.init

Uncaught TypeError: Cannot read property 'type' of null

What I found was that if there is a layer in the tile map JSON which has not been added to the map using Phaser APIs (createStaticLayer/createDynamicLayer) then that layer will not have a 'Type' property and the animatedTiles.init fails.

Since this plugin requires animated layers to by DynamicLayers I changed line of code 410 in AnimatedTiles.js from this:

if (layer.tilemapLayer.type === "StaticTilemapLayer") {

to this:

if ((!layer.tilemapLayer) ||
    (!layer.tilemapLayer.type) ||
    (layer.tilemapLayer.type === "StaticTilemapLayer")) {

This fixed my issue because my animatedTiles.js is ignoring all layers that are not dynamic however I wanted to share this in case others hit this issue.

Plugin crash if map contains an unused layer.

When using the plugin with a map containing an unused layer (eg. only used on server side), the plugins throws an error.

Uncaught TypeError: Cannot read property 'type' of null.

Can't get the properties from the original tile.

How can we get the original tile properties? The new one doesn't have the properties...

Updates / Compatibility?

It seems like this plugin is not working for the latest version of Phaser (Phaser 3.21. 0). I can see the original changes that broke the plugin in newer Phaser versions was resolved, but I am still unable to see animated tiles, although there are no thrown errors?

`import AnimatedTiles from 'phaser-animated-tiles/dist/AnimatedTiles';

let Water: Phaser.Tilemaps.DynamicTilemapLayer;
export default class ForestC extends Phaser.Scene {
public player: Player;
public cursors: Phaser.Types.Input.Keyboard.CursorKeys;
public controls: Controls;
public spawn: any;
public direction: any;

constructor() {
super({
key: 'ForestC',
});
this.spawn = null;
this.direction = null;
}

preload(): void {
this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles');
this.load.spritesheet('player', '../../../assets/character/player.png',
{
frameWidth: 16, frameHeight: 32, margin: 0, spacing: 0,
});
this.load.image('tileset2', '../../../scenes/maps/source2.png');
this.load.image('tileset3', '../../../scenes/maps/source3.png');
this.load.tilemapTiledJSON('ForestC', '../../../scenes/maps/ForestC/ForestC.json');
}

init(data): void {
this.spawn = data.spawn || { x: 100, y: 100 };
this.direction = data.direction || 'down';
}

create(): void {
// Parse map
const tilemapLayers = [];
const map = this.make.tilemap({ key: 'ForestC' });
const tilemap = map.addTilesetImage('tileset2', 'tileset2', 16, 16, 1, 2);
// Layers
const Grass = map.createDynamicLayer('Grass', tilemap, 0, 0);
Water = map.createDynamicLayer('Water', tilemap, 0, 0);
console.log((this as any).animatedTiles);
(this as any).animatedTiles.init(map);
}

update(): void {
Water.fill(362, 0, 16, 20, 4);
(this as any).animatedTiles.updateAnimatedTiles();
}
}
`