Skip to content

Commit

Permalink
Merge pull request #68 from LMcAlpine/flats
Browse files Browse the repository at this point in the history 
Flats
  • Loading branch information
@LMcAlpine
LMcAlpine authored Sep 9, 2023
2 parents 3e23d3f + e1304af commit ad1fbfd
Show file tree
Hide file tree
Showing 11 changed files with 952 additions and 397 deletions.
17 changes: 12 additions & 5 deletions canvasutils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const HALFHEIGHT = this.canvasHeight / 2;
const FOV = 90;
const HALFFOV = FOV / 2;

let traverseBSP;
let traverseCount = 0;

const SCREENDISTANCE = HALFWIDTH / Math.tan(degreesToRadians(HALFFOV));

function calculateScale2D(maxX, minX, maxY, minY) {
Expand Down Expand Up @@ -122,22 +125,26 @@ function getRandomInt(min, max, seed) {
}

function angleToX(angle) {
let SCREENDISTANCE = gameEngine.canvas.canvasWidth / 2.0 + 1.0;
let x = 0;
if (angle > 90) {
angle = new Angle(angle - 90);

x =
HALFWIDTH -
Math.trunc(Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE);
SCREENDISTANCE - Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE;
} else {
angle = Angle.subtract(90, angle);
x = Math.trunc(Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE);
x += HALFWIDTH;
x = Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE;
x += SCREENDISTANCE;
}
return x;
return Math.floor(x);
}

function getXToAngle(x) {
let angleRad = Math.atan((HALFWIDTH - x) / SCREENDISTANCE);
return angleRad * (180 / Math.PI); // Convert radians to degrees
}

function areCloseEnough(a, b, epsilon = 1e-6) {
return Math.abs(a - b) < epsilon;
}
4 changes: 4 additions & 0 deletions engine/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ document
const levelParser = new LevelParser(lumpData);
const levels = levelParser.parse("E1M1");

gameEngine.lumpData = lumpData;
// const flats = new Flats();
// gameEngine.flat = flats;

const palette = new ReadPalette(lumpData);

gameEngine.palette = palette;
Expand Down
27 changes: 16 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,29 @@
</head>

<body>
<canvas
id="myCanvas"
width="800"
height="600"
style="background: black"
tabindex="0"
autofocus
></canvas>
<input type="file" accept=".wad" id="fileInput" />

<div class="window">
<canvas
id="myCanvas"
width="640"
height="400"
style="background: black"
tabindex="0"
autofocus
></canvas>
<div class="uploadBox">
<input type="file" accept=".wad" id="fileInput" />
</div>
</div>

<link rel="stylesheet" href="style.css" />
<script src="player.js"></script>
<script src="canvasutils.js"></script>

<script src="./world/bsptraversal.js"></script>
<script src="./world/levelmanager.js"></script>
<script src="./world/subsector.js"></script>


<script src="./wad/flats.js"></script>
<script src="./wad/textures.js"></script>
<script src="./wad/readpalette.js"></script>
<script src="./wad/patchnames.js"></script>
Expand Down
28 changes: 16 additions & 12 deletions player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,15 @@ class Player {
this.x = location.xPosition;
this.y = location.yPosition;

// this.x = 1391.0860290527344;
// this.y = -2502.269790649414;

this.minX = minX;
this.minY = minY;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.direction = location.direction;
// this.direction = 0.26;

this.fov = fov;

Expand Down Expand Up @@ -89,9 +93,9 @@ class Player {
* Method to update the state of the player for each frame.
*/
update() {
console.log("x: " + this.x);
console.log("y ;" + this.y);
console.log("angle: " + this.direction);
// console.log("x: " + this.x);
// console.log("y ;" + this.y);
// console.log("angle: " + this.direction);
const multiplier = 550;
const magRotation = 0.1875 * multiplier;

Expand Down Expand Up @@ -138,15 +142,15 @@ class Player {
this.direction -= magRotation * gameEngine.clockTick;
}

// this.height = gameEngine.levelManager.getPlayerSubsectorHeight() + 41;
let floorHeight = gameEngine.levelManager.getPlayerSubsectorHeight();
if (this.height < floorHeight + 41) {
this.height += 0.4 * (floorHeight + 41 - this.height);
this.zVel = 0;
} else {
this.zVel -= 0.9;
this.height += Math.max(-15.0, this.zVel);
}
this.height = gameEngine.levelManager.getPlayerSubsectorHeight() + 41;
// let floorHeight = gameEngine.levelManager.getPlayerSubsectorHeight();
// if (this.height < floorHeight + 41) {
// this.height += 0.4 * (floorHeight + 41 - this.height);
// this.zVel = 0;
// } else {
// this.zVel -= 0.9;
// this.height += Math.max(-15.0, this.zVel);
// }
}

/**
Expand Down
71 changes: 70 additions & 1 deletion render/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,73 @@ class Canvas {
// }
// }

drawFlatToScreen(offscreenCtx, texture, x, y1, y2, lightLevel, worldZ) {
if (y1 < y2) {
if (texture === "F_SKY1") {
// let textureColumn = gameEngine.player.direction + getXToAngle(x);
// let skyAlt = 50;
// let skyInverseScale = HALFWIDTH / this.canvasWidth;
// this.drawWallCol(
// offscreenCtx,
// { width: 64, height: 64 },
// textureColumn,
// x,
// y1,
// y2,
// skyAlt,
// skyInverseScale,
// 1
// );
} else {
// Assuming 64x64 texture, fetching entire texture's data.
//let flatTex = offscreenCtx.getImageData(0, 0, 64, 64);

// Call the drawFlatColumn method to process the column data.
this.drawFlatColumn(offscreenCtx, x, y1, y2, lightLevel, worldZ);
}
}
}

drawFlatColumn(offscreenCtx, x, y1, y2, lightLevel, worldZ) {
let playerDirectionX = Math.cos(
degreesToRadians(gameEngine.player.direction)
);
let playerDirectionY = Math.sin(
degreesToRadians(gameEngine.player.direction)
);

const columnData = offscreenCtx.getImageData(x, y1, 1, y2 - y1);
const entireTextureData = offscreenCtx.getImageData(0, 0, 64, 64).data;

for (let i = y1; i <= y2; i++) {
let z = (HALFWIDTH * worldZ) / (HALFHEIGHT - i);

let px = playerDirectionX * z + gameEngine.player.x;
let py = playerDirectionY * z + gameEngine.player.y;

let leftX = -playerDirectionY * z + px;
let leftY = playerDirectionX * z + py;
let rightX = playerDirectionY * z + px;
let rightY = -playerDirectionX * z + py;

let dx = (rightX - leftX) / this.canvasWidth;
let dy = (rightY - leftY) / this.canvasWidth;

let tx = Math.trunc(leftX + dx * x) & 63;
let ty = Math.trunc(leftY + dy * x) & 63;

const texPos = (ty * 64 + tx) * 4;

columnData.data[(i - y1) * 4] = entireTextureData[texPos] * lightLevel;
columnData.data[(i - y1) * 4 + 1] =
entireTextureData[texPos + 1] * lightLevel;
columnData.data[(i - y1) * 4 + 2] =
entireTextureData[texPos + 2] * lightLevel;
columnData.data[(i - y1) * 4 + 3] = 255; // Assuming full alpha
}
this.ctx.putImageData(columnData, x, y1);
}

drawWallCol(
offscreenCtx,
texture,
Expand All @@ -142,7 +209,8 @@ class Canvas {

let textureY = textureAlt + (y1 - HALFHEIGHT) * invScale;

for (let i = 0; i < columnData.data.length; i += 4) {
const length = columnData.data.length;
for (let i = 0; i < length; i += 4) {
const texY = Math.trunc(textureY) % textureHeight;
const texPos = (texY * textureWidth + textureColumn) * 4;

Expand All @@ -154,6 +222,7 @@ class Canvas {
textureY += invScale;
}

// this.ctx.imageSmoothingEnabled = false;
this.ctx.putImageData(columnData, x, y1);
}
}
Expand Down
Loading

0 comments on commit ad1fbfd

Please sign in to comment.