Merge branch 'develop' of github.com:thecodingmachine/workadventure into metadataScriptingApi

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:
+
+
+<div class="px-5 card rounded d-inline-block">
+    <img class="document-img" src="https://workadventu.re/img/docs/anims/camera.png" alt="" />
+</div>
+
+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:
+
+<div>
+    <figure class="figure">
+        <img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/animation_editor.png" alt="" />
+        <figcaption class="figure-caption">The tile animation editor</figcaption>
+    </figure>
+</div>
+
+You can preview animations directly in Tiled, using the "Show tile animations" option:
+
+
+<div>
+    <figure class="figure">
+        <img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/settings_show_animations.png" alt="" />
+        <figcaption class="figure-caption">The Show Tile Animations option</figcaption>
+    </figure>
+</div>
+
+{.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.

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
 

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",

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<Phaser.Physics.Arcade.Sprite>;
     mapFile!: ITiledMap;
+    animatedTiles!: AnimatedTiles;
     groups: Map<number, Sprite>;
     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

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"

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
+}

maps/tests/index.html

@@ -154,6 +154,14 @@
                     <a href="#" class="testLink" data-testmap="Metadata/showHideLayer.json" target="_blank">Testing show or hide a layer by Scripting API</a>
                 </td>
             </tr>
+            <tr>
+                <td>
+                    <input type="radio" name="test-animated-tiles"> Success <input type="radio" name="test-animated-tiles"> Failure <input type="radio" name="test-animated-tiles" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="animated_tiles.json" target="_blank">Test animated tiles</a>
+                </td>
+            </tr>
         </table>
 
         <script>

messages/yarn.lock

@@ -3473,9 +3473,9 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
 set-getter@^0.1.0:
-  version "0.1.0"
+  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
+  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.1.tgz#a3110e1b461d31a9cfc8c5c9ee2e9737ad447102"
-  integrity sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=
+  integrity sha512-9sVWOy+gthr+0G9DzqqLaYNA7+5OKkSmcqjL9cBpDEaZrr3ShQlyX2cZ/O/ozE41oxn/Tt0LGEM/w4Rub3A3gw==
   dependencies:
     to-object-path "^0.3.0"