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

Worked on map

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package-lock.json generated
View File

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

0
public/assets/tilesets/1.png → public/assets/tilesets/default.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/assets/tilesets/iso-64x64-outside.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 61 KiB

17
src/components/game/Screen.vue
View File

@ -7,8 +7,7 @@ const gameConfig = {
scale: { scale: {
mode: Phaser.Scale.FIT, mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH, autoCenter: Phaser.Scale.CENTER_BOTH,
width: 1280,
height: 720,
}, },
render: { render: {
roundPixels: true, roundPixels: true,
@ -19,6 +18,20 @@ const gameConfig = {
} }
</script> </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> <template>
<div class="game-container"> <div class="game-container">
<Game :config="gameConfig" class="game" /> <Game :config="gameConfig" class="game" />

50
src/scenes/mapScene.js
View File

@ -7,41 +7,34 @@ class Example extends Phaser.Scene
} }
preload () { 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 () { create () {
const mapData = new Phaser.Tilemaps.MapData({ const mapData = new Phaser.Tilemaps.MapData({
width: 63,
height: 32,
tileWidth: 63,
tileHeight: 32,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, 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 map = new Phaser.Tilemaps.Tilemap(this, mapData);
const tileset = map.addTilesetImage('1', 'tiles'); const tileset = map.addTilesetImage('tiles', 'tiles');
const layer = map.createBlankLayer('layer', tileset, 350, 200); const layer = map.createBlankLayer('layer', tileset);
const data = [ const data = [
[ 1, 2, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
]; ];
let y = 0; let y = 0;
@ -53,11 +46,14 @@ class Example extends Phaser.Scene
y++; 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) { this.input.on("pointermove", function (p) {
if (!p.isDown) return; if (!p.isDown) return;
cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom; cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom;
cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom; cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
}); });