I have been on a journey of creating a User Interface system on my game engine, and I think it’s finally at a point where I can do *something* with it – So I thought, why not do some menus? Three menus are going to be extensively used on the videogame that I am working on, an “Action Selection” menu, an “Actor Stats” menu, and, of course, a “Dialogue” menu. I want to take a deeper look at the Actor Stats menu.
As is *always* the case, let’s just copy Final Fantasy Tactics – Because that’s the starting point of absolutely everything on this thing that I am making. So if you look at the image above, you will see that we have this little thing showing the current character’s portrait, level, exp, hp, mp, etc., etc. And that’s what I want to replicate, probably not with all that information, but something along those lines
There are two sides to creating this. The visual structure, and the logic. Let’s first look at the visual structure.
You don’t need to think too hard about this, this menu is just a portrait texture, a bunch of text labels, and three meters, and I decided to add a panel in the background. Each of these has its own respective class on the Machinist UI, as they are frequently used and serve as a “building block” for menu functionality. I won’t bore you with the positioning/sizing details, but in code, this ends up looking something like this.
So visually it looks like the screenshot below. There are still some ways to go, like, for example, coding the meters and, you know, designing a whole RPG system with components such as leveling, stats, and combat. But I think it looks kinda neat. I ended up with a version that has a panel as a background, but I might experiment with some variations later on.
Now, it wouldn’t be very programmer-y of me if I didn’t talk about everything that is wrong with this current approach and how we could improve it. So… *sighs* I guess I have to talk about that now.
The biggest issue I have here is the way I am creating a menu for this game (engine?) – The menu is entirely created on code. See, there is a static class to create the menu, and once that function is called it allocates the menu as well as all the components needed. This can be fine, and this can be not fine, so I will just go on about the reasons why I, personally, don’t like it this way.
I don’t like having to recompile the game/engine every time I have to tweak the menu, those 2~3 seconds of recompiling easily distract me, it’s not so much a waste of time as it more so that it just gets annoying and throws you off of any momentum or concentration that you have going.
Another issue is having to position/size things *in code* which is also really annoying. I said previously I would not bore you with the details of positioning and sizing things, but now I *will* bore you with the details of positioning and sizing things.
As you can imagine, getting to all these magic numbers is a matter of trial and error, and add that on top of the 2~3 seconds to compile and it all just gets really annoying.
The solution to all my annoyances here comes in two different steps.
Step 1: Make it Data-Oriented
Imagine a world where all that information was in a .json file. It could look something like the JSON below, and then all we need is some form of generic Factory method that gets a Menu JSON path as input and can create the menu with all its elements.
Delightful.
This totally eliminates the need to recompile every time you change something about the UI – because all the relevant information is now in a file that is going to be read in real-time. WOW! This almost feels like a real game engine all of a sudden. You just feed it a JSON file and it will create the UI for you, magical.
But this doesn’t eliminate all the guesswork and magic numbers from it, does it? So how could I possibly get rid of that?
Step 2: UI Editor
Yes. That’s Right. I got you. It was all an elaborate plan to bring you right here at this moment in time, the moment where we have a 1-on-1 conversation about my favorite subject of game development, TOOLS PROGRAMMING.
The engine takes a JSON file with all the data and creates the UI menu for you. We totally could leave it at that, even if I’m just writing and tweaking these files by hand it is already a big win compared to what we had before, but what if we create something to generate these JSON files for us?! We could create a tool!
An editor creates the JSON, and the engine reads the JSON, that’s what game development is all about. Game Engines are all about creating and reading files and the better you create the files and the better you read the files the better your engine is, and, in the future, there are going to be better ways to create and read files. But, at the moment, we should take it one step at a time.
What I’m trying to say here using way too many words is that I will be working on making the creation of menus on the Machinist Game Engine a data-oriented thing.
A detour to Like a Dragon: Infinite Wealth
You know, I really wish people could *see* into my head the *vision* for “The Machinist” – I think it’s a neat idea and I like it and I’m trying to make it work but, you know, juggling a huge number of things is not an easy task but progress is (very) slow and steady.
I usually describe it as “Playable Short Stories” – One engine to make games that share 80% of features, the engine keeps improving, and I come up with some sort of system and a bunch of tools that make it as easy as possible to create dialogues, cutscenes, characters, things like that. Basically, creating a new video game would be all about creating a new story, and I thought this was a good idea and that no one was doing it.
But I proved to be wrong (as is often the case) because that’s exactly what Like a Dragon is doing. But Like a Dragon is more like full-blown playable novels, not short stories.
This rapidfire schedule is possible, Yokoyama explained, because Ryu ga Gotoku Studio works on several projects in parallel, with staff, game mechanics and systems shared between productions. One developer handles the same physics-driven minigame for several games at once, for instance.
https://www.rockpapershotgun.com/its-frightening-how-fast-we-have-to-release-like-a-dragon-games-to-stay-relevant-says-yakuza-writer
The wonders of shared tech.
With regard to Infinite Wealth (aka Like A Dragon 8) and Like A Dragon Gaiden specifically, “there isn’t a huge difference” between them, Yokoyama added. “By this I mean that, in a sense, Like a Dragon Gaiden was derived from Like a Dragon 8. We could have just told of Kiryu’s past through a thirty-minute interlude as part of Like a Dragon 8, but we decided it would be a lot more interesting as a game of its own, which is how the project came to be.
https://www.rockpapershotgun.com/its-frightening-how-fast-we-have-to-release-like-a-dragon-games-to-stay-relevant-says-yakuza-writer
You see. Basically the same game, completely different stories, cutscenes, characters, dialogues, etc., etc., You get it. That’s what I’ve been trying to do. If you think of it, it’s not really a groundbreaking concept and there’s probably a bunch of series with that concept around there, but it’s just that somehow, somewhere, it seems to be the case that all these games/studios/concepts get lost in Business Related grievances or end up having to remake the whole engine because of *GRAPHICS* – Now, I don’t have the graphics problem because it’s just pixel art. Even though I’m sure I WILL be refactoring and remaking my game engine renderer multiple times.
I was going to make a whole detour about making music and all the struggles that I’m dealing with on *that* side of things, and, more importantly, my adventures in testing and acquiring guitar pedals !! Because making cool music is clearly not about your guitar skills, it’s about how many pedals you have.
But this is close to (or maybe even it surpassed at this point !) 1,000 words, which is sort of the limit I impose myself on these blog posts, so maybe… next time.
(hi, this is me post finishing writing and revising this post, spoiler alert, I went *way* beyond 1,000 words)
I know “everyone” is here just for the music videos.
gueepo 