😂🔫
This commit is contained in:
parent
37460a9497
commit
f0c5c81e86
62
package-lock.json
generated
62
package-lock.json
generated
@ -2070,9 +2070,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/runner/node_modules/yocto-queue": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.0.tgz",
|
||||
"integrity": "sha512-cMojmlnwkAgIXqga+2sXshlgrrcI0QEPJ5n58pEvtuFo4PaekfomlCudArDD7hj8Hkswjl0/x4eu4q+Xa0WFgQ==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
|
||||
"integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@ -2137,30 +2137,30 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/language-core": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.4.tgz",
|
||||
"integrity": "sha512-wXBhY11qG6pCDAqDnbBRFIDSIwbqkWI7no+lj5+L7IlA7HRIjRP7YQLGzT0LF4lS6eHkMSsclXqy9DwYJasZTQ==",
|
||||
"version": "2.4.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.3.tgz",
|
||||
"integrity": "sha512-hLVn1t7dfvJcZgiXG/83fg6zvzigLYOVyCEG51uRGAnWV+kfPw2/v5iRKIStlcYb1MqCEZXDiLsIm3gWvN1JAQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/source-map": "2.3.4"
|
||||
"@volar/source-map": "2.4.0-alpha.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/source-map": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.4.tgz",
|
||||
"integrity": "sha512-C+t63nwcblqLIVTYXaVi/+gC8NukDaDIQI72J3R7aXGvtgaVB16c+J8Iz7/VfOy7kjYv7lf5GhBny6ACw9fTGQ==",
|
||||
"version": "2.4.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.3.tgz",
|
||||
"integrity": "sha512-tqXfx43WvKvjatkoBKkMpLu5akV/p/hPf2MWdAHmK4W6cGDvNinmPlnp/nxIL0WZGvX76y4XhYb3LQQeN5/nIw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@volar/typescript": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.4.tgz",
|
||||
"integrity": "sha512-acCvt7dZECyKcvO5geNybmrqOsu9u8n5XP1rfiYsOLYGPxvHRav9BVmEdRyZ3vvY6mNyQ1wLL5Hday4IShe17w==",
|
||||
"version": "2.4.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.3.tgz",
|
||||
"integrity": "sha512-fjWaXUlPLedDCyTc4YpDN5c6T7JK/mA7tmSSSirpQOX5CW/gdy3vpC+XbQta/KjVrRRFNYC2pncTBPyethdyxA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "2.3.4",
|
||||
"@volar/language-core": "2.4.0-alpha.3",
|
||||
"path-browserify": "^1.0.1",
|
||||
"vscode-uri": "^3.0.8"
|
||||
}
|
||||
@ -2384,13 +2384,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/language-core": {
|
||||
"version": "2.0.22",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.22.tgz",
|
||||
"integrity": "sha512-dNTAAtEOuMiz7N1s5tKpypnVVCtawxVSF5BukD0ELcYSw+DSbrSlYYSw8GuwvurodCeYFSHsmslE+c2sYDNoiA==",
|
||||
"version": "2.0.24",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.24.tgz",
|
||||
"integrity": "sha512-997YD6Lq/66LXr3ZOLNxDCmyn13z9NP8LU1UZn9hGCDWhzlbXAIP0hOgL3w3x4RKEaWTaaRtsHP9DzHvmduruQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "~2.3.1",
|
||||
"@volar/language-core": "~2.4.0-alpha.2",
|
||||
"@vue/compiler-dom": "^3.4.0",
|
||||
"@vue/shared": "^3.4.0",
|
||||
"computeds": "^0.0.1",
|
||||
@ -5518,15 +5518,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/phaser3-rex-plugins": {
|
||||
"version": "1.80.4",
|
||||
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.4.tgz",
|
||||
"integrity": "sha512-6Pj2brWySF0mbf848gjqDpSaG5L7MX4Y1OgNOm2sj2cKizFXPHAigHmqhIelPH0jRXKCGoVAPMwGURoGRZq9lA==",
|
||||
"version": "1.80.5",
|
||||
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.5.tgz",
|
||||
"integrity": "sha512-hdL3Cm6dK72w6phQdGnEiqqntlwT8SvjU0yit7DkdqiPy/Io1g3KnsRFqndtY+Hu69zaMEuckpIVeQK6yVwx4A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"eventemitter3": "^3.1.2",
|
||||
"i18next": "^22.5.1",
|
||||
"i18next-http-backend": "^2.5.0",
|
||||
"i18next-http-backend": "^2.5.2",
|
||||
"js-yaml": "^4.1.0",
|
||||
"mustache": "^4.2.0",
|
||||
"papaparse": "^5.4.1",
|
||||
@ -6984,9 +6984,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vue-component-type-helpers": {
|
||||
"version": "2.0.22",
|
||||
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.22.tgz",
|
||||
"integrity": "sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==",
|
||||
"version": "2.0.24",
|
||||
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.24.tgz",
|
||||
"integrity": "sha512-Jr5N8QVYEcbQuMN1LRgvg61758G8HTnzUlQsAFOxx6Y6X8kmhJ7C+jOvWsQruYxi3uHhhS6BghyRlyiwO99DBg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -7027,21 +7027,21 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vue-tsc": {
|
||||
"version": "2.0.22",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.22.tgz",
|
||||
"integrity": "sha512-lMBIwPBO0sxCcmvu45yt1b035AaQ8/XSXQDk8m75y4j0jSXY/y/XzfEtssQ9JMS47lDaR10O3/926oCs8OeGUw==",
|
||||
"version": "2.0.24",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.24.tgz",
|
||||
"integrity": "sha512-1qi4P8L7yS78A7OJ7CDDxUIZPD6nVxoQEgX3DkRZNi1HI1qOfzOJwQlNpmwkogSVD6S/XcanbW9sktzpSxz6rA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/typescript": "~2.3.1",
|
||||
"@vue/language-core": "2.0.22",
|
||||
"@volar/typescript": "~2.4.0-alpha.2",
|
||||
"@vue/language-core": "2.0.24",
|
||||
"semver": "^7.5.4"
|
||||
},
|
||||
"bin": {
|
||||
"vue-tsc": "bin/vue-tsc.js"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*"
|
||||
"typescript": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
|
||||
@ -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 })
|
||||
})
|
||||
|
||||
|
||||
@ -36,9 +36,12 @@ import GmTools from '@/components/utilities/GmTools.vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
|
||||
import { useAssetStore } from '@/stores/assets'
|
||||
import type { Asset } from '@/types'
|
||||
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const assetStore = useAssetStore()
|
||||
|
||||
onUnmounted(() => {
|
||||
socket.disconnectSocket()
|
||||
@ -64,23 +67,24 @@ const createGame = (game: Phaser.Game) => {
|
||||
}
|
||||
|
||||
const preloadScene = (scene: Phaser.Scene) => {
|
||||
type Asset = {
|
||||
key: string
|
||||
value: string
|
||||
type: 'base64' | 'link'
|
||||
}
|
||||
|
||||
|
||||
socket.connection.emit('assets:download', {}, (response: Asset[]) => {
|
||||
console.log(response);
|
||||
response.forEach((asset) => {
|
||||
assetStore.addAsset(asset)
|
||||
})
|
||||
})
|
||||
|
||||
assetStore.assets.forEach((asset) => {
|
||||
if (asset.type === 'link') {
|
||||
scene.load.image(asset.key, asset.value)
|
||||
}
|
||||
if (asset.type === 'base64') {
|
||||
scene.textures.addBase64(asset.key, asset.value)
|
||||
}
|
||||
if (asset.type === 'link') {
|
||||
scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
scene.load.image('tiles', '/assets/zone/tiles.png')
|
||||
scene.load.image('walls', '/assets/zone/walls.png')
|
||||
scene.load.image('wall1', '/assets/zone/wall1.png')
|
||||
|
||||
16
src/stores/assets.ts
Normal file
16
src/stores/assets.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { type Asset } from '@/types'
|
||||
|
||||
export const useAssetStore = defineStore('assets', {
|
||||
state: () => ({
|
||||
assets: [] as Asset[]
|
||||
}),
|
||||
actions: {
|
||||
setAssets(assets: Asset[]) {
|
||||
this.assets = assets
|
||||
},
|
||||
addAsset(asset: Asset) {
|
||||
this.assets.push(asset)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -64,3 +64,10 @@ export type Chat = {
|
||||
message: string
|
||||
createdAt: Date
|
||||
}
|
||||
|
||||
export type Asset = {
|
||||
key: string
|
||||
value: string
|
||||
group: 'tiles' | 'objects' | 'sound' | 'music' | 'ui' | 'font' | 'other'
|
||||
type: 'base64' | 'link'
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user