🖼️ Image

Introduction

At its core, the image display is a character substitution system. The game renders textures by mapping Unicode characters to image files via its font system. Minecraft itself uses multiple font sets, where the same character can have different visual styles across different fonts. This is the foundation for our custom image designs.

The file tree structure below shows the location of custom font files. You don’t need to create these manually—this demonstration is solely to help you understand how vanilla fonts work.

assets

assets/[namespace]/font/[font_name].json

tip

Rich text component parsers like MiniMessage and Minedown all support the use of custom fonts.

MiniMessage: <font:namespace:font_name>Text</font>
MineDown: [Text](font=namespace:font_name)

info

Q: Will the characters in my country be affected? Can my players illegally use these images through chat, anvils, or other means?

A: Certainly not, unless you use Minecraft's default font(minecraft:default). Please avoid using that font unless you have to.

Single Character Bitmap

images:
  internal:item_browser:
    height: 140
    ascent: 18
    font: minecraft:internal
    file: minecraft:font/gui/custom/item_browser.png
    char: '\ub000'

caution

The height value must always be greater than or equal to the ascent value. This is a strict requirement enforced by Minecraft.

Multiple Characters Bitmap

images:
  default:icons:
    height: 10
    ascent: 9
    font: minecraft:icons
    file: minecraft:font/image/icons.png
    chars:
     - '\ub000\ub001'
     - '\ub002\ub003'

Preview the Image In Game

You can use a very simple command to preview the effect of the image. All you need to do is replace \ub000 with the character corresponding to your image.

/tellraw @p {"text":"\ub000","font":"minecraft:icons"}

Compatibility with Other Plugins

There are two ways to use images in other plugins:

1. Use a plugin that supports both MiniMessage/MineDown and PlaceholderAPI. In this case, you just need to use the corresponding placeholder. Please refer to this page to see how to use placeholders.
2. Use a tag in the format of <image:namespace:id> <image:namespace:id:row:column> <shift:-20> just like what we do in ✏️ Text Format. CraftEngine will replace these tags with characters of the corresponding font at the packet level.

info

You can find the following configuration in config.yml, which controls the scope in which these tags are effective.

image:
  # By intercepting packets, you are allowed to use <image:...> <shift:...> in other plugins
  intercept-packets:
    system-chat: true
    tab-list: true
    actionbar: true
    ... more options