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

Worked on character animations

Browse Source
This commit is contained in:
Dennis Postma
2024-07-30 23:30:54 +02:00
parent fea1b849bb
commit 336f90128d
13 changed files with 176 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,7 @@
<template>
<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>
<RoundRectangle :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" :radius="4" />
<RoundRectangle :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" :radius="4" />
<Text
@create="createText"
:text="props.character.name"
@ -16,23 +15,34 @@
fontSize: '14px'
}"
/>
<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" />
<Container v-if="!props.character.characterType">
<Image 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" />
</Container>
<Container v-else>
<Image v-if="!props.character.isMoving"
: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"
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
:flipY="false"
/>
<Sprite v-else
:play="charTexture + '-anim'"
: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"
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
:flipY="false"
/>
</Container>
<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"
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
:flipY="false"
/>
</Container>
</template>
<script lang="ts" setup>
import { Container, Image, Rectangle, RoundRectangle, Text } from 'phavuer'
import { type Character as CharacterT } from '@/types'
import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/services/zone'
import { watch, computed } from 'vue'
@ -54,14 +64,15 @@ const charTexture = computed(() => {
const rotation = props.character.rotation
const spriteId = props.character.characterType.sprite.id
const action = props.character.isMoving ? 'walk' : 'idle'
if (rotation === 2 || rotation === 4) {
return `${spriteId}-idle_left_down`
return `${spriteId}-${action}_left_down`
} else if (rotation === 0 || rotation === 6) {
return `${spriteId}-idle_right_up`
return `${spriteId}-${action}_right_up`
}
return `${spriteId}-idle_left_down` // Default fallback
return `${spriteId}-${action}_left_down` // Default fallback
})
watch(