mc-assets 0.1.0 → 0.1.2

package/README.MD

@@ -1,6 +1,6 @@
 # MC Assets
 
-![banner](./assets/mc-assets.png)
+![banner](./docs-assets/mc-assets.png)
 
 ```bash
 npm i mc-assets
@@ -16,8 +16,136 @@ 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. -->
 
-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. Minecraft assets means block states, models info and texture contents, it doesn't cover minecraft data use cases.
+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.
 
 > Bundled modules & block states are version-accurate starting from 1.13.0 (post-flattening) version.
 > Tested on Node.js 18 and above.
+
+
+All blockstates + models + all atlas textures for all versions bundled: 4.5 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.
+
+
+## Usage
+
+Following atlases are generated:
+
+- Items
+- Blocks
+- Particles
+
+```ts
+import { AssetsParser, getLoadedModelsStore, getLoadedBlockstatesStore } from 'mc-assets'
+import blockstatesModels from 'mc-assets/dist/blockStatesModels.json'
+
+const blockstatesStore = getLoadedBlockstatesStore(blockstatesModels)
+const modelsStore = getLoadedModelsStore(blockstatesModels)
+// get block states for specific block
+const stoneModels = blockstatesStore.get('latest', 'stone').variants['']
+// [
+//   { model: 'block/stone' },
+//   { model: 'block/stone_mirrored' },
+//   { model: 'block/stone', y: 180 },
+//   { model: 'block/stone_mirrored', y: 180 }
+// ]
+const model = modelsStore.get('latest', 'block/stone_mirrored')
+// { parent: 'block/cube_mirrored_all', textures: { all: 'block/stone' } }
+
+// note: you can always specify a specific version instead of 'latest'
+const assetsParser = new AssetsParser('latest', blockstatesStore, modelsStore)
+
+const resolvedModel = assetsParser.getResolvedModel({
+    name: 'stone', // block name not model name
+    properties: {},
+}, false) // false (default) means return empty if variant matching properties is not found
+// {
+//   textures: {
+//     all: 'block/stone',
+//     particle: 'block/stone',
+//     down: 'block/stone',
+//     up: 'block/stone',
+//     north: 'block/stone',
+//     east: 'block/stone',
+//     south: 'block/stone',
+//     west: 'block/stone'
+//   },
+//   elements: [
+//     {
+//       from: [ 0, 0, 0 ],
+//       to: [ 16, 16, 16 ],
+//       faces: {
+//         down: { texture: 'block/stone', cullface: 'down' },
+//         up: { texture: 'block/stone', cullface: 'up' },
+//         north: { texture: 'block/stone', cullface: 'north' },
+//         south: { texture: 'block/stone', cullface: 'south' },
+//         west: { texture: 'block/stone', cullface: 'west' },
+//         east: { texture: 'block/stone', cullface: 'east' }
+//       }
+//     }
+//   ]
+// }
+```
+
+### Rendering Atlas Textures
+
+```ts
+import { AssetsParser, AtlasParser } from 'mc-assets'
+import blocksAtlases from 'mc-assets/dist/blocksAtlases.json'
+import blocksAtlasLatest from 'mc-assets/dist/blocksAtlasLatest.png'
+import blocksAtlasLegacy from 'mc-assets/dist/blocksAtlasLegacy.png'
+
+const atlasParser = new AtlasParser(blocksAtlases, blocksAtlasLatest, blocksAtlasLegacy) // blocksAtlasLegacy is optional
+
+const diamondOreTexture = atlasParser.getTextureInfo('diamond_ore', '1.13') // get old diamond ore texture
+const img = await diamondOreTexture.getLoadedImage()
+
+const canvas = document.createElement('canvas')
+const sourceWidthSize = img.width * diamondOreTexture.su // 16
+const sourceHeightSize = img.width * diamondOreTexture.sv // 16
+canvas.width = 128
+canvas.height = 128
+document.body.appendChild(canvas)
+
+const ctx = canvas.getContext('2d')!
+ctx.imageSmoothingEnabled = false
+
+ctx.drawImage(img, diamondOreTexture.u * img.width, diamondOreTexture.v * img.height, sourceWidthSize, sourceHeightSize, 0, 0, canvas.width, canvas.height)
+
+
+
+// create new custom texture atlas (e.g. resource pack overrides)
+const { atlas, canvas, newAtlasParser } = await atlasParser.makeNewAtlas('1.13') // with second argument (callback) you can override textures, with third use different tile size (use it if you have high-res textures)
+const image = canvas.toDataURL() // get image data url if you need it
+const diamondOreTexture = newAtlasParser.getTextureInfo('diamond_ore') // get old diamond ore texture (essentially the same as above)
+```
+
+### Getting Other Textures
+
+Textures without atlases are stored in `dist/other-textures` folder. You can use them like this:
+
+```ts
+import unmute_button from 'mc-assets/dist/other-textures/latest/gui/sprites/social_interactions/unmute_button.png'
+import unmute_button_highlighted from 'mc-assets/dist/other-textures/latest/gui/sprites/social_interactions/unmute_button_highlighted.png'
+
+const Button = styled.button`
+    background-image: url(${unmute_button});
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+`
+
+const ButtonHighlighted = styled(Button)`
+    background-image: url(${unmute_button_highlighted});
+`
+```
+
+Play with the [atlas explorer](https://zardoy.github.io/mc-assets/).

package/dist/{parser.d.ts → assetsParser.d.ts}

@@ -1,5 +1,5 @@
 import { BlockModelsStore, BlockStatesStore } from './stores';
-import { BlockElementPos } from './types';
+import { BlockElementPos, BlockModel } from './types';
 export interface QueriedBlock {
     stateId: number;
     name: string;
@@ -14,9 +14,13 @@ export declare class AssetsParser {
     blockModelsStore: BlockModelsStore;
     stateIdToElements: Record<string, BlockElement[] | 1>;
     constructor(version: string, blockStatesStore: BlockStatesStore, blockModelsStore: BlockModelsStore);
-    getElementsCached(queriedBlock: QueriedBlock): 1 | BlockElement[];
+    getElementsCached(queriedBlock: QueriedBlock): number | BlockElement[];
     private resolvedModel;
-    getElements(queriedBlock: Omit<QueriedBlock, 'stateId'>, fallbackVariant?: boolean): 0 | 1 | BlockElement[];
+    getElements(queriedBlock: Omit<QueriedBlock, 'stateId'>, fallbackVariant?: boolean): number | BlockElement[];
+    getResolvedModelByModelName(model: string, debugQueryName?: string, clearModel?: boolean): {
+        elementsOptimized: number | BlockElement[];
+        resolvedModel: Pick<BlockModel, "x" | "y" | "z" | "textures" | "ao" | "elements">;
+    } | undefined;
     getResolvedModel(queriedBlock: Omit<QueriedBlock, 'stateId'>, fallbackVariant?: boolean): {
         x?: number;
         y?: number;
@@ -28,11 +32,19 @@ export declare class AssetsParser {
         elements?: {
             from: BlockElementPos;
             to: BlockElementPos;
+            rotation?: {
+                origin: [number, number, number];
+                axis: string;
+                angle: number;
+                rescale?: boolean;
+            };
             faces: {
                 [name: string]: {
                     texture: string;
                     uv?: number[];
                     cullface?: string;
+                    rotation?: number;
+                    tintindex?: number;
                 };
             };
         }[];

package/dist/{parser.js → assetsParser.js}

@@ -43,7 +43,6 @@ export class AssetsParser {
                 return properties.OR.some((or) => matchProperties(block, or));
             }
             for (const prop in properties) {
-                // if (properties[prop] === undefined) continue // unknown property, ignore
                 if (typeof properties[prop] !== 'string')
                     properties[prop] = String(properties[prop]);
                 if (!properties[prop].split('|').some((value) => value === String(blockProps[prop]))) {
@@ -58,7 +57,7 @@ export class AssetsParser {
             return 0;
         const states = blockStates.variants;
         if (states) {
-            let state = states[''];
+            let state = states[''] || states['normal'];
             for (const key in states) {
                 if (key === '')
                     continue;
@@ -95,18 +94,20 @@ export class AssetsParser {
         }
         if (!modelApply)
             return 0;
-        // const model = Array.isArray(state) ? state[Math.floor(Math.random() * state.length)] : state
-        // TODO! not always 0
-        const model = (Array.isArray(modelApply) ? modelApply[0] : modelApply).model;
+        // TODO losing x, y, uvlock, and not 0!
+        const model = (Array.isArray(modelApply) ? modelApply[0 /* Math.floor(Math.random() * modelApply.length) */] : modelApply).model;
+        return this.getResolvedModelByModelName(model, queriedBlock.name)?.elementsOptimized ?? 0;
+    }
+    getResolvedModelByModelName(model, debugQueryName, clearModel = true) {
+        if (clearModel) {
+            this.resolvedModel = {};
+        }
         const modelData = this.blockModelsStore.get(this.version, model);
         if (!modelData)
-            return 0;
+            return;
         // let textures = {} as Record<string, string>
         let elements = [];
         const resolveModel = (model) => {
-            if (model.elements) {
-                elements.push(...model.elements.map(({ from, to }) => [from, to]));
-            }
             if (model.ambientocclusion !== undefined) {
                 this.resolvedModel.ao = model.ambientocclusion;
             }
@@ -127,8 +128,9 @@ export class AssetsParser {
                 Object.assign(this.resolvedModel.textures, model.textures);
             }
             if (model.elements) {
+                elements.push(...model.elements.map(({ from, to }) => [from, to]));
                 this.resolvedModel.elements ??= [];
-                this.resolvedModel.elements.push(...model.elements);
+                this.resolvedModel.elements.push(...structuredClone(model.elements));
             }
             if (model.parent) {
                 const parent = this.blockModelsStore.get(this.version, model.parent);
@@ -147,7 +149,7 @@ export class AssetsParser {
                 if (!existingKey) {
                     // todo this also needs to be done at the validation stage
                     // throw new Error(`Cannot resolve texture ${key} to ${value} because it is not defined`)
-                    console.warn(`${queriedBlock.name}: Cannot resolve texture ${originalTexturePath} for ${_originalKey} because it is not defined`);
+                    console.warn(`${debugQueryName}: Cannot resolve texture ${originalTexturePath} for ${_originalKey} because it is not defined`);
                 }
                 else {
                     return existingKey;
@@ -164,7 +166,19 @@ export class AssetsParser {
             else
                 delete this.resolvedModel.textures[key];
         }
-        return elements.length === 1 && arrEq(elements[0][0], [0, 0, 0]) && arrEq(elements[0][1], [16, 16, 16]) ? 1 : elements;
+        for (const elem of this.resolvedModel.elements ?? []) {
+            for (const [faceName, face] of Object.entries(elem.faces ?? {})) {
+                if (!face.texture)
+                    continue;
+                // TODO validate at the validation stage
+                face.texture = this.resolvedModel.textures[face.texture.replace('#', '')] ?? face.texture;
+            }
+        }
+        // todo cleanup methods
+        return {
+            elementsOptimized: elements.length === 1 && arrEq(elements[0][0], [0, 0, 0]) && arrEq(elements[0][1], [16, 16, 16]) ? 1 : elements,
+            resolvedModel: this.resolvedModel,
+        };
     }
     getResolvedModel(queriedBlock, fallbackVariant = false) {
         this.resolvedModel = {};
@@ -178,4 +192,3 @@ export class AssetsParser {
     }
 }
 const arrEq = (a, b) => !!a && !!b && a.length === b.length && a.every((v, i) => v === b[i]);
-// for each element + texture

package/dist/atlasCreator.js

@@ -19,6 +19,10 @@ export const getAtlasSize = (numberOfTiles, tileSize) => {
 export const makeTextureAtlas = ({ input, getLoadedImage, tileSize = 16, getCanvas = () => document.createElement('canvas'), }) => {
     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;

package/dist/atlasParser.d.ts

@@ -2,6 +2,7 @@ import { VersionedStore } from './versionedStore';
 type Texture = {
     u: number;
     v: number;
+    tileIndex: number;
     su?: number;
     sv?: number;
 };
@@ -20,7 +21,7 @@ interface ItemsAtlases {
     legacy?: ItemsAtlasesOutputJson;
 }
 type StoreType = Texture & {
-    imageName: string;
+    imageType: 'latest' | 'legacy';
     version: string;
 };
 type DataUrl = string;
@@ -33,17 +34,21 @@ export declare class AtlasParser {
     atlasHasLegacyImage: boolean;
     constructor(atlasJson: any, latestImage: string, legacyImage?: string | undefined);
     get atlas(): ItemsAtlases;
-    getTextureInfo(version: string, itemName: string): {
+    getTextureInfo(itemName: string, version?: string): {
         su: number;
         sv: number;
+        getLoadedImage: () => Promise<HTMLImageElement>;
         u: number;
         v: number;
-        imageName: string;
+        tileIndex: number;
+        imageType: "latest" | "legacy";
         version: string;
     } | undefined;
     makeNewAtlas(version: string, getCustomImage?: (itemName: string) => DataUrl | HTMLImageElement | boolean | void, tileSize?: number): Promise<{
         canvas: HTMLCanvasElement;
         atlas: import("./atlasCreator").JsonAtlas;
+        readonly newAtlasParser: AtlasParser;
+        readonly image: string;
     }>;
 }
 export {};

package/dist/atlasParser.js

@@ -14,9 +14,9 @@ export class AtlasParser {
         this.atlasStore = new VersionedStore();
         this.atlasStore.inclusive = false;
         const itemsAtlases = atlasJson;
-        const addByVersion = (store, version, textures, imageKey) => {
+        const addByVersion = (store, version, textures, imageName) => {
             for (const [key, path] of Object.entries(textures)) {
-                store.push(version, key, { ...path, version, imageName: imageKey });
+                store.push(version, key, { ...path, version, imageType: imageName });
             }
         };
         addByVersion(this.atlasStore, 'latest', itemsAtlases.latest.textures, 'latest');
@@ -31,15 +31,18 @@ export class AtlasParser {
     get atlas() {
         return this.atlasJson;
     }
-    getTextureInfo(version, itemName) {
+    getTextureInfo(itemName, version = 'latest') {
         const info = this.atlasStore.get(version, itemName);
         if (!info)
             return;
-        const defaultSuSv = (info?.imageName === 'latest' ? this.atlas.latest : this.atlas.legacy).suSv;
+        const defaultSuSv = (info.imageType === 'latest' ? this.atlas.latest : this.atlas.legacy).suSv;
         return {
             ...info,
             su: info?.su ?? defaultSuSv,
             sv: info?.sv ?? defaultSuSv,
+            getLoadedImage: async () => {
+                return await getLoadedImage(info.imageType === 'latest' ? this.latestImage : this.legacyImage);
+            }
         };
     }
     async makeNewAtlas(version, getCustomImage, tileSize = this.atlas.latest.tileSize) {
@@ -62,12 +65,12 @@ export class AtlasParser {
                 };
                 continue;
             }
-            const info = this.getTextureInfo(version, itemName);
+            const info = this.getTextureInfo(itemName, version);
             if (!info)
                 throw new Error(`Missing texture info for ${itemName}`);
             const { u, v, su, sv } = info;
             const atlas = info.version === 'latest' ? itemsAtlases.latest : itemsAtlases.legacy;
-            const image = info.imageName === 'latest' ? latestImg : legacyImg;
+            const image = info.imageType === 'latest' ? latestImg : legacyImg;
             if (!image)
                 throw new Error(`Missing image for ${itemName}`);
             newTextures[itemName] = {
@@ -103,9 +106,19 @@ export class AtlasParser {
             },
             tileSize: this.atlas.latest.tileSize,
         });
+        let _newAtlasParser;
         return {
             canvas,
-            atlas: json
+            atlas: json,
+            get newAtlasParser() {
+                if (!_newAtlasParser) {
+                    _newAtlasParser = new AtlasParser({ latest: json }, canvas.toDataURL());
+                }
+                return _newAtlasParser;
+            },
+            get image() {
+                return canvas.toDataURL();
+            }
         };
     }
 }