Hi all!
In the last post, I promised that I would go in more detail about the different aspects of the mod that I've worked on! Well, time to deliver!
I figured I would start with the aspect of the mod that is probably the most complete right now: the User Interface (UI) and Menus!
The Main Menu
What's a game without a main menu, right? A main menu is one of the first things your player is gonna see (aside from the title screen, of course) so it was extremely important to me to make the main menu not only look nice, but pay tribute to the source material.
Originally, when I first started programming the mod, the main menu looked a little something like this.
It looks cute! I was originally going for a hand drawn, scrapbook look, because I like that vibe (you can tell because of the look of the logo, hahaha)
...but...
It doesn't really scream Yo-kai Watch, does it? Aside from the tribe symbols in the doodles and...well, Rags being a Wazzat. At this point in development, I want the mod to look like the source material--not out of obligation, but out of love.
Yo-kai Watch's UI is playful, cute, and fun! It's by far one of my favorite aspects of the franchise, and I want to replicate that. How do we do that? We look at a reference, of course!
The Yo-kai Watch 1 Switch port and Wibble Wobble/Puni Puni use these app-style icons for the menu. I figured this would be a great way to keep the buttons a consistent size to avoid issues with offsets and make organizing the menu a bit easier. So, I drew this concept in FireAlpaca for how I wanted the layout to look.
Making UI layout concepts like this--even if they look simple, made the menu-making process 4 billion times easier, especially when we get into actually putting the menu in the game. Having something to look back at while adjusting button positions in source makes it much more clear what the end product is going to look like (ideally).
Now all we gotta do is import our sketch into an Adobe Animate canvas of the same size, and get drawing!
Let's start with the button backgrounds. Looking at our reference, most of the icons use single-color backgrounds and an inner white glow. This gives the icon the illusion of depth. So let's do that in our program!
Snazzy! Now we could stop here and move on to the text, but there's one more thing I want to add...
Notice how in the Puni icons, there are some highlights overtop of them to give them a sort of plastic-y, button-y look. Let's see if we can add that in with a clipping mask.
Okay! NOW we can move on to the text.
Yo-kai Watch uses a variety of fonts in its games. A lot of them are...not free. Unless of course, you obtain them from a definitely legal, totally legit source. Like I did.
Legally.
As far as my knowledge goes, the game uses the font Kurokane for soultimate names and promos, Rowdy for menu titles and app text, Seurat Pro for body text and dialogue, and occasionally Yuruka for those big, bold text pop ups for either when you lose a battle or encounter an event in 3.
For these Main Menu icons, we're gonna use Rowdy, since that's what the games use for these options.
Cool! Now let's add our image. This is gonna be our Story Icon, so let's draw a diary!
Groovy. Now we gotta make a 'selected' version by creating a yellow outline around the text and the icon. Now, you COULD do this by manually drawing outlines around your objects...but that's a bit of a pain. Let's try it the 'lazy' way.
Go into the filter tab and add an outer glow to the icon. Make it yellow, and turn the strength WAAAAY up. I like to do 2,000.
And wam-bam-pow we've got ourselves an outline! Copy and paste the filter onto the text, aaaand...
Perfect! Now repeat that 6 more times, and here's the final result!!
~Crunchy