noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved proof of concept hair customisation & sprite anchor points

Browse Source
This commit is contained in:
Dennis Postma
2024-12-12 00:42:56 +01:00
parent b5c1c92b04
commit 608932300f
3 changed files with 49 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/game/character/partials/CharacterHair.vue
View File

@ -1,10 +1,10 @@
<template>
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" ref="hairImage" />
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { Image, useScene, refObj } from 'phavuer'
import { computed } from 'vue'
import { Image, useScene } from 'phavuer'
import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
@ -17,8 +17,6 @@ const props = defineProps<{
const gameStore = useGameStore()
const scene = useScene()
const hairImage = refObj<Phaser.GameObjects.Image>()
const baseY = ref(0)
const texture = computed(() => {
const { rotation, characterHair } = props.zoneCharacter.character
@ -31,37 +29,17 @@ const texture = computed(() => {
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
const imageProps = computed(() => ({
depth: 1,
originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.30,
originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.35 : 5.35,
flipX: isFlippedX.value,
y: props.zoneCharacter.isMoving ? (scene.time.now % 500 < 250 ? 0 : 2) : 2, // Add this line
x: props.zoneCharacter.isMoving ? (scene.time.now % 500 < 250 ? 0 : -2) : -1, // Add this line
texture: texture.value
}))
// Watch for movement changes and animate hair
watch(() => props.zoneCharacter.isMoving, (isMoving) => {
if (!hairImage.value) return
if (isMoving) {
// Start bounce animation
scene.tweens.add({
targets: hairImage.value,
x: { from: 0, to: 1 },
y: { from: 0, to: 1},
duration: 500,
yoyo: false,
repeat: -1,
ease: 'Linear'
})
} else {
// Stop all tweens on this hair image
scene.tweens.killTweensOf(hairImage.value)
// Reset position
hairImage.value.setY(0)
}
})
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
.then(() => {})
.catch((error) => {
console.error('Error loading texture:', error)
})
</script>
</script>