1
0
forked from noxious/client

Fixed placing tiles

This commit is contained in:
Dennis Postma 2024-10-17 18:39:18 +02:00
parent 3765cfe5e9
commit 3902c611fa
3 changed files with 18 additions and 25 deletions

6
package-lock.json generated
View File

@ -6409,9 +6409,9 @@
"license": "MIT"
},
"node_modules/sass": {
"version": "1.79.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.79.6.tgz",
"integrity": "sha512-PVVjeeiUGx6Nj4PtEE/ecwu8ltwfPKzHxbbVmmLj4l1FYHhOyfA0scuVF8sVaa+b+VY4z7BVKjKq0cPUQdUU3g==",
"version": "1.80.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.80.1.tgz",
"integrity": "sha512-9lBwDZ7j3y/1DKj5Ec249EVGo5CVpwnzIyIj+cqlCjKkApLnzsJ/l9SnV4YnORvW9dQwQN+gQvh/mFZ8CnDs7Q==",
"dev": true,
"license": "MIT",
"dependencies": {

View File

@ -5,16 +5,15 @@
<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 { getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
import Controls from '@/components/utilities/Controls.vue'
import { z } from 'zod'
import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const emit = defineEmits(['tilemap:create'])
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const scene = useScene()
@ -37,16 +36,10 @@ function createTilemap() {
}
function createTileLayer() {
const tilesFromZone = zoneEditorStore.zone?.tiles || []
const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
}) as any
// Add blank tile
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, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)
@ -62,17 +55,17 @@ function handleTileClick(pointer: Phaser.Input.Pointer) {
// Check if tool is pencil
if (zoneEditorStore.tool !== 'pencil') return
// Check if left mouse button is pressed
if (!pointer.isDown) return
// Check if there is a tile
const tile = getTile(pointer.worldX, pointer.worldY, tiles)
if (!tile) return
if (!zoneEditorStore.selectedTile) {
return
}
// Check if there is a selected tile
if (!zoneEditorStore.selectedTile) return
console.log('yolo')
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, zoneEditorStore.selectedTile.id)
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
}
onBeforeMount(() => {
@ -82,11 +75,11 @@ onBeforeMount(() => {
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
tileArray = zoneEditorStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handleTileClick)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
})
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handleTileClick)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
zoneTilemap.destroyLayer('tiles')
zoneTilemap.removeAllLayers()

View File

@ -36,8 +36,8 @@ export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: numb
}
export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
tiles.forEach((row, y) => {
row.forEach((tile, x) => {
tiles.forEach((row: string[], y: number) => {
row.forEach((tile: string, x: number) => {
placeTile(zone, layer, x, y, tile)
})
})