Refactored Character.vue as preparation for attack anims.
This commit is contained in:
parent
d7f60d7bfc
commit
e4b9bb4d61
5
src/application/enums.ts
Normal file
5
src/application/enums.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export enum Direction {
|
||||||
|
POSITIVE,
|
||||||
|
NEGATIVE,
|
||||||
|
UNCHANGED
|
||||||
|
}
|
@ -1,134 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||||
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
<HealthBar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||||
<CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
<CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||||
<Sprite ref="charSprite" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY" :origin-y="1" :flipX="isFlippedX" />
|
<Sprite ref="charSprite" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY" :origin-y="1" :flipX="isFlippedX" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import config from '@/application/config'
|
|
||||||
import { type MapCharacter } from '@/application/types'
|
import { type MapCharacter } from '@/application/types'
|
||||||
import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
|
import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
|
||||||
import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
|
import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
|
||||||
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
|
import HealthBar from '@/components/game/character/partials/HealthBar.vue'
|
||||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
import { useCharacterSprite } from '@/composables/useCharacterSpriteComposable'
|
||||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
|
||||||
import { CharacterTypeStorage } from '@/storage/storages'
|
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapStore } from '@/stores/mapStore'
|
import { useMapStore } from '@/stores/mapStore'
|
||||||
import { refObj, Sprite, useScene } from 'phavuer'
|
import { Sprite, useScene } from 'phavuer'
|
||||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
import { onMounted, onUnmounted, watch } from 'vue'
|
||||||
|
import { Direction } from '@/application/enums'
|
||||||
enum Direction {
|
|
||||||
POSITIVE,
|
|
||||||
NEGATIVE,
|
|
||||||
UNCHANGED
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
tilemap: Phaser.Tilemaps.Tilemap
|
tilemap: Phaser.Tilemaps.Tilemap
|
||||||
mapCharacter: MapCharacter
|
mapCharacter: MapCharacter
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const charSprite = refObj<Phaser.GameObjects.Sprite>()
|
|
||||||
const charSpriteId = ref('')
|
|
||||||
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const mapStore = useMapStore()
|
const mapStore = useMapStore()
|
||||||
const scene = useScene()
|
const scene = useScene()
|
||||||
|
|
||||||
const currentPositionX = ref(0)
|
const {
|
||||||
const currentPositionY = ref(0)
|
charSprite,
|
||||||
const isometricDepth = ref(1)
|
currentPositionX,
|
||||||
const isInitialPosition = ref(true)
|
currentPositionY,
|
||||||
const tween = ref<Phaser.Tweens.Tween | null>(null)
|
isometricDepth,
|
||||||
|
isFlippedX,
|
||||||
const updateIsometricDepth = (positionX: number, positionY: number) => {
|
updatePosition,
|
||||||
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
|
calcDirection,
|
||||||
}
|
updateSprite,
|
||||||
|
initializeSprite,
|
||||||
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
|
cleanup
|
||||||
const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
|
} = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
|
||||||
const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
|
|
||||||
|
|
||||||
if (isInitialPosition.value) {
|
|
||||||
currentPositionX.value = newPositionX
|
|
||||||
currentPositionY.value = newPositionY
|
|
||||||
isInitialPosition.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tween.value?.isPlaying()) {
|
|
||||||
tween.value.stop()
|
|
||||||
}
|
|
||||||
|
|
||||||
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
|
|
||||||
|
|
||||||
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: currentPositionX.value, y: currentPositionY.value },
|
|
||||||
x: newPositionX,
|
|
||||||
y: newPositionY,
|
|
||||||
duration,
|
|
||||||
ease: 'Linear',
|
|
||||||
onStart: () => {
|
|
||||||
if (direction === Direction.POSITIVE) {
|
|
||||||
updateIsometricDepth(positionX, positionY)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onUpdate: (tween) => {
|
|
||||||
// @ts-ignore
|
|
||||||
currentPositionX.value = tween.targets[0].x
|
|
||||||
// @ts-ignore
|
|
||||||
currentPositionY.value = tween.targets[0].y
|
|
||||||
},
|
|
||||||
onComplete: () => {
|
|
||||||
if (direction === Direction.NEGATIVE) {
|
|
||||||
updateIsometricDepth(positionX, positionY)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
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 currentDirection = computed(() => {
|
|
||||||
return [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'left_up' : 'right_down'
|
|
||||||
})
|
|
||||||
|
|
||||||
const currentAction = computed(() => {
|
|
||||||
return props.mapCharacter.isMoving ? 'walk' : 'idle'
|
|
||||||
})
|
|
||||||
|
|
||||||
const charTexture = computed(() => {
|
|
||||||
const spriteId = charSpriteId.value ?? 'idle_right_down'
|
|
||||||
return `${spriteId}-${currentAction.value}_${currentDirection.value}`
|
|
||||||
})
|
|
||||||
|
|
||||||
const updateSprite = () => {
|
|
||||||
if (!charSprite.value) return
|
|
||||||
|
|
||||||
if (props.mapCharacter.isMoving) {
|
|
||||||
charSprite.value.anims.play(charTexture.value, true)
|
|
||||||
} else {
|
|
||||||
charSprite.value.anims.stop()
|
|
||||||
charSprite.value.setFrame(0)
|
|
||||||
charSprite.value.setTexture(charTexture.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handlePositionUpdate = (newValues: any, oldValues: any) => {
|
const handlePositionUpdate = (newValues: any, oldValues: any) => {
|
||||||
if (!newValues) return
|
if (!newValues) return
|
||||||
@ -155,34 +64,15 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
let character = props.mapCharacter.character
|
await initializeSprite()
|
||||||
|
|
||||||
const characterTypeStorage = new CharacterTypeStorage()
|
if (props.mapCharacter.character.id === gameStore.character!.id) {
|
||||||
|
|
||||||
const spriteId = await characterTypeStorage.getSpriteId(character.characterType!)
|
|
||||||
if (!spriteId) return
|
|
||||||
|
|
||||||
charSpriteId.value = spriteId
|
|
||||||
|
|
||||||
await loadSpriteTextures(scene, spriteId)
|
|
||||||
|
|
||||||
if (charSprite.value) {
|
|
||||||
charSprite.value.setTexture(charTexture.value)
|
|
||||||
charSprite.value.setFlipX(isFlippedX.value)
|
|
||||||
charSprite.value.setName(props.mapCharacter.character.name)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (character.id === gameStore.character!.id) {
|
|
||||||
mapStore.setCharacterLoaded(true)
|
mapStore.setCharacterLoaded(true)
|
||||||
|
|
||||||
// #146 : Set camera position to character, need to be improved still
|
|
||||||
scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
|
scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
|
||||||
}
|
}
|
||||||
|
|
||||||
updatePosition(character.positionX, character.positionY, character.rotation)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
tween.value?.stop()
|
cleanup()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
131
src/composables/useCharacterSpriteComposable.ts
Normal file
131
src/composables/useCharacterSpriteComposable.ts
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
import { type MapCharacter } from '@/application/types'
|
||||||
|
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||||
|
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||||
|
import { CharacterTypeStorage } from '@/storage/storages'
|
||||||
|
import { refObj } from 'phavuer'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { Direction } from '@/application/enums'
|
||||||
|
|
||||||
|
export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) {
|
||||||
|
const charSprite = refObj<Phaser.GameObjects.Sprite>()
|
||||||
|
const charSpriteId = ref('')
|
||||||
|
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 = (positionX: number, positionY: number) => {
|
||||||
|
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
|
||||||
|
const newPositionX = tileToWorldX(tilemap, positionX, positionY)
|
||||||
|
const newPositionY = tileToWorldY(tilemap, positionX, positionY)
|
||||||
|
|
||||||
|
if (isInitialPosition.value) {
|
||||||
|
currentPositionX.value = newPositionX
|
||||||
|
currentPositionY.value = newPositionY
|
||||||
|
isInitialPosition.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tween.value?.isPlaying()) {
|
||||||
|
tween.value.stop()
|
||||||
|
}
|
||||||
|
|
||||||
|
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
|
||||||
|
const baseSpeed = 150 // pixels per second
|
||||||
|
const duration = (distance / baseSpeed) * 1000 // Convert to milliseconds
|
||||||
|
|
||||||
|
tween.value = tilemap.scene.tweens.add({
|
||||||
|
targets: charSprite.value,
|
||||||
|
x: newPositionX,
|
||||||
|
y: newPositionY,
|
||||||
|
duration,
|
||||||
|
ease: 'Linear',
|
||||||
|
onStart: () => {
|
||||||
|
if (direction === Direction.POSITIVE) {
|
||||||
|
updateIsometricDepth(positionX, positionY)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onUpdate: () => {
|
||||||
|
currentPositionX.value = charSprite.value?.x ?? currentPositionX.value
|
||||||
|
currentPositionY.value = charSprite.value?.y ?? currentPositionY.value
|
||||||
|
},
|
||||||
|
onComplete: () => {
|
||||||
|
if (direction === Direction.NEGATIVE) {
|
||||||
|
updateIsometricDepth(positionX, positionY)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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(mapCharacter.character.rotation ?? 0))
|
||||||
|
|
||||||
|
const currentDirection = computed(() => {
|
||||||
|
return [0, 6].includes(mapCharacter.character.rotation ?? 0) ? 'left_up' : 'right_down'
|
||||||
|
})
|
||||||
|
|
||||||
|
const currentAction = computed(() => {
|
||||||
|
return mapCharacter.isMoving ? 'walk' : 'idle'
|
||||||
|
})
|
||||||
|
|
||||||
|
const charTexture = computed(() => {
|
||||||
|
const spriteId = charSpriteId.value ?? 'idle_right_down'
|
||||||
|
return `${spriteId}-${currentAction.value}_${currentDirection.value}`
|
||||||
|
})
|
||||||
|
|
||||||
|
const updateSprite = () => {
|
||||||
|
if (!charSprite.value) return
|
||||||
|
|
||||||
|
if (mapCharacter.isMoving) {
|
||||||
|
charSprite.value.anims.play(charTexture.value, true)
|
||||||
|
} else {
|
||||||
|
charSprite.value.anims.stop()
|
||||||
|
charSprite.value.setFrame(0)
|
||||||
|
charSprite.value.setTexture(charTexture.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const initializeSprite = async () => {
|
||||||
|
const characterTypeStorage = new CharacterTypeStorage()
|
||||||
|
const spriteId = await characterTypeStorage.getSpriteId(mapCharacter.character.characterType!)
|
||||||
|
if (!spriteId) return
|
||||||
|
|
||||||
|
charSpriteId.value = spriteId
|
||||||
|
await loadSpriteTextures(scene, spriteId)
|
||||||
|
|
||||||
|
if (charSprite.value) {
|
||||||
|
charSprite.value.setTexture(charTexture.value)
|
||||||
|
charSprite.value.setFlipX(isFlippedX.value)
|
||||||
|
charSprite.value.setName(mapCharacter.character.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY, mapCharacter.character.rotation)
|
||||||
|
}
|
||||||
|
|
||||||
|
const cleanup = () => {
|
||||||
|
tween.value?.stop()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
charSprite,
|
||||||
|
charSpriteId,
|
||||||
|
currentPositionX,
|
||||||
|
currentPositionY,
|
||||||
|
isometricDepth,
|
||||||
|
isFlippedX,
|
||||||
|
updatePosition,
|
||||||
|
calcDirection,
|
||||||
|
updateSprite,
|
||||||
|
initializeSprite,
|
||||||
|
cleanup
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user