npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

minecraft-blocks-render

v1.1.1

Published

Renders 3D-like icon from 2D sprite

Downloads

34

Readme

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 🤗

  • [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 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

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;

Height

shadows

Shadow

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