Back to development at last! 🎉🎉🎉

Piro 🛫, my best friend, offered their help on Skymagi. Our #1 goal is to produce a fun playable demo, but some mechanics are quite unintuitive currently.

I designed the new pixel UI back in April of last year, but it hadn’t been integrated into the actual game, and the current had some serious rough edges.

It might just seem like an asset-swap, but there are complications:

• I put the entire thing in one PSD, didn’t split it apart at all
• Pixel UI will need a special integer scaling algorithm for different screen resolutions
• In-game assets support dynamic actions (selection, casting, actual health bars, etc)

We decided to tag team — Piro handled splitting the assets apart, and I handled rendering them.

This won’t take long

I started by skipping the scaling problem. Call it procrastination, but I just hardcoded a static 2x size multiplier for all pixel assets. This quick and dirty solution actually let the old UI and new mix, which made this process much easier actually.

So, portraits.

Yep, 2^3 = 8 states. If I had just added three pixels to the sigil cast bar, I could’ve drawn the sigil icon separately and avoided 4 of these. It just didn’t look right, though.

While the process is a bit tedious, there is a certain spark when gameplay is hooked up and it just comes alive. Especially after staring at it in photoshop so long.

Fixing the font

You’ll see I’m still using LibGDX’s default font. It seemed moderately complicated to add a new font, so I had avoided it up ‘til now.

To my surprise, Hiero made the process easy.

I processed the .ttf into a bitmap font, and my asset manager was already equipped to pull it in. All I had to do is actually use it:

private void drawPixelText(String text, float x, float y, Color color) {
    pixelFont.setColor(color);
    pixelFont.getData().setScale(1.0f); // 5pt font at native resolution
    pixelFont.draw(batch, text, x, y);
}

And thank you to OmegaPC7772 for this pixel font. I plan to eventually try creating my own, but it matched the aesthetic well for early playtesting.

Now for the rest

A few hours later, we finished the player castle (omitting unimplemented features).

And then the selected unit portrait.

This design was inspired by MOBAs, though it could benefit from some actual spell icons.

And of course, enemy castle status!

I actually had to add enemy castles to the game. I had all the pieces, but hadn’t wrapped it together.

I chose to have the UI status hover over the castle. Not sure if I’ll keep it this way (Blaise recommended against it), but I wanted to keep the possibility of battling multiple castles at once.

And there we have it.

Here it is all together:

Scaling was not as difficult as I expected. I took my PixelViewport for pixel-perfect in-game and removed quite a bit of complexity that the UI didn’t need.

I also did a bunch of other stuff

I added empowered evocation spell variants for when a mage is using an Evocation circle. A fairly major gameplay element.

Here’s a pyromancer’s fireball with and without the evocation sigil.

And, of course, paramount to gameplay… the .exe has an icon now.

(You’d be surprised how long this took to figure out and automate with build tools).

And I decided to try out Aseprite and dusted off my pixel art skills.

It feels good to be back.