---
description: Customize the fuel burning icon in the machine gui.
---

# Fuel element

Fuel element is used to render a fuel bar on the Machine GUI.

Fuel elements are defined in json with : `"type": "custommachinery:fuel"`.

You can add as many fuel element as you want to the machine GUI but they will all show the same burn time and be filled the same.

By default the texture is the same as the vanilla furnace little flame but you can change it if wanted.

### Properties

The fuel element has 3 mandatory properties and 8 optional properties :&#x20;

#### Mandatory properties

```json5
"type": "custommachinery:fuel" //Mandatory to define a fuel element.
```

<details>

<summary>X</summary>

#### Name : `x`

#### Description :&#x20;

A positive integer value that define the x axis position of the element to be displayed on the Machine GUI.

#### Example :&#x20;

The element will be rendered 100px to the right from the top-left corner of the gui.

```json5
"x": 100
```

</details>

<details>

<summary>Y</summary>

#### Name : `y`

#### Description :&#x20;

A positive integer value that define the y axis position of the element to be displayed on the Machine GUI.

#### Example :&#x20;

The element will be rendered 100px to the bottom from the top-left corner of the gui.

```json5
"y": 100
```

</details>

#### Optional properties

<details>

<summary>Width</summary>

#### Name : `width`

#### Description :&#x20;

A positive integer value that define the width of the element on the Machine GUI.

#### Default :&#x20;

The same width as the texture specified in the `texture` property.

#### Example :&#x20;

The width of the element will be 100px.

```json5
"width": 100
```

</details>

<details>

<summary>Height</summary>

#### Name : `height`

#### Description :&#x20;

A positive integer value that define the height of the element on the Machine GUI.

#### Default :&#x20;

The same height as the texture specified in the `texture` property.

#### Example :&#x20;

The height of the element will be 100px.

```json5
"height": 100
```

</details>

<details>

<summary>Priority</summary>

#### Name : `priority`

#### Description :&#x20;

An integer property that define the priority of the Element to be rendered.&#x20;

Elements with higher priority will be rendered first. If 2 elements are at the same position the first to be rendered will be under and the last will be above.

#### Default : 0

#### Example :&#x20;

The element will be rendered under each element that have a priority lower than 1000.

```json5
"priority": 1000
```

</details>

<details>

<summary>Empty texture</summary>

#### Name : `texture_empty`

#### Description :&#x20;

Point to a texture to use as the empty element texture. The texture must be loaded in-game with a resource pack or a loader mod.

The texture can be any size, if the texture size is different from the default size the `width` and `height` properties of the element will be automatically changed to fit the texture size if not provided.&#x20;

If the `width` and/or `height` properties of the element are provided, the texture will be stretched to fit the dimensions of the element (it can render weirdly in that case).

#### Default :&#x20;

```json
"texture_empty": "custommachinery:textures/gui/base_fuel_empty"
```

#### Example :&#x20;

```json5
"texture_empty": "namespace:textures/fuel_element_texture_empty.png"
```

The element will search for a texture located in `assets/namespace/textures/fuel_element_texture_empty.png`

**The .png extension is mandatory**.

</details>

<details>

<summary>Filled texture</summary>

#### Name : `texture_filled`

#### Description :&#x20;

Point to a texture to use as the filled element texture. The texture must be loaded in-game with a resource pack or a loader mod.

The texture can be any size, if the texture size is different from the default size the `width` and `height` properties of the element will be automatically changed to fit the texture size if not provided.&#x20;

If the `width` and/or `height` properties of the element are provided, the texture will be stretched to fit the dimensions of the element (it can render weirdly in that case).

#### Default :&#x20;

```json
"texture_filled": "custommachinery:textures/gui/base_fuel_filled"
```

#### Example :&#x20;

```json5
"texture_filled": "namespace:textures/fuel_element_texture_filled.png"
```

The element will search for a texture located in `assets/namespace/textures/fuel_element_texture_filled.png`

**The .png extension is mandatory**.

</details>

<details>

<summary>Tooltips</summary>

#### Name : `tooltips`

#### Description :&#x20;

A list of [Text components](../../misc/text-component) that will be shown as tooltips when the player mouse cursor hover the element.

Each tooltips of the list will be a new line.

#### Example :&#x20;

Replace the default tooltips with a single line that say "Click me !" :&#x20;

```json
"tooltips": "Click me !"
```

</details>

<details>

<summary>Orientation</summary>

#### Name : `orientation`

#### Description :&#x20;

The direction the bar will be filled to.

Valid values are : `top`, `right`, `bottom` and `left`.

#### Default : `top`

#### Example :&#x20;

The bar will fill towards the right for the machine gui.

```json
"orientation": "right"
```

</details>

<details>

<summary>Id</summary>

#### Name : `id`

#### Description :&#x20;

The id of this gui element. By default it does nothing and can be omitted.

This is really only useful if you intend to make a recipe that replace this element.

#### Default : `empty`

#### Example :&#x20;

The id of this element will be `fuel`

```json5
"id": "fuel"
```

</details>

### Example

A basic fuel element :

```json5
{
    "type": "custommachinery:fuel",
    "x": 20,
    "y": 20
}
```

Result :

On the image below the Machine was given 1 coal which have a burn time of 1600 ticks and the screenshot was taken at 913 ticks of burn time remaining so the fuel bar was filled at about 55%

![Fuel element base texture](https://github.com/Frinn38/Custom-Machinery/raw/1.16.5/wiki/fuel_element.png)
