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