asdqwde
This commit is contained in:
@@ -171,7 +171,6 @@ class DungeonCrawler {
|
||||
textureUrls.forEach((url, textureId) => {
|
||||
Texture.fromSource(url).then((texture) => {
|
||||
textures[textureId] = texture;
|
||||
console.log("here", { textureId, texture, textures });
|
||||
textureLoadCount++;
|
||||
|
||||
if (textureLoadCount < textureUrls.length) {
|
||||
|
||||
@@ -142,23 +142,16 @@ export class FirstPersonRenderer {
|
||||
const screenWidth = this.window.width;
|
||||
|
||||
/** @type {Map<number,Tile} The coordinates of all the tiles checked while rendering this frame*/
|
||||
const coordsCheckedFrame = new Map();
|
||||
const coordsChecked = new Map();
|
||||
|
||||
for (let x = 0; x < screenWidth; x++) {
|
||||
/** @type {Map<number,Tile} The coordinates of all the tiles checked while casting this single ray*/
|
||||
const coordsCheckedRay = new Map();
|
||||
|
||||
const angleOffset = (x / screenWidth - 0.5) * this.fov; // in radians
|
||||
const rayAngle = dirAngle + angleOffset;
|
||||
const rayDirX = Math.cos(rayAngle);
|
||||
const rayDirY = Math.sin(rayAngle);
|
||||
|
||||
// Cast ray using our DDA function
|
||||
const ray = this.castRay(posX, posY, rayDirX, rayDirY, coordsCheckedRay);
|
||||
|
||||
coordsCheckedRay.forEach((tile, idx) => {
|
||||
coordsCheckedFrame.set(idx, tile);
|
||||
});
|
||||
const ray = this.castRay(posX, posY, rayDirX, rayDirY, coordsChecked);
|
||||
|
||||
//
|
||||
// Render a single screen column
|
||||
@@ -195,21 +188,26 @@ export class FirstPersonRenderer {
|
||||
* @protected
|
||||
*/
|
||||
renderColumn(x, ray, rayDirX, rayDirY, angleOffset) {
|
||||
// //
|
||||
// // Check if we hit anything at all
|
||||
// if (ray.collisions.length === 0) {
|
||||
// //
|
||||
// // We didn't hit anything. Just paint floor, wall, and darkness
|
||||
// for (let y = 0; y < this.window.height; y++) {
|
||||
// const [char, color] = this.shades[y];
|
||||
// this.window.put(x, y, char, color);
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// Check if we hit anything at all
|
||||
if (ray.collisions.length === 0) {
|
||||
//
|
||||
// We didn't hit anything. Just paint floor, wall, and darkness
|
||||
// // ALTERNATIVE always paint floor and ceiling
|
||||
for (let y = 0; y < this.window.height; y++) {
|
||||
const [char, color] = this.shades[y];
|
||||
this.window.put(x, y, char, color);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const { rayLength, side, sampleU, tile: wallTile } = ray.collisions[0];
|
||||
|
||||
const distance = Math.max(rayLength * Math.cos(angleOffset), 1e-12); // Avoid divide by zero
|
||||
for (const { rayLength, side, sampleU, tile } of ray.collisions) {
|
||||
let distance = Math.max(rayLength * Math.cos(angleOffset), 1e-12); // Avoid divide by zero
|
||||
|
||||
//
|
||||
// Calculate perspective.
|
||||
@@ -233,7 +231,7 @@ export class FirstPersonRenderer {
|
||||
//
|
||||
// Pick texture (here grid value decides which texture)
|
||||
//
|
||||
const wallTexture = this.textures[wallTile.textureId];
|
||||
const texture = this.textures[tile.textureId];
|
||||
|
||||
for (let y = 0; y < screenHeight; y++) {
|
||||
//
|
||||
@@ -244,20 +242,28 @@ export class FirstPersonRenderer {
|
||||
this.window.put(x, y, char, color);
|
||||
continue;
|
||||
}
|
||||
if (y === minY) {
|
||||
this.window.put(x, y, "m", "#0F0");
|
||||
continue;
|
||||
}
|
||||
if (y === maxY) {
|
||||
this.window.put(x, y, "M", "#F00");
|
||||
continue;
|
||||
}
|
||||
// // DEBUG LINES
|
||||
// if (y === minY) {
|
||||
// this.window.put(x, y, "m", "#0F0");
|
||||
// continue;
|
||||
// }
|
||||
// if (y === maxY) {
|
||||
// this.window.put(x, y, "M", "#F00");
|
||||
// continue;
|
||||
// }
|
||||
|
||||
//
|
||||
// Map screen y to texture y
|
||||
let sampleV = (y - unsafeMinY) / lineHeight; // y- coordinate of the texture point to sample
|
||||
|
||||
const color = wallTexture.sample(sampleU, sampleV);
|
||||
const color = texture.sample(sampleU, sampleV);
|
||||
if (!Number.isFinite(color.a)) {
|
||||
throw new Error("Waaat");
|
||||
}
|
||||
|
||||
if (color.a === 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
//
|
||||
// North-south walls are shaded differently from east-west walls
|
||||
@@ -271,7 +277,8 @@ export class FirstPersonRenderer {
|
||||
// Darken the image
|
||||
color.mulRGB(shade * lightLevel);
|
||||
|
||||
this.window.put(x, y, this.wallChar, color.toCSS());
|
||||
this.window.put(x, y, tile.sprite ? "#" : this.wallChar, color.toCSS()); // MAGIC CONSTANT "S"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -382,16 +389,19 @@ export class FirstPersonRenderer {
|
||||
const tile = this.map.get(mapX, mapY);
|
||||
coordsChecked.set(this.map.tileIdx(mapX, mapY), tile);
|
||||
|
||||
//
|
||||
// --------------------------
|
||||
// No collision? Move on
|
||||
// --------------------------
|
||||
if (!tile.collision) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const rayLength = Math.hypot(
|
||||
wallDist * dirX, //
|
||||
wallDist * dirY, //
|
||||
);
|
||||
|
||||
//
|
||||
// --------------------------
|
||||
// Add a Sprite to the result
|
||||
// --------------------------
|
||||
if (tile.sprite || tile.wall) {
|
||||
//
|
||||
// Prepend the element to the array so rear-most sprites
|
||||
// appear first in the array,
|
||||
@@ -404,13 +414,12 @@ export class FirstPersonRenderer {
|
||||
collision.sampleU = sampleU;
|
||||
collision.side = side;
|
||||
result.collisions.unshift(collision);
|
||||
}
|
||||
|
||||
//
|
||||
// --------------------------
|
||||
// Add a Wall to the result
|
||||
// (and return)
|
||||
// --------------------------
|
||||
// --------------------------------
|
||||
// Algorithm stops if the ray hits
|
||||
// a wall.
|
||||
// -------------------------------
|
||||
if (tile.wall) {
|
||||
result.hitWall = true;
|
||||
return result;
|
||||
|
||||
@@ -92,14 +92,14 @@ export class Texture {
|
||||
* @returns {NRGBA}
|
||||
*/
|
||||
sample(u, v) {
|
||||
const x = Math.round(u * this.width);
|
||||
const y = Math.round(v * this.height);
|
||||
const x = Math.min(this.width - 1, Math.round(u * this.width));
|
||||
const y = Math.min(this.height - 1, Math.round(v * this.height));
|
||||
const index = (y * this.width + x) * 4;
|
||||
return new NRGBA(
|
||||
this.data[index + 0] / 255,
|
||||
this.data[index + 1] / 255,
|
||||
this.data[index + 2] / 255,
|
||||
1, // this.data[index + 3] / 255,
|
||||
this.data[index + 3] / 255,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ export class Tile {
|
||||
}
|
||||
}
|
||||
|
||||
get isCollision() {
|
||||
get collision() {
|
||||
return this.wall || this.sprite;
|
||||
}
|
||||
}
|
||||
@@ -70,6 +70,7 @@ export const defaultLegend = Object.freeze({
|
||||
minimapColor: "#f00",
|
||||
traversable: false,
|
||||
wall: false,
|
||||
sprite: true,
|
||||
}),
|
||||
|
||||
//
|
||||
|
||||
BIN
frontend/gnoll.png
Executable file → Normal file
BIN
frontend/gnoll.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 8.2 KiB |
Reference in New Issue
Block a user