mc-assets 0.1.5 → 0.1.7

package/README.MD

@@ -16,8 +16,8 @@ npm i mc-assets
 - **Version Accurate** - Includes all released versions starting from 1.7.10.
 - **Memory Efficient** - Small installation size, for the fastest download & loading time.
 - **Simple & Complete API** - Works in browsers out of the box and provides parsers for all the data this library provides.
-- **Easy to Use Items Textures** - Includes hand-crafted isometric textures for some blocks (50% done).
-<!-- - **Models Complete** - Includes hand-crafted models for block entities. -->
+- **Easy to Use Items Textures** - Includes hand-crafted isometric textures for some blocks.
+- **Block Entities Models** - Includes community-crafted models for block entities.
 
 This module was originally designed as standalone package for [https://mcraft.fun](mcraft.fun) (repo) project so it is easier to maintain, but now it became a library that I think can cover any use case where you need to work with minecraft assets. This library means block states, models data and texture contents, it doesn't cover minecraft-data use cases.
 
@@ -25,17 +25,182 @@ This module was originally designed as standalone package for [https://mcraft.fu
 > Tested on Node.js 18 and above.
 
 
-All blockstates + models + all atlas textures for all versions bundled (uncompressed): 4.54 MB.
+All blockstates + models + all atlas textures for all versions bundled with rsbuild (uncompressed): 4.73 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.
 
+<details>
+<summary>Included Block Entities (Additional Block Models) (130):</summary>
+
+- ✅ sign
+- ✅ wall_sign
+- ✅ acacia_sign
+- ✅ acacia_wall_sign
+- ✅ birch_sign
+- ✅ birch_wall_sign
+- ✅ dark_oak_sign
+- ✅ dark_oak_wall_sign
+- ✅ jungle_sign
+- ✅ jungle_wall_sign
+- ✅ oak_sign
+- ✅ oak_wall_sign
+- ✅ spruce_sign
+- ✅ spruce_wall_sign
+- ✅ crimson_sign
+- ✅ crimson_wall_sign
+- ✅ warped_sign
+- ✅ warped_wall_sign
+- ✅ mangrove_sign
+- ✅ mangrove_wall_sign
+- ✅ decorated_pot
+- ✅ acacia_hanging_sign
+- ✅ acacia_wall_hanging_sign
+- ✅ bamboo_hanging_sign
+- ✅ bamboo_sign
+- ✅ bamboo_wall_hanging_sign
+- ✅ bamboo_wall_sign
+- ✅ birch_hanging_sign
+- ✅ birch_wall_hanging_sign
+- ✅ cherry_hanging_sign
+- ✅ cherry_sign
+- ✅ cherry_wall_hanging_sign
+- ✅ cherry_wall_sign
+- ✅ crimson_hanging_sign
+- ✅ crimson_wall_hanging_sign
+- ✅ dark_oak_hanging_sign
+- ✅ dark_oak_wall_hanging_sign
+- ✅ jungle_hanging_sign
+- ✅ jungle_wall_hanging_sign
+- ✅ mangrove_hanging_sign
+- ✅ mangrove_wall_hanging_sign
+- ✅ oak_hanging_sign
+- ✅ oak_wall_hanging_sign
+- ✅ spruce_hanging_sign
+- ✅ spruce_wall_hanging_sign
+- ✅ warped_hanging_sign
+- ✅ warped_wall_hanging_sign
+- ✅ black_banner
+- ✅ black_bed
+- ✅ black_shulker_box
+- ✅ black_wall_banner
+- ✅ blue_banner
+- ✅ blue_bed
+- ✅ blue_shulker_box
+- ✅ blue_wall_banner
+- ✅ brown_banner
+- ✅ brown_bed
+- ✅ brown_shulker_box
+- ✅ brown_wall_banner
+- ✅ bubble_column
+- ✅ chest
+- ✅ creeper_head
+- ✅ creeper_wall_head
+- ✅ cyan_banner
+- ✅ cyan_bed
+- ✅ cyan_shulker_box
+- ✅ cyan_wall_banner
+- ✅ dragon_head
+- ✅ dragon_wall_head
+- ✅ ender_chest
+- ✅ gray_banner
+- ✅ gray_bed
+- ✅ gray_shulker_box
+- ✅ gray_wall_banner
+- ✅ green_banner
+- ✅ green_bed
+- ✅ green_shulker_box
+- ✅ green_wall_banner
+- ✅ light_blue_banner
+- ✅ light_blue_bed
+- ✅ light_blue_shulker_box
+- ✅ light_blue_wall_banner
+- ✅ light_gray_banner
+- ✅ light_gray_bed
+- ✅ light_gray_shulker_box
+- ✅ light_gray_wall_banner
+- ✅ lime_banner
+- ✅ lime_bed
+- ✅ lime_shulker_box
+- ✅ lime_wall_banner
+- ✅ magenta_banner
+- ✅ magenta_bed
+- ✅ magenta_shulker_box
+- ✅ magenta_wall_banner
+- ✅ orange_banner
+- ✅ orange_bed
+- ✅ orange_shulker_box
+- ✅ orange_wall_banner
+- ✅ piglin_head
+- ✅ piglin_wall_head
+- ✅ pink_banner
+- ✅ pink_bed
+- ✅ pink_shulker_box
+- ✅ pink_wall_banner
+- ✅ player_head
+- ✅ player_wall_head
+- ✅ purple_banner
+- ✅ purple_bed
+- ✅ purple_shulker_box
+- ✅ purple_wall_banner
+- ✅ red_banner
+- ✅ red_bed
+- ✅ red_shulker_box
+- ✅ red_wall_banner
+- ✅ shulker_box
+- ✅ skeleton_skull
+- ✅ skeleton_wall_skull
+- ✅ trapped_chest
+- ✅ white_banner
+- ✅ white_bed
+- ✅ white_shulker_box
+- ✅ white_wall_banner
+- ✅ wither_skeleton_skull
+- ✅ wither_skeleton_wall_skull
+- ✅ yellow_banner
+- ✅ yellow_bed
+- ✅ yellow_shulker_box
+- ✅ yellow_wall_banner
+- ✅ zombie_head
+- ✅ zombie_wall_head
+- ❌ black_candle
+- ❌ blue_candle
+- ❌ brown_candle
+- ❌ candle
+- ❌ cyan_candle
+- ❌ end_gateway
+- ❌ end_portal
+- ❌ gray_candle
+- ❌ green_candle
+- ❌ light_blue_candle
+- ❌ light_gray_candle
+- ❌ lime_candle
+- ❌ magenta_candle
+- ❌ orange_candle
+- ❌ pink_candle
+- ❌ pink_petals
+- ❌ powder_snow_cauldron
+- ❌ purple_candle
+- ❌ red_candle
+- ❌ repeater
+- ❌ sea_pickle
+- ❌ structure_void
+- ❌ turtle_egg
+- ❌ water_cauldron
+- ❌ white_candle
+- ❌ yellow_candle
+
+</details>
+
+
+
+[Atlas explorer (web demo)](https://zardoy.github.io/mc-assets/).
 
 ## Usage
 
 Following atlases are generated:
 
 - Items
-- Blocks
+- Blocks (block entities included)
 - Particles
 
 ```ts
@@ -148,4 +313,4 @@ const ButtonHighlighted = styled(Button)`
 `
 ```
 
-Play with the [atlas explorer](https://zardoy.github.io/mc-assets/).
+Please, don't use json / image files directly as their format is not stable and can change in the future, use the parsers instead.

package/dist/atlasCreator.d.ts

@@ -34,4 +34,5 @@ export type AtlasCreatorOptions = {
 };
 export declare const makeTextureAtlas: ({ input, getLoadedImage, tileSize, getCanvas, }: AtlasCreatorOptions) => {
     json: JsonAtlas;
+    canvas: HTMLCanvasElement;
 };

package/dist/atlasCreator.js

@@ -16,7 +16,7 @@ export const getAtlasSize = (numberOfTiles, tileSize) => {
         height: size * tileSize
     };
 };
-export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanvas = () => document.createElement('canvas'), }) => {
+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;
@@ -58,11 +58,14 @@ export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanv
         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((inputData.renderWidth ?? img.width) / tileSize) * tileSize;
-            renderHeight = Math.ceil((inputData.renderHeight ?? img.height) / tileSize) * tileSize;
-            su = renderWidth / imgSize;
-            sv = renderHeight / imgSize;
+            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');
             }
@@ -81,8 +84,8 @@ export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanv
             goToNextRow();
         }
         const renderSourceDefaultSize = Math.min(img.width, img.height);
