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

improved tile finding logic, improved size and position of the character nickname and healthbar

Browse Source
This commit is contained in:
Dennis Postma 2024-06-10 15:11:14 +02:00
parent 3e003962dc
commit 8227dfe4b3
3 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@ -2134,19 +2134,19 @@
} }
}, },
"node_modules/@volar/language-core": { "node_modules/@volar/language-core": {
"version": "2.3.0-alpha.15", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0-alpha.15.tgz", "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0.tgz",
"integrity": "sha512-uSfn1Dsl1w9o2aN9nnS6N/4FcjSbmpY6P/ypfW4kRhasEyICstu4swIz2joNR6532R02JwJY9Ta0pxRmXbBOqw==", "integrity": "sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/source-map": "2.3.0-alpha.15" "@volar/source-map": "2.3.0"
} }
}, },
"node_modules/@volar/source-map": { "node_modules/@volar/source-map": {
"version": "2.3.0-alpha.15", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0-alpha.15.tgz", "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0.tgz",
"integrity": "sha512-DQr3FwhRxtxX4W6BoJkwajWjj6BAF5H/SgtzFaUP9z8txn6Y5oFxZPPDG+3Xwu3pTV3gvVlE7AL5E/G1jUr5Yg==", "integrity": "sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -2154,13 +2154,13 @@
} }
}, },
"node_modules/@volar/typescript": { "node_modules/@volar/typescript": {
"version": "2.3.0-alpha.15", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0-alpha.15.tgz", "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0.tgz",
"integrity": "sha512-sTzUyqGC1wkzVyY0XZBO5smCPDRvIqxlMTUw7bZebuD/7sGaVfyk9ryE29aG6CLpuYDev/ugpQsKoFVhFaQQ8A==", "integrity": "sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/language-core": "2.3.0-alpha.15", "@volar/language-core": "2.3.0",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"vscode-uri": "^3.0.8" "vscode-uri": "^3.0.8"
} }
@ -2942,9 +2942,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001629", "version": "1.0.30001632",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
"integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==", "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {

60
src/components/sprites/Character.vue
View File

@ -1,52 +1,53 @@
<template> <template>
<Container> <Container>
<Rectangle <Rectangle
:x="props.character?.position_x" :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
:y="props.character?.position_y" :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
:origin-x="0.5" :origin-x="0.5"
:origin-y="12" :origin-y="10.5"
:fillColor="0xFFFFFF" :fillColor="0xFFFFFF"
:width="74" :width="74"
:height="8" :height="8"
> >
<Rectangle <Rectangle
:x="props.character?.position_x" :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
:y="props.character?.position_y" :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
:origin-x="0.5" :origin-x="0.5"
:origin-y="23.5" :origin-y="20.5"
:fillColor="0x09ad19" :fillColor="0x09ad19"
:width="70" :width="70"
:height="4" :height="4"
/> />
</Rectangle> </Rectangle>
<Text <Text
@create="createText"
:text="props.character?.name" :text="props.character?.name"
:x="props.character?.position_x" :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
:y="props.character?.position_y" :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
:origin-x="0.5" :origin-x="0.5"
:origin-y="3.5" :origin-y="4.5"
:style="{ :style="{
fontFamily: 'Helvetica, Arial', fontFamily: 'Helvetica, Arial',
color: '#FFF', color: '#FFF',
fontSize: '1rem', fontSize: '14px',
strokeThickness: 4,
stroke: '#000'
}" }"
/> />
<Sprite ref="sprite" :x="props.character?.position_x" :y="props.character?.position_y" play="walk" /> <Sprite
ref="sprite"
:x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
:y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
play="walk" />
</Container> </Container>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer' import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import config from '@/config'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket'
import { type Character as CharacterT } from '@/types' import { type Character as CharacterT } from '@/types'
import { useZoneStore } from '@/stores/zone' import { getTile, tileToWorldXY } from '@/services/zone'
const socket = useSocketStore() const socket = useSocketStore()
const zone = useZoneStore();
const props = defineProps({ const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer, layer: Phaser.Tilemaps.TilemapLayer,
@ -55,7 +56,10 @@ const props = defineProps({
const scene = useScene() const scene = useScene()
const isSelf = props.character.id === socket.character.id; const isSelf = props.character.id === socket.character.id;
const pointer_tile = ref()
const createText = (text: Phaser.GameObjects.Text) => {
text.setLetterSpacing(1.5);
}
onMounted(() => { onMounted(() => {
if (isSelf) setupSelf() if (isSelf) setupSelf()
@ -72,14 +76,13 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
const px = scene.cameras.main.worldView.x + pointer.x const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y const py = scene.cameras.main.worldView.y + pointer.y
pointer_tile.value = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
if (pointer_tile.value) { if (!pointer_tile) {
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y) return;
const position_x = worldPoint.x + config.tile_size.y
const position_y = worldPoint.y
socket.getConnection.emit('character:move', { position_x, position_y })
} }
socket.getConnection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
//Directions for player sprites + animations //Directions for player sprites + animations
if (px < 0 && py > 0) { if (px < 0 && py > 0) {
console.log('down left') console.log('down left')
@ -92,11 +95,8 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
} }
} }
function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined { // spacing
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
if (!tile) return undefined;
return tile
}
/** /**
* Resources: * Resources:

15
src/services/zone.ts Normal file
View File

@ -0,0 +1,15 @@
import config from '@/config'
export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
if (!tile) return undefined;
return tile
}
export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
const position_x = worldPoint.x + config.tile_size.y
const position_y = worldPoint.y
return { position_x, position_y }
}