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

updatec packages, tried getting cullPadding to work

Browse Source
This commit is contained in:
root
2024-05-01 16:18:09 +02:00
parent 9452952374
commit 7abfc52918
5 changed files with 98 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Game.vue
View File

@ -15,8 +15,12 @@ import World from '@/components/World.vue'
const gameConfig = {
name: 'New Quest',
width: window.innerWidth,
height: window.innerHeight,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 800,
},
type: Phaser.AUTO,
pixelArt: true,
}

64
src/components/World.vue
View File

@ -1,12 +1,13 @@
<template>
<TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data" />
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :tileset="data" />
<!-- <Sprite ref="player" texture="player" :x="playerX" :y="playerY" />-->
</template>
<script setup>
import { Sprite, TilemapLayer, useScene } from 'phavuer'
import { Sprite, TilemapLayer, useScene, useGame } from 'phavuer'
import Player from '@/components/player/Player.vue'
import { ref } from 'vue'
import config from '@/config'
const scene = useScene()
const mapData = new Phaser.Tilemaps.MapData({
@ -14,18 +15,19 @@ const mapData = new Phaser.Tilemaps.MapData({
format: Phaser.Tilemaps.Formats.ARRAY_2D,
width: 10,
height: 10,
tileWidth: 64,
tileHeight: 32,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
});
const { tileWidth, tileHeight, width: tileSizeWidth } = mapData;
const { 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, -tileHeight + width / 2, height / 2 - (tileWidth * tileSizeWidth * 0.25));
const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));
layer.cullPaddingX = 20;
layer.cullPaddingY = 20;
layer.cullPaddingX = 10;
layer.cullPaddingY = 10;
const game = useGame();
const data = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
@ -52,11 +54,27 @@ let playerX = ref(0)
let playerY = ref(0)
// W,S,A,D
// Listen for keydown events
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; }
// Check which key was pressed
switch (event.code) {
case 'KeyW': // Move up and to the left
playerX.value -= config.tile_size.x / 2;
playerY.value -= config.tile_size.y / 2;
break;
case 'KeyS': // Move down and to the right
playerX.value += config.tile_size.x / 2;
playerY.value += config.tile_size.y / 2;
break;
case 'KeyA': // Move down and to the left
playerX.value -= config.tile_size.x / 2;
playerY.value += config.tile_size.y / 2;
break;
case 'KeyD': // Move up and to the right
playerX.value += config.tile_size.x / 2;
playerY.value -= config.tile_size.y / 2;
break;
}
});
/**
@ -65,26 +83,4 @@ scene.input.keyboard.on('keydown', function (event) {
* 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>