forked from noxious/client
improved tile finding logic, improved size and position of the character nickname and healthbar
This commit is contained in:
parent
3e003962dc
commit
8227dfe4b3
28
package-lock.json
generated
28
package-lock.json
generated
@ -2134,19 +2134,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/language-core": {
|
||||
"version": "2.3.0-alpha.15",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0-alpha.15.tgz",
|
||||
"integrity": "sha512-uSfn1Dsl1w9o2aN9nnS6N/4FcjSbmpY6P/ypfW4kRhasEyICstu4swIz2joNR6532R02JwJY9Ta0pxRmXbBOqw==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0.tgz",
|
||||
"integrity": "sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/source-map": "2.3.0-alpha.15"
|
||||
"@volar/source-map": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/source-map": {
|
||||
"version": "2.3.0-alpha.15",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0-alpha.15.tgz",
|
||||
"integrity": "sha512-DQr3FwhRxtxX4W6BoJkwajWjj6BAF5H/SgtzFaUP9z8txn6Y5oFxZPPDG+3Xwu3pTV3gvVlE7AL5E/G1jUr5Yg==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0.tgz",
|
||||
"integrity": "sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -2154,13 +2154,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/typescript": {
|
||||
"version": "2.3.0-alpha.15",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0-alpha.15.tgz",
|
||||
"integrity": "sha512-sTzUyqGC1wkzVyY0XZBO5smCPDRvIqxlMTUw7bZebuD/7sGaVfyk9ryE29aG6CLpuYDev/ugpQsKoFVhFaQQ8A==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0.tgz",
|
||||
"integrity": "sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "2.3.0-alpha.15",
|
||||
"@volar/language-core": "2.3.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"vscode-uri": "^3.0.8"
|
||||
}
|
||||
@ -2942,9 +2942,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001629",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
|
||||
"integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
|
||||
"version": "1.0.30001632",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
|
||||
"integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
||||
@ -1,52 +1,53 @@
|
||||
<template>
|
||||
<Container>
|
||||
<Rectangle
|
||||
:x="props.character?.position_x"
|
||||
:y="props.character?.position_y"
|
||||
<Rectangle
|
||||
: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"
|
||||
:origin-x="0.5"
|
||||
:origin-y="12"
|
||||
:origin-y="10.5"
|
||||
:fillColor="0xFFFFFF"
|
||||
:width="74"
|
||||
:height="8"
|
||||
>
|
||||
<Rectangle
|
||||
:x="props.character?.position_x"
|
||||
:y="props.character?.position_y"
|
||||
: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"
|
||||
:origin-x="0.5"
|
||||
:origin-y="23.5"
|
||||
:origin-y="20.5"
|
||||
:fillColor="0x09ad19"
|
||||
:width="70"
|
||||
:height="4"
|
||||
/>
|
||||
</Rectangle>
|
||||
<Text
|
||||
@create="createText"
|
||||
:text="props.character?.name"
|
||||
:x="props.character?.position_x"
|
||||
:y="props.character?.position_y"
|
||||
: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"
|
||||
:origin-x="0.5"
|
||||
:origin-y="3.5"
|
||||
:origin-y="4.5"
|
||||
:style="{
|
||||
fontFamily: 'Helvetica, Arial',
|
||||
color: '#FFF',
|
||||
fontSize: '1rem',
|
||||
strokeThickness: 4,
|
||||
stroke: '#000'
|
||||
fontSize: '14px',
|
||||
}"
|
||||
/>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
|
||||
import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue'
|
||||
import config from '@/config'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import { type Character as CharacterT } from '@/types'
|
||||
import { useZoneStore } from '@/stores/zone'
|
||||
import { getTile, tileToWorldXY } from '@/services/zone'
|
||||
|
||||
const socket = useSocketStore()
|
||||
const zone = useZoneStore();
|
||||
|
||||
const props = defineProps({
|
||||
layer: Phaser.Tilemaps.TilemapLayer,
|
||||
@ -55,7 +56,10 @@ const props = defineProps({
|
||||
|
||||
const scene = useScene()
|
||||
const isSelf = props.character.id === socket.character.id;
|
||||
const pointer_tile = ref()
|
||||
|
||||
const createText = (text: Phaser.GameObjects.Text) => {
|
||||
text.setLetterSpacing(1.5);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (isSelf) setupSelf()
|
||||
@ -72,14 +76,13 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
|
||||
const px = scene.cameras.main.worldView.x + pointer.x
|
||||
const py = scene.cameras.main.worldView.y + pointer.y
|
||||
|
||||
pointer_tile.value = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
|
||||
if (pointer_tile.value) {
|
||||
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
|
||||
const position_x = worldPoint.x + config.tile_size.y
|
||||
const position_y = worldPoint.y
|
||||
socket.getConnection.emit('character:move', { position_x, position_y })
|
||||
const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
|
||||
if (!pointer_tile) {
|
||||
return;
|
||||
}
|
||||
|
||||
socket.getConnection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
|
||||
|
||||
//Directions for player sprites + animations
|
||||
if (px < 0 && py > 0) {
|
||||
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 {
|
||||
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
|
||||
if (!tile) return undefined;
|
||||
return tile
|
||||
}
|
||||
// spacing
|
||||
|
||||
|
||||
/**
|
||||
* Resources:
|
||||
|
||||
15
src/services/zone.ts
Normal file
15
src/services/zone.ts
Normal 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 }
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user