imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Use Phavuer wherever possible

Browse Source
This commit is contained in:
root
2024-04-26 22:19:37 +02:00
parent 4be8d0093a
commit 4fd5430c54
8 changed files with 92 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -1,9 +1,9 @@
<template>
<!-- <Login />-->
<Screen />
<Game />
</template>
<script setup lang="ts">
import Screen from '@/components/game/Screen.vue'
import Game from '@/components/Game.vue'
import Login from '@/components/screens/Login.vue'
</script>

38
src/components/Game.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup lang="ts">
import 'phaser';
import { Game, Scene } from 'phavuer'
import World from '@/components/World.vue'
const gameConfig = {
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
pixelArt: true,
type: Phaser.AUTO,
}
const preload = (scene) => {
scene.load.image('tiles', '/assets/tiles/default.png');
}
const create = (scene) => {
let cam = scene.cameras.main;
scene.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;
});
}
</script>
<template>
<div class="game-container">
<Game :config="gameConfig" class="game">
<Scene name="main" @preload="preload" @create="create">
<World />
</Scene>
</Game>
</div>
</template>

46
src/components/World.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data" />
</template>
<script setup>
import { TilemapLayer, useScene } from 'phavuer'
import Phaser from 'phaser'
const scene = useScene()
const mapData = new Phaser.Tilemaps.MapData({
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D,
width: 10,
height: 10,
tileWidth: 64,
tileHeight: 32,
});
// scene
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
const tileset = map.addTilesetImage('default', 'tiles');
const layer = map.createBlankLayer('layer', tileset);
const data = [
[ 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;
data.forEach(row => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
y++;
});
</script>

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

@ -1,39 +0,0 @@
<script setup lang="ts">
import 'phaser';
import { Game, Scene, Rectangle } from 'phavuer'
import Example from '@/scenes/mapScene'
const gameConfig = {
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
render: {
roundPixels: true,
},
pixelArt: true,
type: Phaser.AUTO,
scene: Example
}
</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" />
</div>
</template>

63
src/scenes/mapScene.js
View File

@ -1,63 +0,0 @@
import Phaser from 'phaser';
class Example extends Phaser.Scene
{
constructor () {
super();
}
preload () {
this.load.image('tiles', '/assets/tilesets/default.png');
}
create () {
const mapData = new Phaser.Tilemaps.MapData({
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
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('default', 'tiles');
const layer = map.createBlankLayer('layer', tileset);
const data = [
[ 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;
data.forEach(row => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
y++;
});
// 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;
});
}
}
export default Example;