From 1f7a3880bfbd23824d497ae0805a1e275d7bfb5d Mon Sep 17 00:00:00 2001 From: Johannes Berthel Date: Wed, 7 Apr 2021 00:20:55 +0200 Subject: [PATCH] made interaction work with remote players --- front/src/Phaser/Map/InteractiveLayer.ts | 101 ++++++++++++++++------- maps/Interactive/tiles/numbers.aseprite | Bin 0 -> 1360 bytes maps/Interactive/tiles/numbers.png | Bin 0 -> 456 bytes 3 files changed, 69 insertions(+), 32 deletions(-) create mode 100644 maps/Interactive/tiles/numbers.aseprite create mode 100644 maps/Interactive/tiles/numbers.png diff --git a/front/src/Phaser/Map/InteractiveLayer.ts b/front/src/Phaser/Map/InteractiveLayer.ts index de22fc19..06b875c9 100644 --- a/front/src/Phaser/Map/InteractiveLayer.ts +++ b/front/src/Phaser/Map/InteractiveLayer.ts @@ -2,6 +2,7 @@ import Sprite = Phaser.GameObjects.Sprite; import Container = Phaser.GameObjects.Container; import type { ITiledMapLayer, ITiledMapLayerProperty } from "./ITiledMap"; import type { GameScene } from "../Game/GameScene"; +import type { Character } from "../Entity/Character"; interface SpriteEntity { animation: string|false; @@ -47,70 +48,99 @@ export class InteractiveLayer extends Container { const scene = this.getScene(); + // if radius is -1, one tile activation will activate all tiles in the layer const radius = this.getInteractionRadius(); const r = radius == -1 ? 0 : radius; - const x = scene.CurrentPlayer.x + scene.CurrentPlayer.width; - const y = scene.CurrentPlayer.y + scene.CurrentPlayer.height * 2; + // collecting all player positions + const positions = [this.getCharacterPosition(scene.CurrentPlayer)]; + for (const player of scene.MapPlayersByKey.values()) { + positions.push(this.getCharacterPosition(player)); + } - let foundActive = false; + let activateAll = false; - for (const i in this.spritesCollection) { - const entity = this.spritesCollection[i]; + for (const entity of this.spritesCollection) { const sprite = entity.sprite; + let wasActivatedThisRound = false; - if ( - sprite.x - sprite.width * r <= x // left - && sprite.y - sprite.height * r <= y // top - && sprite.x + sprite.width * (r + 1) >= x // right - && sprite.y + sprite.height * (r + 1) >= y // bottom - ) { - if (!entity.state) { - if (entity.animation === false) { - entity.state = true; - } else if (!sprite.anims.isPlaying) { - sprite.play(entity.animation, true); + for (const position of positions) { + const { x, y } = position; + + if ( + sprite.x - sprite.width * r <= x // left + && sprite.y - sprite.height * r <= y // top + && sprite.x + sprite.width * (r + 1) > x // right + && sprite.y + sprite.height * (r + 1) > y // bottom + ) { + if (radius == -1) { + activateAll = true; + break; + } + + wasActivatedThisRound = true; + + if (!entity.state) { entity.state = true; + + if (entity.animation !== false) { + if (sprite.anims.isPlaying) { + sprite.anims.play(entity.animation, false, sprite.anims.currentFrame.index); + } else { + sprite.anims.play(entity.animation); + } + } } } + } - foundActive = true; - if (radius == -1) { - break; - } - } else if (radius != -1 && entity.state && !sprite.anims.isPlaying) { + if (radius == -1 && activateAll) { + break; + } + + if (radius != -1 && !wasActivatedThisRound && entity.state) { entity.state = false; - + if (entity.animation !== false && this.shouldReverse(entity)) { - sprite.anims.playReverse(entity.animation); + if (sprite.anims.isPlaying) { + sprite.anims.reverse(); + } else { + sprite.anims.playReverse(entity.animation); + } } } } if (radius == -1) { - if (foundActive && !this.allActive) { + if (activateAll && !this.allActive) { // play all sprites - for (const i in this.spritesCollection) { - const entity = this.spritesCollection[i]; + for (const entity of this.spritesCollection) { const sprite = entity.sprite; if (entity.animation !== false) { - sprite.play(entity.animation, true); + if (sprite.anims.isPlaying) { + sprite.anims.play(entity.animation, false, sprite.anims.currentFrame.index); + } else { + sprite.anims.play(entity.animation); + } } entity.state = true; } this.allActive = true; - } else if (!foundActive && this.allActive) { - for (const i in this.spritesCollection) { - const entity = this.spritesCollection[i]; + } else if (!activateAll && this.allActive) { + for (const entity of this.spritesCollection) { entity.state = false; if (entity.animation !== false && this.shouldReverse(entity)) { const sprite = entity.sprite; - sprite.anims.pause(); - sprite.anims.playReverse(entity.animation); + + if (sprite.anims.isPlaying) { + sprite.anims.reverse(); + } else { + sprite.anims.playReverse(entity.animation); + } } } @@ -264,4 +294,11 @@ export class InteractiveLayer extends Container { private shouldReverse(entity: SpriteEntity): boolean { return typeof entity.properties !== "undefined" && entity.properties["reverseInactive"] } + + private getCharacterPosition(char: Character) { + return { + x: char.x + char.width, + y: char.y + char.height * 2 + } + } } diff --git a/maps/Interactive/tiles/numbers.aseprite b/maps/Interactive/tiles/numbers.aseprite new file mode 100644 index 0000000000000000000000000000000000000000..d5b32eb41735d3dc2d24260fa35df1118533a791 GIT binary patch literal 1360 zcmcJNdq`7Z7>B=^dJt`bm8dv6U9hB9YGuk<=``bg{Bdzl9kMGWw%$?1A0h=Xu%3IuP=z&WX@J z9wI`>K0JRNnux4#{7U2#XRKzJJZXB`x6sxr5VDwF3q~xLf%}8~!IC5fe0kUh z9H`n4TG}szUnT;<%GWH&-S-36U&sLCQdffsaZAAfSuhw9auoDa=7PI2hC%fe0ZcZI zfL()ApnyZjm76VK-sy8-D#w94k`h2ZtPpGn2mlARtHJ(kJy=o^3l?hp1P;5{6Rc}p z4ohGIMh{-DdXG3aU)EM0pA8XJ_Mk-^ZEv_ldn^HbX zFA4YE;1bB__6qo5P`=`$OEyC?+vG;2%?|9WJJ4QJ%S2_)`FA9>ml%$EKSoEqjc(Gq zTRfY!S*L0)os3^qb+)pGFEY!UB;<{c?D-y>`I~2*ubk`+Jyj%*%$1nzYIwG@c=&u{ zzS|8)k7l(=ytB4d!8~fwCRsc`@PyPpOT2f$X8QJ7ryHEVl@-K@+WW*D;q;myvpns1 z$$Un4F$BVn+?-olw~!LEKS$l>*{%&8`t(O;5m}`T>rS@OY?)PqCHxBOa|#@=L9aMd zB<=S0<)1$2uHHvUp9lN$taA}0ojS?dyK~4LDRI@+W-IZcC8{cBgDo8-n&g&V+h2(0mZHkJ2 z6mgHPwCzf~j6O%riQcwV_y4H1J$KqNdXAm>*p~00005UsKtP$F#@`#UENzL^yL3JN z99br|s4hXGjJ|LGnROiRj8oM7f4@#t2^#+VwI-ll&9-;28~1c^N-&^|1O$|6Ey3PP zk?dvhY_H6FmO}J#NXj0 zZgu}@b2b(grFz%Au>u0hNI*cDj1p|*68q