colinvella

You may be trying to refer to a layer called "Tile Layer 1" and you have no such layer in your map. However, it is hard for me to say without looking at your code.

Check the documentation at https://www.npmjs.com/package/phaser-tilemap-plus and search for the text "Layer Custom Properties"

You could try this plugin: https://www.npmjs.com/package/phaser-tilemap-plus

I've been busy working on this over the past weeks and now it has evolved into this: https://www.npmjs.com/package/phaser-tilemap-plus You should be able to use it with legacy ES5 javascript. Tile Animation is just one of the feztures now.

Just a shameless plug for my own library, but you might want to try out this: https://www.npmjs.com/package/phaser-tilemap-plus It plugs into your code without requiring changes to how you load your map, however, you can enable tile animations with a simple call, like so: game.tilemap.plus.animation.enable(); The plugin also supports sloped and curved tile collisions and other features are planned.

Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!

I'll try.

The examples (and also the TMA source) are actually in ES6 not Typescript.

The TMA class essentially runs a background thread and changes specific tiles at specific intervals on a standard tilemap object, so all the actual rendering is done by Phaser. It's not a rewrite of tilemap, but simply an addon. Note that it's also possible to add animations manually using something like: tilemapAnimator.addAnimation([20, 21, 22, 23], 100, this.tileset); which adds an animation consisting of the 4 tile indices 20 - 23 from the specified tileset with a frame duration of 100ms. The animation is applied anywhere on the layer where there are tiles with indices 20 - 23.

I have spent some time finding out how to animate tiles in a tile map loaded from a Tiled map exported to JSON. At first I built a utility class called TileMapAnimator (TMA) to animate some tiles using manual data and eventually I extended the class so that it could load animated tile data directly from the map files. With TMA you define your animations in Tiled and load them directly into your Phaser game! I'm sharing this code in the hope that others may find it useful. If you have invested into loading Tiled maps using the built in functions, I believe you can include animations in your game with very little retrofitting. TMA can animate hundreds of tiles without any notable performance degradation. Some usage restrictions apply: In TMA, each animation uses a fixed frame interval for all the tile frames. Tiled actually allows you to specify different durations per frame. Hence TMA picks the first duration as the frame interval. TMA requires tile animations to be defined on one of the tiles included in the animation. This is because TMA scans the map layer for these tiles and sets up the animated tiles at the designated locations Only one animated tile layer is supported for now. Perhaps I will extend TMA to support animation in multiple layers. How to use TMA Import the TMA class: import TilemapAnimator from "../graphics/TilemapAnimator"; In preload(), load the tile map and associated tile sets using the built-in Phaser map loading functions: this.load.tilemap('TileMap', 'assets/maps/world1/TileMap.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('Ground', 'assets/graphics/world1/Ground.png'); Load the tile map again, but this time as a raw JSON file: this.load.json("TileMapAnimations", 'assets/maps/world1/TileMap.json'); In create(), set up the map and layers as usual: const tilemap = this.add.tilemap('TileMap'); const groundTileset = tilemap.addTilesetImage('Ground', 'Ground'); const groundLayer = tilemap.createLayer('Ground'); Create an instance of TMA, passing the game.time object, the tilemap and the layer containing the animations: const tilemapAnimator = new TilemapAnimator(this.time, tilemap, groundLayer); Load the animation into TMA, by specifying the cache key of the raw JSON object loaded in prefetch() using game.load.json(....) and start the tile animations: tilemapAnimator.addAnimationsFromTilemap("TileMapAnimations"); tilemapAnimator.start(); That's all there is to it! Note: I am no NPM expert, but if anyone is willing to turn this into an NPM package or some other practical library, please get in touch so we set it up! The TMA class file is attached below. TilemapAnimator.js

Great job! I'm aware there is a types file for Typescript, but how do you use Slopes in a Typescript-based phaser game? Is there a Typescript/Arcade Slopes tutorial or demo code?

Hi, I am trying to use the Arcade-Slopes plugin in Typescript, but I'm not sure how to do it. I added a ref to the .d.ts file in tsconfig.json: "files": [ "./src/app.ts", "./vendor/phaser.d.ts", "./vendor/phaser-arcade-slopes.d.ts" ] This is how I'm trying to load the plugin. // enable arcade slopes plgin this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); But when I try to convert the collision layer: // Convert the collision layer to work with Arcade Slopes this.game.slopes.convertTilemapLayer(this.collisionLayer, 'arcadeslopes'); I get the following errors: src/app.ts(71,26): error TS2339: Property 'convertTilemapLayer' does not exist on type 'ArcadeSlopes'. vendor/phaser-arcade-slopes.d.ts(61,5): error TS7010: 'resolve', which lacks return-type annotation, implicitly has an 'any' return type. vendor/phaser-arcade-slopes.d.ts(156,17): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(157,14): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(238,3): error TS7010: 'clear', which lacks return-type annotation, implicitly has an 'any' return type. It looks like the arcade slopes .d.ts file isn't compiling properly either. Has anyone managed to use Arcade Slopes successfully with Typescript? I'm seriously considering restarting with plain old JS to avoid this problems.