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

Typo fixes, started working on bug fix, npm update

Browse Source
This commit is contained in:
Dennis Postma
2024-11-04 21:04:44 +01:00
parent 89938b7f93
commit 864369860c
5 changed files with 204 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<template>
<ZoneTiles @tilemap:create="tileMap = $event" />
<ZoneTiles @tileMap:create="tileMap = $event" />
<ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<Toolbar @save="save" />
<Toolbar @save="save" @clear="clear" />
<ZoneList />
<TileList />
@ -32,8 +32,16 @@ import ZoneEventTiles from '@/components/gameMaster/zoneEditor/ZoneEventTiles.vu
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
function clear() {
if (!zoneEditorStore.zone) return
zoneEditorStore.zone.zoneObjects = []
zoneEditorStore.zone.zoneEventTiles = []
}
function save() {
if (!zoneEditorStore.zone) return

46
src/components/gameMaster/zoneEditor/ZoneTiles.vue
View File

@ -1,5 +1,5 @@
<template>
<Controls :layer="tiles" :depth="0" />
<Controls :layer="tileLayer" :depth="0" />
</template>
<script setup lang="ts">
@ -12,20 +12,20 @@ import Controls from '@/components/utilities/Controls.vue'
import { useGameStore } from '@/stores/gameStore'
import type { AssetDataT } from '@/types'
const emit = defineEmits(['tilemap:create'])
const emit = defineEmits(['tileMap:create'])
const scene = useScene()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
const tileMap = createTileMap()
const tileLayer = createTileLayer()
/**
* A Tilemap is a container for Tilemap data.
* This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
*/
function createTilemap() {
function createTileMap() {
const zoneData = new Phaser.Tilemaps.MapData({
width: zoneEditorStore.zone?.width,
height: zoneEditorStore.zone?.height,
@ -34,9 +34,11 @@ function createTilemap() {
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
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
emit('tileMap:create', newTileMap)
return newTileMap
}
/**
@ -46,12 +48,12 @@ function createTileLayer() {
const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
return zoneTilemap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
}) as any
// Add blank tile
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
tilesetImages.push(tileMap.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 = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)
@ -79,11 +81,11 @@ function pencil(pointer: Phaser.Input.Pointer) {
if (pointer.event.shiftKey) return
// Check if there is a tile
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Place tile
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
placeTile(tileMap, tileLayer, tile.x, tile.y, zoneEditorStore.selectedTile)
// Adjust zoneEditorStore.zone.tiles
zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile
@ -109,11 +111,11 @@ function eraser(pointer: Phaser.Input.Pointer) {
if (pointer.event.altKey) return
// Check if there is a tile
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Place tile
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
// Adjust zoneEditorStore.zone.tiles
zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
@ -139,10 +141,10 @@ function paint(pointer: Phaser.Input.Pointer) {
if (pointer.event.altKey) return
// Set new tileArray with selected tile
setLayerTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile.id))
// Adjust zoneEditorStore.zone.tiles
zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
zoneEditorStore.zone.tiles = createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile.id)
}
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
@ -166,7 +168,7 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
if (!pointer.event.altKey) return
// Check if there is a tile
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Select the tile
@ -177,7 +179,7 @@ onMounted(() => {
if (!zoneEditorStore.zone?.tiles) {
return
}
setLayerTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
setLayerTiles(tileMap, tileLayer, zoneEditorStore.zone.tiles)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
@ -191,8 +193,8 @@ onUnmounted(() => {
scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
zoneTilemap.destroyLayer('tiles')
zoneTilemap.removeAllLayers()
zoneTilemap.destroy()
tileMap.destroyLayer('tiles')
tileMap.removeAllLayers()
tileMap.destroy()
})
</script>

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

@ -1,5 +1,5 @@
<template>
<ZoneTiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
<ZoneTiles :key="zoneStore.zone?.id ?? 0" @tileMap:create="tileMap = $event" />
<ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
</template>

32
src/components/zone/ZoneTiles.vue
View File

@ -1,5 +1,5 @@
<template>
<Controls :layer="tiles" :depth="0" />
<Controls :layer="tileLayer" :depth="0" />
</template>
<script setup lang="ts">
@ -11,19 +11,19 @@ import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
import Controls from '@/components/utilities/Controls.vue'
import { unduplicateArray } from '@/utilities'
const emit = defineEmits(['tilemap:create'])
const emit = defineEmits(['tileMap:create'])
const scene = useScene()
const zoneStore = useZoneStore()
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
const tileMap = createTileMap()
const tileLayer = createTileLayer()
/**
* A Tilemap is a container for Tilemap data.
* This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
*/
function createTilemap() {
function createTileMap() {
const zoneData = new Phaser.Tilemaps.MapData({
width: zoneStore.zone?.width,
height: zoneStore.zone?.height,
@ -32,9 +32,11 @@ function createTilemap() {
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
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
emit('tileMap:create', newTileMap)
return newTileMap
}
/**
@ -44,12 +46,12 @@ function createTileLayer() {
const tilesArray = unduplicateArray(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
return tileMap.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
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
tilesetImages.push(tileMap.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 = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)
@ -57,11 +59,11 @@ function createTileLayer() {
return layer
}
setLayerTiles(zoneTilemap, tiles, zoneStore.zone?.tiles)
setLayerTiles(tileMap, tileLayer, zoneStore.zone?.tiles)
onBeforeUnmount(() => {
zoneTilemap.destroyLayer('tiles')
zoneTilemap.removeAllLayers()
zoneTilemap.destroy()
tileMap.destroyLayer('tiles')
tileMap.removeAllLayers()
tileMap.destroy()
})
</script>