diff --git a/docs/maps/animations.md b/docs/maps/animations.md
new file mode 100644
index 00000000..276f2332
--- /dev/null
+++ b/docs/maps/animations.md
@@ -0,0 +1,33 @@
+{.section-title.accent.text-primary}
+# Animating WorkAdventure maps
+
+A tile can run an animation in loops, for example to render water or blinking lights. Each animation frame is a single
+32x32 tile. To create an animation, edit the tileset in Tiled and click on the tile to animate (or pick a free tile to
+not overwrite existing ones) and click on the animation editor:
+
+
+
+
+
+
+You can now add all tiles that should be part of the animation via drag and drop to the "playlist" and adjust the frame duration:
+
+
+
+
+ The tile animation editor
+
+
+
+You can preview animations directly in Tiled, using the "Show tile animations" option:
+
+
+
+
+
+ The Show Tile Animations option
+
+
+
+{.alert.alert-info}
+**Tip:** The engine does tile-updates every 100ms, animations with a shorter frame duration will most likely not look that good or may even do not work.
diff --git a/docs/maps/api-ui.md b/docs/maps/api-ui.md
index edda8613..f15de5df 100644
--- a/docs/maps/api-ui.md
+++ b/docs/maps/api-ui.md
@@ -1,5 +1,5 @@
{.section-title.accent.text-primary}
-# API Room functions Reference
+# API UI functions Reference
### Opening a popup
diff --git a/front/package.json b/front/package.json
index 58fda2d8..74edf9d7 100644
--- a/front/package.json
+++ b/front/package.json
@@ -44,6 +44,7 @@
"generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0",
"phaser": "^3.54.0",
+ "phaser-animated-tiles": "workadventure/phaser-animated-tiles#da68bbededd605925621dd4f03bd27e69284b254",
"phaser3-rex-plugins": "^1.1.42",
"queue-typescript": "^1.0.1",
"quill": "1.3.6",
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 09785e0b..d21a125b 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -98,6 +98,8 @@ import {EmoteManager } from "./EmoteManager";
import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
import { MenuScene, MenuSceneName } from '../Menu/MenuScene';
+import AnimatedTiles from "phaser-animated-tiles";
+
export interface GameSceneInitInterface {
initPosition: PointInterface | null,
reconnecting: boolean
@@ -143,6 +145,7 @@ export class GameScene extends DirtyScene implements CenterListener {
Map!: Phaser.Tilemaps.Tilemap;
Objects!: Array;
mapFile!: ITiledMap;
+ animatedTiles!: AnimatedTiles;
groups: Map;
startX!: number;
startY!: number;
@@ -267,6 +270,7 @@ export class GameScene extends DirtyScene implements CenterListener {
message: this.originalMapUrl ?? file.src
});
});
+ this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles');
this.load.on('filecomplete-tilemapJSON-' + this.MapUrlFile, (key: string, type: string, data: unknown) => {
this.onMapLoad(data);
});
@@ -466,6 +470,9 @@ export class GameScene extends DirtyScene implements CenterListener {
this.initCamera();
+ this.animatedTiles.init(this.Map);
+ this.events.on('tileanimationupdate', () => this.dirty = true);
+
this.initCirclesCanvas();
// Let's pause the scene if the connection is not established yet
diff --git a/front/yarn.lock b/front/yarn.lock
index a96be8aa..f0159242 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -4098,6 +4098,10 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
+phaser-animated-tiles@workadventure/phaser-animated-tiles#da68bbededd605925621dd4f03bd27e69284b254:
+ version "2.0.2"
+ resolved "https://codeload.github.com/workadventure/phaser-animated-tiles/tar.gz/da68bbededd605925621dd4f03bd27e69284b254"
+
phaser3-rex-plugins@^1.1.42:
version "1.1.47"
resolved "https://registry.yarnpkg.com/phaser3-rex-plugins/-/phaser3-rex-plugins-1.1.47.tgz#89299369437a0032ad31c64e89a26d20fd8a5867"
diff --git a/maps/tests/animated_tiles.json b/maps/tests/animated_tiles.json
new file mode 100644
index 00000000..65ac3b97
--- /dev/null
+++ b/maps/tests/animated_tiles.json
@@ -0,0 +1,120 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+ {
+ "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ "height":10,
+ "id":1,
+ "name":"floor",
+ "opacity":1,
+ "type":"tilelayer",
+ "visible":true,
+ "width":10,
+ "x":0,
+ "y":0
+ },
+ {
+ "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+ "height":10,
+ "id":2,
+ "name":"start",
+ "opacity":1,
+ "type":"tilelayer",
+ "visible":true,
+ "width":10,
+ "x":0,
+ "y":0
+ },
+ {
+ "draworder":"topdown",
+ "id":3,
+ "name":"floorLayer",
+ "objects":[
+ {
+ "height":261.73266830836,
+ "id":3,
+ "name":"",
+ "rotation":0,
+ "text":
+ {
+ "color":"#ffffff",
+ "fontfamily":"Sans Serif",
+ "pixelsize":11,
+ "text":"Test:\nOpen this page\n\nResult:\nThe water tileset should be animated",
+ "wrap":true
+ },
+ "type":"",
+ "visible":true,
+ "width":252.4375,
+ "x":46.5894222943362,
+ "y":34.2876372135732
+ }],
+ "opacity":1,
+ "type":"objectgroup",
+ "visible":true,
+ "x":0,
+ "y":0
+ }],
+ "nextlayerid":8,
+ "nextobjectid":5,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"2021.03.23",
+ "tileheight":32,
+ "tilesets":[
+ {
+ "columns":8,
+ "firstgid":1,
+ "image":"animated_tiles.png",
+ "imageheight":32,
+ "imagewidth":256,
+ "margin":0,
+ "name":"animated_tiles",
+ "spacing":0,
+ "tilecount":8,
+ "tileheight":32,
+ "tiles":[
+ {
+ "animation":[
+ {
+ "duration":100,
+ "tileid":0
+ },
+ {
+ "duration":100,
+ "tileid":1
+ },
+ {
+ "duration":100,
+ "tileid":2
+ },
+ {
+ "duration":100,
+ "tileid":3
+ },
+ {
+ "duration":100,
+ "tileid":4
+ },
+ {
+ "duration":100,
+ "tileid":5
+ },
+ {
+ "duration":100,
+ "tileid":6
+ },
+ {
+ "duration":100,
+ "tileid":7
+ }],
+ "id":0
+ }],
+ "tilewidth":32
+ }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.5,
+ "width":10
+}
\ No newline at end of file
diff --git a/maps/tests/animated_tiles.png b/maps/tests/animated_tiles.png
new file mode 100644
index 00000000..19ac1e05
Binary files /dev/null and b/maps/tests/animated_tiles.png differ
diff --git a/maps/tests/index.html b/maps/tests/index.html
index 2ef0216c..0929ab83 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -154,6 +154,14 @@
Testing show or hide a layer by Scripting API
+
+
+ Success Failure Pending
+
+
+ Test animated tiles
+
+