minecraft-blocks-render
v1.1.1
Published
Renders 3D-like icon from 2D sprite
Downloads
34
Readme
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 🤗
- [x] create npm package
- [x]
renderSides
option for render command (allow render even*_top
/*_bottom
/etc blocks) - [x]
renderTransparent
option for render command (allow render block with transparent textures) - [x]
noShadow
option for render command - [x]
name
option for render command (allow render only one block by name) - [x]
items
to base64 converter - [ ] cleaning up
items
from extra icons likeclock_09
orbow_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