GuiEngine ✨ Craft unlimited GUIs effortlessly ✨ [1.18-1.20.4] + API icon

GuiEngine ✨ Craft unlimited GUIs effortlessly ✨ [1.18-1.20.4] + API -----

A powerful GUI Framework, allowing Server Owners and Developers to Craft Interactive Custom GUIs



[​IMG]


[​IMG]
[​IMG]
[​IMG]
[​IMG]
[​IMG]
[​IMG]

[​IMG]
[​IMG]
[​IMG]

Visit the wiki: https://github.com/ToberoCat/GuiEngine/wiki

Introduction


Welcome to the beginner's guide for server owners and developers! This guide aims to introduce you to the basic concepts of the plugin. However, it's important to note that the plugin and its accompanying wiki may not be perfect. We are continuously working to improve them. If you come across any suggestions, bugs, issues, or feedback of any size, feel free to create an issue here and share your thoughts. Additionally, you can even fix it locally and submit a pull request to contribute to the project's development. Your input is highly valued as we strive to make this plugin better together. Let's dive in and get started with the guide!

Getting started

At first, you'll have to download the GuiEngine here.
All download sites:
- [GuiEngine - Spigot]( https://www.spigotmc.org/resources/guiengine.109983/)
- [GuiEngine Release]( https://github.com/ToberoCat/GuiEngine/releases/)

Once the plugins are installed on your server, start it.
Once the server started, you'll be able to navigate to
Code (Text):
plugins/GuiEngine/guis
. This folder contains all guis you created without a plugin requiring them. I'll now refer to it as gui folder.

Commands

Now, before we'll dive into creating our first gui, you should make yourself familiar with the commands the plugin provided.
The most important one will be
Code (Text):
/guiengine reload
. This will reload all guis, no matter which plugin is requiring them.
The second command you'll need is
Code (Text):
/guiengine open <plugin> <gui>
. This command allows you to open any gui, no matter which plugin or nesting (We'll come later to that). When using this command, I highly recommend using the tablist (The black box above the chatbar when typing). It suggests all possible options.
When no plugins are installed using GuiEngine, the command list should show as the first argument default. So a example usage for this command would be
Code (Text):
/guiengine open default my-gui
Code (Text):
/guiengine give <item> <plugin> <gui> <player>
This command gives a player a item they can click, opening a gui. The item can be created in the config.yml.

Picking the right gui folder

Now that you know the commands, let's start creating a gui. First thing you'll have to know is what gui you want to create. Is it from a specific plugin? If yes, you should navigate to the gui folder of the plugin and edit a file! IMPORTANT: Don't create new files in a non-default gui folder except the plugin needs it!. If you want to create a gui from scratch, you should use the gui folder for GuiEngine.

Gui folder structure

Once you've found yourself in the right folder, depending on your case, the folder might not be empty.

The gui folder is able to contain folders and gui files. You can create folders in folders and so on to group your guis, while the gui files represent the actual gui.
Note that when you have a gui placed in a subfolder of the gui folder, it will no longer just have the name of the file, it will now be
Code (Text):
subfoldername/filename
. If you have even one more layer of folders, there will be another subfolder in the name.

Create a gui

In the GuiEngine gui folder create a file named
Code (Text):
my-gui.gui
. Make sure when creating the file that the extension is correct. When on Windows, the extensions might be hidden. You should show them to make sure they're correct.

Once the file has been created, open it in a text file editor of your choice. I recommend using an editor that detects and supports XML files, as this will make your live easier writing them. A free editor you can use is Visual Studio Code from Microsoft. I'll be using Intellij from Jetbrains for my XML file editing.

Once you've opened the file, you'll have to create the base layout of the gui, starting with the root tag. The root tag in this is will be
Code (Text):
<gui></gui>
.
Now that the root tag exists, you can define some generic gui values, like the title, height, and width.
Note: Height is counted in Minecraft gui rows, meaning the maximum is 6 and minimum is 1. The width in Minecraft is limited to 9 slots per row. This property gets

more meaning when creating more complex guis.

Now you can choose a different interpreter (The thing that translates this file into an actual Minecraft gui). You can leave it for now, but now that you know when you need it, the attribute goes like
Code (Text):
interpreter="default"
for the default interpreter.

Now the gui file should look like this (Color can be different depending on your text editor):
[​IMG]
Note that I've used a color code in the title to make it more colorful (
Code (Text):
§b
is the color code). Minecraft color codes can be used with
Code (Text):
§
instead of [&].

Adding components to the gui

Now to make the gui functional, you have to add components. Components are just a way to describe certain things in a gui.
For simplicity, we'll add a simple item, which when clicked prints a text to the player.

To add a component, create a component tag, with the attribute type set to item. Now depending on the component type chosen, you now have to add additional attributes. The item needs at least a material property, saying which item you wanted. Additionally, you can provide a name, x, and y.
Note: If you need help with the materials, you can press F3 + H to show advanced item stats. When you now hover over an item, you can see the item id.

You can now use this item id, by stripping the
Code (Text):
minecraft:
and make the rest upper case. You can then use this in as the material. This approach works fine for most items, but some don't work like this. If you have such a case, navigate to this website, https://hub.spigotmc.org/javadocs/bukkit/org/bukkit/Material.html.

Here is how my gui looks now:
[​IMG]

Testing your gui is as important as creating it. To do so, type
Code (Text):
/guiengine reload
to reload the guis.
Once it reloaded, type
Code (Text):
/guiengine open default my-gui
. This should now open a gui looking like this:
[​IMG]

Now, let's add a second item. Just copy the previous component and paste it below. You can now change values to your likings, save and test in between until you're happy with the layout of your items.

My gui file now looks like this (Ignore the light bulb):
[​IMG]

Running the commands from above again and the gui looks like this:
[​IMG]

Adding item descriptions

Now, usually items in guis have special descriptions below when hovering above them. This can also be done using GuiEngine.
In between the component tag you can write
Code (Text):
<lore>Text</lore>
with your text to add into the item description.

Now having added some lores, my gui now looks like this:
[​IMG]

And in the game:
[​IMG]

Adding click events

Now that you've created static items, we now want something to happen when you click them.
This can be done using the same approach as we used for lores.
Add an on-click tag. This time, the tag also has some attributes. The attribute is type. Types define what should happen when clicked. We'll use the type action and edit. Actions are a way interact with things outside of the gui. Edit is a type of interaction within the gui, specifically edit something.

My first item having the action on-clicks:
[​IMG]

You can have multiple on clicks happening.
In this case. The actions will do following:
- The first will send a message to the player
- The second one executes any command, in this case /summon zombie
- The last one closes the gui

Now to the edit item:
[​IMG]

There's lot of stuff to cover here. First, I've given the component an id, so the gui can find it again. The id can be any name, as long as it does only contain alphabet, numbers, dashes, and underscores.

Now the on-click. The type edit requires three attributes, target, attribute, and set-value. The target should reference a component by id. The attribute should be which attribute you want to edit of this target component, and the set-value tells the edit function which value the attribute will have.

Opening the gui in Minecraft and clicking both items should be working as intended
[​IMG]

The final code for the gui we just created:
[​IMG]
```yaml
<gui width="9" height="4" title="§bMy first gui">
<component type="item" x="5" y="2" material="REDSTONE_BLOCK" name="§cSuspicious red button">
<lore>§7A button</lore>
<lore>§7You shouldn't click me</lore>
<on-click type="action">[message] §cYou shouldn't have clicked me...</on-click>
<on-click type="action">[player] summon zombie</on-click>
<on-click type="action">[

close]</on-click>
</component>
<component type="item" id="green-button" x="3" y="2" material="GREEN_TERRACOTTA" name="§aGreen button">
<lore>§7Click me</lore>
<lore>§7I promise §ait's worth§7 it</lore>
<on-click type="edit" target="green-button" attribute="name" set-value="§eYou clicked me :)"/>
<on-click type="edit" target="green-button" attribute="material" set-value="YELLOW_TERRACOTTA"/>
</component>
</gui>
```

Creating a clickable item

Now the last topic I want to cover in this guide is the creation of a clickable item. This feature allows you to design an item users can click, allowing them to open your gui without having to type the command.

First, you have to find the config file, where you can design your item. It is located in
Code (Text):
plugins/GuiEngine/config.yml
. Now open it. Once you opened it, you should search for a section called items.
[​IMG]

Once you found it, you can see the example item that has already been created. When you want to create a new item, just copy the example item and rename the root element. Then you can start customizing it to your liking. Change the name of it, the material, the lore, etc. You can use the same trick to get the material as above.

[​IMG]

I now designed a new item. It's a golden apple. Now let's bring it into the game.

You can now use the following command to receive your clickable item, that opens
Code (Text):
my-gui
(That's the gui we just created).
Code (Text):
/guiengine give my_gui_item default my-gui
. When you run this command as a player, you will receive the item bound to the gui 'my-gui' provided by the default api. When you create your own items and guis, the command's tab complete will help you, so you don't have to remember everything.

You can also run this command in the console or from a command block. For this, you can add a player name at the end, like this:
Code (Text):
/guiengine give my_gui_item default my-gui Notch0815
Conclusion

You've successfully created your first GUI using GuiEngine! You've learned how to add components, item descriptions, and
click events to make your GUI interactive. Explore further possibilities with GuiEngine by referring to the
documentation, which covers pre-made components, functions, and more.

Enjoy creating custom GUIs for your Minecraft server! If you encounter any issues or need further assistance, don't
hesitate to seek help from the community or the plugin's support channels. Happy crafting!
Resource Information
Author:
----------
Total Downloads: 2,844
First Release: May 21, 2023
Last Update: Apr 1, 2024
Category: ---------------
All-Time Rating:
2 ratings
Find more info at github.com...
Version -----
Released: --------------------
Downloads: ------
Version Rating:
----------------------
-- ratings