n/vue-shovel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

draw shadows to hide invisible blocks

Browse source
This commit is contained in:
Norman Köhring 2023-02-18 11:15:20 +01:00
parent d75f862380
commit 19bc40fd8d
1 changed files with 42 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/util/useLightMap.ts
View file

@ -8,7 +8,7 @@ export default function useLightMap(
tx: ComputedRef<number>,
ty: ComputedRef<number>,
time: ComputedRef<number>,
lightBarrier: ComputedRef<number>,
lightBarrier: ComputedRef<number[]>,
) {
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)
}
}