Layout Editor - keksuccino/spiffy-hud GitHub Wiki

About

The Layout Editor is a fully functional GUI editor, modded into Minecraft, allowing you to edit the Ingame HUD like you would edit an image in the image editor of your choice.

It imitates its big editor siblings in many ways like shortcuts and menu design.

1

Where to find the Editor

You can find the Layout Editor in the Customization Helper menu bar.

Using the Editor

Using the Layout Editor is just as simple as using Paint!

When you open the editor, you will see an editor window that should contain (mostly) all vanilla HUD elements.

The Menu Bar

One of the most important menus in the editor is the menu bar at the top.

2

Layout

The Layout tab contains everything related to the current layout. You can edit its properties, like setting special requirements for the layout to load, and save it. It can also be used to quickly switch between layouts without going back to the parent menu.

layout

Edit

The Edit tab contains basic actions to manage your layout, like copy/paste elements or undo/redo actions!

edit

Element

The Element tab contains everything related to what your layout contains - the layout elements. You can add new elements to your layout here and manage deleted vanilla HUD elements.

element

Layout Properties

You can find the layout properties by clicking on Layout -> Properties in the menu bar or by rightclicking the blank editor background.

This will open a context menu with settings to set special requirements for the layout to load and some HUD-related things like disabling the HUD vignette.

background_rightclick

Element Properties

Every element in your layout has its own properties. You can access these properties by rightclicking the element. Not all types of elements have the same properties.

element_properties

Understanding Element Orientations

Every element in your layout has an orientation. By default, this is always the top-left orientation for all elements you've added to a layout and different orientations (depending on the element) for vanilla elements that were already part of the HUD.

You can change the orientation of an element by right-clicking it and clicking on Set Orientation.

set_orientation

Your element will then be moved to the origin point of your choosen orientation, which shows you from where the element's position will be calculated. It depends on its orientation how an element will act when resizing the window. You can easily test this by resizing the editor window.

If your element should always be near the bottom-right area of the menu, you should choose the bottom-right orientation for it. If it should be centered in the middle of the screen, try the mid-centered orientation.

The best way to understand the real behavior of orientations is by trying out different orientations for elements and resize the window.

Handling Stacked Elements

Sometimes, multiple elements will be on the same position, making it impossible to reach the one at the bottom.

Every element in the editor has its own "height level", let's call it "layer". You will not really recognize this until you need it.

By rightclicking an element stack and clicking on the Choose Layer button, you will be able to choose between every element at the position of your mouse.

layers

Shortcuts

The Layout Editor has some very useful and well known shortcuts to quickly navigate through it.

CTRL + Z

This shortcut will undo the last thing you've changed in the layout.

CTRL + Y

This shortcut will redo the last step if you've previously used the CTRL + ALT + Z shortcut.

CTRL + S

This one will save your layout.

CTRL + C

Pressing this shortcut will copy the selected elements.

CTRL + V

This shortcut will paste copied elements to the layout. This can also be used to copy elements to a new layout.

DEL

When an object is focused, you can press DEL to quickly delete the object.

Arrow Keys

You can move focused objects by using the arrow keys.

SHIFT-Click

When pressing SHIFT while resizing an object, it will be resized by its aspect ratio.

CTRL-Click on Elements

Pressing CTRL while clicking on elements will allow you to select multiple elements at once (group select), to move them all together by using the arrow keys or changing their properties by rightclicking them.