Game UI with Nuklear: Part 1

What is immediate mode UI?

Nuklear toolkit

import dagon;
import dagon.ext.nuklear;
import dagon.ext.ftfont;
class UIScene: Scene
{
FontAsset font;
NuklearGUI ui;
Entity uiEntity;

override void beforeLoad()
{
font = this.addFontAsset("assets/fonts/DroidSans.ttf", 18);
}

override void afterLoad()
{
ui = New!NuklearGUI(eventManager, assetManager);
ui.addFont(font, 18, ui.localeGlyphRanges);

uiEntity = addEntityHUD();
uiEntity.drawable = ui;
uiEntity.visible = true;

eventManager.showCursor(true);
}

override void onUpdate(Time time)
{
if (uiEntity.visible)
{
ui.update(time);
layout();
}
}

void layout()
{
//...
}
}
void layout()
{
if (ui.begin("Menu",
NKRect(0, 0, eventManager.windowWidth, 40), 0))
{
ui.menubarBegin();
{
ui.layoutRowStatic(30, 40, 5);

if (ui.menuBeginLabel("File", NK_TEXT_LEFT,
NKVec2(200, 200)))
{
ui.layoutRowDynamic(25, 1);
if (ui.menuItemLabel("New", NK_TEXT_LEFT))
{ /* do something */ }
if (ui.menuItemLabel("Open", NK_TEXT_LEFT))
{ /* do something */ }
if (ui.menuItemLabel("Save", NK_TEXT_LEFT))
{ /* do something */ }
if (ui.menuItemLabel("Exit", NK_TEXT_LEFT))
{ application.exit(); }
ui.menuEnd();
}
}
ui.menubarEnd();
}
ui.end();
}
override void onMouseButtonDown(int button)
{
bool unfocused = true;
if (uiEntity.visible)
{
ui.inputButtonDown(button);
unfocused = !ui.itemIsAnyActive();
}
view.active = unfocused;
}
override void onMouseButtonUp(int button)
{
bool unfocused = true;
if (uiEntity.visible)
{
ui.inputButtonUp(button);
unfocused = !ui.itemIsAnyActive();
}
view.active = unfocused;
}
if (ui.begin("Input", NKRect(100, 100, 230, 200),
NK_WINDOW_BORDER | NK_WINDOW_MOVABLE |
NK_WINDOW_TITLE | NK_WINDOW_SCALABLE))
{
static int len = 4;
static char[256] buffer = "test";
ui.layoutRowDynamic(35, 1);
ui.editString(NK_EDIT_FIELD, buffer.ptr, &len, 255, null);
}
ui.end();
override void onTextInput(dchar codePoint)
{
if (uiEntity.visible)
ui.inputUnicode(codePoint);
}
override void onKeyDown(int key)
{
if (uiEntity.visible)
{
if (key == KEY_BACKSPACE)
ui.inputKeyDown(NK_KEY_BACKSPACE);
else if (key == KEY_DELETE)
ui.inputKeyDown(NK_KEY_DEL);
else if (key == KEY_LEFT)
ui.inputKeyDown(NK_KEY_LEFT);
else if (key == KEY_RIGHT)
ui.inputKeyDown(NK_KEY_RIGHT);
else if (key == KEY_C && eventManager.keyPressed[KEY_LCTRL])
ui.inputKeyDown(NK_KEY_COPY);
else if (key == KEY_V && eventManager.keyPressed[KEY_LCTRL])
ui.inputKeyDown(NK_KEY_PASTE);
else if (key == KEY_A && eventManager.keyPressed[KEY_LCTRL])
ui.inputKeyDown(NK_KEY_TEXT_SELECT_ALL);
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store