Improve rendering even more

blaumeise20 · May 12, 2023 · a3abb2a · a3abb2a
1 parent 7c2ec2d
commit a3abb2a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 28 deletions.
diff --git a/src/core/textures/texture.ts b/src/core/textures/texture.ts
@@ -28,22 +28,25 @@ export class Texture {
         return this.url;
     }
 
-    static async fromBlob(blob: Blob, mipmapLevels = 3) {
+    static async fromBlob(blob: Blob, doMipmap = true) {
         const url = URL.createObjectURL(blob);
 
         const original = await createImageBitmap(blob);
-        const mipmaps = [original];
+        const bitmaps = [original];
         let width = original.width;
         let height = original.height;
-        for (let i = 0; i < mipmapLevels; i++) {
-            width = Math.max(1, width >> 1);
-            height = Math.max(1, height >> 1);
-            resizeCanvas.width = width;
-            resizeCanvas.height = height;
-            resizeContext.drawImage(original, 0, 0, width, height);
-            mipmaps.push(await createImageBitmap(resizeCanvas));
+        if (doMipmap) {
+            // max 8 textures (1 original + 7 downscaled)
+            for (let i = 0; i < 7 && width > 1 && height > 1; i++) {
+                width = Math.max(1, width >> 1);
+                height = Math.max(1, height >> 1);
+                resizeCanvas.width = width;
+                resizeCanvas.height = height;
+                resizeContext.drawImage(original, 0, 0, width, height);
+                bitmaps.push(await createImageBitmap(resizeCanvas));
+            }
         }
 
-        return new Texture(url, mipmaps);
+        return new Texture(url, bitmaps);
     }
 }
diff --git a/src/ui/editor/render.ts b/src/ui/editor/render.ts
@@ -1,5 +1,4 @@
 import type { CellGrid } from "@core/grid/cellGrid";
-import { Direction } from "@core/cells/direction";
 import type { Position } from "@core/coord/positions";
 import type { Size } from "@core/coord/size";
 import { Tile } from "@core/tiles";
@@ -91,28 +90,22 @@ export function renderGrid(
             if (pasteboard && pasteboardPos) {
                 const pasteboardCell = pasteboard.cells.getXY(x - pasteboardPos.x, y - pasteboardPos.y);
                 if (pasteboardCell) {
-                    const cellX = hWidth + (x - cx) * cellSize;
-                    const cellY = hHeight - (y - cy + 1) * cellSize;
-                    const centerX = cellX + halfSize;
-                    const centerY = cellY + halfSize;
-                    ctx.restore();
-                    ctx.save();
-                    if (pasteboardCell.direction != Direction.Right) {
-                        ctx.translate(centerX, centerY);
-                        ctx.rotate(pasteboardCell.direction * halfPi);
-                        ctx.translate(-centerX, -centerY);
-                    }
+                    const cellX = hWidth + (x - cx) * cellSize + halfSize;
+                    const cellY = hHeight - (y - cy + 1) * cellSize + halfSize;
+                    const angle = pasteboardCell.direction * halfPi % R;
+                    ctx.rotate((angle - prevAngle + R) % R);
+                    prevAngle = angle;
+                    const newX = cellX * Math.cos(R - angle) - cellY * Math.sin(R - angle) - halfSize;
+                    const newY = cellX * Math.sin(R - angle) + cellY * Math.cos(R - angle) - halfSize;
                     ctx.globalAlpha = 0.5;
                     ctx.drawImage(
                         tex.cells[pasteboardCell.type.getTex(pasteboardCell)].bitmap(cellSize),
-                        cellX,
-                        cellY,
+                        newX,
+                        newY,
                         cellSize,
                         cellSize,
                     );
-                    ctx.restore();
-                    ctx.save();
-                    prevAngle = 0;
+                    ctx.globalAlpha = 1;
                 }
             }
         }

diff --git a/src/utils/texturePacks.ts b/src/utils/texturePacks.ts
@@ -161,7 +161,7 @@ class Textures {
                     [new Uint8Array(imageContent[0]).buffer],
                     { type: "image/png" }
                 );
-                ui[k] = await Texture.fromBlob(blob);
+                ui[k] = await Texture.fromBlob(blob, false);
             } catch {}
         }