|
|
|
@ -1,6 +1,15 @@
|
|
|
|
|
import type { ComputedRef } from 'vue'
|
|
|
|
|
import { BLOCK_SIZE, STAGE_WIDTH, STAGE_HEIGHT } from '../level/def'
|
|
|
|
|
|
|
|
|
|
export default function useLightMap(ctx: CanvasRenderingContext2D) {
|
|
|
|
|
export default function useLightMap(
|
|
|
|
|
ctx: CanvasRenderingContext2D,
|
|
|
|
|
x: ComputedRef<number>,
|
|
|
|
|
y: ComputedRef<number>,
|
|
|
|
|
tx: ComputedRef<number>,
|
|
|
|
|
ty: ComputedRef<number>,
|
|
|
|
|
time: ComputedRef<number>,
|
|
|
|
|
lightBarrier: ComputedRef<number>,
|
|
|
|
|
) {
|
|
|
|
|
const W = ((STAGE_WIDTH + 2) * BLOCK_SIZE)
|
|
|
|
|
const H = ((STAGE_HEIGHT + 2) * BLOCK_SIZE)
|
|
|
|
|
|
|
|
|
@ -8,15 +17,15 @@ export default function useLightMap(ctx: CanvasRenderingContext2D) {
|
|
|
|
|
const playerY = H / 2 - BLOCK_SIZE / 2
|
|
|
|
|
const playerLightSize = BLOCK_SIZE * 1.8
|
|
|
|
|
|
|
|
|
|
function drawPlayerLight(tx: number, ty: number) {
|
|
|
|
|
function drawPlayerLight(sizeMul:number) {
|
|
|
|
|
const playerLight = ctx.createRadialGradient(
|
|
|
|
|
playerX - tx, playerY - ty, 0,
|
|
|
|
|
playerX - tx, playerY - ty, playerLightSize
|
|
|
|
|
playerX - tx.value, playerY - ty.value, 0,
|
|
|
|
|
playerX - tx.value, playerY - ty.value, playerLightSize * sizeMul
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
// Add three color stops
|
|
|
|
|
playerLight.addColorStop(0.0, "#FFCF");
|
|
|
|
|
playerLight.addColorStop(1, "#FFC0");
|
|
|
|
|
playerLight.addColorStop(0.0, "#FFFF");
|
|
|
|
|
playerLight.addColorStop(1, "#FFF0");
|
|
|
|
|
|
|
|
|
|
// Set the fill style and draw a rectangle
|
|
|
|
|
ctx.fillStyle = playerLight;
|
|
|
|
@ -24,21 +33,22 @@ export default function useLightMap(ctx: CanvasRenderingContext2D) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// TODO: support light barrier
|
|
|
|
|
function draw(x:number, y:number, tx:number, ty:number, time:number) {
|
|
|
|
|
if (time > 900 || time < 100) {
|
|
|
|
|
return function update() {
|
|
|
|
|
const t = time.value
|
|
|
|
|
|
|
|
|
|
if (t > 900 || t < 100) {
|
|
|
|
|
ctx.fillStyle = `hsl(0, 0%, 20%)`
|
|
|
|
|
} else if (time < 250) {
|
|
|
|
|
const s = Math.round((time - 100) / 1.5) // 0-100%
|
|
|
|
|
const l = Math.round((time - 100) / 1.875) + 20 // 20-100%
|
|
|
|
|
} 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) {
|
|
|
|
|
// ctx.fillStyle = `hsl(0, ${}%, ${}%)`
|
|
|
|
|
} 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.fillRect(0, 0, W, H)
|
|
|
|
|
drawPlayerLight(tx, ty)
|
|
|
|
|
drawPlayerLight(1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { draw }
|
|
|
|
|
}
|
|
|
|
|