imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

😂🔫

Browse Source
This commit is contained in:
Dennis Postma
2024-06-30 23:27:06 +02:00
parent 37460a9497
commit f0c5c81e86
5 changed files with 102 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="exampleTiles" />
<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" />
@ -9,7 +9,7 @@
<Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
</Container>
<Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
<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" />
@ -31,14 +31,15 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
import { tileToWorldXY } from '@/services/zone'
import GmPanel from '@/components/utilities/GmPanel.vue'
import { useAssetStore } from '@/stores/assets'
// Phavuer logic
let scene = useScene()
const scene = useScene()
const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore()
// Tile tilemap
const tileMapData = new Phaser.Tilemaps.MapData({
const zoneData = new Phaser.Tilemaps.MapData({
width: zoneEditorStore.width,
height: zoneEditorStore.height,
tileWidth: config.tile_size.x,
@ -46,25 +47,40 @@ const tileMapData = new Phaser.Tilemaps.MapData({
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
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
let tilesetImages: Tileset[] = [];
assetStore.assets.forEach((asset) => {
if (asset.group !== 'tiles') {
return
}
tilesetImages.push(zone.addTilesetImage(asset.key) 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 }, () => 'tile_0.png'))
onMounted(() => {})
const pos = tileToWorldXY(exampleTiles, 1, 1)
const pos2 = tileToWorldXY(exampleTiles, 1, 2)
const pos3 = tileToWorldXY(exampleTiles, 2, 1)
const pos = tileToWorldXY(tiles, 1, 1)
const pos2 = tileToWorldXY(tiles, 1, 2)
const pos3 = tileToWorldXY(tiles, 2, 1)
console.log(pos)
// center camera
const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
const centerY = (zone.height * zone.tileHeight) / 2
const centerX = (zone.width * zone.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)
onBeforeMount(() => {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
function placeTile(x: number, y: number, tileType: string) {
const tileset = map.getTileset(tileType);
layer.putTileAt(tileset.firstgid, x, y);
}
onBeforeMount(() => {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => tiles.putTileAt(tile, x, y)))
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
})