forked from noxious/client
Better variable namings
This commit is contained in:
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
|
||||
<!-- <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<!-- <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<!-- <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
|
||||
</Container>
|
||||
</template>
|
||||
@ -37,28 +37,29 @@ const props = defineProps<{
|
||||
|
||||
const charContainer = refObj<Phaser.GameObjects.Container>()
|
||||
const charSprite = refObj<Phaser.GameObjects.Sprite>()
|
||||
const charSpriteId = ref('')
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapStore = useMapStore()
|
||||
const scene = useScene()
|
||||
|
||||
const currentX = ref(0)
|
||||
const currentY = ref(0)
|
||||
const currentPositionX = ref(0)
|
||||
const currentPositionY = ref(0)
|
||||
const isometricDepth = ref(1)
|
||||
const isInitialPosition = ref(true)
|
||||
const tween = ref<Phaser.Tweens.Tween | null>(null)
|
||||
|
||||
const updateIsometricDepth = (x: number, y: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
|
||||
const updateIsometricDepth = (positionX: number, positionY: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
|
||||
}
|
||||
|
||||
const updatePosition = (x: number, y: number, direction: Direction) => {
|
||||
const targetX = tileToWorldX(props.tilemap, x, y)
|
||||
const targetY = tileToWorldY(props.tilemap, x, y)
|
||||
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
|
||||
const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
|
||||
const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
|
||||
|
||||
if (isInitialPosition.value) {
|
||||
currentX.value = targetX
|
||||
currentY.value = targetY
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
isInitialPosition.value = false
|
||||
return
|
||||
}
|
||||
@ -67,52 +68,51 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
|
||||
tween.value.stop()
|
||||
}
|
||||
|
||||
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
|
||||
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
|
||||
|
||||
if (distance >= config.tile_size.x / 1.1) {
|
||||
currentX.value = targetX
|
||||
currentY.value = targetY
|
||||
if (distance >= config.tile_size.width / 1.1) {
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
return
|
||||
}
|
||||
|
||||
const duration = distance * 5.7
|
||||
|
||||
tween.value = props.tilemap.scene.tweens.add({
|
||||
targets: { x: currentX.value, y: currentY.value },
|
||||
x: targetX,
|
||||
y: targetY,
|
||||
targets: { x: currentPositionX.value, y: currentPositionY.value },
|
||||
x: newPositionX,
|
||||
y: newPositionY,
|
||||
duration,
|
||||
ease: 'Linear',
|
||||
onStart: () => {
|
||||
if (direction === Direction.POSITIVE) {
|
||||
updateIsometricDepth(x, y)
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
},
|
||||
onUpdate: (tween) => {
|
||||
currentX.value = tween.targets[0].x
|
||||
currentY.value = tween.targets[0].y
|
||||
currentPositionX.value = tween.targets[0].x
|
||||
currentPositionY.value = tween.targets[0].y
|
||||
},
|
||||
onComplete: () => {
|
||||
if (direction === Direction.NEGATIVE) {
|
||||
updateIsometricDepth(x, y)
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
|
||||
if (newY < oldY || newX < oldX) return Direction.NEGATIVE
|
||||
if (newX > oldX || newY > oldY) return Direction.POSITIVE
|
||||
const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
|
||||
if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
|
||||
if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
|
||||
return Direction.UNCHANGED
|
||||
}
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const { rotation, characterType } = props.mapCharacter.character
|
||||
const spriteId = characterType ?? 'idle_right_down'
|
||||
const spriteId = charSpriteId.value ?? 'idle_right_down'
|
||||
const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
|
||||
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
|
||||
const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
|
||||
|
||||
return `${spriteId}-${action}_${direction}`
|
||||
})
|
||||
@ -120,35 +120,33 @@ const charTexture = computed(() => {
|
||||
const updateSprite = () => {
|
||||
if (props.mapCharacter.isMoving) {
|
||||
charSprite.value!.anims.play(charTexture.value, true)
|
||||
return
|
||||
} else {
|
||||
charSprite.value!.anims.stop()
|
||||
charSprite.value!.setFrame(0)
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
}
|
||||
|
||||
charSprite.value!.anims.stop()
|
||||
charSprite.value!.setFrame(0)
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ({
|
||||
x: props.mapCharacter.character.positionX,
|
||||
y: props.mapCharacter.character.positionY,
|
||||
positionX: props.mapCharacter.character.positionX,
|
||||
positionY: props.mapCharacter.character.positionY,
|
||||
isMoving: props.mapCharacter.isMoving,
|
||||
rotation: props.mapCharacter.character.rotation
|
||||
}),
|
||||
(newValues, oldValues) => {
|
||||
if (!newValues) return
|
||||
|
||||
if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
|
||||
updatePosition(newValues.x, newValues.y, direction)
|
||||
if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
|
||||
updatePosition(newValues.positionX, newValues.positionY, direction)
|
||||
}
|
||||
|
||||
// Handle animation updates
|
||||
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
|
||||
updateSprite()
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => props.mapCharacter, updateSprite)
|
||||
@ -156,6 +154,7 @@ watch(() => props.mapCharacter, updateSprite)
|
||||
const characterTypeStorage = new CharacterTypeStorage()
|
||||
characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
|
||||
console.log(spriteId)
|
||||
charSpriteId.value = spriteId
|
||||
loadSpriteTextures(scene, spriteId)
|
||||
.then(() => {
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
|
||||
@ -27,8 +27,8 @@ function createTileMap(mapData: any) {
|
||||
const mapConfig = new Phaser.Tilemaps.MapData({
|
||||
width: mapData?.width,
|
||||
height: mapData?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
tileWidth: config.tile_size.width,
|
||||
tileHeight: config.tile_size.height,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
@ -43,12 +43,12 @@ function createTileLayer(mapData: any) {
|
||||
const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
|
||||
|
||||
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
|
||||
return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
|
||||
return tileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
|
||||
})
|
||||
|
||||
// Add blank tile
|
||||
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
|
||||
const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
|
||||
const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
|
||||
Reference in New Issue
Block a user