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

npm update, proof of concept code for character hair

Browse Source
This commit is contained in:
Dennis Postma 2024-12-05 09:55:20 +01:00
parent 6988565484
commit 1479d96162
2 changed files with 395 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

660
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -1,10 +1,10 @@
<template>
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(props.zoneCharacter.character.characterHair?.spriteId)" ref="image" />
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { Image, refObj, useScene } from 'phavuer'
import { Image, useScene } from 'phavuer'
import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
@ -18,9 +18,6 @@ const props = defineProps<{
const gameStore = useGameStore()
const scene = useScene()
const image = refObj<Phaser.GameObjects.Image>()
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
const texture = computed(() => {
const { rotation, characterHair } = props.zoneCharacter.character
const spriteId = characterHair?.sprite?.id
@ -29,22 +26,17 @@ const texture = computed(() => {
return `${spriteId}-${direction}`
})
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
const imageProps = computed(() => ({
depth: 1,
x: props.currentX,
y: props.currentY,
flipX: false,
texture: texture.value,
originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.35 : 5.35,
flipX: isFlippedX.value,
texture: texture.value
}))
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
.then(() => {
console.log(texture.value)
image.value!.setTexture(texture.value!)
image.value!.setFlipX(isFlippedX.value)
})
.then(() => {})
.catch((error) => {
console.error('Error loading texture:', error)
})
</script>
</script>