User Interface

All UI functions are client-side only. See the UI API reference for the full method list.

Creating Elements

Add custom HTML elements using GAME.UI.addDIV():

# create a div element
str myDiv = GAME.UI.addDIV(
    "myDiv",                              # str element ID
    true,                                 # bool visible by default
    "position:absolute;top:10px;left:10px;color:white;font-size:20px", # str CSS
    "game"                                # str parent ID (optional)
);

# parent ID determines where the element is placed:
# "game" - visible during gameplay
# "menu" - visible in menus
# or any other existing element ID

Add an image element from an asset:

str img = GAME.UI.addImage(
    "asset_id",    # str asset ID
    "myImage",     # str element ID
    true,          # bool visible
    "width:64px;height:64px", # str CSS
    "game"         # str parent ID
);

Remove elements when no longer needed:

GAME.UI.removeDIV("myDiv");

Styling Elements

Update any CSS property on an element at runtime:

# set properties individually
GAME.UI.updateDIV("myDiv", "width", "200px");
GAME.UI.updateDIV("myDiv", "background-color", "rgba(0,0,0,0.5)");
GAME.UI.updateDIV("myDiv", "border", "2px solid white");
GAME.UI.updateDIV("myDiv", "font-size", "24px");
GAME.UI.updateDIV("myDiv", "text-align", "center");

# read a CSS property
str width = GAME.UI.getProp("myDiv", "width");

Common CSS properties you can set: width, height, left, right, top, bottom, background-color, color, font-size, border, opacity, display, visible.

Updating Content

Change the text displayed in an element:

GAME.UI.updateDIVText("myDiv", "Score: 100");

# read current text content
str text = GAME.UI.getDIVText("myDiv");

Click Events

Handle clicks on custom UI elements using the built-in hook:

public action onDIVClicked(str id) {
    if (id == "startButton") {
        # player clicked the start button
        GAME.NETWORK.send("startGame", {});
    };
    if (id == "settingsButton") {
        # open settings panel
        GAME.UI.updateDIV("settingsPanel", "display", "block");
    };
}

For click events to work, the element must be clickable (not blocked by other elements and the mouse must be unlocked). Use GAME.INPUTS.unlockMouse() or GAME.INPUTS.freeMouse() to allow mouse interaction with UI elements.

Hiding Default UI

Krunker shows default HUD elements (health, ammo, crosshair, etc.). Hide them for custom games:

GAME.UI.hideDefault();     # hide most default UI
GAME.UI.hideCrosshair();   # hide just the crosshair

Moving Elements

Move an element to a different parent, optionally renaming it:

str result = GAME.UI.moveDIV(
    "myDiv",     # str current element ID
    "newParent", # str new parent ID
    "renamedDiv" # str new ID (optional)
);

Viewport Size

Get the current window dimensions for responsive layouts:

obj size = GAME.UI.getSize();
# size.width - viewport width
# size.height - viewport height

Mobile UI

Krunker provides built-in mobile control elements that you can style with CSS in a resource pack:

#mobileJoystick {}   /* on-screen joystick */
#mobileJump {}       /* jump button */
#mobileCrouch {}     /* crouch button */
#mobileEsc {}        /* escape/menu button */

To show or hide elements only on mobile, use CSS media queries in your resource pack:

/* hide an element on mobile */
#uiBase .isMobile .myDesktopOnly {
    display: none;
}

/* or use screen size detection */
@media only screen and (max-width: 600px) {
    #myDiv {
        font-size: 14px;
    }
}

Example: Score Display

A complete example showing a custom score display:

# create score display on game start
str scoreDiv = GAME.UI.addDIV(
    "scoreDisplay",
    true,
    "position:absolute;top:10px;right:10px;color:white;font-size:24px;font-family:monospace;background:rgba(0,0,0,0.5);padding:8px 16px;border-radius:4px",
    "game"
);
GAME.UI.updateDIVText("scoreDisplay", "Score: 0");

# update score when it changes
action updateScore(num score) {
    GAME.UI.updateDIVText("scoreDisplay", "Score: " + toStr score);
}