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

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

@ -1,13 +1,13 @@
<template>
<Container>
<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(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" />
<Container v-if="props.character">
<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(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>
<Text
@create="createText"
:text="props.character?.name"
:x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
:y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)"
:text="props.character.name"
: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="7.5"
:style="{
@ -16,15 +16,23 @@
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" />
<!-- <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-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" />
<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>
</template>
<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 { tileToWorldX, tileToWorldY } from '@/services/zone'
import { ref, watch, computed } from 'vue'
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
@ -35,6 +43,34 @@ const props = withDefaults(defineProps<Props>(), {
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) => {
text.setLetterSpacing(1.5)
}