-        const renderSourceWidth = inputData.renderSourceWidth ?? renderSourceDefaultSize;
-        const renderSourceHeight = inputData.renderSourceHeight ?? renderSourceDefaultSize;
+        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);
         }
@@ -98,12 +101,13 @@ export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanv
             ...su == suSv && sv == suSv ? {} : {
                 su,
                 sv,
-                width: renderWidth,
-                height: renderHeight
+                // width: renderWidth,
+                // height: renderHeight
             }
         };
     }
     return {
+        canvas,
         json: {
             suSv,
             tileSize,

package/dist/atlasParser.js

@@ -1,5 +1,6 @@
 import { VersionedStore } from './versionedStore';
 import { makeTextureAtlas } from './atlasCreator';
+import { getLoadedImage } from './utils';
 export class AtlasParser {
     atlasJson;
     latestImage;
@@ -20,7 +21,7 @@ export class AtlasParser {
             }
         };
         addByVersion(this.atlasStore, 'latest', itemsAtlases.latest.textures, 'latest');
-        this.atlasHasLegacyImage = !!itemsAtlases.legacy;
+        this.atlasHasLegacyImage = !!legacyImage;
         if (legacyImage && itemsAtlases.legacy) {
             for (const key of Object.keys(itemsAtlases.legacy.textures)) {
                 const [version, name] = key.split('/');
@@ -81,13 +82,8 @@ export class AtlasParser {
                 img: image
             };
         }
-        let canvas;
-        const { json } = makeTextureAtlas({
+        const { json, canvas } = makeTextureAtlas({
             input: Object.keys(newTextures),
-            getCanvas() {
-                canvas = document.createElement('canvas');
-                return canvas;
-            },
             getLoadedImage: (name) => {
                 const texture = newTextures[name];
                 const image = texture.img;
@@ -96,8 +92,8 @@ export class AtlasParser {
                 delete texture.img;
                 return {
                     image,
-                    // renderWidth: texture.su * imgSize,
-                    // renderHeight: texture.sv * imgSize,
+                    renderWidth: texture.su * imgSize,
+                    renderHeight: texture.sv * imgSize,
                     renderSourceStartX: texture.u * imgSize,
                     renderSourceStartY: texture.v * imgSize,
                     renderSourceWidth: texture.su * imgSize,
@@ -122,12 +118,3 @@ export class AtlasParser {
         };
     }
 }
-const getLoadedImage = async (url) => {
-    const img = new Image();
-    img.src = url;
-    await new Promise((resolve, reject) => {
-        img.onload = resolve;
-        img.onerror = reject;
-    });
-    return img;
-};