#ui tutorial

i can do a tutorial for you! it’s really simple with MV, especially if you use Yanfly’s Core Engine plugin. I also have a borderless text plugin (that i don’t really remember where i got, theres prob a million out there) since MV likes to have a white text w black outline as default. I’m just gonna go through all that I did to customize it and I hope it makes sense to you!

First, to change the text you just gotta drag and drop your new font into the fonts folder of your game project, and then open up the gamefont.css file.

just change the url bit to the name and extension of your new font and open up your game to see if it looks like you want it to. If it’s too big, you can change the font size in the core engine and just adjust accordingly.

Next, it’s gonna be a lot of finagling the window file. you’ll find this guy in your game’s system folder. You can edit it however you see fit, but there’s a lot of different stuff this squashed file does

this one is from my game, the top left square is the main window color which will be the background of your text boxes and your menu. you can change the opacity of that in the core engine also. I personally hate it being transparent lmao.

The right top box includes your window frame and arrows. Idk what you use the arrows for yet in game, but that’s something to edit I guess. The border is more important as this will line ALL of your windows. There’s plugins to turn off that border, but it adds interest and cute detail to the window! ALSO VERY IMPORTANT: there is a square box around the corners of the border guy that will stay pixel perfect. anything beyond that box on the long sides will be stretched/repeated to fill the line of the message windows, as i reiterated, will be on ALL of the message windows and it needs to fit the length of those windows regardless of what it is.

(I’ll also note that my border is very up against the box, and i have a bit of the color of the message window as a second border because if your border isn’t actually big enough, there will be a gap between your border and message window)

ok next is the bottom left box which is used for a window overlay detail. I’ve honestly never used this that much cuz i think that it can be too busy visually while people are trying to read the stuff.

next all in the bottom right box. the upper corner of that is the highlight color, when used to select things on the menu. The box i have stars in are the message advance prompt that will be at the bottom of the message windows. the animation moves left to right.

The bottom of this square is really what you’re gonna be messing with to make your UI look really good. So I’m only using the colors 0-3 because of my limited palette design, but all of these 32 colors can be used in your game somewhere! So here’s a diagram as it lines up with the UI, window file, and the plugin:

sorry it’s kind of messy but i tired to connect the things that were influenced by each other. I haven’t gotten into the lower part of the list yet but ovbs it’s the same kind of deal. Idk if you’re doing a game actually using the battle system, but I’ll talk about what they are anyway.

“Normal” is your main text color, and that affects the menu, the name, the class, level number, and the x/x values for hp and mp. For the HP and MP bars you can use two colors to create a gradient effect, but like I did, you can just use one number for both for a solid color.

“System” affects the labels for numerical values if that makes sense. Look at above and the status menu here to see what that affects.

“Crisis” is the text color change when your character’s health is super low. you can see that in the image below this next paragraph too:

“Gauge Back” is another battle thing, if your characters are anything less than a full bar, that’ll be the color “underneath” the bar. like the dark blue bar you see there:

I haven’t messed with the stuff below the hp and mp bars too much, so i can’t tell you what those directly correspond too sorry.

I haven’t messed around with any of the other things in the system folder, but i believe they are all a direct correspondence since they’re dealing with images like the window file and you don’t have to finagle any numbers, just make sure your sizes are right I think.