Use originX and Y for hair

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

@@ -28,13 +28,22 @@ const texture = computed(() => {
 
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 
-const imageProps = computed(() => ({
+const imageProps = computed(() => {
-  depth: 1,
+  // Get the current sprite action based on direction
-  originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.33 : 5.33,
+  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  flipX: isFlippedX.value,
+  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find(
-  texture: texture.value,
+    spriteAction => spriteAction.action === direction
-  y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
+  )
-}))
+
+  return {
+    depth: 1,
+    originX: spriteAction?.originX ?? 0,
+    originY: spriteAction?.originY ?? 0,
+    flipX: isFlippedX.value,
+    texture: texture.value,
+    y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
+  }
+})
 
 loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
   .then(() => {})

src/composables/gameComposable.ts

@@ -66,10 +66,13 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
       data: sprite_action.data,
       group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
       updatedAt: sprite_action.updatedAt,
-      frameCount: sprite_action.frameCount,
+      originX: sprite_action.originX ?? 0,
+      originY: sprite_action.originY ?? 0,
+      isAnimated: sprite_action.isAnimated,
       frameWidth: sprite_action.frameWidth,
       frameHeight: sprite_action.frameHeight,
-      frameRate: sprite_action.frameRate
+      frameRate: sprite_action.frameRate,
+      frameCount: sprite_action.frameCount
     } as AssetDataT)
 
     // If the sprite is not animated, skip

src/composables/zoneComposable.ts

@@ -47,7 +47,6 @@ export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
   let tileImg = zone.getTileset(tileName) as Tileset
   if (!tileImg) {
-    console.log('tile not found:', tileName)
     tileImg = zone.getTileset('blank_tile') as Tileset
   }
   layer.putTileAt(tileImg.firstgid, x, y)

src/storage/assetStorage.ts

@@ -25,7 +25,19 @@ export class AssetStorage {
       const blob = await response.blob()
 
       // Store the asset in the database
-      await this.db.table('assets').put({ key: asset.key, data: blob, group: asset.group, updatedAt: asset.updatedAt, frameCount: asset.frameCount, frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
+      await this.db.table('assets').put({
+        key: asset.key,
+        data: blob,
+        group: asset.group,
+        updatedAt: asset.updatedAt,
+        originX: asset.originX,
+        originY: asset.originY,
+        isAnimated: asset.isAnimated,
+        frameWidth: asset.frameWidth,
+        frameHeight: asset.frameHeight,
+        frameRate: asset.frameRate,
+        frameCount: asset.frameCount
+      })
     } catch (error) {
       console.error(`Failed to add asset ${asset.key}:`, error)
     }

src/types.ts

@@ -9,6 +9,8 @@ export type AssetDataT = {
   data: string
   group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
   updatedAt: Date
+  originX?: number
+  originY?: number
   isAnimated?: boolean
   frameCount?: number
   frameWidth?: number