Added animation function as in PR

https://github.com/thecodingmachine/workadventure/pull/542
This commit is contained in:
Thomas Basler 2021-01-05 18:59:51 +01:00
parent 378ae0fe01
commit 88a5fe4664
3 changed files with 12 additions and 5 deletions

View File

@ -27,6 +27,7 @@
"generic-type-guard": "^3.2.0", "generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0", "google-protobuf": "^3.13.0",
"phaser": "^3.22.0", "phaser": "^3.22.0",
"phaser-animated-tiles": "Informatic/phaser-animated-tiles#2d5c66a9bc426dd4cb2d856c1d599494a74f8067",
"queue-typescript": "^1.0.1", "queue-typescript": "^1.0.1",
"quill": "^1.3.7", "quill": "^1.3.7",
"simple-peer": "^9.6.2", "simple-peer": "^9.6.2",

View File

@ -66,6 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon";
import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon"; import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene"; import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
import {TextureError} from "../../Exception/TextureError"; import {TextureError} from "../../Exception/TextureError";
import {AnimatedTiles} from "phaser-animated-tiles";
export interface GameSceneInitInterface { export interface GameSceneInitInterface {
initPosition: PointInterface|null, initPosition: PointInterface|null,
@ -110,9 +111,10 @@ export class GameScene extends ResizableScene implements CenterListener {
MapPlayers!: Phaser.Physics.Arcade.Group; MapPlayers!: Phaser.Physics.Arcade.Group;
MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>(); MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
Map!: Phaser.Tilemaps.Tilemap; Map!: Phaser.Tilemaps.Tilemap;
Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>; Layers!: Array<Phaser.Tilemaps.DynamicTilemapLayer>;
Objects!: Array<Phaser.Physics.Arcade.Sprite>; Objects!: Array<Phaser.Physics.Arcade.Sprite>;
mapFile!: ITiledMap; mapFile!: ITiledMap;
animatedTiles!: AnimatedTiles;
groups: Map<number, Sprite>; groups: Map<number, Sprite>;
startX!: number; startX!: number;
startY!: number; startY!: number;
@ -186,6 +188,7 @@ export class GameScene extends ResizableScene implements CenterListener {
file: file.src file: file.src
}); });
}); });
this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles');
this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => { this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => {
this.onMapLoad(data); this.onMapLoad(data);
}); });
@ -342,11 +345,11 @@ export class GameScene extends ResizableScene implements CenterListener {
this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels); this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels);
//add layer on map //add layer on map
this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>(); this.Layers = new Array<Phaser.Tilemaps.DynamicTilemapLayer>();
let depth = -2; let depth = -2;
for (const layer of this.mapFile.layers) { for (const layer of this.mapFile.layers) {
if (layer.type === 'tilelayer') { if (layer.type === 'tilelayer') {
this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth)); this.addLayer(this.Map.createDynamicLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
const exitSceneUrl = this.getExitSceneUrl(layer); const exitSceneUrl = this.getExitSceneUrl(layer);
if (exitSceneUrl !== undefined) { if (exitSceneUrl !== undefined) {
@ -383,6 +386,8 @@ export class GameScene extends ResizableScene implements CenterListener {
//initialise camera //initialise camera
this.initCamera(); this.initCamera();
this.animatedTiles.init(this.Map);
// Let's generate the circle for the group delimiter // Let's generate the circle for the group delimiter
let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white'); let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
if (circleElement) { if (circleElement) {
@ -824,13 +829,13 @@ export class GameScene extends ResizableScene implements CenterListener {
this.cameras.main.setZoom(ZOOM_LEVEL); this.cameras.main.setZoom(ZOOM_LEVEL);
} }
addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ addLayer(Layer : Phaser.Tilemaps.DynamicTilemapLayer){
this.Layers.push(Layer); this.Layers.push(Layer);
} }
createCollisionWithPlayer() { createCollisionWithPlayer() {
//add collision layer //add collision layer
this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => { this.Layers.forEach((Layer: Phaser.Tilemaps.DynamicTilemapLayer) => {
this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => { this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => {
//this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name) //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
}); });

View File

@ -8,6 +8,7 @@
"downlevelIteration": true, "downlevelIteration": true,
"jsx": "react", "jsx": "react",
"allowJs": true, "allowJs": true,
"esModuleInterop": true,
"strict": true, /* Enable all strict type-checking options. */ "strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */