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

Fix for #132 (character continues anim after moving is finished)

Browse Source
This commit is contained in:
Dennis Postma
2024-09-27 23:56:02 +02:00
parent 50feea0c9c
commit 71042881dc
2 changed files with 232 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,58 +1,49 @@
<template>
<Container ref="charChatContainer" :depth="999" v-if="props.character" :x="currentX" :y="currentY">>
<Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
<RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />
<Text @create="createChatText" text="" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
</Container>
<Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
<Container :depth="999" :x="currentX" :y="currentY">
<Text @create="createText" :text="character.name" :origin-x="0.5" :origin-y="9" />
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
</Container>
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY" ref="charContainer">
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
<Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
<Container :depth="isometricDepth" :x="currentX" :y="currentY" ref="charContainer">
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" :flipY="false" />
</Container>
</template>
<script lang="ts" setup>
import { Container, Image, refObj, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { watch, computed, ref, onMounted, onUnmounted, type Ref } from 'vue'
import config from '@/config'
import { type ExtendedCharacter } from '@/types'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import { Container, refObj, RoundRectangle, Sprite, Text } from 'phavuer'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
enum Direction {
POSITIVE,
NEGATIVE,
NOCHANGE
}
enum Direction { POSITIVE, NEGATIVE, UNCHANGED }
const charChatContainer = refObj() as Ref<Phaser.GameObjects.Container>;
const charContainer = refObj() as Ref<Phaser.GameObjects.Container>;
interface Props {
const props = defineProps<{
layer: Phaser.Tilemaps.TilemapLayer
character?: CharacterT
}
character: ExtendedCharacter
}>()
const props = withDefaults(defineProps<Props>(), {
character: undefined
})
const charChatContainer = refObj<Phaser.GameObjects.Container>()
const charContainer = refObj<Phaser.GameObjects.Container>()
const charSprite = refObj<Phaser.GameObjects.Sprite>()
const gameStore = useGameStore()
const zoneStore = useZoneStore()
const scene = useScene()
const isometricDepth = ref(calculateIsometricDepth(props.character!.positionX, props.character!.positionY, 28, 94, true))
const isometricDepth = ref(1)
const currentX = ref(0)
const currentY = ref(0)
const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true)
const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
const updateIsometricDepth = (x: number, y: number) => {
isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
}
const updatePosition = (x: number, y: number, direction: Direction) => {
@ -66,105 +57,77 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
return
}
if (tween.value && tween.value.isPlaying()) {
if (tween.value?.isPlaying()) {
tween.value.stop()
}
/**
* Calculate the distance between the current and target positions
*/
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
/**
* Teleport: No animation, only if the distance is greater than the tile size / 1.5
*/
if (distance >= config.tile_size.x / 1.2) {
// Teleport: No animation
if (distance >= config.tile_size.x / 1.1) {
currentX.value = targetX
currentY.value = targetY
return
}
/**
* Normal movement: Animate
*/
if (distance <= config.tile_size.x / 1.2) {
// Normal movement: Animate
const duration = distance * 6 // Adjust this multiplier to control overall speed
const duration = distance * 6
tween.value = props.layer.scene.tweens.add({
targets: { x: currentX.value, y: currentY.value },
x: targetX,
y: targetY,
duration: duration,
ease: 'Linear',
onStart: () => {
if (direction === Direction.POSITIVE) {
calculateLocalDepth(x, y, 28, 94, true)
}
},
onUpdate: (tween) => {
currentX.value = tween.targets[0].x ?? 0
currentY.value = tween.targets[0].y ?? 0
},
onComplete: () => {
if (direction === Direction.NEGATIVE) {
calculateLocalDepth(x, y, 28, 94, true)
}
tween.value = props.layer.scene.tweens.add({
targets: { x: currentX.value, y: currentY.value },
x: targetX,
y: targetY,
duration,
ease: 'Linear',
onStart: () => {
if (direction === Direction.POSITIVE) {
updateIsometricDepth(x, y)
}
})
}
}
watch(
() => props.character,
(newChar, oldChar) => {
if (!newChar) return
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
if (!oldChar) {
updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE)
} else {
const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
updatePosition(newChar.positionX, newChar.positionY, direction)
},
onUpdate: (tween) => {
currentX.value = tween.targets[0].x
currentY.value = tween.targets[0].y
},
onComplete: () => {
if (direction === Direction.NEGATIVE) {
updateIsometricDepth(x, y)
}
}
},
{ immediate: true, deep: true }
)
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number) => {
if (newY < oldY || newX < oldX) {
return Direction.NEGATIVE
}
if (newX > oldX || newY > oldY) {
return Direction.POSITIVE
}
return Direction.NOCHANGE
})
}
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
if (newY < oldY || newX < oldX) return Direction.NEGATIVE
if (newX > oldX || newY > oldY) return Direction.POSITIVE
return Direction.UNCHANGED
}
const isFlippedX = computed(() => [6, 4].includes(props.character.rotation ?? 0))
const charTexture = computed(() => {
if (!props.character?.characterType?.sprite) {
return 'idle_right_down'
}
const { rotation, characterType, isMoving } = props.character
const spriteId = characterType?.sprite.id ?? 'idle_right_down'
const action = isMoving ? 'walk' : 'idle'
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
const rotation = props.character.rotation
const spriteId = props.character.characterType.sprite.id
const action = props.character.isMoving ? 'walk' : 'idle'
if (rotation === 0 || rotation === 6) {
return `${spriteId}-${action}_left_up`
} else if (rotation === 2 || rotation === 4) {
return `${spriteId}-${action}_right_down`
}
return `${spriteId}-${action}_left_up`
return `${spriteId}-${action}_${direction}`
})
const updateSprite = () => {
if (props.character.isMoving) {
charSprite.value!.anims.play(charTexture.value, true);
return;
}
charSprite.value!.anims.stop();
charSprite.value!.setFrame(0);
charSprite.value!.setTexture(charTexture.value);
}
const createChatBubble = (container: Phaser.GameObjects.Container) => {
container.setName(props.character?.name + '_chatBubble')
container.setName(`${props.character.name}_chatBubble`)
}
const createChatText = (text: Phaser.GameObjects.Text) => {
text.setName(props.character?.name + '_chatText')
text.setName(`${props.character.name}_chatText`)
text.setResolution(10)
text.setFontSize(13)
text.setFontFamily('Arial')
@ -175,25 +138,35 @@ const createText = (text: Phaser.GameObjects.Text) => {
text.setFontFamily('Arial')
}
watch(() => props.character, (newChar, oldChar) => {
if (!newChar) return
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
const direction = !oldChar ? Direction.POSITIVE : calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
updatePosition(newChar.positionX, newChar.positionY, direction)
}
})
watch(() => props.character.isMoving, updateSprite)
watch(() => props.character.rotation, updateSprite)
onMounted(() => {
// Check if player is this character, then lock with camera
if (props.character && props.character.id === gameStore.character?.id) {
charChatContainer.value?.setName(props.character.name + '_chatContainer')
charChatContainer.value?.setVisible(false)
charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)
charChatContainer.value!.setVisible(false)
charContainer.value!.setName(props.character!.name)
charContainer.value?.setName(props.character.name)
zoneStore.characterLoaded = true;
if (props.character.id === gameStore.character!.id) {
zoneStore.characterLoaded = true
}
if (props.character) {
updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
}
// Set sprite
charSprite.value!.setTexture(charTexture.value)
charSprite.value!.setFlipX(isFlippedX.value)
updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
})
onUnmounted(() => {
if (tween.value) {
tween.value.stop()
}
tween.value?.stop()
})
</script>
</script>