imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Worked on character rotation

Browse Source
This commit is contained in:
Dennis Postma 2024-07-28 05:02:29 +02:00
parent e4cd0e041a
commit a3dbff4720
1 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/sprites/Character.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<Container> <Container v-if="props.character">
<Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8"> <Rectangle :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8">
<Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" /> <Rectangle :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" />
</Rectangle> </Rectangle>
<Text <Text
@create="createText" @create="createText"
:text="props.character?.name" :text="props.character.name"
:x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
:y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
:origin-x="0.5" :origin-x="0.5"
:origin-y="7.5" :origin-y="7.5"
:style="{ :style="{
@ -16,15 +16,23 @@
fontSize: '14px' fontSize: '14px'
}" }"
/> />
<Image texture="character" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-y="1" /> <Image v-if="!props.character.characterType" texture="character" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-y="1" />
<!-- <Sprite ref="sprite" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-y="1" play="walk" />-->
<Image
v-else
:texture="charTexture"
:x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
:y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
:origin-y="1"
/>
</Container> </Container>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Container, Image, Rectangle, Sprite, Text } from 'phavuer' import { Container, Image, Rectangle, Text } from 'phavuer'
import { type Character as CharacterT } from '@/types' import { type Character as CharacterT } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/services/zone' import { tileToWorldX, tileToWorldY } from '@/services/zone'
import { ref, watch, computed } from 'vue'
interface Props { interface Props {
layer: Phaser.Tilemaps.TilemapLayer layer: Phaser.Tilemaps.TilemapLayer
@ -35,7 +43,35 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined character: undefined
}) })
const charTexture = computed(() => {
if (!props.character?.characterType?.sprite) {
console.log('No character type or sprite found')
return 'idle_left_down'
}
const rotation = props.character.rotation
const spriteId = props.character.characterType.sprite.id
if (rotation === 2 || rotation === 4) {
return `${spriteId}-idle_left_down`
} else if (rotation === 0 || rotation === 6) {
return `${spriteId}-idle_right_up`
}
return `${spriteId}-idle_left_down` // Default fallback
})
watch(() => props.character, (newCharacter) => {
if (newCharacter) {
console.log('Character updated:', newCharacter)
console.log('Rotation:', newCharacter.rotation)
console.log('Current texture:', charTexture.value)
} else {
console.log('Character is null or undefined')
}
}, { deep: true })
const createText = (text: Phaser.GameObjects.Text) => { const createText = (text: Phaser.GameObjects.Text) => {
text.setLetterSpacing(1.5) text.setLetterSpacing(1.5)
} }
</script> </script>