Now that we just learned how to use Display entities we are going to use this knowledge to create a cool custom gui.

Custom GUI

Class Set Up

We will start by creating the class with 4 methods create(location), createBackGround(location), createTitle(location, title) and addButton(location). We will use these methods the create the basic gui.

public class CustomGUIExample {

    public static void create(Location loaction) {

    }

    private void createBackGround(Location location) {

    }

    private void createTitle(Location location, String title) {

    }

    private void addButton(location: Location) {

    }

}

Background Logic

The first thing we will create is the logic for the background. For the background we will use an BlockDisplay and change the scale:

private void createBackGround(Location location) {
    BlockDisplay blockDisplay = new BlockDisplay(location);
    blockDisplay.setBlock(Material.WHITE_CONCRETE);
    blockDisplay.setScale(0.01, 3.0, 2.0);
}

Title Logic

Next we will create the title of the gui. We will be using TextDisplay for this.

First we create it, next we set the text as the title. After we have done this we will change the background color to 0 to make it translucent.

private void createTitle(Location location, String title) {
    TextDisplay textDisplay = new TextDisplay(location);
    textDisplay.setText(title);
    textDisplay.setBackgroundColor(0);
}

Now we need to change the translation to set it to the correct offset so it on the top of the gui. Lastly we need to rotate the display by 90 degrees, we can do this by setting the LeftRotation to 0.7, 0.0, 0.7, 0.0:

Tip

I was able to find these rotation values by using this cool site

private void createTitle(Location location, String title) {
    TextDisplay textDisplay = new TextDisplay(location);
    textDisplay.setText(title);
    textDisplay.setBackgroundColor(0);

    textDisplay.setTranslation(0.02, 2.7, 1.0)
    textDisplay.setLeftRotation(0.7, 0.0, 0.7, 0.0)
}

Now that we have both the background and title done this is how it looks:

Custom GUI Progress

Add Button Logic

Next step is adding the button logic. First step to this is creating the visual of the button.

Visual Logic

The button visual contains out of two entities, a BlockDisplay and TextDisplay. We will start by creating the BlockDisplay We will create it and then set the scale:

BlockDisplay blockDisplay = new BlockDisplay(location);
blockDisplay.setBlock(Material.RED_CONCRETE);
blockDisplay.setScale(0.01, 0.5, 1.5);

Next we will set the translation of it to the center:

BlockDisplay blockDisplay = new BlockDisplay(location);
blockDisplay.setBlock(Material.RED_CONCRETE);
blockDisplay.setScale(0.01, 0.5, 1.5);
blockDisplay.setTranslation(0.02, 0.0, 0.25);

Now that the BlockDisplay is done we can create the TextDisplay. We will start by creating it and setting the text and background color again:

TextDisplay textDisplay = new TextDisplay(location);
textDisplay.setText("Click ME :D");
textDisplay.setBackgroundColor(0);

Lastly we rotate it 90 degrees and change the translation to position it correctly in the center of the button:

TextDisplay textDisplay = new TextDisplay(location);
textDisplay.setText("Click ME :D");
textDisplay.setBackgroundColor(0);
textDisplay.setLeftRotation(0.7, 0.0, 0.7, 0.0);
textDisplay.setTranslation(0.03, 0.1, 1.0);

Now that all the visual of the button is done lets put them together into the method:

private void addButton(location: Location) {

    // Visual box
    BlockDisplay blockDisplay = new BlockDisplay(location);
    blockDisplay.setBlock(Material.RED_CONCRETE);
    blockDisplay.setScale(0.01, 0.5, 1.5);
    blockDisplay.setTranslation(0.02, 0.0, 0.25);

    // Visual Text
    TextDisplay textDisplay = new TextDisplay(location);
    textDisplay.setText("Click ME :D");
    textDisplay.setBackgroundColor(0);
    textDisplay.setLeftRotation(0.7, 0.0, 0.7, 0.0);
    textDisplay.setTranslation(0.03, 0.1, 1.0);

}

Interaction

Now that the visual is done we will work of the interaction of the button. We will start by creating the Interaction entity and positioning it correctly:

Location interactionSpawn = location.add(-0.7, 0.0, 1.0);
Interaction interaction = new Interaction(interactionSpawn);

Next we set the Height and Width to match the button dimensions:

