Time has come to make sprites for UI. This involved me opening Photoshop and emerging 3 days later with a couple barely passable sprites. Anyway, here are all the sprites I will use (for now) in the primary UI elements:
The leftmost is a panel or button. Second one is a tab. Third and fourth are generic containers when I need to “group” or select elements. I will likely need more, but these are versatile enough for like 90% of cases. I can also always update UI with new sprites as they will share the same layout.
(For the sake of blogging sanity, I didn’t actually make them in this order or with those variations to begin with. I did some experiments and added new variants and types as I added features. But I am just leaving one preview here.)
As with everything, I want to be able to quickly adjust things. This includes my “art”. That means all the repeated graphics are Photoshop’s smart objects, which just means I am working with prefab-like logic.
Different variations are just adjustment layers, like brightness or hue:
The objects themselves are outlines of the desired shape with whatever effects I want, like linear vertical gradient:
And the cutouts are a mask that just “removes” that area:
In short, I can modify every part of the design. This is a very “programmer” approach to all of this, but it makes my changes fast. I can change the color or gradient direction or border thickness with a few quick edits.
In Unity, these get 9-sliced, so that they can resize nicely to any size and I don’t need to worry about them.
Now, before I can actually use these in-game, I have to make a serious UI decision about the UI canvas size I am using. The game is pixel art and my HUD is already 2×2 pixels for each pixel, so to speak. I mean it’s all 200% zoomed at the moment. So I might as well make that the default canvas size instead of manually drawing all items at 200%. This comes from my legacy canvas logic, where everything was 1:1.
First, I will set my reference resolution to 640×360, which is half the 1280×720 (my native one):
And then I need to make the canvas be rendered by a camera specifically for this size/resolution:
And that sort of works. Except all my sprites are double the size they ought to be. And I have so many of them (just the minimap is dozens) that I rather not rename them by hand. In fact, I made an editor tool for this:
I just drop my texture (atlas) and it will convert all sprite to be half the size. Super-easy and fast. (If you ignore the time to make it.)
Now I “just” have to fix every single panel. I will talk about modularity of my UI in the next post. For now, I will just show where I am heading with these and how they even look as a proof of concept.
Here’s the main menu:
Yeah, the screenshots are huge and I am not resizing them because they are at their native resolution that way and not resampled where they lose the sharpness.
Here are some tabs:
For instance, this is player’s info panel. It now has a specific “container” where the child panels go. So something like goal panel will then need to fit within it with all its elements:
Then I can start replacing each element with its appropriate sprites:
For example, the confirmation panel:
Or the loadout panel:
The work’s very slow and tedious. It’s visual, but it’s also sprites done by myself, so it’s hardly amazing. The time I spend moving and anchoring and shifting UI elements really adds up. But I’m slowly working through all the panels.