Cell Image Textures

Cell images for grids are made up of 3 main parts:

  • Background image – this is the main texture that will be seen for image cells.
  • Overlay – a second texture is overlayed on top, often this is ignored, but it is used for bottles in brewing stands and the lapis slot in an enchantment table.
  • Slot highlight – This is another object that will be displayed on top of the cell when hovering over it.

In this tutorial I will be working with the chest inventories located in the chest_screen.json, I will replace the shulker box item grid with a separate texture.


Changing Background Image

This is fairly easy to change for inventories.
Firstly you will need to define your new texture, if it’s a separate image.

“new_cell@common.cell_image”: {
“texture”: “textures/ui/new_cell”
}

The parent of new cell is “common.cell_image”, this is the default cell image defined in the “ui_common.json” under the “common” namespace.

Doing this means we don’t need to define the “type” or the “layer” of the cell, as they are already defined in the default.
The layer is the ‘depth’ that the texture will be displayed in-game, lower layers are displayed at the back, with higher layers being displayed ‘above’ the image, such as items, and the hover text of items, etc.

There is other changes you can make from within an image object for textures.
You can change the color or even the alpha of the texture.

“color”: [1, 0, 1]

“alpha”: 0.7

“color” accepts an rgb array with three numbers ranging between 0 and 1. This will multiply the color over the texure that is supplied, so you can use the same texture several times in a GUI but change the color, without having to supply a new texture for the same design.
The “alpha” of the texture is simply how transparent the texture is, rather than saving transparency into the image itself, you can change it within the json.

The new defined cell image needs to be referenced from the default panel “common.container_item”

“new_grid@common.container_item”: {
“$background_images”: “new_cell”
}

“common.container_item” is a special type of panel, defined within the “common” namespace. It controls a lot of objects, including item cells, as well as handling rendering items inside inventories.


Changing Slot Overlay

The overlay is applied onto the cell from the “$cell_overlay_ref” value, which will require a defined image to be supplied.

“new_grid@common.container_item”: {
“$cell_overlay_ref”: “new_cell_overlay”
}

“new_cell_overlay” will be a defined image from elsewhere within the file.


Applying new cell image and overlay

With your new cell background and cell overlay in a new object, in this case “new_grid”, this must be referenced by the inventory you want to use the new images.

In this example I will change my new_grid to:

“new_grid@chest_grid_item”: {
“$background_images”: “new_cell”,
“$cell_overlay_ref”: “new_cell_overlay”
}

“chest_grid_item” is a default value within the chest namespaceand ahas a few values that are needed in this situation, instead of redefining them I’m just going to inherit them via a parent.

Where this is needed is a bit complicated and will require some detective skills.

You will need to locate the screen content item, an item which controls what will be shown on screen, these will be located near the bottom of the file.

In my case it is “shulker_box_screen”.
In this object are a list of variables, one of them being “$screen_content” this is what will be shown on screen, this lead me to “chest.shulker_box_panel”.
Where “shulker_box_panel” is simply a child of “small_chest_panel”.

This object may look very intimidating if you’ve found it, but you need to look for a panel with ‘top_half’ in it’s name, if you’re changing things for ‘Windows 10 Edition’.
I have found “small_chest_panel_top_half”, which is a lot easier to work with, and we can add our new grid to a child object of this and work backwards from our detective work.

We will create a child object of “small_chest_panel_top_half” and copy the “controls” value over and change the “…@small_chest_grid” to “…@new_grid”.

“new_panel_top_half@small_chest_panel_top_half”: {
“controls”: [
{ “chest_label@chest_label”: {} },
{“small_chest_grid@new_grid”: { … }}
]
}

You should have something that looks like this.

Next you’ll need to copy the entire “small_chest_panel” object and replace the “…@small_chest_panel_top_half” with “…@new_panel_top_half”, we can rename “new_panel_top_half” straight to “shulker_box_panel”.
Now the shulker box will use the different cell images texture and overlay.

Download example pack – Changes shulker box cell images


Changing Slot Highlight

Changing the slot highlight is slightly more tedious than changing cell images.

You will need the “new_grid” object that is already defined, we will be changing the “$button_ref” value for it.
The default “$button_ref” for inventory items is “common.container_slot_button_prototype”, we will need to change the “$highlight_control” value in this default object, to change the slot highlight image.

The default “$highlight_control” is “common.highlight_slot_panel”, you will need to copy this entire object and change what you want within. You shouldn’t redefine it as it controls specific things such as hover text for items.

The main object within the “highlight_slot_panel” is “highlight”, this is child of an image object that will be the texture that applies on top, you can also add in several images as well which is used in the default with “white_border”. This can be removed if you only want to add in one texture.

“new_highlight”: {
controls: [
{ “highlight@new_highlight_texture”: { … } }
]
}

Now with this new highlight defined, you need to set the “$highlight_control” of another object to be this newly defined highlight.

“new_highlight_button@common.container_slot_button_prototype”: {
“$highlight_control”: “new_highlight”
}

This “new_highlight_button” will then need to be referenced as the “$button_ref” within the “new_grid” object.

“new_grid@chest_grid_item”: {
“$button_ref”: “new_highlight_button”,

}

This “new_grid” would be referenced the same way as was done to change the cell image textures, via the “…panel_top_half”.


< See all bedrock json GUI tutorials