mc-assets 0.2.35 → 0.2.36

package/README.MD

@@ -28,7 +28,7 @@ For contributing & building instructions see [building](#building) section.
 > Tested on Node.js 18 and above.
 
 
-All blockstates + models + all atlas textures for all versions bundled with rsbuild (uncompressed): 5.02 MB.
+All blockstates + models + all atlas textures for all versions bundled with rsbuild (uncompressed): 5.15 MB.
 
 This packages includes versions for: 1.7.10, 1.8, 1.8.1, 1.8.2, 1.8.3, 1.8.4, 1.8.5, 1.8.6, 1.8.7, 1.8.8, 1.8.9, 1.9, 1.9.1, 1.9.2, 1.9.3, 1.9.4, 1.10, 1.10.1, 1.10.2, 1.11, 1.11.1, 1.11.2, 1.12, 1.12.1, 1.12.2, 1.13, 1.13.1, 1.13.2, 1.14, 1.14.1, 1.14.2, 1.14.3, 1.14.4, 1.15, 1.15.1, 1.15.2, 1.16, 1.16.1, 1.16.2, 1.16.3, 1.16.4, 1.16.5, 1.17, 1.17.1, 1.18, 1.18.1, 1.18.2, 1.19, 1.19.1, 1.19.2, 1.19.3, 1.19.4, 1.20, 1.20.1, 1.20.2, 1.20.3, 1.20.4, 1.20.5, 1.20.6, 1.21, 1.21.1, 1.21.2, 1.21.3, 1.21.4.
 

package/dist/atlasCreator.d.ts

@@ -1,3 +1,4 @@
+export declare const MAX_CANVAS_SIZE = 16384;
 export declare const getAtlasSize: (numberOfTiles: number, tileSize: number) => {
     width: number;
     height: number;

package/dist/atlasCreator.js

@@ -1,3 +1,5 @@
+import { createAtlas } from 'apl-image-packer';
+export const MAX_CANVAS_SIZE = 16_384;
 function nextPowerOfTwo(n) {
     if (n === 0)
         return 1;
@@ -17,30 +19,8 @@ export const getAtlasSize = (numberOfTiles, tileSize) => {
     };
 };
 export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanvas = (imgSize) => typeof document !== 'undefined' && document.createElement ? document.createElement('canvas') : new globalThis.Canvas(imgSize, imgSize, 'png'), }) => {
-    const tilesCount = input.length;
-    const imgSize = getAtlasSize(tilesCount, tileSize).width;
-    const MAX_CANVAS_SIZE = 16_384;
-    if (imgSize > MAX_CANVAS_SIZE) {
-        throw new Error(`Image resolution ${imgSize} is too big, max is ${MAX_CANVAS_SIZE}x${MAX_CANVAS_SIZE}`);
-    }
-    const canvas = getCanvas(imgSize);
-    canvas.width = imgSize;
-    canvas.height = imgSize;
-    const g = canvas.getContext('2d');
-    g.imageSmoothingEnabled = false;
-    const texturesIndex = {};
-    let nextX = 0;
-    let nextY = 0;
-    let rowMaxY = 0;
-    const goToNextRow = () => {
-        nextX = 0;
-        nextY += Math.ceil(rowMaxY / tileSize) * tileSize;
-        rowMaxY = 0;
-    };
-    const suSv = tileSize / imgSize;
-    const tilesPerRow = Math.ceil(imgSize / tileSize);
-    for (const i in input) {
-        const keyValue = input[i];
+    // Pre-calculate all texture dimensions and prepare images
+    const texturesWithDimensions = input.map(keyValue => {
         const inputData = getLoadedImage(keyValue);
         let img;
         if (inputData.image) {
@@ -53,57 +33,76 @@ export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanv
         else {
             throw new Error('No image or contents');
         }
-        let su = suSv;
-        let sv = suSv;
         let renderWidth = tileSize * (inputData.tileWidthMult ?? 1);
         let renderHeight = tileSize;
         if (inputData.useOriginalSize || inputData.renderWidth || inputData.renderHeight) {
             const texWidth = inputData.renderWidth ?? img.width;
             const texHeight = inputData.renderHeight ?? img.height;
-            // todo check have enough space
             renderWidth = Math.ceil(texWidth / tileSize) * tileSize;
             renderHeight = Math.ceil(texHeight / tileSize) * tileSize;
-            su = texWidth / imgSize;
-            sv = texHeight / imgSize;
-            // renderWidth and renderHeight take full tile size so everything is aligned to the grid
-            if (renderHeight > imgSize || renderWidth > imgSize) {
-                throw new Error('Texture ' + keyValue + ' is too big');
-            }
-        }
-        if (nextX + renderWidth > imgSize) {
-            goToNextRow();
         }
-        const x = nextX;
-        const y = nextY;
-        const yIndex = y / tileSize;
-        const xIndex = x / tileSize;
+        return {
+            keyValue,
+            img,
+            inputData,
+            renderWidth,
+            renderHeight,
+            renderSourceWidth: inputData.useOriginalSize ? img.width : inputData.renderSourceWidth ?? Math.min(img.width, img.height),
+            renderSourceHeight: inputData.useOriginalSize ? img.height : inputData.renderSourceHeight ?? Math.min(img.width, img.height),
+            renderSourceStartX: inputData.renderSourceStartX ?? 0,
+            renderSourceStartY: inputData.renderSourceStartY ?? 0,
+        };
+    });
+    // Use apl-image-packer to calculate optimal positions
+    const atlas = createAtlas(texturesWithDimensions.map(tex => ({
+        width: tex.renderWidth,
+        height: tex.renderHeight,
+        data: tex // Store all texture data for later use
+    })));
+    // Round up atlas size to power of 2
+    const imgSize = Math.max(nextPowerOfTwo(atlas.width), nextPowerOfTwo(atlas.height));
+    if (imgSize > MAX_CANVAS_SIZE) {
+        const sizeGroups = texturesWithDimensions.reduce((acc, t) => {
+            const key = `${t.renderWidth}x${t.renderHeight}`;
+            acc[key] = (acc[key] || 0) + 1;
+            return acc;
+        }, {});
+        const sizeGroupsStr = Object.entries(sizeGroups)
+            .sort(([, a], [, b]) => b - a)
+            .map(([size, count]) => `${size}(${count})`)
+            .join(', ');
+        throw new Error(`Required atlas size ${imgSize} exceeds maximum ${MAX_CANVAS_SIZE}. Texture sizes: ${sizeGroupsStr}`);
+    }
+    const canvas = getCanvas(imgSize);
+    canvas.width = imgSize;
+    canvas.height = imgSize;
+    const g = canvas.getContext('2d');
+    g.imageSmoothingEnabled = false;
+    const texturesIndex = {};
+    const suSv = tileSize / imgSize;
+    const tilesPerRow = Math.ceil(imgSize / tileSize);
+    // Draw textures at their calculated positions
+    for (const coord of atlas.coords) {
+        const tex = coord.img.data;
+        const x = coord.x;
+        const y = coord.y;
+        const yIndex = Math.floor(y / tileSize);
+        const xIndex = Math.floor(x / tileSize);
         const tileIndex = yIndex * tilesPerRow + xIndex;
-        nextX += renderWidth;
-        rowMaxY = Math.max(rowMaxY, renderHeight);
-        if (nextX >= imgSize) {
-            goToNextRow();
-        }
-        const renderSourceDefaultSize = Math.min(img.width, img.height);
-        const renderSourceWidth = inputData.useOriginalSize ? img.width : inputData.renderSourceWidth ?? renderSourceDefaultSize;
-        const renderSourceHeight = inputData.useOriginalSize ? img.height : inputData.renderSourceHeight ?? renderSourceDefaultSize;
         try {
-            g.drawImage(img, inputData.renderSourceStartX ?? 0, inputData.renderSourceStartY ?? 0, renderSourceWidth, renderSourceHeight, x, y, renderWidth, renderHeight);
+            g.drawImage(tex.img, tex.renderSourceStartX, tex.renderSourceStartY, tex.renderSourceWidth, tex.renderSourceHeight, x, y, tex.renderWidth, tex.renderHeight);
         }
         catch (err) {
-            throw new Error(`Error drawing ${keyValue}: ${err}`);
+            throw new Error(`Error drawing ${tex.keyValue}: ${err}`);
         }
-        // remove the extension eg .png
-        const cleanName = keyValue.split('.').slice(0, -1).join('.') || keyValue;
+        const cleanName = tex.keyValue.split('.').slice(0, -1).join('.') || tex.keyValue;
+        const su = tex.renderWidth / imgSize;
+        const sv = tex.renderHeight / imgSize;
         texturesIndex[cleanName] = {
             u: x / imgSize,
             v: y / imgSize,
             tileIndex,
-            ...su == suSv && sv == suSv ? {} : {
-                su,
-                sv,
-                // width: renderWidth,
-                // height: renderHeight
-            }
+            ...su == suSv && sv == suSv ? {} : { su, sv }
         };
     }
     return {

package/dist/atlasParser.d.ts

@@ -49,5 +49,6 @@ export declare class AtlasParser {
         readonly newAtlasParser: AtlasParser;
         readonly image: string;
     }>;
+    createDebugImage(writeNames?: boolean): Promise<string>;
 }
 export {};

package/dist/atlasParser.js

@@ -1,5 +1,5 @@
 import { VersionedStore } from './versionedStore';
-import { makeTextureAtlas } from './atlasCreator';
+import { makeTextureAtlas, MAX_CANVAS_SIZE } from './atlasCreator';
 import { getLoadedImage } from './utils';
 export class AtlasParser {
     atlasJson;
@@ -122,4 +122,110 @@ export class AtlasParser {
             }
         };
     }
+    async createDebugImage(writeNames = false) {
+        const atlas = this.atlas.latest;
+        if (atlas.width !== atlas.height) {
+            throw new Error('Atlas must be square');
+        }
+        const wantedSize = Math.min(MAX_CANVAS_SIZE, atlas.width * (writeNames ? 6 : 1));
+        const scale = wantedSize / atlas.width;
+        const height = atlas.height * scale;
+        const width = atlas.width * scale;
+        const canvas = globalThis.Canvas ? new globalThis.Canvas(width, height) : document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        // Disable image smoothing for pixelated rendering
+        ctx.imageSmoothingEnabled = false;
+        // For older browsers
+        //@ts-ignore
+        ctx.webkitImageSmoothingEnabled = false;
+        //@ts-ignore
+        ctx.mozImageSmoothingEnabled = false;
+        //@ts-ignore
+        ctx.msImageSmoothingEnabled = false;
+        // Draw the base atlas image
+        const img = await getLoadedImage(this.latestImage);
+        ctx.drawImage(img, 0, 0, atlas.width, atlas.height, 0, 0, width, height);
+        // Draw debug rectangles for each texture
+        ctx.strokeStyle = '#ff0000';
+        ctx.lineWidth = 2;
+        const textureNames = Object.keys(atlas.textures);
+        const totalTextures = textureNames.length;
+        let lastProgress = 0;
+        textureNames.forEach((textureName, i) => {
+            const texture = atlas.textures[textureName];
+            // Log progress every 10%
+            const progress = Math.floor((i / totalTextures) * 100);
+            if (progress >= lastProgress + 10) {
+                console.log(`Processing textures: ${progress}% (${i}/${totalTextures})`);
+                lastProgress = progress;
+            }
+            const x = texture.u * atlas.width * scale;
+            const y = texture.v * atlas.height * scale;
+            const width = (texture.su || atlas.suSv) * atlas.width * scale;
+            const height = (texture.sv || atlas.suSv) * atlas.height * scale;
+            // Create striped pattern
+            const pattern = ctx.createPattern((() => {
+                const patternCanvas = globalThis.Canvas ? new globalThis.Canvas(10, 10) : document.createElement('canvas');
+                patternCanvas.width = 10;
+                patternCanvas.height = 10;
+                const patternCtx = patternCanvas.getContext('2d');
+                patternCtx.fillStyle = '#ff0000';
+                patternCtx.fillRect(0, 0, 5, 10);
+                patternCtx.fillStyle = '#ffff00';
+                patternCtx.fillRect(5, 0, 5, 10);
+                return patternCanvas;
+            })(), 'repeat');
+            ctx.strokeStyle = pattern;
+            ctx.strokeRect(x, y, width, height);
+            if (writeNames) {
+                // Configure text style
+                const text = textureName;
+                const padding = 4;
+                const maxWidth = width - padding * 2;
+                // Start with a relatively large font size and decrease until text fits
+                let fontSize = 12;
+                do {
+                    ctx.font = `${fontSize}px monospace`;
+                    const metrics = ctx.measureText(text);
+                    if (metrics.width <= maxWidth || fontSize <= 6) {
+                        break;
+                    }
+                    fontSize -= 1;
+                } while (fontSize > 6);
+                ctx.fillStyle = 'white';
+                ctx.strokeStyle = 'black';
+                ctx.lineWidth = Math.max(1, fontSize / 6); // Scale outline with font size
+                ctx.textBaseline = 'top';
+                // Draw text with outline for better visibility
+                const textX = x + padding;
+                const textY = y + padding;
+                // Split text into lines if it's still too wide
+                const words = text.split(/(?=[A-Z_/])/g);
+                let line = '';
+                let lines = [];
+                for (const word of words) {
+                    const testLine = line + word;
+                    const metrics = ctx.measureText(testLine);
+                    if (metrics.width > maxWidth && line !== '') {
+                        lines.push(line);
+                        line = word;
+                    }
+                    else {
+                        line = testLine;
+                    }
+                }
+                lines.push(line);
+                // Draw each line
+                const lineHeight = fontSize * 1.2;
+                lines.forEach((line, i) => {
+                    ctx.strokeText(line, textX, textY + i * lineHeight);
+                    ctx.fillText(line, textX, textY + i * lineHeight);
+                });
+            }
+        });
+        console.log(`Processing textures: 100% (${totalTextures}/${totalTextures})`);
+        return canvas.toDataURL();
+    }
 }