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 ae26d93432e27a05d50a9cee4f4ceac5b57a40cb.
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +0,0 @@
.aider*

15
events.js
View File

@ -38,22 +38,17 @@ function setupPanZoom() {
canvas.addEventListener('wheel', (e) => {
e.preventDefault();
// Adjust zoom speed based on current scale for smoother zooming
let zoomSpeed = 0.001 * (scale < 1 ? 0.5 : 1);
let zoomSpeed = 0.001;
let delta = e.deltaY * zoomSpeed;
let oldScale = scale;
scale -= delta;
// Limit scale range
if(scale < 0.1) scale = 0.1;
if(scale > 5) scale = 5;
// Zoom toward mouse position
const rect = canvas.getBoundingClientRect();
let mouseX = e.clientX - rect.left - (canvas.width/2 + offsetX);
let mouseY = e.clientY - rect.top - (canvas.height/2 + offsetY);
offsetX -= mouseX * (scale / oldScale - 1);
offsetY -= mouseY * (scale / oldScale - 1);
let mouseX = e.clientX - (canvas.width/2 + offsetX);
let mouseY = e.clientY - (canvas.height/2 + offsetY);
offsetX -= mouseX * (scale - oldScale);
offsetY -= mouseY * (scale - oldScale);
}, {passive: false});
}

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();
}

1
terrain.js
View File

@ -182,7 +182,6 @@ function isWater(x, y) {
// Get terrain type at a position
function getTerrainType(x, y) {
// Convert world coordinates to terrain grid coordinates
// Use consistent rounding to prevent shaking
const gridX = Math.floor((x + 2000) / 10);
const gridY = Math.floor((y + 2000) / 10);