Improve hair positioning

src/components/game/character/Character.vue

@@ -3,7 +3,7 @@
     <ChatBubble :mapCharacter="props.mapCharacter" />
     <HealthBar :mapCharacter="props.mapCharacter" />
     <CharacterHair :mapCharacter="props.mapCharacter" />
-    <Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
+    <Sprite ref="characterSprite" :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, ref, watch } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap

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

@@ -5,7 +5,7 @@
 <script lang="ts" setup>
 import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
 import { loadSpriteTextures } from '@/services/textureService'
-import { CharacterHairStorage, SpriteStorage } from '@/storage/storages'
+import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed, onMounted, ref } from 'vue'
@@ -17,7 +17,8 @@ const props = defineProps<{
 const gameStore = useGameStore()
 const scene = useScene()
 const hairSpriteId = ref('')
-const sprite = ref<SpriteT | null>(null)
+const hairSprite = ref<SpriteT | null>(null)
+const characterSpriteHeight = ref(0)
 
 const texture = computed(() => {
   const { rotation } = props.mapCharacter.character
@@ -30,28 +31,37 @@ const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.r
 
 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)
+  const spriteAction = hairSprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+
+  const hairHeight = (spriteAction?.frameHeight ?? 0) + (spriteAction?.originY ?? 0)
+  const originY = characterSpriteHeight.value / hairHeight
 
   return {
     depth: 9999,
-    originX: Number(spriteAction?.originX) ?? 0,
-    originY: Number(spriteAction?.originY) ?? 0,
+    originX: 0.5, // This is always center
+    originY: originY, // @TODO #376: See if we can fully calculate this
     flipX: isFlippedX.value,
     texture: texture.value
   }
 })
 
 onMounted(async () => {
-  if (!props.mapCharacter.character.characterHair) return
+  if (!props.mapCharacter.character.characterType || !props.mapCharacter.character.characterHair) return
 
+  const characterTypeStorage = new CharacterTypeStorage()
   const characterHairStorage = new CharacterHairStorage()
-  const _hairSpriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
-  if (!_hairSpriteId) return
-
-  hairSpriteId.value = _hairSpriteId
   const spriteStorage = new SpriteStorage()
-  sprite.value = await spriteStorage.getById(_hairSpriteId)
 
-  await loadSpriteTextures(scene, _hairSpriteId)
+  const characterType = await characterTypeStorage.getById(props.mapCharacter.character.characterType!)
+  if (!characterType) return
+  characterSpriteHeight.value = 100
+
+  hairSpriteId.value = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
+  if (!hairSpriteId.value) return
+
+  hairSprite.value = await spriteStorage.getById(hairSpriteId.value)
+  if (!hairSprite.value) return
+
+  await loadSpriteTextures(scene, hairSpriteId.value)
 })
 </script>

src/composables/useCharacterSpriteComposable.ts

@@ -142,6 +142,7 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     }
 
     if (characterSprite.value) {
+      characterSprite!.value?.setOrigin(0.5, 1)
       characterSprite.value.setTexture(spriteSpriteActionId.value)
       characterSprite.value.setFlipX(isFlippedX.value)
     }