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

Setup skeleton for new HUD, updated fog img, updated effects

Browse Source
This commit is contained in:
Dennis Postma
2024-10-13 12:25:13 +02:00
parent c86fd2e564
commit 3c7e96ea7f
7 changed files with 52 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Effects.vue
View File

@ -12,6 +12,8 @@ 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)
@ -19,7 +21,7 @@ const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
// Effect parameters
const dayNightDuration = 300000 // 5 minutes in milliseconds
const maxDarkness = 0.3
const maxDarkness = 0.7
const preloadScene = async (scene: Phaser.Scene) => {
scene.load.image('raindrop', 'assets/raindrop.png')
@ -27,6 +29,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
}
const createScene = async (scene: Phaser.Scene) => {
sceneRef.value = scene
createDayNightCycle(scene)
createRainEffect(scene)
createFogEffect(scene)
@ -58,12 +61,12 @@ const createRainEffect = (scene: Phaser.Scene) => {
quantity: 5,
lifespan: 2000,
speedY: { min: 300, max: 500 },
scale: { start: 0.1, end: 0.2 },
scale: { start: 0.005, end: 0.005 },
alpha: { start: 0.5, end: 0 },
blendMode: 'ADD'
})
rainEmitter.value.setDepth(900)
toggleRain(false) // Start with rain off
toggleRain(true) // Start with rain off
}
const toggleRain = (isRaining: boolean) => {
@ -73,10 +76,10 @@ const toggleRain = (isRaining: boolean) => {
}
const createFogEffect = (scene: Phaser.Scene) => {
fogSprite.value = scene.add.sprite(window.width / 2, window.innerHeight / 2, 'fog')
fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
fogSprite.value.setScale(2)
fogSprite.value.setAlpha(0)
fogSprite.value.setDepth(950)
fogSprite.value.setAlpha(0) // yeetdasasdasd
fogSprite.value.setDepth(950) // yeetdasasdasd
}
const updateFogEffect = () => {
@ -101,6 +104,6 @@ const controlEffects = {
defineExpose(controlEffects)
onBeforeUnmount(() => {
scene.destroy()
if (sceneRef.value) sceneRef.value.scene.remove('effects')
})
</script>