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

Tile asset management 90% done

Browse Source
This commit is contained in:
Dennis Postma
2024-07-02 21:53:50 +02:00
parent fc72c83f8d
commit 4c6978e0c0
13 changed files with 176 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -7,7 +7,8 @@
<template #modalBody>
<div class="container tiles">
<div class="tiles">
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
<img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
<img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
</div>
</div>
</template>
@ -30,7 +31,7 @@ const zoneEditorStore = useZoneEditorStore()
onMounted(async () => {
isModalOpen.value = true
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response.map((tile) => `${config.server_endpoint}/assets/tiles/${tile}`)
tiles.value = response;
})
})
</script>

41
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -4,16 +4,15 @@
<Controls :layer="tiles" />
<!-- @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
<Container>
<Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
<Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />
<Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
<!-- <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />-->
<!-- <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />-->
<!-- <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />-->
</Container>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
<Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
<Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
<GmPanel />
</template>
<script setup lang="ts">
@ -29,7 +28,7 @@ import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
import { tileToWorldXY } from '@/services/zone'
import { placeTile, tileToWorldXY } from '@/services/zone'
import GmPanel from '@/components/utilities/GmPanel.vue'
import { useAssetStore } from '@/stores/assets'
@ -49,8 +48,7 @@ const zoneData = new Phaser.Tilemaps.MapData({
})
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
let tilesetImages: Tileset[] = [];
const tilesetImages: Tileset[] = [];
/**
* Walk through tiles and add them to the zone as tilesetImages
@ -60,19 +58,14 @@ toRaw(assetStore.assets).forEach((asset) => {
if (asset.group !== 'tiles') return
tilesetImages.push(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
})
tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))
function placeTile(layer: TilemapLayer, x: number, y: number, tileName: string) {
let tileImg = zone.getTileset(tileName) as Tileset;
if (!tileImg) return
layer.putTileAt(tileImg.firstgid, x, y);
}
placeTile(zone, tiles, 0, 0, 'blank_tile')
placeTile(tiles, 0, 0, 'tile_0.png')
onMounted(() => {})
const pos = tileToWorldXY(tiles, 1, 1)
const pos2 = tileToWorldXY(tiles, 1, 2)
const pos3 = tileToWorldXY(tiles, 2, 1)
@ -97,20 +90,21 @@ console.log(pos)
function eraser(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') {
placeTile(tiles, tile.x, tile.y, 'tile_0.png')
placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
zoneEditorStore.updateTile(tile.x, tile.y, 0)
}
if (zoneEditorStore.drawMode === 'wall') {
walls.putTileAt(0, tile.x, tile.y)
zoneEditorStore.updateWall(tile.x, tile.y, 0)
}
// if (zoneEditorStore.drawMode === 'wall') {
// walls.putTileAt(0, tile.x, tile.y)
// zoneEditorStore.updateWall(tile.x, tile.y, 0)
// }
}
function pencil(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') {
if (zoneEditorStore.selectedTile === null) return
placeTile(tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
if (!zoneEditorStore.selectedTile) return
console.log('placing tile', tile.x, tile.y, zoneEditorStore.selectedTile)
placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
// zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
}
@ -133,8 +127,9 @@ function save() {
})
}
onMounted(() => {})
onBeforeMount(() => {
// exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(tiles, x, y, 'tile_2.png')))
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
})