diff --git a/src/util/useLightMap.ts b/src/util/useLightMap.ts index 27dec1f..26bcd6a 100644 --- a/src/util/useLightMap.ts +++ b/src/util/useLightMap.ts @@ -8,7 +8,7 @@ export default function useLightMap( tx: ComputedRef, ty: ComputedRef, time: ComputedRef, - lightBarrier: ComputedRef, + lightBarrier: ComputedRef, ) { const W = ((STAGE_WIDTH + 2) * BLOCK_SIZE) const H = ((STAGE_HEIGHT + 2) * BLOCK_SIZE) @@ -17,6 +17,28 @@ export default function useLightMap( const playerY = H / 2 - BLOCK_SIZE / 2 const playerLightSize = BLOCK_SIZE * 1.8 + function getAmbientLightColor() { + const t = time.value + + // Night time (pale bluish dark: hslpicker.com/#2b293d ) + if (t > 900 || t < 100) { + return `hsl(245, 20%, 20%)` + } + // Morning hours (gradually more reddish hue) + if (t < 250) { + const s = Math.round((t - 100) / 1.5) // 0-100% + const l = Math.round((t - 100) / 1.875) + 20 // 20-100% + return `hsl(0, ${s}%, ${l}%)` + } + // Evening hours (from neutral white to bluish hue with low saturation) + if (t > 700) { + const s = 100 - Math.round((t - 700) / 2.5) // 100-20% + return `hsl(245, ${s}%, ${s}%)` + } + // day (neutral white) + return `hsl(0, 0%, 100%)` + } + function drawPlayerLight(sizeMul:number) { const playerLight = ctx.createRadialGradient( playerX - tx.value, playerY - ty.value, 0, @@ -32,23 +54,28 @@ export default function useLightMap( ctx.fillRect(0, 0, W, H) } - // TODO: support light barrier - return function update() { - const t = time.value + function drawShadows() { + const barrier = lightBarrier.value - if (t > 900 || t < 100) { - ctx.fillStyle = `hsl(0, 0%, 20%)` - } else if (t < 250) { - const s = Math.round((t - 100) / 1.5) // 0-100% - const l = Math.round((t - 100) / 1.875) + 20 // 20-100% - ctx.fillStyle = `hsl(0, ${s}%, ${l}%)` - } else if (t > 700) { - const s = 100 - Math.round((t - 700) / 2.5) // 100-20% - ctx.fillStyle = `hsl(245, ${s}%, ${s}%)` - } else { - ctx.fillStyle = `hsl(0, 0%, 100%)` + ctx.fillStyle = '#000A' + for (let col = 0; col < W / BLOCK_SIZE; col++) { + const level = (barrier[col] - y.value) * BLOCK_SIZE + const sw = BLOCK_SIZE * 0.935 + const sh = H - level + const sx = col * sw + const sy = level * 0.995 + + ctx.fillRect(sx, sy, sw, sh) + ctx.fillRect(sx, sy + 20, sw, sh) + ctx.fillRect(sx, sy + 40, sw, sh) } + } + + return function update() { + ctx.fillStyle = getAmbientLightColor() ctx.fillRect(0, 0, W, H) + // TODO: switch from drawing shadows to drawing lights + drawShadows() drawPlayerLight(1) } }