Location interactionSpawn = location.add(-0.7, 0.0, 1.0);
Interaction interaction = new Interaction(interactionSpawn);
interaction.setWidth(1.5f);
interaction.setHeight(0.5f);

Lastly we add the interaction logic. For this example we will change the text of the button to Click : (ClickType) but you can change this interaction to anything you want it to do:

Location interactionSpawn = location.add(-0.7, 0.0, 1.0);
Interaction interaction = new Interaction(interactionSpawn);
interaction.setWidth(1.5f);
interaction.setHeight(0.5f);

interaction.onClick(interaction -> {
    textDisplay.setText("Click : " + interaction.getClickType().getName());
});

Now that the interaction is fully done lets add it on top of the visual code:

private void addButton(location: Location) {

    // Visual box
    BlockDisplay blockDisplay = new BlockDisplay(location);
    blockDisplay.setBlock(Material.RED_CONCRETE);
    blockDisplay.setScale(0.01, 0.5, 1.5);
    blockDisplay.setTranslation(0.02, 0.0, 0.25);

    // Visual Text
    TextDisplay textDisplay = new TextDisplay(location);
    textDisplay.setText("Click ME :D");
    textDisplay.setBackgroundColor(0);
    textDisplay.setLeftRotation(0.7, 0.0, 0.7, 0.0);
    textDisplay.setTranslation(0.03, 0.1, 1.0);

    // Interaction
    Location interactionSpawn = location.add(-0.7, 0.0, 1.0);
    Interaction interaction = new Interaction(interactionSpawn);
    interaction.setWidth(1.5f);
    interaction.setHeight(0.5f);

    // Listening to interaction
    interaction.onClick(interaction -> {
        textDisplay.setText("Click : " + interaction.getClickType().getName());
    });
}

Putting everything together

Now that all the sub methods are created we can create the create method. We will first create the background after the title lastly we add all the three buttons:

public static void create(Location location) {
    createBackGround(location)
    createTitle(location, "Custom GUI")
    addButton(location.clone().add(0.0, 0.25, 0.0));
    addButton(location.clone().add(0.0, 1.0, 0.0));
    addButton(location.clone().add(0.0, 1.75, 0.0));
}

Now that everything is done we will put it together into the final class:

public class CustomGUIExample {

    public static void create(Location location) {
        createBackGround(location);
        createTitle(location, "Custom GUI");
        addButton(location.clone().add(0.0, 0.25, 0.0));
        addButton(location.clone().add(0.0, 1.0, 0.0));
        addButton(location.clone().add(0.0, 1.75, 0.0));
    }

    private void addButton(Location location) {
        // Visual box
        BlockDisplay blockDisplay = new BlockDisplay(location);
        blockDisplay.setBlock(Material.RED_CONCRETE);
        blockDisplay.setScale(0.01, 0.5, 1.5);
        blockDisplay.setTranslation(0.02, 0.0, 0.25);

        // Visual Text
        TextDisplay textDisplay = new TextDisplay(location);
        textDisplay.setText("Click ME :D");
        textDisplay.setBackgroundColor(0);
        textDisplay.setLeftRotation(0.7, 0.0, 0.7, 0.0);
        textDisplay.setTranslation(0.03, 0.1, 1.0);

        //Interaction
        Location interactionSpawn = location.add(-0.7, 0.0, 1.0);
        Interaction interaction = new Interaction(interactionSpawn);
        interaction.setWidth(1.5f);
        interaction.setHeight(0.5f);

        // Listening to interaction
        interaction.onClick(interaction -> {
            textDisplay.setText("Click : " + interaction.getClickType().getName());
        });
    }

    private void createTitle(Location location, String title) {
        TextDisplay textDisplay = new TextDisplay(location);
        textDisplay.setText(title);
        textDisplay.setBackgroundColor(0);
        textDisplay.setTranslation(0.02, 2.7, 1.0);
        textDisplay.setLeftRotation(0.7, 0.0, 0.7, 0.0);
    }

    private void createBackGround(Location location) {
        BlockDisplay blockDisplay = new BlockDisplay(location);
        blockDisplay.setBlock(Material.WHITE_CONCRETE);
        blockDisplay.setScale(0.01, 3.0, 2.0);
    }

}

Now you have completed creating a basic custom gui :D

Custom GUI

Custom GUI

Class Set Up

Background Logic

Title Logic

Add Button Logic

Visual Logic

Interaction

Putting everything together

On this page