diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue index f1d2593..bdc8174 100644 --- a/src/components/game/character/Character.vue +++ b/src/components/game/character/Character.vue @@ -1,8 +1,10 @@ <template> - <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" /> - <HealthBar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" /> - <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" /> - <Sprite ref="charSprite" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY" :origin-y="1" :flipX="isFlippedX" /> + <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY"> + <ChatBubble :mapCharacter="props.mapCharacter" /> + <HealthBar :mapCharacter="props.mapCharacter" /> + <CharacterHair :mapCharacter="props.mapCharacter" /> + <Sprite ref="characterSprite" :depth="isometricDepth" :origin-y="1" :flipX="isFlippedX" /> + </Container> </template> <script lang="ts" setup> @@ -13,7 +15,7 @@ import HealthBar from '@/components/game/character/partials/HealthBar.vue' import { useCharacterSprite } from '@/composables/useCharacterSpriteComposable' import { useGameStore } from '@/stores/gameStore' import { useMapStore } from '@/stores/mapStore' -import { Sprite, useScene } from 'phavuer' +import { Container, Sprite, useScene } from 'phavuer' import { onMounted, onUnmounted, watch } from 'vue' import { Direction } from '@/application/enums' @@ -27,7 +29,8 @@ const mapStore = useMapStore() const scene = useScene() const { - charSprite, + characterContainer, + characterSprite, currentPositionX, currentPositionY, isometricDepth, @@ -68,7 +71,7 @@ onMounted(async () => { if (props.mapCharacter.character.id === gameStore.character!.id) { mapStore.setCharacterLoaded(true) - scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite) + scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container) } }) diff --git a/src/components/game/character/partials/CharacterHair.vue b/src/components/game/character/partials/CharacterHair.vue index e99fcb4..2be8bcf 100644 --- a/src/components/game/character/partials/CharacterHair.vue +++ b/src/components/game/character/partials/CharacterHair.vue @@ -12,8 +12,6 @@ import { computed, onMounted, ref } from 'vue' const props = defineProps<{ mapCharacter: MapCharacter - currentX: number - currentY: number }>() const gameStore = useGameStore() @@ -39,9 +37,7 @@ const imageProps = computed(() => { originX: Number(spriteAction?.originX) ?? 0, originY: Number(spriteAction?.originY) ?? 0, flipX: isFlippedX.value, - texture: texture.value, - y: props.currentY, - x: props.currentX + texture: texture.value } }) diff --git a/src/components/game/character/partials/ChatBubble.vue b/src/components/game/character/partials/ChatBubble.vue index 45e6180..6b05b98 100644 --- a/src/components/game/character/partials/ChatBubble.vue +++ b/src/components/game/character/partials/ChatBubble.vue @@ -1,5 +1,5 @@ <template> - <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY"> + <Container ref="charChatContainer" :depth="999"> <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" /> <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" /> </Container> @@ -12,8 +12,6 @@ import { onMounted } from 'vue' const props = defineProps<{ mapCharacter: MapCharacter - currentX: number - currentY: number }>() const game = useGame() diff --git a/src/components/game/character/partials/HealthBar.vue b/src/components/game/character/partials/HealthBar.vue index b28196a..7b91330 100644 --- a/src/components/game/character/partials/HealthBar.vue +++ b/src/components/game/character/partials/HealthBar.vue @@ -1,5 +1,5 @@ <template> - <Container :depth="999" :x="currentX" :y="currentY"> + <Container :depth="999"> <Text @create="createNicknameText" :text="props.mapCharacter.character.name" /> <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" /> <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" /> @@ -12,8 +12,6 @@ import { Container, RoundRectangle, Text, useGame } from 'phavuer' const props = defineProps<{ mapCharacter: MapCharacter - currentX: number - currentY: number }>() const game = useGame() diff --git a/src/composables/useCharacterSpriteComposable.ts b/src/composables/useCharacterSpriteComposable.ts index 500d768..c25c22d 100644 --- a/src/composables/useCharacterSpriteComposable.ts +++ b/src/composables/useCharacterSpriteComposable.ts @@ -7,8 +7,9 @@ import { computed, ref } from 'vue' import { Direction } from '@/application/enums' export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) { - const charSprite = refObj<Phaser.GameObjects.Sprite>() - const charSpriteId = ref('') + const characterContainer = refObj<Phaser.GameObjects.Container>() + const characterSpriteId = ref('') + const characterSprite = refObj<Phaser.GameObjects.Sprite>() const currentPositionX = ref(0) const currentPositionY = ref(0) const isometricDepth = ref(1) @@ -39,7 +40,7 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps const duration = (distance / baseSpeed) * 1000 // Convert to milliseconds tween.value = tilemap.scene.tweens.add({ - targets: charSprite.value, + targets: characterContainer.value, x: newPositionX, y: newPositionY, duration, @@ -50,8 +51,8 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps } }, onUpdate: () => { - currentPositionX.value = charSprite.value?.x ?? currentPositionX.value - currentPositionY.value = charSprite.value?.y ?? currentPositionY.value + currentPositionX.value = characterContainer.value?.x ?? currentPositionX.value + currentPositionY.value = characterContainer.value?.y ?? currentPositionY.value }, onComplete: () => { if (direction === Direction.NEGATIVE) { @@ -78,19 +79,19 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps }) const charTexture = computed(() => { - const spriteId = charSpriteId.value ?? 'idle_right_down' + const spriteId = characterSpriteId.value ?? 'idle_right_down' return `${spriteId}-${currentAction.value}_${currentDirection.value}` }) const updateSprite = () => { - if (!charSprite.value) return + if (!characterSprite.value) return if (mapCharacter.isMoving) { - charSprite.value.anims.play(charTexture.value, true) + characterSprite.value.anims.play(charTexture.value, true) } else { - charSprite.value.anims.stop() - charSprite.value.setFrame(0) - charSprite.value.setTexture(charTexture.value) + characterSprite.value.anims.stop() + characterSprite.value.setFrame(0) + characterSprite.value.setTexture(charTexture.value) } } @@ -99,13 +100,13 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps const spriteId = await characterTypeStorage.getSpriteId(mapCharacter.character.characterType!) if (!spriteId) return - charSpriteId.value = spriteId + characterSpriteId.value = spriteId await loadSpriteTextures(scene, spriteId) - if (charSprite.value) { - charSprite.value.setTexture(charTexture.value) - charSprite.value.setFlipX(isFlippedX.value) - charSprite.value.setName(mapCharacter.character.name) + if (characterSprite.value) { + characterSprite.value.setTexture(charTexture.value) + characterSprite.value.setFlipX(isFlippedX.value) + characterSprite.value.setName(mapCharacter.character.name) } updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY, mapCharacter.character.rotation) @@ -116,8 +117,9 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps } return { - charSprite, - charSpriteId, + characterContainer, + characterSpriteId, + characterSprite, currentPositionX, currentPositionY, isometricDepth,