kacperks/worldbox-minigame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "refactor: Optimize terrain rendering and zooming performance"

Browse Source 
This reverts commit ae26d93432.
This commit is contained in:
Kacper Kostka
2025-04-02 12:28:54 +02:00
parent ae26d93432
commit f9669c9871
4 changed files with 16 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
render.js
View File

@@ -82,28 +82,11 @@ function drawTerrain() {
const endX = Math.ceil(startX + visibleWidth);
const endY = Math.ceil(startY + visibleHeight);
// Draw terrain cells - use a larger cell size when zoomed out for performance
const baseSize = 10; // Base size of each terrain cell
const adaptiveSize = Math.max(baseSize, Math.floor(baseSize / scale) * baseSize);
// Draw terrain cells
const cellSize = 10; // Size of each terrain cell
// Align to grid to prevent shaking
const alignedStartX = Math.floor(startX / adaptiveSize) * adaptiveSize;
const alignedStartY = Math.floor(startY / adaptiveSize) * adaptiveSize;
// Limit the number of cells drawn for performance
const maxCells = 10000;
const cellsWidth = Math.ceil((endX - alignedStartX) / adaptiveSize);
const cellsHeight = Math.ceil((endY - alignedStartY) / adaptiveSize);
// If too many cells would be drawn, increase cell size
let cellSize = adaptiveSize;
if (cellsWidth * cellsHeight > maxCells) {
const scaleFactor = Math.sqrt((cellsWidth * cellsHeight) / maxCells);
cellSize = Math.ceil(adaptiveSize * scaleFactor);
}
for (let x = alignedStartX; x <= endX; x += cellSize) {
for (let y = alignedStartY; y <= endY; y += cellSize) {
for (let x = startX; x <= endX; x += cellSize) {
for (let y = startY; y <= endY; y += cellSize) {
// Get terrain type at this position
const terrainType = getTerrainType(x, y);
@@ -142,34 +125,19 @@ function drawGrid() {
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 1/scale;
// Calculate visible area
const visibleWidth = canvas.width / scale;
const visibleHeight = canvas.height / scale;
const startX = Math.floor((-offsetX / scale) - (visibleWidth / 2));
const startY = Math.floor((-offsetY / scale) - (visibleHeight / 2));
const endX = Math.ceil(startX + visibleWidth);
const endY = Math.ceil(startY + visibleHeight);
// Align grid to prevent shaking
const gridSize = 100;
const alignedStartX = Math.floor(startX / gridSize) * gridSize;
const alignedStartY = Math.floor(startY / gridSize) * gridSize;
// Only draw visible grid lines
for(let x = alignedStartX; x <= endX; x += gridSize) {
let range = 2000;
for(let x = -range; x <= range; x += 100) {
ctx.beginPath();
ctx.moveTo(x, startY);
ctx.lineTo(x, endY);
ctx.moveTo(x, -range);
ctx.lineTo(x, range);
ctx.stroke();
}
for(let y = alignedStartY; y <= endY; y += gridSize) {
for(let y = -range; y <= range; y += 100) {
ctx.beginPath();
ctx.moveTo(startX, y);
ctx.lineTo(endX, y);
ctx.moveTo(-range, y);
ctx.lineTo(range, y);
ctx.stroke();
}
ctx.restore();
}