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

tried getting camera and world rendering to work

Browse Source
This commit is contained in:
root
2024-04-30 21:58:37 +02:00
parent 4f2fcaa52f
commit 9452952374
5 changed files with 180 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Game.vue
View File

@ -15,14 +15,9 @@ import World from '@/components/World.vue'
const gameConfig = {
name: 'New Quest',
scale: {
mode: Phaser.Scale.NONE,
width: window.innerWidth / 1.5,
height: window.innerHeight / 1.5,
zoom: 1.5
},
type: Phaser.CANVAS,
physics: { default: 'arcade' },
width: window.innerWidth,
height: window.innerHeight,
type: Phaser.AUTO,
pixelArt: true,
}
@ -41,7 +36,7 @@ const create = (scene) => {
});
// set camera to center
cam.centerOn(0, 0);
// cam.centerOn(0, 0);
}
</script>

59
src/components/World.vue
View File

@ -1,11 +1,12 @@
<template>
<TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data" />
<Player />
<!-- <Sprite ref="player" texture="player" :x="playerX" :y="playerY" />-->
</template>
<script setup>
import { TilemapLayer, useScene } from 'phavuer'
import { Sprite, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/player/Player.vue'
import { ref } from 'vue'
const scene = useScene()
const mapData = new Phaser.Tilemaps.MapData({
@ -17,9 +18,14 @@ const mapData = new Phaser.Tilemaps.MapData({
tileHeight: 32,
});
const { tileWidth, tileHeight, width: tileSizeWidth } = mapData;
const { width, height } = scene.cameras.main;
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
const tileset = map.addTilesetImage('default', 'tiles');
const layer = map.createBlankLayer('layer', tileset);
const layer = map.createBlankLayer('layer', tileset, -tileHeight + width / 2, height / 2 - (tileWidth * tileSizeWidth * 0.25));
layer.cullPaddingX = 10;
layer.cullPaddingY = 10;
const data = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
@ -34,12 +40,51 @@ const data = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
];
let y = 0;
data.forEach(row => {
data.forEach((row, y) => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
y++;
});
const player = ref();
let playerX = ref(0)
let playerY = ref(0)
// W,S,A,D
scene.input.keyboard.on('keydown', function (event) {
if (event.key === 'a') { playerX.value -= 10; playerX.value -= 10; }
if (event.key === 'd') { playerX.value += 10; playerX.value += 10; }
if (event.key === 'w') { playerY.value -= 10; playerY.value -= 10; }
if (event.key === 's') { playerY.value += 10; playerY.value += 10; }
});
/**
* 1 tile is 64x32
* the map is 10x10
* so the map is 640x320
*/
function getDepth(tile) {
return 0;
}
function getTile(x, y, layers) {
if (layers.length === 0) return undefined;
const layer = layers.pop();
const tile = layer.getTileAtWorldXY(x, y);
if (tile) return tile;
else return this.getTile(x, y, layers);
}
function getTileAt(iX, iY, layers) {
if (layers.length === 0) return undefined;
const layer = layers.pop();
const tile = layer.getTileAt(iX, iY);
if (tile) return tile;
else return this.getTileAt(iX, iY, layers);
}
</script>

16
src/components/player/Player.vue
View File

@ -1,24 +1,12 @@
<template>
<Image ref="player" texture="player" :x="x" :y="y">
<Body :width="32" :height="32" />
</Image>
</template>
<script setup>
import { Image, useScene, Body } from 'phavuer'
import { Sprite, useScene, Body } from 'phavuer'
import { ref } from 'vue'
const scene = useScene()
const player = ref();
let x = ref(0)
let y = ref(0)
// W,S,A,D
scene.input.keyboard.on('keydown', function (event) {
if (event.key === 'a') x.value -= 10
if (event.key === 'd') x.value += 10
if (event.key === 'w') y.value -= 10
if (event.key === 's') y.value += 10
});
</script>