Skip to content

Advanced User Guide

Jump to bottom
Tobero edited this page Sep 17, 2023 · 12 revisions

Advanced User Guide for Building a Server Hub GUI with an Admin Page

In this advanced user guide, we'll be creating a server hub GUI with an admin page. The hub menu will allow players to teleport to different minigames and view stats, while the admin page will make managing players easier.

Setup

  1. Start by creating a folder to store your hub-related GUIs. Inside this folder, create your main GUI named main.gui.

image

Writing the Main GUI

In this section, we'll create the layout for the main GUI. It will consist of a header and a page for each minigame category.

Creating the Layout

  1. Create a new file in the hub folder called navigation-bar.gui and add the following content:
<gui title="Navigation Bar" width="9" height="1" implicit-update="false">
</gui>

Here, we set the implicit-update attribute to false to prevent unnecessary updates.

  1. Next, let's add some items to the navigation bar. We want to display the player's head with information about themselves:
<gui title="Navigation Bar" width="9" height="1" implicit-update="false">
    <component type="item" x="0" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="1" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="2" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="3" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="4" name="§e{%player_name%}'s Profile">
        <head-owner>%viewer%</head-owner>
        <lore/>
        <lore>§7Language: §e{%player_locale_display_name%}</lore>
        <lore>§7Ping: §a{%player_ping%}</lore>
        <lore>§7IP: §e{%player_ip%}</lore>
    </component>
    <component type="item" x="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="6" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="7" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" material="BLACK_STAINED_GLASS_PANE"/>
</gui>

image

Let's break down the components:

  • We have 9 item components, with most of them being black stained glass panes for layout purposes.
  • The central item displays the player's profile information using PlaceholderAPI placeholders.
  • We also use %viewer%, a placeholder provided by GuiEngine, to set the head owner.

Compute Functions and Implicit Update

  • Compute functions, such as {%player_ping%}, allow for dynamic content and interactions. You can use placeholders from plugins like PlaceholderAPI.
  • The implicit-update attribute controls whether the GUI automatically refreshes all component attributes. Setting it to false is more efficient when components won't update while being viewed.

Creating the Main Menu

  1. Create the main.gui file for the main menu:
<gui title="Hub" width="9" height="6" implicit-update="false">
</gui>

Again, we set implicit-update to false.

  1. Embed the navigation bar GUI into the main menu:
<gui title="Hub" width="9" height="6" implicit-update="false">
    <component type="embedded" target-gui="hub/navigation-bar" width="9" height="1"/>
</gui>

image

Explanation:

  • We use an embedded component to integrate the navigation bar GUI into the main menu.
  • target-gui specifies the location of the GUI we want to embed. In this case, it's hub/navigation-bar.
  • The width and height attributes define the size of the embedded GUI.

Creating the Minigame Category Selector

  1. Add a paged component to create a selector for minigame categories:
<gui title="Hub" width="9" height="6" implicit-update="false">
    <component type="embedded" target-gui="hub/navigation-bar" width="9" height="1"/>

    <component type="paged" x="1" y="1" width="7" height="4"></component>

    <!-- Frame around paged -->
    <component type="item" x="0" y="1" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="2" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="3" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="4" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="5" material="BLACK_STAINED_GLASS_PANE"/>

    <component type="item" x="8" y="1" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="2" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="3" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="4" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="5" material="BLACK_STAINED_GLASS_PANE"/>

    <component type="item" x="1" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="2" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="3" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="4" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="5" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="6" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="7" y="5" material="BLACK_STAINED_GLASS_PANE"/>
</gui>

image

Explanation:

  • We've added a paged component to create a selector for minigame categories. It's currently empty, so there's no content to display.
  1. Create pages for the minigame categories and add items:
<gui title="Hub" width="9" height="6" implicit-update="false">
    <component type="embedded" target-gui="hub/navigation-bar" width="9" height="1"/>

    <component type="item" x="0" y="0" name="§cBack" material="ARROW" priority="LOW">
        <on-click type="action">[container:previous]</on-click>
    </component>
    <component type="item" x="8" y="0" name="§eNext" material="ARROW" priority="LOW">
        <on-click type="action">[container:next]</on-click>
    </component>

    <component type="paged" id="container" x="1" y="1" width="7" height="4">
        <page position="0">
            <component type="item" x="1" y="1" name="§eBedwars 1vs1" material="RED_BED"/>
            <component type="item" x="3" y="1" name="§eBedwars 2vs2" material="WHITE_BED"/>
            <component type="item" x="5" y="1" name="§eBedwars 4vs4" material="BLUE_BED"/>

            <component type="item" x="3" y="3" name="§eRandom" material="ENDER_PEARL"/>
        </page>
        <page position="1">
            <component type="item" x="1" y="1" name="§eSkywars 1vs1" material="RED_WOOL"/>
            <component type="item" x="3" y="1" name="§eSkywars 2vs2" material="WHITE_WOOL"/>
            <component type="item" x="5" y="1" name="§eSkywars 4vs4" material="BLUE_WOOL"/>

            <component type="item" x="3" y="3" name="§eRandom" material="ENDER_PEARL"/>
        </page>
        <page position="2">
            <component type="item" x="1" y="1" name="§eBuilder Battle 1vs1" material="RED_CONCRETE"/>
            <component type="item" x="3" y="1" name="§eBuilder Battle 2vs2" material="WHITE_CONCRETE"/>
            <component type="item" x="5" y="1" name="§eBuilder Battle 4vs4" material="BLUE_CONCRETE"/>

            <component type="item" x="3" y="3" name="§eRandom" material="ENDER_PEARL"/>
        </page>
    </component>

    <!-- Frame around paged -->
    <component type="item" x="0" y="1" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="2" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="3" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="4" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="0" y="5" material="BLACK_STAINED_GLASS_PANE"/>

    <component type="item" x="8" y="1" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="2" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="3" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="4" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="8" y="5" material="BLACK_STAINED_GLASS_PANE"/>

    <component type="item" x="1" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="2" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="3" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="4" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="5" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="6" y="5" material="BLACK_STAINED_GLASS_PANE"/>
    <component type="item" x="7" y="5" material="BLACK_STAINED_GLASS_PANE"/>
</gui>

image

Explanation:

  • We've added previous and next buttons to navigate between pages.
  • The id attribute is set to "container" for the paged component, which allows us to reference it in the actions.
  • Three pages have been created, each containing items for different minigame categories.
  • On-click actions have been added to the previous and next buttons to switch between pages.

This completes the setup of the server hub GUI with a minigame category selector. You can further customize it and add functionality as needed for your server.

Thank you for choosing GuiEngine for your GUI development needs. Explore the Developer Docs and User Beginner Guide to unleash the full potential of this powerful framework and create stunning GUIs that leave a lasting impression on your players!

Clone this wiki locally