cleanup and some minor lightmap improvements

This commit is contained in:
Norman Köhring 2025-03-14 13:03:32 +01:00
parent 3e60718449
commit b8335d9392
3 changed files with 12 additions and 86 deletions

View file

@ -27,6 +27,7 @@ pocket({ name: 'Pick Axe', type: 'tool', icon: 'pick', quality: 'wood' })
let animationFrame = 0
let lastTick = 0
const debug = ref(false)
const x = ref(0)
const y = ref(0)
const floorX = computed(() => Math.floor(x.value))
@ -233,7 +234,7 @@ onMounted(() => {
<div id="blocks" :style="{transform: `translate(${tx}px, ${ty}px)`}">
<template v-for="(row, y) in mapGrid">
<div v-for="(block, x) in row"
:class="['block', block.type, { highlight: x === px && y === py }]"
:class="['block', block.type, { highlight: debug && x === px && y === py }]"
@click="interactWith(x, y, block)"
/>
</template>
@ -256,7 +257,12 @@ onMounted(() => {
</div>
</div>
<canvas id="light-mask" ref="lightMapEl" :style="{transform: `translate(${tx}px, ${ty}px)`}" />
<canvas id="light-mask" ref="lightMapEl"
:style="{
transform: `translate(${tx}px, ${ty}px)`,
mixBlendMode: paused && debug ? 'normal' : 'multiply',
}"
/>
<div id="beam" v-if="arriving"></div>
<div id="level-indicator">
x:{{ floorX }}, y:{{ floorY }}

View file

@ -1,80 +0,0 @@
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { BLOCK_SIZE, STAGE_WIDTH, STAGE_HEIGHT } from './level/def'
export interface Props {
x: number,
y: number,
tx: number,
ty: number,
lightBarrier: number[],
time: number,
}
const props = defineProps<Props>()
// TODO: use OffscreenCanvas and a WebWorker?
const lightMapEl = ref<HTMLCanvasElement | undefined>(undefined)
const W = ((STAGE_WIDTH + 2) * BLOCK_SIZE) / 2
const H = ((STAGE_HEIGHT + 2) * BLOCK_SIZE) / 2
const playerX = (W - BLOCK_SIZE) / 4
const playerY = H / 4 - BLOCK_SIZE / 2
const playerLightSize = BLOCK_SIZE / 3
function drawPlayerLight(ctx: CanvasRenderingContext2D) {
const playerLight = ctx.createRadialGradient(
playerX - props.tx / 4, playerY - props.ty / 4, 0,
playerX - props.tx / 4, playerY - props.ty / 4, playerLightSize
)
// Add three color stops
playerLight.addColorStop(0.0, "#FFFF");
playerLight.addColorStop(1, "#F0F0");
// Set the fill style and draw a rectangle
ctx.fillStyle = playerLight;
ctx.fillRect(0, 0, W, H)
}
onMounted(() => {
const canvas = lightMapEl.value
const ctx = canvas?.getContext('2d')
if (!ctx) return
watch(props, () => {
const t = props.time
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) {
// ctx.fillStyle = `hsl(0, ${}%, ${}%)`
} else {
ctx.fillStyle = `hsl(0, 0%, 100%)`
}
ctx.fillRect(0, 0, W, H)
drawPlayerLight(ctx)
})
})
</script>
<template>
<canvas ref="lightMapEl" :style="{transform: `translate(${tx}px, ${ty}px)`}" />
</template>
<style scoped>
canvas {
position: absolute;
top: -64px;
left: -64px;
width: calc(100% + 128px);
height: calc(100% + 128px);
mix-blend-mode: multiply;
}
</style>

View file

@ -48,7 +48,9 @@ export default function useLightMap(
// Add color stops: white in the center to transparent white
playerLight.addColorStop(0.0, "#FFFF");
playerLight.addColorStop(1, "#FFF0");
playerLight.addColorStop(0.4, "#FFFF");
playerLight.addColorStop(0.7, "#FFFA");
playerLight.addColorStop(1, "#FFF1");
// Set the fill style and draw a rectangle
ctx.fillStyle = playerLight;
@ -58,7 +60,6 @@ export default function useLightMap(
function drawLights() {
// used for everything above ground
const ambientLight = getAmbientLightColor()
const surroundingLight = ambientLight.slice(-2)
const barrier = lightBarrier.value
ctx.fillStyle = ambientLight
@ -74,8 +75,7 @@ export default function useLightMap(
// make light columns wider to illuminate surrounding blocks
const extra = Math.floor(B / 2)
const reflectedLight = ambientLight.slice(0, -1) + ', 50%)'
ctx.fillStyle = reflectedLight
ctx.fillStyle = ambientLight.slice(0, -1) + ', 40%)'
for (let col = 0; col < W / B; col++) {
const level = (barrier[col] - y.value) * B
const sw = B