noxious/client
3
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -7,8 +7,7 @@
<Objects /> <Objects />
<ZoneSettings /> <ZoneSettings />
<TeleportModal v-if="shouldShowTeleportModal" /> <TeleportModal v-if="shouldShowTeleportModal" />
<!-- Disabled for now since it bottlenecks performance -->
<!-- <TilemapLayerC :tilemap="zoneTilemap as Tilemap" :tileset="tileArray as any" :layerIndex="0" :cull-padding="3" />-->
<Controls :layer="tiles as TilemapLayer" /> <Controls :layer="tiles as TilemapLayer" />
<Container :depth="2"> <Container :depth="2">
@ -25,7 +24,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onBeforeMount, onUnmounted, ref, watch } from 'vue' import { computed, onBeforeMount, onUnmounted, ref, watch } from 'vue'
import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer' import { Container, Image, useScene } from 'phavuer'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
@ -69,18 +68,22 @@ function createTilemap() {
tileWidth: config.tile_size.x, tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y, tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D, format: Phaser.Tilemaps.Formats.ARRAY_2D
}) })
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData) const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
return tilemap return tilemap
} }
function createTileLayer() { function createTileLayer() {
const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1)) const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }))
tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0)) tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y }))
const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
//set layerindex
layer.setDepth(0) layer.setDepth(0)
layer.setCullPadding(2, 2)
layer.setOrigin(0.2, 0.5)
return layer return layer
} }

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

@ -1,14 +1,14 @@
<template> <template>
<Container :depth="999" v-if="props.character" :x="currentX" :y="currentY"> <Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
<!-- Start chat bubble --> <!-- Start chat bubble -->
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />--> <!-- <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' }" />--> <!-- <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 --> <!-- End chat bubble -->
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" /> <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="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" /> <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
</Container> </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"> <Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" /> <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" /> <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 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 currentX = ref(0)
const currentY = ref(0) const currentY = ref(0)
const tween = ref<Phaser.Tweens.Tween | null>(null) const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true) const isInitialPosition = ref(true)
const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => { const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter); isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
console.log(isometricDepth.value); console.log(isometricDepth.value)
} }
const updatePosition = (x: number, y: number, direction: Direction) => { const updatePosition = (x: number, y: number, direction: Direction) => {
@ -91,7 +91,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
duration: duration, duration: duration,
ease: 'Linear', ease: 'Linear',
onStart: () => { onStart: () => {
if(direction === Direction.POSITIVE) { if (direction === Direction.POSITIVE) {
calculateLocalDepth(x, y, 28, 94, true) 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 currentY.value = tween.targets[0].y ?? 0
}, },
onComplete: () => { onComplete: () => {
if(direction === Direction.NEGATIVE) { if (direction === Direction.NEGATIVE) {
calculateLocalDepth(x, y, 28, 94, true) calculateLocalDepth(x, y, 28, 94, true)
} }
} }
@ -113,11 +113,11 @@ watch(
(newChar, oldChar) => { (newChar, oldChar) => {
if (!newChar) return if (!newChar) return
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) { if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
if(!oldChar) { if (!oldChar) {
updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE); updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE)
} else { } else {
const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY); const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
updatePosition(newChar.positionX, newChar.positionY, direction); updatePosition(newChar.positionX, newChar.positionY, direction)
} }
} }
}, },
@ -125,13 +125,13 @@ watch(
) )
const calcDirection = (oldX, oldY, newX, newY) => { const calcDirection = (oldX, oldY, newX, newY) => {
if(newY < oldY || newX < oldX) { if (newY < oldY || newX < oldX) {
return Direction.NEGATIVE; return Direction.NEGATIVE
} }
if(newX > oldX || newY > oldY) { if (newX > oldX || newY > oldY) {
return Direction.POSITIVE; return Direction.POSITIVE
} }
return Direction.NOCHANGE; return Direction.NOCHANGE
} }
const charTexture = computed(() => { const charTexture = computed(() => {

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

@ -1,6 +1,6 @@
<template> <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)" />--> <!-- <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> </template>
<script setup lang="ts"> <script setup lang="ts">

10
src/components/zone/Tiles.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- Disabled for now since it bottlenecks performance --> <!-- Disabled for now since it bottlenecks performance -->
<!-- <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="0" />--> <!-- <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="0" />-->
<Controls :layer="tiles" :depth="0" /> <Controls :layer="tiles" :depth="0" />
</template> </template>
@ -44,14 +44,14 @@ function createTileLayer() {
const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean)) const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
const tilesetImages = Array.from(uniqueTiles).map((tile, index) => { const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
return zoneTilemap.value.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, {x: 0, y: -config.tile_size.y}) return zoneTilemap.value.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y })
}) as any }) as any
// Add blank tile // Add blank tile
tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0)) tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y }))
const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0) layer.setDepth(0)
layer.setCullPadding(0) layer.setCullPadding(2, 2)
layer.setOrigin(0.2, 0.5) layer.setOrigin(0.2, 0.5)
return layer return layer
} }