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

walk anims

Browse Source
This commit is contained in:
Dennis Postma
2024-07-31 19:56:44 +02:00
parent 336f90128d
commit 471f84904f
4 changed files with 45 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,9 @@
<template>
<Container v-if="props.character">
<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" />
<RoundRectangle :tween="tween" :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 :tween="tween" :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
:tween="tween"
@create="createText"
:text="props.character.name"
:x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
@ -19,16 +20,10 @@
<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"
<Sprite
:tween="tween"
: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'"
:play="props.character.isMoving ? charTexture : undefined"
: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"
@ -41,10 +36,11 @@
</template>
<script lang="ts" setup>
import config from '@/config'
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'
import { watch, computed, ref } from 'vue'
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
@ -55,6 +51,39 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined
})
const currentVisualPosition = ref({ x: 0, y: 0 })
const tween = computed(() => {
if (!props.character || !props.layer) return null
const { position_x, position_y, isMoving } = props.character
if (!isMoving) return null
const targetX = tileToWorldX(props.layer, position_x, position_y)
const targetY = tileToWorldY(props.layer, position_x, position_y)
// Use the current visual position for the starting point
const { x: currentX, y: currentY } = currentVisualPosition.value
const tweenConfig = {
x: targetX,
y: targetY,
duration: 750,
ease: 'Power2',
repeat: 0,
yoyo: false,
from: { x: currentX, y: currentY },
to: { x: targetX, y: targetY },
onComplete: () => {
// Update the current visual position when the tween completes
currentVisualPosition.value = { x: targetX, y: targetY }
}
}
return tweenConfig
})
const charTexture = computed(() => {
console.log('Character texture:', props.character)
if (!props.character?.characterType?.sprite) {