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

npm update, worked on multiplayer world

Browse Source
This commit is contained in:
Dennis Postma 2024-05-05 02:57:52 +02:00
parent 8c21cd11c7
commit 93a6387367
3 changed files with 39 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -2633,9 +2633,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001615", "version": "1.0.30001616",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001615.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
"integrity": "sha512-1IpazM5G3r38meiae0bHRnPhz+CBQ3ZLqbQMtrg+AsTPKAXgW38JNsXkyZ+v8waCsDmPq87lmfun5Q2AGysNEQ==", "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {

86
src/components/World.vue
View File

@ -1,67 +1,51 @@
<template> <template>
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="mapTiles" /> <TilemapLayer v-if="isMapLoaded" ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="serverMapData.tiles" />
<!-- <Controls :layer="layer" />--> <!-- <Controls :layer="layer" />-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/sprites/player/Player.vue'
import config from '@/config'
import { reactive, ref, type Ref } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
import Controls from '@/components/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import Map from '@/engine/Map/Map'
const isMapLoaded = ref(false);
const socket = useSocketStore();
const serverMapData = ref([]);
const mapTiles = ref([]);
const mapData = new Phaser.Tilemaps.MapData({
width: 10,
height: 10,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D,
});
socket.socket?.emit('get_map');
socket.socket?.on('map', (map) => {
// Get map from server
mapTiles.value = map.data;
map.data.forEach((row, y) => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
});
isMapLoaded.value = true;
console.log('map', map);
});
const scene = useScene()
const { width: tileSizeWidth } = mapData;
const { width, height } = scene.cameras.main;
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
/** /**
* 1 tile is 64x32 * 1 tile is 64x32
* the map is 10x10 * the map is 10x10
* so the map is 640x320 * so the map is 640x320
*/ */
const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
// const layer: (Layer|null) = map.createBlankLayer('layer', tileset);
const layer:TilemapLayer = map.createBlankLayer('layer', tileset, 0, config.tile_size.y); import { refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/sprites/player/Player.vue'
import config from '@/config'
import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
import Controls from '@/components/Controls.vue'
import { useSocketStore } from '@/stores/socket'
onBeforeMount(() => {
socket.socket?.emit('get_map');
socket.socket?.on('map', (map) => {
// Get map from server
serverMapData.value = map;
isMapLoaded.value = true;
map.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
});
});
const map = ref();
const mapData = ();
function loadMap() {
}
const isMapLoaded = ref(false);
const socket = useSocketStore();
const serverMapData = ref([]);
const scene = useScene()
const tilemapLayer = ref(); const tilemapLayer = ref();
// const mapp = new Map('default', 10, 10, config.tile_size.x, config.tile_size.y, data, []); const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
const layer:TilemapLayer = map.createBlankLayer('layer', tileset, 0, config.tile_size.y);
// center camera // center camera
const centerY = (map.height * map.tileHeight) / 2 const centerY = (map.height * map.tileHeight) / 2

1
src/components/sprites/player/Player.vue
View File

@ -24,7 +24,6 @@ const scene = useScene()
// console.log(time, delta); // console.log(time, delta);
// }) // })
const pointer_tile = ref(undefined);
const position = reactive({ x: 0, y: 0 }); const position = reactive({ x: 0, y: 0 });
if (props.player !== undefined) { if (props.player !== undefined) {