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

Simplified effects code and implemented smooth interpolation between day an night light values

Browse Source
This commit is contained in:
Andrei 2025-01-23 01:56:20 -06:00
parent a61e05592d
commit faad00b2a5
1 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/game/map/Effects.vue
View File

@ -15,7 +15,8 @@ const LIGHT_CONFIG = {
SUNRISE_HOUR: 6,
SUNSET_HOUR: 20,
DAY_STRENGTH: 100,
NIGHT_STRENGTH: 30
NIGHT_STRENGTH: 30,
TRANSITION_HOURS: 3
}
// Stores and refs
@ -23,7 +24,6 @@ const gameStore = useGameStore()
const mapStore = useMapStore()
const mapStorage = new MapStorage()
const sceneRef = ref<Phaser.Scene | null>(null)
const mapEffectsReady = ref(false)
const mapObject = ref<Map | null>(null)
// Effect objects
@ -61,7 +61,6 @@ watch(
() => mapStore.mapId,
async (newMapId) => {
if (newMapId) {
mapEffectsReady.value = false
await loadMap()
updateScene()
}
@ -107,54 +106,54 @@ const updateScene = () => {
{}
) as { [key: string]: number }
// Only update effects once mapEffects are loaded
if (!mapEffectsReady.value) {
if (mapObject.value) {
mapEffectsReady.value = true
} else {
return
}
}
const finalEffects =
mapEffects && Object.keys(mapEffects).length
? mapEffects
: {
light: timeBasedLight,
rain: weatherState.value.rainPercentage,
fog: weatherState.value.fogDensity * 100
}
const finalEffects = {...mapEffects,
light: timeBasedLight,
rain: weatherState.value.rainPercentage,
fog: weatherState.value.fogDensity * 100 }
console.log(finalEffects)
applyEffects(finalEffects)
}
const applyEffects = (effectValues: any) => {
if (effects.light.value) {
const darkness = 1 - (effectValues.light ?? 100) / 100
const darkness = 1 - (effectValues.light) / 100
effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
}
if (effects.rain.value) {
const strength = effectValues.rain ?? 0
strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
}
if (effects.rain)
effects.rain.value.start().setQuantity(effectValues.rain / 10)
else effects.rain.value.stop()
if (effects.fog.value) {
effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
}
effects.fog.value.setAlpha(effectValues.fog / 100)
}
// Linear Interpolation
// moves a value between x and y where a is the percentage of progress the value has made in moving from x to y
// a = 0 return x
// a = 0.5 return (x+y)/2
// a = 1 return y
const lerp = (x,y,a) => x * (1-a) + y * a
const calculateLightStrength = (time: Date): number => {
const hour = time.getHours()
const minute = time.getMinutes()
if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
//Transition from daylight to night
if (hour >= LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS && hour < LIGHT_CONFIG.SUNSET_HOUR)
return lerp(LIGHT_CONFIG.DAY_STRENGTH, LIGHT_CONFIG.NIGHT_STRENGTH,
(hour-(LIGHT_CONFIG.SUNSET_HOUR-LIGHT_CONFIG.TRANSITION_HOURS))/LIGHT_CONFIG.TRANSITION_HOURS)
//Transition from sunrise to morning
else if (hour >= LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNRISE_HOUR + LIGHT_CONFIG.TRANSITION_HOURS)
return lerp(LIGHT_CONFIG.NIGHT_STRENGTH, LIGHT_CONFIG.DAY_STRENGTH,
(hour-LIGHT_CONFIG.SUNRISE_HOUR)/LIGHT_CONFIG.TRANSITION_HOURS)
else if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR)
return LIGHT_CONFIG.DAY_STRENGTH
else
return LIGHT_CONFIG.NIGHT_STRENGTH
}
// Socket and window handlers
@ -181,7 +180,6 @@ const handleResize = () => {
watch(
() => mapObject.value,
() => {
mapEffectsReady.value = false
updateScene()
},
{ deep: true }