diff --git a/src/components/game/map/partials/ImageGroup.vue b/src/components/game/map/partials/ImageGroup.vue index fcfac9a..fb0c728 100644 --- a/src/components/game/map/partials/ImageGroup.vue +++ b/src/components/game/map/partials/ImageGroup.vue @@ -12,7 +12,7 @@ import { computed, defineProps, onMounted, onUnmounted } from 'vue' const mapEditor = useMapEditorComposable() const partitionPoints = [0] -const baseDepth = computed(() => calculateIsometricDepth(props.x!, props.y!)) +let baseDepth = 0 const props = defineProps<{ obj?: PlacedMapObject @@ -31,7 +31,7 @@ const createImagePartition = (startX: number, endX: number, depthOffset: number) img.setOrigin(props.mapObj.originX, props.mapObj.originY) img.setCrop(startX, 0, endX, props.mapObj?.frameHeight) - img.setDepth(baseDepth.value + depthOffset) + img.setDepth(baseDepth + depthOffset) group.add(img) } @@ -45,8 +45,11 @@ onPreUpdate(() => { const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id + baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY) + group.setAlpha(isMoving || isSelected ? 0.5 : 1) group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff) + group.setDepth(baseDepth) let orderedImages = group.getChildren() @@ -54,13 +57,25 @@ onPreUpdate(() => { const image = child as Phaser.GameObjects.Image if (image && props.obj) { image.flipX = props.obj.isRotated; + if (props.obj.isRotated) { - image.setDepth(baseDepth.value + props.mapObj!.depthOffsets.reverse()[index]) + var offsetNum = props.mapObj!.depthOffsets.length + + //Could break in case of images with odd partion number + //Shifts image over so that it becomes aligned again after flipping + if (index < offsetNum/2) { + image.x = props.x! - (props.mapObj!.frameWidth/offsetNum) + } + else { + image.x = props.x! + (props.mapObj!.frameWidth/offsetNum) + } + + image.setDepth(baseDepth - props.mapObj!.depthOffsets[index]) } else { - image.setDepth(baseDepth.value + props.mapObj!.depthOffsets[index]) + image.x = props.x! + image.setDepth(baseDepth + props.mapObj!.depthOffsets[index]) } - image.setCrop() } }) }) @@ -68,6 +83,8 @@ onPreUpdate(() => { // Initial setup if (props.mapObj && props.x && props.y) { + baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY) + group.setXY(props.x, props.y) group.setOrigin(props.mapObj.originX, props.mapObj.originY) diff --git a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue index 5712bb0..fb2838f 100644 --- a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue +++ b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue @@ -114,7 +114,7 @@ if (selectedMapObject.value) { mapObjectFrameHeight.value = selectedMapObject.value.frameHeight } -const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = event.target.value +const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value) async function removeObject() { if (!selectedMapObject.value) return diff --git a/src/components/gameMaster/mapEditor/Map.vue b/src/components/gameMaster/mapEditor/Map.vue index ace7e99..603fe74 100644 --- a/src/components/gameMaster/mapEditor/Map.vue +++ b/src/components/gameMaster/mapEditor/Map.vue @@ -179,7 +179,6 @@ function handlePointerMove(pointer: Phaser.Input.Pointer) { if (mapEditor.inputMode.value === 'hold' && pointer.isDown) { handlePointerDown(pointer) } - scene.children.depthSort() } function handlePointerUp(pointer: Phaser.Input.Pointer) { @@ -236,6 +235,10 @@ onUnmounted(() => { mapEditor.reset() }) +setInterval( () => { + scene.children.queueDepthSort() +}, 0.2) + onBeforeUnmount(() => { removeEventListener('keydown', handleKeyDown) }) diff --git a/src/services/mapService.ts b/src/services/mapService.ts index ccafbb2..b3fe022 100644 --- a/src/services/mapService.ts +++ b/src/services/mapService.ts @@ -62,8 +62,8 @@ export function createTileArray(width: number, height: number, tile: string = 'b return Array.from({ length: height }, () => Array.from({ length: width }, () => tile)) } -export const calculateIsometricDepth = (positionX: number, positionY: number, pivotPoints: { x: number; y: number }[] = []) => { - return Math.max(positionX + positionY) +export const calculateIsometricDepth = (positionX: number, positionY: number) => { + return positionX + positionY } async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) {