1
0
forked from noxious/client

Worked on map

This commit is contained in:
Dennis Postma 2024-04-26 17:05:18 +02:00
parent 1851cc4782
commit c58b6012b9
5 changed files with 56 additions and 47 deletions

36
package-lock.json generated
View File

@ -2106,13 +2106,13 @@
"integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
},
"node_modules/@vue/devtools-core": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.1.2.tgz",
"integrity": "sha512-yO2+xSnXkZPqSJAiWPigIwSdWQordROOg4nrLVA6ByJAzFowJmN6sAKysFtbhVg8Fb1e/DnI+1dJ4tp3zbvM7Q==",
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.1.3.tgz",
"integrity": "sha512-pVbWi8pf2Z/fZPioYOIgu+cv9pQG55k4D8bL31ec+Wfe+pQR0ImFDu0OhHfch1Ra8uvLLrAZTF4IKeGAkmzD4A==",
"dev": true,
"dependencies": {
"@vue/devtools-kit": "^7.1.2",
"@vue/devtools-shared": "^7.1.2",
"@vue/devtools-kit": "^7.1.3",
"@vue/devtools-shared": "^7.1.3",
"mitt": "^3.0.1",
"nanoid": "^3.3.4",
"pathe": "^1.1.2",
@ -2120,12 +2120,12 @@
}
},
"node_modules/@vue/devtools-kit": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.1.2.tgz",
"integrity": "sha512-UTrcUSOhlI9eXqbPMHUWwA6NQiiPT3onzXsVk2JHGR8ZFFSkzsWTTpHyVA1woG8zvgu2HNV/wigW2k87p858zw==",
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.1.3.tgz",
"integrity": "sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==",
"dev": true,
"dependencies": {
"@vue/devtools-shared": "^7.1.2",
"@vue/devtools-shared": "^7.1.3",
"hookable": "^5.5.3",
"mitt": "^3.0.1",
"perfect-debounce": "^1.0.0",
@ -2136,9 +2136,9 @@
}
},
"node_modules/@vue/devtools-shared": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.1.2.tgz",
"integrity": "sha512-r9cUf93VMhKSsxF2/cBbf6Lm1nRBx+r1pRuji5CiAf3JIPYPOjeEqJ13OuwP1fauYh1tyBFcCxt3eJPvHT59gg==",
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.1.3.tgz",
"integrity": "sha512-KJ3AfgjTn3tJz/XKF+BlVShNPecim3G21oHRue+YQOsooW+0s+qXvm09U09aO7yBza5SivL1QgxSrzAbiKWjhQ==",
"dev": true,
"dependencies": {
"rfdc": "^1.3.1"
@ -5644,14 +5644,14 @@
}
},
"node_modules/vite-plugin-vue-devtools": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.1.2.tgz",
"integrity": "sha512-TQm0sLGlAI9zEG6wZSzadBqzLOJ0VVUOvgRv2uqx/O1cEfH7UHuGkkGMFaeSQfbRWzD1OnOsJHsTMaUZB6m8iQ==",
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.1.3.tgz",
"integrity": "sha512-qv8Z4yok9RYo6TEs89WnIAlmTHby/+XTim8tlSnMs3lAPcQqqcl/wGRY8gAeYrGCANngOqO+VuabW3Jb1HZtyw==",
"dev": true,
"dependencies": {
"@vue/devtools-core": "^7.1.2",
"@vue/devtools-kit": "^7.1.2",
"@vue/devtools-shared": "^7.1.2",
"@vue/devtools-core": "^7.1.3",
"@vue/devtools-kit": "^7.1.3",
"@vue/devtools-shared": "^7.1.3",
"execa": "^8.0.1",
"sirv": "^2.0.4",
"vite-plugin-inspect": "^0.8.4",

View File

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

View File

@ -7,8 +7,7 @@ const gameConfig = {
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 1280,
height: 720,
},
render: {
roundPixels: true,
@ -19,6 +18,20 @@ const gameConfig = {
}
</script>
<style>
.game-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 1px solid white;
}
.game {
border: 1px solid red;
}
</style>
<template>
<div class="game-container">
<Game :config="gameConfig" class="game" />

View File

@ -7,41 +7,34 @@ class Example extends Phaser.Scene
}
preload () {
this.load.image('tiles', '/assets/tilesets/1.png');
this.load.image('tiles', '/assets/tilesets/default.png');
}
/**
* tile width: 63,
* tile height: 32,
* total w: 640,
* total h: 4000,
*/
create () {
const mapData = new Phaser.Tilemaps.MapData({
width: 63,
height: 32,
tileWidth: 63,
tileHeight: 32,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
format: Phaser.Tilemaps.Formats.ARRAY_2D,
width: 10,
height: 10,
tileWidth: 64,
tileHeight: 32,
});
const map = new Phaser.Tilemaps.Tilemap(this, mapData);
const tileset = map.addTilesetImage('1', 'tiles');
const layer = map.createBlankLayer('layer', tileset, 350, 200);
const tileset = map.addTilesetImage('tiles', 'tiles');
const layer = map.createBlankLayer('layer', tileset);
const data = [
[ 1, 2, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
];
let y = 0;
@ -53,11 +46,14 @@ class Example extends Phaser.Scene
y++;
});
var cam = this.cameras.main;
// middle of the screen by default
const centerX = map.widthInPixels / 1.5;
const centerY = map.heightInPixels / 2;
layer.setPosition(centerX, centerY);
let cam = this.cameras.main;
this.input.on("pointermove", function (p) {
if (!p.isDown) return;
cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom;
cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
});