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

Depth sorting fix based on direction

Browse Source
This commit is contained in:
Zaxiure 2024-09-15 23:27:47 +02:00
parent 6d5c3ab3b3
commit 5bd0ffd2e1
No known key found for this signature in database
2 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,8 @@
<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="calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true)" v-if="props.character" :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" />
</Container>
@ -21,6 +22,12 @@ import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import config from '@/config'
enum Direction {
POSITIVE,
NEGATIVE,
NOCHANGE
}
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
character?: CharacterT
@ -30,12 +37,18 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined
})
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 updatePosition = (x: number, y: number) => {
const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter);
console.log(isometricDepth.value);
}
const updatePosition = (x: number, y: number, direction: Direction) => {
const targetX = tileToWorldX(props.layer, x, y)
const targetY = tileToWorldY(props.layer, x, y)
@ -77,9 +90,19 @@ const updatePosition = (x: number, y: number) => {
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)
}
}
})
}
@ -90,12 +113,27 @@ watch(
(newChar, oldChar) => {
if (!newChar) return
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
updatePosition(newChar.positionX, newChar.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);
}
}
},
{ immediate: true, deep: true }
)
const calcDirection = (oldX, oldY, newX, newY) => {
if(newY < oldY || newX < oldX) {
return Direction.NEGATIVE;
}
if(newX > oldX || newY > oldY) {
return Direction.POSITIVE;
}
return Direction.NOCHANGE;
}
const charTexture = computed(() => {
if (!props.character?.characterType?.sprite) {
return 'idle_right_down'
@ -121,7 +159,7 @@ const createText = (text: Phaser.GameObjects.Text) => {
onMounted(() => {
if (props.character) {
updatePosition(props.character.positionX, props.character.positionY)
updatePosition(props.character.positionX, props.character.positionY, Direction.Positive)
}
})

14
src/components/zone/Objects.vue
View File

@ -1,10 +1,11 @@
<template>
<Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
<Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
<!-- <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
</template>
<script setup lang="ts">
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
import { Image } from 'phavuer'
import { Image, Text } from 'phavuer'
import { useZoneStore } from '@/stores/zone'
import type { ZoneObject } from '@/types'
@ -14,6 +15,15 @@ const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
}>()
const getObjectProps = (object: ZoneObject) => {
return {
x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
originY: Number(object.object.originX),
originX: Number(object.object.originY)
}
}
const getObjectImageProps = (object: ZoneObject) => {
return {
x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),