147 lines
4.6 KiB
Vue
147 lines
4.6 KiB
Vue
<template>
|
|
<Controls :layer="tiles" :depth="0" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import config from '@/config'
|
|
import { useScene } from 'phavuer'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
|
import { onBeforeMount, onBeforeUnmount } from 'vue'
|
|
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
|
|
import Controls from '@/components/utilities/Controls.vue'
|
|
|
|
const emit = defineEmits(['tilemap:create'])
|
|
|
|
const scene = useScene()
|
|
const gameStore = useGameStore()
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
|
|
const zoneTilemap = createTilemap()
|
|
const tiles = createTileLayer()
|
|
|
|
function createTilemap() {
|
|
const zoneData = new Phaser.Tilemaps.MapData({
|
|
width: zoneEditorStore.zone?.width,
|
|
height: zoneEditorStore.zone?.height,
|
|
tileWidth: config.tile_size.x,
|
|
tileHeight: config.tile_size.y,
|
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
|
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
|
})
|
|
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
|
emit('tilemap:create', tilemap)
|
|
return tilemap
|
|
}
|
|
|
|
function createTileLayer() {
|
|
const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
|
|
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
|
|
|
|
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
|
|
|
layer.setDepth(0)
|
|
layer.setCullPadding(2, 2)
|
|
|
|
return layer
|
|
}
|
|
|
|
function pencil(pointer: Phaser.Input.Pointer) {
|
|
// Check if zone is set
|
|
if (!zoneEditorStore.zone) return
|
|
|
|
// Check if tool is pencil
|
|
if (zoneEditorStore.tool !== 'pencil') return
|
|
|
|
// Check if draw mode is tile
|
|
if (zoneEditorStore.drawMode !== 'tile') return
|
|
|
|
// Check if there is a selected tile
|
|
if (!zoneEditorStore.selectedTile) return
|
|
|
|
// Check if left mouse button is pressed
|
|
if (!pointer.isDown) return
|
|
|
|
// Check if shift is not pressed, this means we are moving the camera
|
|
if (pointer.event.shiftKey) return
|
|
|
|
// Check if there is a tile
|
|
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
|
|
if (!tile) return
|
|
|
|
// Place tile
|
|
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
|
|
|
|
// Adjust zoneEditorStore.zone.tiles
|
|
zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
|
|
}
|
|
|
|
function eraser(pointer: Phaser.Input.Pointer) {
|
|
// Check if zone is set
|
|
if (!zoneEditorStore.zone) return
|
|
|
|
// Check if tool is pencil
|
|
if (zoneEditorStore.tool !== 'eraser') return
|
|
|
|
// Check if draw mode is tile
|
|
if (zoneEditorStore.eraserMode !== 'tile') return
|
|
|
|
// Check if left mouse button is pressed
|
|
if (!pointer.isDown) return
|
|
|
|
// Check if shift is not pressed, this means we are moving the camera
|
|
if (pointer.event.shiftKey) return
|
|
|
|
// Check if there is a tile
|
|
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
|
|
if (!tile) return
|
|
|
|
// Place tile
|
|
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
|
|
|
|
// Adjust zoneEditorStore.zone.tiles
|
|
zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
|
|
}
|
|
|
|
function paint(pointer: Phaser.Input.Pointer) {
|
|
// Check if zone is set
|
|
if (!zoneEditorStore.zone) return
|
|
|
|
// Check if tool is pencil
|
|
if (zoneEditorStore.tool !== 'paint') return
|
|
|
|
// Check if there is a selected tile
|
|
if (!zoneEditorStore.selectedTile) return
|
|
|
|
// Check if left mouse button is pressed
|
|
if (!pointer.isDown) return
|
|
|
|
// Set new tileArray with selected tile
|
|
setLayerTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
|
|
|
|
// Adjust zoneEditorStore.zone.tiles
|
|
zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
if (!zoneEditorStore.zone?.tiles) {
|
|
return
|
|
}
|
|
setLayerTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
|
|
|
|
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
|
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
|
scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
|
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
|
scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
|
|
|
|
zoneTilemap.destroyLayer('tiles')
|
|
zoneTilemap.removeAllLayers()
|
|
zoneTilemap.destroy()
|
|
})
|
|
</script>
|