imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Depth sorting fix for larger objects

Browse Source
This commit is contained in:
Dennis Postma
2024-09-15 20:44:06 +02:00
parent ed3955db17
commit f8d3cd1f48
5 changed files with 21 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<Container v-if="props.character" :x="currentX" :y="currentY">
<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' }" />
@ -7,6 +7,8 @@
<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>
<Container :depth="calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true)" 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>
@ -15,7 +17,7 @@
<script lang="ts" setup>
import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/services/zone'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import config from '@/config'
@ -86,10 +88,9 @@ const updatePosition = (x: number, y: number) => {
watch(
() => props.character,
(newChar, oldChar) => {
if (newChar) {
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
updatePosition(newChar.positionX, newChar.positionY)
}
if (!newChar) return
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
updatePosition(newChar.positionX, newChar.positionY)
}
},
{ immediate: true, deep: true }
@ -105,14 +106,12 @@ const charTexture = computed(() => {
const action = props.character.isMoving ? 'walk' : 'idle'
if (rotation === 0 || rotation === 6) {
if (config.development) console.log(`${spriteId}-${action}_left_down`)
return `${spriteId}-${action}_left_up`
} else if (rotation === 2 || rotation === 4) {
if (config.development) console.log(`${spriteId}-${action}_right_down`)
return `${spriteId}-${action}_right_down`
}
return `${spriteId}-${action}_left_down`
return `${spriteId}-${action}_left_up`
})
const createText = (text: Phaser.GameObjects.Text) => {