How to add text box in slick2d?

Question

I wanted to let the player rename the character of my game. So I thought that making a text box and when he clicks the ok button, the text inside the text box will make it to a string and render it on the screen. How do I let the user type their own text?

Answer 1

You have reached the point where you need to use a GUI (for graphical user interface) in your game. Sometimes, in games, you will only need buttons or similar simple components. In this case, i would recommend doing it yourself, a button is something really simple to do.

Considering a button is a clickable image, using Slick2D, a button could be something like that:

class Button {

    //attributes...        

    public Button(int x, int y, int width, int height, Image image, ActionHandler actionHandler) {
        buttonShape = new Rectangle(x, y, width, height)
    }

    //where x and y define the location of the mouse cursor
    public boolean checkClick(int x, int y) {
        return buttonShape.includes(x, y);
    }

    public render(Graphics g, ...) {
        g.drawImage(image, x, y);
        //other stuffs
    }
}

ActionHandler interface a way to pass user code to the button that would be executed when the button is clicked (see below):

public interface ActionHandler {

    public void onAction();
}

And then add a kind of listeners system that would listen for mouse events (look at the Slick2D API to learn about catching mouse events) and proceed the registered buttons to see if one of them was clicked.

Then a button could be defined like that:

Button b = new Button(x, y, width, height, new ActionHandler() {
    public void onAction() {
        System.out.println("CLICKED");
    });
GUIManager.registerButton(b);

And in your GUI logic:

public void checkForButtonInteractions(int mousex, int mousey) {
    for (Button b : GUIManager.getRegisteredButtons()) {
        if (b.checkClick(mousex, mousey)) {
            b.getActionHandler().onAction();
        }
    }
}

---

The above shows that you can easily implement simple GUI components without any external tools, a button or a check box for example. However, if you think you will need more complex components like textfields, combo box, panels, draggable windows etc. i highly recommend using an already existing GUI system and use it in your game.

As far as i know, with Slick2D, you have to major choices:

• NiftyGUI
• TWL

Both are made in Java using LWJGL and Slick2D implementations are available. For example, NiftyGUI provide a custom implementation of the BasicGame, StateBasedGame, BasicGameState that would natively handle low level Nifty stuffs such as initializing etc.

The choice of TWL or NiftyGUI is a subjective question, a lot of people on the Slick2D forums will recommend using TWL since it seems like the Slick2D support is a bit more mature than with Nifty. I personally use Nifty.

---

In conclusion, you will have set your requirements and then choose between doing it yourself or using an existing GUI system.

If you decide to create your own GUI system, Slick2D seems to provide some tools to help the process:

• GUIContext
• TextField
• MouseOverArea (seems to be useful for buttons)
• MouseListener

Answer 2

I haven't use slick2d but I know it's an engine based on lwjgl. It also seems to have a rudimentary GUI system. Searching through the API, I found the TextField class, which belongs to the gui package. You should search for tutorials about using the gui system in slick2d, though. I don't have enough experience to help you further.