minecraft-blocks-render

Help

Rate

Minecraft sprites to isometric cube render.

With only few steps you can render your own actual minecraft blocks icons.

⚠️ WIP ⚠️

Some features not yet implemented, but you can help by contributing!

[Important] HOW TO USE 🍳🐕

Install

npm i -g minecraft-blocks-render

or

yarn global add minecraft-blocks-render

Usage

To render blocks, you need to get sprites. So we can just grab it from any .jar file, that you can find on /minecraft/versions/YOUR_VERSION/x.xx.x.jar after installing it from launcher.

https://help.minecraft.net/hc/en-us/articles/360035131551-Where-are-Minecraft-files-stored-

OS	path
OSX	~/Library/Application\ Support/minecraft/versions
Windows	%AppData%/.minecraft/versions
Linux	~/.minecraft/versions

mbr grab

options

option	description	required
-f, --file	Load a file	✅
-d, --debug	Shows debug info of extraction	❌

Example: mbr grab -f 1.16.2.jar -d

Make any folder and put .jar file on it.

And run command mbr grab on it

cd my-folder
mbr grab

grab will copy folders block and item from /assets/minecraft/textures in .jar file to local folder called grab

mbr render

options

option	description	required	default	type
-r, --reducer	Image bit depth reducer. Bigger number will do more color reduce.	❌	1	Number
-s, --scale	scale image without reducing quality. Warning! May cause edges bugs	❌	1	Number
-t, --type	base will generate JSON file where key - block name, value - base64 string. png will render png images for each block	✅		String
--name	render specified item. Items and all options support	❌		String
--rs, --renderSides	Add if want render blocks with side textures	❌		-
--rt, --renderTransparent	Add if want render blocks with transparent textures	❌		-
--ns, --noShadow	disable shadows on sides	❌		-
-d, --debug	Shows debug info of extraction	❌		-

Example: mbr render -t base -r 32 -s 10 -d

Example 2: mbr render -t base --name acacia_boat -s 2

After grabbing sprites you can render your blocks with command mbr render

If you use type png all output images will be saved to grab/rendered

Type base will save your renders to JSON file grab/rendered.json. Where key — bukkit name, value — base64 string. Items (fron grab/items) are will be also converted to base64.

rendered.json example

{
  "name": "ACACIA_LOG",
  "icon": "data:image/png;base64,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",
  ...

You can test base64 images here https://base64.guru/converter/decode/image

TODO

We have few ideas for project improvement. You can help by sending PR 🤗

• create npm package
• renderSides option for render command (allow render even *_top/*_bottom/etc blocks)
• renderTransparent option for render command (allow render block with transparent textures)
• noShadow option for render command
• name option for render command (allow render only one block by name)
• items to base64 converter
• cleaning up items from extra icons like clock_09 or bow_pulling_1
• add more info to json like in-game item ID and old style ID
• add tests
• rewrite code to classes (?)
• API (?)
• some blocks (like glass pane) using 2D sprite for preview. Need list of items which must be saved as sprite
• render blocks with transparent parts

Some researches

Without looking at the minecraft code, we created almost the same looking 3D preview of block as the inventory one.

Width

As we know, width of cube in isometric projection is 1/sqrt(3) by ISO 5456-3. But as we can read here, games often use 1/2 (0.5). Minecraft is no exception, so we used 1/2 width formula and +20% height of front sprites to make it similar with game;

shadows

We see 2 different shadows on the sides of the block.. By doing some math @Kurikaeshiru found regularity in RGB shifts. So we just shift each value of RGB with formula

color /= 1.25 * multiplier

Multiplier is used for the second shadow, which is darker