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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: