imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/game/Screen.vue
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" />

50
src/scenes/mapScene.js
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;
});