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 b5876d5a..6826de8c 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -96,6 +96,8 @@ import {waScaleManager} from "../Services/WaScaleManager"; import {peerStore} from "../../Stores/PeerStore"; import {EmoteManager} from "./EmoteManager"; +import AnimatedTiles from "phaser-animated-tiles"; + export interface GameSceneInitInterface { initPosition: PointInterface|null, reconnecting: boolean @@ -142,6 +144,7 @@ export class GameScene extends DirtyScene implements CenterListener { Layers!: Array; Objects!: Array; mapFile!: ITiledMap; + animatedTiles!: AnimatedTiles; groups: Map; startX!: number; startY!: number; @@ -266,6 +269,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); }); @@ -474,6 +478,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 e64a76c1..f0159242 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -1417,6 +1417,13 @@ create-require@^1.1.0: resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333" integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ== +cross-env@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" + integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw== + dependencies: + cross-spawn "^7.0.1" + cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -1428,7 +1435,7 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^7.0.2, cross-spawn@^7.0.3: +cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== @@ -4091,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 2a27e78f..1166082a 100644 --- a/maps/tests/index.html +++ b/maps/tests/index.html @@ -106,6 +106,14 @@ Test the HelpCameraSettingScene + + + Success Failure Pending + + + Test animated tiles + +