Add Map2d component, add lightMap inside level.json

shezard · May 29, 2023 · 3f0fbb7 · 3f0fbb7
1 parent 34371ef
commit 3f0fbb7
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 44 deletions.
diff --git a/src/components/Map2d.svelte b/src/components/Map2d.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Map2d } from '$lib/map';
+
+	export let map2d: Map2d;
+</script>
+
+{#each map2d as mapX, x}
+	{#each mapX as item, y}
+		<slot {x} {y} {item} />
+	{/each}
+{/each}
diff --git a/src/components/Scene.svelte b/src/components/Scene.svelte
@@ -3,33 +3,51 @@
 	import * as SC from 'svelte-cubed';
 
 	import { position } from '$lib/player';
-	import { collisions, tiles } from '$lib/map';
 	import { textures } from '$lib/textures';
+	import { collisions, tiles, lights } from '$lib/map';
 
 	import Wall from './Wall.svelte';
 	import Floor from './Floor.svelte';
 	import Torch from './Torch.svelte';
+	import Map2d from './Map2d.svelte';
+
+	const getLightDirection = function (x: number, y: number) {
+		if ($collisions[x + 1][y]) {
+			return 0;
+		}
+		if ($collisions[x][y + 1]) {
+			return Math.PI / 2;
+		}
+		if ($collisions[x - 1][y]) {
+			return Math.PI;
+		}
+		if ($collisions[x][y - 1]) {
+			return Math.PI / 2 + Math.PI;
+		}
+	};
 </script>
 
 <SC.Canvas
 	background={new THREE.Color('skyblue')}
 	fog={new THREE.FogExp2('skyblue', 0.002)}
 	shadows
 >
-	{#each $collisions as collisionX, x}
-		{#each collisionX as collision, y}
-			{#if collision == 1}
-				<Wall position={[x, y]} texture={$textures['wall-' + $tiles[x][y] + '.png']} />
-			{/if}
-			{#if collision == 0}
-				<Floor position={[x, y]} texture={$textures['floor-' + $tiles[x][y] + '.png']} />
-			{/if}
-		{/each}
-	{/each}
+	<Map2d map2d={$collisions} let:x let:y let:item>
+		{#if item == 1}
+			<Wall position={[x, y]} texture={$textures['wall-' + $tiles[x][y] + '.png']} />
+		{/if}
+		{#if item == 0}
+			<Floor position={[x, y]} texture={$textures['floor-' + $tiles[x][y] + '.png']} />
+		{/if}
+	</Map2d>
 
 	<SC.AmbientLight color={0xddffff} intensity={0.5} />
 
-	<Torch position={[2, 10]} />
+	<Map2d map2d={$lights} let:x let:y let:item>
+		{#if item}
+			<Torch position={[x, y]} direction={getLightDirection(x, y)} />
+		{/if}
+	</Map2d>
 
 	<SC.PerspectiveCamera
 		position={[

diff --git a/src/components/Torch.svelte b/src/components/Torch.svelte
@@ -8,41 +8,45 @@
 
 	export let direction = Math.PI / 2;
 
-    export let color = 0xfff0f0;
+	export let color = 0xfff0f0;
 </script>
 
 <SC.Group position={[0, -0.1, 0]}>
-    <SC.PointLight
-        intensity={0.8}
-        position={[position[0], 0.4, position[1]]}
-        distance={10}
-        shadow={true}
-        {color}
-    />
+	<SC.PointLight
+		intensity={0.8}
+		position={[position[0], 0.4, position[1]]}
+		distance={10}
+		shadow={true}
+		{color}
+	/>
 
-    <SC.Mesh
-        geometry={new THREE.BoxGeometry(0.05, 0.05, 0.05)}
-        material={new THREE.MeshLambertMaterial({
-            color
-        })}
-        position={[
-            position[0] + 0.45 * Math.cos(direction),
-            0.3,
-            position[1] + 0.45 * Math.sin(direction)
-        ]}
-    />
+	<SC.Mesh
+		geometry={new THREE.BoxGeometry(0.05, 0.05, 0.05)}
+		material={new THREE.MeshLambertMaterial({
+			color
+		})}
+		position={[
+			position[0] + 0.45 * Math.cos(direction),
+			0.3,
+			position[1] + 0.45 * Math.sin(direction)
+		]}
+	/>
 
-    <SC.Mesh
-        geometry={new THREE.BoxGeometry(0.055, 0.2, 0.055)}
-        material={new THREE.MeshLambertMaterial({
-            color: 0x62351c
-        })}
-        position={[
-            position[0] + 0.5 * Math.cos(direction),
-            0.2,
-            position[1] + 0.5 * Math.sin(direction)
-        ]}
-        rotation={[0.5 * Math.cos(direction + Math.PI / 2), 0, 0.5 * Math.sin(direction + Math.PI / 2)]}
-        castShadow
-    />
+	<SC.Mesh
+		geometry={new THREE.BoxGeometry(0.055, 0.2, 0.055)}
+		material={new THREE.MeshLambertMaterial({
+			color: 0x62351c
+		})}
+		position={[
+			position[0] + 0.5 * Math.cos(direction),
+			0.2,
+			position[1] + 0.5 * Math.sin(direction)
+		]}
+		rotation={[
+			0.5 * Math.cos(direction + Math.PI / 2),
+			0,
+			0.5 * Math.sin(direction + Math.PI / 2)
+		]}
+		castShadow
+	/>
 </SC.Group>
diff --git a/src/lib/map.ts b/src/lib/map.ts
@@ -44,3 +44,16 @@ const createCollisions = () => {
 };
 
 export const collisions = createCollisions();
+
+const createLights = () => {
+	const { subscribe, set } = writable<Map2d>(
+		swapXY(level0.width, level0.height, level0.lightMap)
+	);
+
+	return {
+		subscribe,
+		set
+	};
+};
+
+export const lights = createLights();
diff --git a/src/lib/maps/level-0.json b/src/lib/maps/level-0.json
@@ -28,5 +28,19 @@
 		[0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0],
 		[0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0],
 		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+	],
+	"lightMap": [
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
 	]
 }