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

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

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