Hello there, dear reader, LoafyLemon here!

Today I’d like to do something a little different and combine Dev Blog with Dev Dump. A little something to showcase the inner workings of my process, maybe it’ll interest some of you who want to learn more about the design side of things.

So, let’s get right to it. As you may remember from our last announcement, Witch Trainer Silver has a lot of new content coming down the pipeline. That means more interfaces. But hold up, what’s with the old interfaces, right? That’s the problem.

The truth is, those old interfaces are still (mostly) functional, but they’re not only not fitting the game’s style anymore, they’re also severely limiting the game’s potential. And, quite frankly, they’re an eyesore.

Before any of you take out your pitchforks, know that I am solely responsible for that eyesore, so I am allowed to say that it’s ugly! I mean, I’m not one to cry over spilt milk, but this is an opportunity to do something different, something more visually appealing, and more functional that I simply could not do before due to limitations of the engine, but also my own skills back then.

Now, let’s get back to the current state of things. You see, Witch Trainer Silver’s UI is, well, it’s a bit of a mess, but it’s a mess that despite its many flaws, has a certain charm to it. It’s also something that people love, or at the very least, don’t hate as much as they should. (That’s what I tell myself at night, anyway.)

However, Witch Trainer Silver is also a game that has a lot of potential, and one of those areas where it could use a lot of improvement is in the interface. Now, I know what you’re thinking: “Why should I care about this?” Well, let me tell you, the interface is not just about looks. It’s also about functionality, usability, and how easy or hard it is for the player to navigate through the game. And right now, those things are not exactly perfect.

Now, here comes the part where I’m supposed to tell you that I’ve been working on Witch Trainer Silver for a long time, and I know what I’m doing. And in a way, that’s true, but in a way, it’s not. Because when you’re working on a project for a long time, you can start to take things for granted, and you can also start to make mistakes that you wouldn’t have made if you had been working on it for less time.

So, what do I do? Well, I do what I do best: Break things down into smaller pieces, and then break those pieces down even further. And then, I try to figure out how they all fit together.

So, let’s take a look at the old interface. It’s not perfect, but it has worked for a long time, and it’s not like it’s going to fall apart right now. But still, it’s not the most visually appealing, especially on HiDPI monitors above 720p, because originally we were limited to just 1080×600 pixels.

You may be scratching your head here, as 1080×600 pixels is pretty low, and it’s even lower than some mobile devices today, and I know you’re asking yourself why we chose that resolution, and the answer is we didn’t. When my predecessors started the project, the original game was running on Windows XP in 4:3 aspect ratio, and the resolution was limited to just 600 vertical pixels. As you can guess, it’s not a very pretty thing, especially on modern devices, but I digress.

Anyway, enough of that. You may be wondering what we can do about this. Well, here’s the good news: we can do a lot of things. For one, we can make the interface more visually appealing. For another, we can make it more functional. Lastly, we can finally do some things that we could only dream of doing before because of limitations.

But, I know what you’re thinking now, “How long will this take?” And I’m happy to report that it will be faster than you think. At least, that’s the plan.

Now, I know that not everyone may be as interested in this as I am, but I hope at least some of you will take a look at this and think, “You know what, this actually sounds pretty cool.” Because, at the end of the day, this is what it’s all about: making something that people will enjoy, and that drives me to do what I do.

Without further ado, here’s the new interface design for Mafkin’s Emporium, a work in progress:

As you may notice, it’s a very rough draft, but I wanted to show it to you to give you an idea of what the new interface could look like. These kind of rough design sketches are very common in the game development process, and that is something not many people are familiar with, so I thought I’d take a moment to explain.

Here’s how the design process typically goes for me:

1. Gather Requirements: In this case, Witch Trainer Silver has a lot of new content coming down the pipeline, so we need to make sure the interface is scalable and can handle the new content without looking too cluttered or messy.
2. Research and Planning: This involves looking at other games in the same genre, finding out what players like or dislike about their interfaces, and planning how we can incorporate those elements into Witch Trainer Silver’s interface.
3. Drafting: Once we have all the information we need, it’s time to start drafting the interface design. This is where we take all the ideas we gathered during research and planning and start putting them onto paper. This is usually done in a very rough, unrefined state, and is often just a series of scribbles or rough drawings as seen on the above image.
4. Engine Integration: As Witch Trainer Silver uses an engine that has some limitations, I have to work with that engine to see how I can make the interface look and function as I want it to, before I seriously start working on designs. Sometimes this means writing code to make it work, other times it means finding workarounds.
5. Visual Design: This is the fun part, where I get to decide what the interface looks like, and how it will be organised. This involves designing icons, buttons, text, and other elements, and deciding how they will interact with each other.
6. Feedback and Revision: Once I’ve made a draft of the interface, I show it to the rest of the team and get feedback on how to improve it. This can involve changing the layout, the colours, the icons, or anything else.
7. Implementation: Once the design is finalised, I start implementing the interface into the game.

At the moment, we’re at step 5, the visual design. As you can see, it’s not finished yet, but we’re further along than you might think.

The above image is what we call a sprite sheet. It’s a collection of images that represent the various UI elements we need to include in the game, like buttons, text boxes, and so on. Once we have these sprite sheets, we can use them to build the interface.

The new interface design will have a lot more detail and visual flair than the old one, and it will also be much more functional, and more suitable for HiDPI monitors and larger screens, but also compatible with lower-resolution screens and mobile devices, or even controllers.

Now, I know that this might not be everyone’s cup of tea, but I hope that at least some of you will be interested in how this works, and maybe even help out with some of the design decisions along the way.

Thanks for listening to my ramblings, and I hope to see you all around on the discord where you can give me feedback on this design.

Love,
LoafyLemon.