forked from noxious/client
109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<template>
|
|
<Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene">
|
|
</Scene>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Scene } from 'phavuer'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
|
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
|
|
|
const gameStore = useGameStore()
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
|
|
const sceneRef = ref<Phaser.Scene | null>(null)
|
|
|
|
// Effect-related refs
|
|
const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
|
|
const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
|
|
const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
|
|
|
|
// Effect parameters
|
|
const dayNightDuration = 300000 // 5 minutes in milliseconds
|
|
const maxDarkness = 0.7
|
|
|
|
const preloadScene = async (scene: Phaser.Scene) => {
|
|
scene.load.image('raindrop', 'assets/raindrop.png')
|
|
scene.load.image('fog', 'assets/fog.png')
|
|
}
|
|
|
|
const createScene = async (scene: Phaser.Scene) => {
|
|
sceneRef.value = scene
|
|
createDayNightCycle(scene)
|
|
createRainEffect(scene)
|
|
createFogEffect(scene)
|
|
}
|
|
|
|
const updateScene = (scene: Phaser.Scene, time: number) => {
|
|
updateDayNightCycle(time)
|
|
updateFogEffect()
|
|
}
|
|
|
|
const createDayNightCycle = (scene: Phaser.Scene) => {
|
|
dayNightCycle.value = scene.add.graphics()
|
|
dayNightCycle.value.setDepth(1000)
|
|
}
|
|
|
|
const updateDayNightCycle = (time: number) => {
|
|
if (!dayNightCycle.value) return
|
|
|
|
const darkness = Math.sin((time % dayNightDuration) / dayNightDuration * Math.PI) * maxDarkness
|
|
dayNightCycle.value.clear()
|
|
dayNightCycle.value.fillStyle(0x000000, darkness)
|
|
dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
|
|
}
|
|
|
|
const createRainEffect = (scene: Phaser.Scene) => {
|
|
rainEmitter.value = scene.add.particles(0, 0, 'raindrop', {
|
|
x: { min: 0, max: window.innerWidth },
|
|
y: -50,
|
|
quantity: 5,
|
|
lifespan: 2000,
|
|
speedY: { min: 300, max: 500 },
|
|
scale: { start: 0.005, end: 0.005 },
|
|
alpha: { start: 0.5, end: 0 },
|
|
blendMode: 'ADD'
|
|
})
|
|
rainEmitter.value.setDepth(900)
|
|
toggleRain(true) // Start with rain off
|
|
}
|
|
|
|
const toggleRain = (isRaining: boolean) => {
|
|
if (rainEmitter.value) {
|
|
rainEmitter.value.setVisible(isRaining)
|
|
}
|
|
}
|
|
|
|
const createFogEffect = (scene: Phaser.Scene) => {
|
|
fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
|
|
fogSprite.value.setScale(2)
|
|
fogSprite.value.setAlpha(0) // yeetdasasdasd
|
|
fogSprite.value.setDepth(950) // yeetdasasdasd
|
|
}
|
|
|
|
const updateFogEffect = () => {
|
|
if (fogSprite.value) {
|
|
// Example: Oscillate fog opacity
|
|
const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3
|
|
fogSprite.value.setAlpha(fogOpacity)
|
|
}
|
|
}
|
|
|
|
// Expose methods to control effects
|
|
const controlEffects = {
|
|
toggleRain,
|
|
setFogDensity: (density: number) => {
|
|
if (fogSprite.value) {
|
|
fogSprite.value.setAlpha(density)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Make control methods available to parent components
|
|
defineExpose(controlEffects)
|
|
|
|
onBeforeUnmount(() => {
|
|
if (sceneRef.value) sceneRef.value.scene.remove('effects')
|
|
})
|
|
</script> |