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

Map fixes

Browse Source
This commit is contained in:
Dennis Postma
2024-09-16 18:56:08 +02:00
parent fb836be412
commit af3e9d2b4d
4 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,14 @@
<template>
<Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
<!-- Start chat bubble -->
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
<!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
<!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
<!-- End chat bubble -->
<Text @create="createText" :text="props.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>
<!-- <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
<!-- <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
<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" />
@ -37,15 +37,15 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined
})
const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true));
const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
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);
console.log(isometricDepth.value);
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
console.log(isometricDepth.value)
}
const updatePosition = (x: number, y: number, direction: Direction) => {
@ -91,7 +91,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
duration: duration,
ease: 'Linear',
onStart: () => {
if(direction === Direction.POSITIVE) {
if (direction === Direction.POSITIVE) {
calculateLocalDepth(x, y, 28, 94, true)
}
},
@ -100,7 +100,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
currentY.value = tween.targets[0].y ?? 0
},
onComplete: () => {
if(direction === Direction.NEGATIVE) {
if (direction === Direction.NEGATIVE) {
calculateLocalDepth(x, y, 28, 94, true)
}
}
@ -113,11 +113,11 @@ watch(
(newChar, oldChar) => {
if (!newChar) return
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
if(!oldChar) {
updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE);
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);
const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
updatePosition(newChar.positionX, newChar.positionY, direction)
}
}
},
@ -125,13 +125,13 @@ watch(
)
const calcDirection = (oldX, oldY, newX, newY) => {
if(newY < oldY || newX < oldX) {
return Direction.NEGATIVE;
if (newY < oldY || newX < oldX) {
return Direction.NEGATIVE
}
if(newX > oldX || newY > oldY) {
return Direction.POSITIVE;
if (newX > oldX || newY > oldY) {
return Direction.POSITIVE
}
return Direction.NOCHANGE;
return Direction.NOCHANGE
}
const charTexture = computed(() => {