All Projects → TABmk → minecraft-blocks-render

TABmk / minecraft-blocks-render

Licence: MIT License
2D sprite to isometric icon

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to minecraft-blocks-render

django-quick-start
Deploy a Django app on Render
Stars: ✭ 17 (-29.17%)
Mutual labels:  render
django-renderpdf
📄 A Django app to render django templates as PDF files.
Stars: ✭ 37 (+54.17%)
Mutual labels:  render
Isometry
📦 Sketch plugin that allows to create isometric projections from layers
Stars: ✭ 18 (-25%)
Mutual labels:  isometric
paper-terminal
Print Markdown to a paper in your terminal
Stars: ✭ 33 (+37.5%)
Mutual labels:  render
render react
Pre-render and mount React components from Ruby
Stars: ✭ 14 (-41.67%)
Mutual labels:  render
react-smart-key
Pass anything as key without re-renders
Stars: ✭ 17 (-29.17%)
Mutual labels:  render
react-translations-provider
React render props component for setting translations
Stars: ✭ 35 (+45.83%)
Mutual labels:  render
BBearEditor-2.0
My own 3D engine & editor in order to learn graphics algorithms and game engine architecture.
Stars: ✭ 32 (+33.33%)
Mutual labels:  render
DuBLF DuBlast
Quick Playblast tool for Blender
Stars: ✭ 18 (-25%)
Mutual labels:  render
l2cu
L²CU: LDraw Linux Command line Utility
Stars: ✭ 14 (-41.67%)
Mutual labels:  render
The-Great-Escape
Classic ZX Spectrum game "The Great Escape" reverse engineered
Stars: ✭ 69 (+187.5%)
Mutual labels:  isometric
dry
Dry is a new template engine and language, and is a superset of Shopify's Liquid, with first-class support for advanced inheritance features, and more. From the creators of Enquirer, Assemble, Remarkable, and Micromatch.
Stars: ✭ 66 (+175%)
Mutual labels:  render
phoenix example
An example Phoenix app with one-click deployments to different cloud services.
Stars: ✭ 62 (+158.33%)
Mutual labels:  render
isovoxel
Isometric voxel generative art
Stars: ✭ 60 (+150%)
Mutual labels:  isometric
react-hydration-on-demand
Hydrate your React components only when you need to
Stars: ✭ 94 (+291.67%)
Mutual labels:  render
three-render-objects
Easy way to render ThreeJS objects with built-in interaction defaults
Stars: ✭ 33 (+37.5%)
Mutual labels:  render
RayTracing
Realtime GPU Path tracer based on OpenCL and OpenGL
Stars: ✭ 120 (+400%)
Mutual labels:  render
echo-template
golang template for echo framework!
Stars: ✭ 39 (+62.5%)
Mutual labels:  render
PinFloyd
MapKit annotations clustering for iOS
Stars: ✭ 29 (+20.83%)
Mutual labels:  render
engine
An easy-to-use, cross-platform, graphics render library written entirely in rust
Stars: ✭ 26 (+8.33%)
Mutual labels:  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!

⚠️ V2 is on way

With more features and TypeScript. Check here

[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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].