Everyday as a software engineer I get to work with a few delightful UX and Visual designers.

I tell them how much I appreciate them, how wonderful it is to build things that look nice. We spend hours discussing features, UX, implementation, and somehow these miracle workers turn my MS Paint sketches into true works of art.

Unfortunately, on Skymagi, I am responsible for turning my MS paint sketches into art.

Behold, the UI sketch:

On the left of this scrawl:

• Castle Status: Showcases castle health and abjuration wards protecting the castle.
• Unit Frames: Mage names, spellcasting progress, mana, and health.
• Summons: Additional units that are not as important
• Sigil Mana: Allocation system for mana distributed between systems

On the bottom:

• Unit Profile: A portrait of the unit, more clear status, inventory, and spells active.

And the rest:

• Top action buttons: Mass Teleport, Castle Upgrades, Gold.
• Your castle & the enemy castle.

All right, this is… serviceable. My main goal is to get enough of a UI that the gameplay is easier to understand.

UI Rendering

Typically in a game, you don’t want the same RenderSystem for both entities and the UI. UIs should be able to scale independently of the game, especially for users who have different resolutions. If you’re playing on 4k, the UI shouldn’t be so small that it cannot be seen. You also don’t want the camera to pan around a UI, it should track and have its own viewport. And you want it to always be layered on top of the game canvas.

I wrote a UiRenderSystem that has an independent viewport. I thought about using LibGDX’s Skin system, but decided to keep things simple and just draw spritesheets to the screen for now.

Rather than creating entities for UI elements, I just wrote render code for each particular object based on other entities in the game engine (such querying all Mages to make portraits).

If I decide in the future I want to use LibGDX’s skin / UI library, I can always update my render system to create a tree.

// UiRenderSystem
public void render(float dt) {
    // in *game units*, render healthbars / manabars
    renderHealthManaBars();
    // apply the UI viewport to work in pixels rather than meters
    uiCamera.viewport.apply();
    // draw unit frames
    renderUnitFrames();
    // show FPS in debug mode :)
    if (showFPS)
        renderFps();
    // reset gl viewport back to the unit camera
    unitCamera.viewport.apply();
}

Though I’ll be the first to say I suddenly desperately miss React/CSS/HTML.

Unit Frames

I started with unit frames, since it holds most critical information (health, mana, cast time, selection status):

I didn’t have any portraits, so I used the character model, and my sister kindly mocked up some simple frames in photoshop based on my scrawl.

I decided to add text, but it looked awful:

This was an issue with my UiRenderSystem. LibGDX uses bitmap fonts for rendering, but the system resolution did not line up with their pt->px assumptions. And no antialiasing on it.

I was able to get a better bitmap match, called it good enough:

Portraits

My sister created these beautiful portraits for each of the mages:

I have not integrated all of them yet, but they are a massive improvement:

The other UI pieces will have to wait, I’ll add them as the systems are built.