Added Tauri config, updated character hair location logic (WIP)

src/components/game/character/Character.vue

@@ -2,7 +2,7 @@
   <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
     <ChatBubble :mapCharacter="props.mapCharacter" />
     <HealthBar :mapCharacter="props.mapCharacter" />
-    <CharacterHair :mapCharacter="props.mapCharacter" />
+    <CharacterHair :mapCharacter="props.mapCharacter" v-if="currentSpriteHeight > 0"  :spriteHeight="currentSpriteHeight" />
     <Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
@@ -17,7 +17,7 @@ import { useSoundComposable } from '@/composables/useSoundComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Container, Sprite, useScene } from 'phavuer'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
@@ -28,7 +28,11 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const scene = useScene()
 
-const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
+const { characterContainer, characterSprite, getSpriteHeightByAction, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(
+  scene,
+  props.tileMap,
+  props.mapCharacter
+)
 const { playSound, stopSound } = useSoundComposable()
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
@@ -43,6 +47,8 @@ const handlePositionUpdate = (newValues: any, oldValues: any) => {
   }
 }
 
+const currentSpriteHeight = ref(0)
+
 /**
  * Plays walk sound when character is moving
  */
@@ -91,6 +97,8 @@ watch(
 
 onMounted(async () => {
   await initializeSprite()
+  currentSpriteHeight.value = await getSpriteHeightByAction('idle_left_up')
+
   if (props.mapCharacter.character.id === gameStore.character!.id) {
     scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
   }

src/components/game/character/partials/CharacterHair.vue

@@ -11,7 +11,8 @@ import { Image, useScene } from 'phavuer'
 import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
-  mapCharacter: MapCharacter
+  mapCharacter: MapCharacter,
+  spriteHeight: number
 }>()
 
 const gameStore = useGameStore()
@@ -29,15 +30,12 @@ const texture = computed(() => {
 const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
-  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
-
   return {
-    depth: 9999,
-    originX: Number(spriteAction?.originX) ?? 0,
-    originY: Number(spriteAction?.originY) ?? 0,
+    originX: 0.5,
+    originY: 0.32 / 1.8, // 32 height
     flipX: isFlippedX.value,
-    texture: texture.value
+    texture: texture.value,
+    y: -props.spriteHeight
   }
 })
 
@@ -45,13 +43,13 @@ onMounted(async () => {
   if (!props.mapCharacter.character.characterHair) return
 
   const characterHairStorage = new CharacterHairStorage()
-  const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
-  if (!spriteId) return
+  const _hairSpriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
+  if (!_hairSpriteId) return
 
-  hairSpriteId.value = spriteId
+  hairSpriteId.value = _hairSpriteId
   const spriteStorage = new SpriteStorage()
-  sprite.value = await spriteStorage.getById(spriteId)
+  sprite.value = await spriteStorage.getById(_hairSpriteId)
 
-  await loadSpriteTextures(scene, spriteId)
+  await loadSpriteTextures(scene, _hairSpriteId)
 })
 </script>

src/composables/useCharacterSpriteComposable.ts

@@ -1,9 +1,9 @@
 import config from '@/application/config'
 import { Direction } from '@/application/enums'
-import { type MapCharacter } from '@/application/types'
+import { type MapCharacter, type SpriteAction } from '@/application/types'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/mapService'
 import { loadSpriteTextures } from '@/services/textureService'
-import { CharacterTypeStorage } from '@/storage/storages'
+import { CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
 import { refObj } from 'phavuer'
 import { computed, ref } from 'vue'
 
@@ -72,7 +72,7 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     // Add new listener
     characterSprite.value.on(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
       characterSprite.value!.setFrame(0)
-      characterSprite.value!.setTexture(charTexture.value)
+      characterSprite.value!.setTexture(spriteSpriteActionId.value)
     })
 
     characterSprite.value.anims.play(
@@ -96,11 +96,27 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     return [0, 6].includes(mapCharacter.character.rotation ?? 0) ? 'left_up' : 'right_down'
   })
 
+  const getSpriteHeightByAction = async (action: string = '') => {
+    if (!characterSpriteId.value) return 0
+    const spriteStorage = new SpriteStorage()
+    const sprite = await spriteStorage.getById(characterSpriteId.value)
+    let actionWithDirection = `${currentAction.value}_${currentDirection.value}`
+    if (action) actionWithDirection = action
+
+    return sprite?.spriteActions?.find(
+        (spriteAction: SpriteAction) => spriteAction.action === actionWithDirection
+    )?.frameHeight ?? 0
+  }
+
+  const spriteHeight = computed(() =>
+      getSpriteHeightByAction(currentAction.value)
+  )
+
   const currentAction = computed(() => {
     return mapCharacter.isMoving ? 'walk' : 'idle'
   })
 
-  const charTexture = computed(() => {
+  const spriteSpriteActionId = computed(() => {
     const spriteId = characterSpriteId.value ?? 'idle_right_down'
     return `${spriteId}-${currentAction.value}_${currentDirection.value}`
   })
@@ -109,11 +125,11 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     if (!characterSprite.value) return
 
     if (mapCharacter.isMoving) {
-      characterSprite.value.anims.play(charTexture.value, true)
+      characterSprite.value.anims.play(spriteSpriteActionId.value, true)
     } else {
       characterSprite.value.anims.stop()
       characterSprite.value.setFrame(0)
-      characterSprite.value.setTexture(charTexture.value)
+      characterSprite.value.setTexture(spriteSpriteActionId.value)
     }
   }
 
@@ -130,7 +146,7 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     }
 
     if (characterSprite.value) {
-      characterSprite.value.setTexture(charTexture.value)
+      characterSprite.value.setTexture(spriteSpriteActionId.value)
       characterSprite.value.setFlipX(isFlippedX.value)
     }
 
@@ -146,10 +162,15 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     characterContainer,
     characterSpriteId,
     characterSprite,
+    spriteHeight,
+    currentAction,
+    spriteSpriteActionId,
     currentPositionX,
     currentPositionY,
+    currentDirection,
     isometricDepth,
     isFlippedX,
+    getSpriteHeightByAction,
     updatePosition,
     playAnimation,
     calcDirection,