noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

npm run format, started working on follow player logic, refactor some camera logic

Browse Source
This commit is contained in:
Dennis Postma
2024-09-22 02:14:32 +02:00
parent 42291b93eb
commit 9b592d6c7c
14 changed files with 101 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,7 @@
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
</Container>
<!-- <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY" ref="charContainer">
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
<Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
</Container>
@ -29,6 +28,8 @@ enum Direction {
NOCHANGE
}
const charContainer = ref<Phaser.GameObjects.Container | null>(null)
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
character?: CharacterT
@ -38,14 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined
})
const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
const gameStore = useGameStore()
const scene = useScene()
const isometricDepth = ref(calculateIsometricDepth(props.character!.positionX, props.character!.positionY, 28, 94, true))
const currentX = ref(0)
const currentY = ref(0)
const gameStore = useGameStore();
const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true)
const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
}
@ -54,11 +56,6 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
const targetX = tileToWorldX(props.layer, x, y)
const targetY = tileToWorldY(props.layer, x, y)
// Used for camera resize calculation to center on Character.
if(gameStore.character) {
gameStore.character.relativePosition = { x: targetX, y: targetY };
}
if (isInitialPosition.value) {
currentX.value = targetX
currentY.value = targetY
@ -165,6 +162,13 @@ const createText = (text: Phaser.GameObjects.Text) => {
}
onMounted(() => {
/**
* @TODO: Put this at an appropriate place not in this component
*/
// Check if player is this character, then lock with camera
if (props.character && props.character.id === gameStore.character?.id) {
scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
}
if (props.character) {
updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
}