140 lines
5.3 KiB
Vue
140 lines
5.3 KiB
Vue
<template>
|
|
<TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
|
<TilemapLayerC :tilemap="wallTilemap" :tileset="[]" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
|
<Controls :layer="exampleTiles" />
|
|
<Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
|
|
<Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
|
|
<Walls v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'wall'" />
|
|
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import config from '@/config'
|
|
import Tileset = Phaser.Tilemaps.Tileset
|
|
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
|
import { Container, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
|
|
import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
|
|
import Controls from '@/components/utilities/Controls.vue'
|
|
import { useSocketStore } from '@/stores/socket'
|
|
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
|
|
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
|
|
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
|
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
|
|
import Walls from '@/components/utilities/zoneEditor/Walls.vue'
|
|
import { generateTilemap } from '@/services/zone'
|
|
import type { Zone } from '@/types'
|
|
|
|
// Phavuer logic
|
|
let scene = useScene()
|
|
const socket = useSocketStore()
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
|
|
// Tile tilemap
|
|
const tileMapData = new Phaser.Tilemaps.MapData({
|
|
width: zoneEditorStore.width,
|
|
height: zoneEditorStore.height,
|
|
tileWidth: config.tile_size.x,
|
|
tileHeight: config.tile_size.y,
|
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
|
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
|
})
|
|
let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData);
|
|
let tilesImg = tileTilemap.addTilesetImage('default', 'tiles')
|
|
let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
|
|
let tiles = tileTilemap.createBlankLayer('tiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
|
|
|
|
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
|
|
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
|
|
|
|
// Wall tilemap
|
|
const wallMapData = new Phaser.Tilemaps.MapData({
|
|
width: zoneEditorStore.width,
|
|
height: zoneEditorStore.height,
|
|
tileWidth: config.wall_size.x,
|
|
tileHeight: config.wall_size.y,
|
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
|
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
|
})
|
|
let wallTilemap = new Phaser.Tilemaps.Tilemap(scene, wallMapData);
|
|
let wallsImg = wallTilemap.addTilesetImage('default', 'walls', undefined, undefined, undefined, undefined, undefined, {
|
|
x: 0,
|
|
y: 0
|
|
});
|
|
let walls = wallTilemap.createBlankLayer('walls', wallsImg as Tileset, 0, 0) as TilemapLayer
|
|
|
|
|
|
// center camera
|
|
const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
|
|
const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
|
|
scene.cameras.main.centerOn(centerX, centerY)
|
|
|
|
onBeforeMount(() => {
|
|
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
|
|
})
|
|
|
|
// Watch for changes in the zoneStore and update the layer
|
|
// watch(
|
|
// () => zoneEditorStore.tiles,
|
|
// () => {
|
|
// // @TODO : change to zone for when loading other maps
|
|
// zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
|
|
// },
|
|
// { deep: true }
|
|
// )
|
|
|
|
// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
|
|
// tileTilemap = generateTilemap(scene, data.width, data.height);
|
|
// zoneEditorStore.setName(data.name)
|
|
// zoneEditorStore.setWidth(data.width)
|
|
// zoneEditorStore.setHeight(data.height)
|
|
// })
|
|
|
|
function eraser(tile: Phaser.Tilemaps.Tile) {
|
|
if (zoneEditorStore.drawMode === 'tile') {
|
|
tiles.putTileAt(0, tile.x, tile.y)
|
|
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);
|
|
}
|
|
}
|
|
|
|
function pencil(tile: Phaser.Tilemaps.Tile) {
|
|
if (zoneEditorStore.drawMode === 'tile') {
|
|
if (zoneEditorStore.selectedTile === null) return
|
|
tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
|
|
// isometric fix
|
|
zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile);
|
|
}
|
|
|
|
if (zoneEditorStore.drawMode === 'wall') {
|
|
// @TODO fix position
|
|
if (zoneEditorStore.selectedWall === null) return
|
|
walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y)
|
|
zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall);
|
|
}
|
|
}
|
|
|
|
function save() {
|
|
socket.connection.emit('gm:zone_editor:zone:save', {
|
|
zoneId: socket.character.zoneId,
|
|
name: zoneEditorStore.name,
|
|
width: zoneEditorStore.width,
|
|
height: zoneEditorStore.height,
|
|
tiles: zoneEditorStore.tiles,
|
|
walls: zoneEditorStore.walls
|
|
})
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
zoneEditorStore.reset();
|
|
})
|
|
|
|
/**
|
|
* Resources:
|
|
* https://stackoverflow.com/questions/14488989/drawing-isometric-walls
|
|
*/
|
|
</script>
|