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

worked on wall logics

Browse Source
This commit is contained in:
Dennis Postma
2024-06-15 03:15:20 +02:00
parent 92103cea9e
commit 4a04bf06cc
10 changed files with 172 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/utilities/zoneEditor/Decorations.vue
View File

@ -22,7 +22,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
const wallWidth = config.wall_size.x
const wallHeight = config.wall_size.y
const walls = ref<string[]>([])
const walls = ref<number[][]>([])
const selectedWall = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

2
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -22,7 +22,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
const tileWidth = config.tile_size.x
const tileHeight = config.tile_size.y
const tiles = ref<string[]>([])
const tiles = ref<number[][]>([])
const selectedTile = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

2
src/components/utilities/zoneEditor/Walls.vue
View File

@ -22,7 +22,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
const wallWidth = config.wall_size.x
const wallHeight = config.wall_size.y
const walls = ref<string[]>([])
const walls = ref<number[][]>([])
const selectedWall = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

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

@ -1,7 +1,8 @@
<template>
<TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="layer" />
<Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" />
<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" />
@ -28,23 +29,48 @@ let scene = useScene()
const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore()
let tileMap = generateTilemap(scene, zoneEditorStore.width, zoneEditorStore.height);
let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
// 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, config.tile_size.y) as TilemapLayer
// center camera
const centerY = (tileMap.height * tileMap.tileHeight) / 2
const centerX = (tileMap.width * tileMap.tileWidth) / 2
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 })
})
const tiles = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
zoneEditorStore.setTiles(tiles)
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
// Watch for changes in the zoneStore and update the layer
// watch(
// () => zoneEditorStore.tiles,
@ -55,21 +81,39 @@ zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTile
// { deep: true }
// )
socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
tileMap = generateTilemap(scene, data.width, data.height);
zoneEditorStore.setName(data.name)
zoneEditorStore.setWidth(data.width)
zoneEditorStore.setTiles(data.tilesForPublic)
})
// 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) {
layer.putTileAt(0, tile.x, tile.y)
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.selectedTile === null) return
layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
zoneEditorStore.updateTile(tile.x, tile.y, zoneEditorStore.selectedTile);
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() {
@ -79,6 +123,7 @@ function save() {
width: zoneEditorStore.width,
height: zoneEditorStore.height,
tiles: zoneEditorStore.tiles,
walls: zoneEditorStore.walls
})
}

2
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-height="440">
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="345" :is-resizable="false">
<template #modalHeader>
<h3 class="modal-title">Zone settings</h3>
</template>

1
src/screens/Game.vue
View File

@ -70,6 +70,7 @@ const preloadScene = (scene: Phaser.Scene) => {
* Don't forget to check how intensive that operation is with sockets for performance
*/
scene.load.image('tiles', '/assets/zone/tiles.png')
scene.load.image('walls', '/assets/zone/walls.png')
scene.load.image('waypoint', '/assets/waypoint.png')
scene.textures.addBase64(
'character',

10
src/services/zone.ts
View File

@ -25,13 +25,5 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
}
export function generateTilemap(scene: Phaser.Scene, width: number, height: number, ) {
const zoneData = new Phaser.Tilemaps.MapData({
width: width, // @TODO : get this from the server
height: height, // @TODO : get this from the server
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
return new Phaser.Tilemaps.Tilemap(scene, zoneData);
}

28
src/stores/zoneEditor.ts
View File

@ -2,13 +2,15 @@ import { defineStore } from 'pinia'
export const useZoneEditorStore = defineStore('zoneEditor', {
state: () => ({
active: false,
active: true,
name: '',
width: 10,
height: 10,
tiles: [] as number[][],
walls: [] as number[][],
decorations: [] as number[][],
tool: 'move',
drawMode: 'tile',
drawMode: 'wall',
selectedTile: null,
selectedWall: null,
selectedDecoration: null,
@ -33,6 +35,18 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
updateTile(x: number, y: number, tile: number) {
this.tiles[y][x] = tile
},
setWalls(walls: number[][]) {
this.walls = walls
},
updateWall(x: number, y: number, wall: number) {
this.walls[y][x] = wall
},
setDecorations(decorations: number[][]) {
this.decorations = decorations
},
updateDecoration(x: number, y: number, decoration: number) {
this.decorations[y][x] = decoration
},
setTool(tool: string) {
this.tool = tool
},
@ -57,11 +71,17 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
this.height = 10
this.tiles = []
this.tool = 'move'
this.drawMode = 'tile'
this.drawMode = 'wall'
this.selectedTile = null
this.selectedWall = null
this.selectedDecoration = null
this.isSettingsModalShown = false
}
}
})
})
/**
* Resources:
* https://www.html5gamedevs.com/topic/21908-phaser-is-there-any-tutorial-on-how-to-do-an-isometric-game/
* http://murdochcarpenter.com/isometric-starling-part-i/
*/

31
src/types.ts
View File

@ -36,44 +36,23 @@ export type Zone = {
name: string;
width: number;
height: number;
tiles: ZoneTile[];
tiles: number[][];
walls: number[][];
decorations: ZoneDecoration[];
walls: ZoneWall[];
characters: Character[];
chats: Chat[];
createdAt: Date;
updatedAt: Date;
};
// ZoneTile model
export type ZoneTile = {
id: number;
zone: Zone;
zoneId: number;
x: number;
y: number;
type: number;
};
// ZoneDecoration model
export type ZoneDecoration = {
id: number;
zone: Zone;
zoneId: number;
x: number;
y: number;
type: number;
};
// ZoneWall model
export type ZoneWall = {
id: number;
zone: Zone;
zoneId: number;
x: number;
y: number;
type: number;
};
position_x: number;
position_y: number;
}
// Chat model
export type Chat = {