Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Improving Your Title Screen

main.png


main4.png


This tutorial is here to improve your title screen and make your game leave the generic look of RMXP's title screen. This will require some scripting but I'll walk you through it all. Changing the way your game's title looks will just already show initiation towards caring about your game. Follow this easy guide and make your title screen fabulous!

main2.png


Well there are really only two things you can do outside of scripting to change your title screen. That is change the background and change the background music. Both of these are recommended anyways as no one will want to really play your game if they're still seeing the plain old default settings. So lets complete our objective and change these two very important settings that can set the mood of the game. Lets take some things into consideration. Do you honestly want hardcore trance music for a zombie massacre game? The title screen as a pretty princess unicorn when your game is actually about discovering the lost gold of Van Huten? No don't think so....
Our Objectives are as Followed
  • Choose the Right Material to set the Mood
  • Change Background Music
  • Change Background Image

1. Choosing the Right Material
Choosing the right material can be tricky. If you're not a musician or a graphics artist, finding these materials can be hard for you. But using your friendly search engine, like Google, I'm sure you can easily find something. Of course there are other alternatives like using the huge RM community that exists. Now if you are a graphics artist and know a thing or two about graphics, using the Rule of Thirds can make such an appealing difference. For people who are making their title screen, for RMXP the title size is 640x480. For VX the title size can really be anything since VX has the resolution changer thingy. Anyways by default its 544x416. For the tutorial example, I'll be basing it around a zombie theme. Heres a title screen I would most likely use if this were an actual project.
zombie.png
Okay so the title screen isn't the greatest but it sets in your mind that the game is probably about or based around zombies.
A picture is worth a thousand words.
Alright, now we should look for some music to use. Newgrounds Audio would probably be the best place to look as most people don't mind you using their music as long as credit is given. We need a song to match our title screen. Parody games tend to use up-beat, silly sounding music. Horror games tend to use deep, dramatic music. However a zombie game thats not totally serious would probably use a mixture. Choosing music can be very difficult especially if you have no idea what your game is truly about. If you don't have the basic theme done for your game you shouldn't be focusing on this particular area. Alright so for my zombie game do you think I would use this? Song from Newgrounds Thats more for an adventurous platformer game or something of the sort... Anyways I'll probably stick with something like this. A Day of Night If I wanted to, I could find something more fit. But this basically sets a serious mood and lets users know it. Now we have our material, lets move onto changing them.

2. Changing Background Material
Since changing the background image and music can be done all in one step I'm just going to explain it in one step. I'm not even sure I should be explaining how to change the material in your game but I'm feeling generous and it would just top the tutorial. Open up your project. Go to the System. Change the following things, depending on engine
RMXP
  • Title Graphic: - This is the title background you decided to stick with. Make sure this image is imported into the Graphics/Titles folder.
  • Title BGM: - This is the music for your title. Import this into the Audio/BGM folder.
RMVX
  • Title Screen (Under Music) - This is the music for your title. Import this into the Audio/BGM folder.
  • Changing Title Screen - Now since RMVX is so gay and you can't actually just import it and choose it, your title image file needs to be named "Title" and needs to be imported into the Graphics/System folder for this to work.

So we've done everything possible to try and make our title screen look good without scripts. Heres a final result of what we just did.
tut3.png
Of course, with just a few script edits we can make our title screen look even better. The rest of the tutorial we'll be going through RGSS. Now sadly if you are using VX, then the rest of the tutorial is useless to you. But since I'm nice I'll get a VX tutorial up as well. Now lets get started shall we?

main3.png


Alright so now we come to the part about scripting. You don't need awesome, gasmtastic title screen scripts to make yours look good. Not that I'm saying using scripts like that are bad but they usually end up being public and get overused. Of course if its private then perfect but we're not working with a full blown script, just some edits. Mogs menu scripts are overrated, overused and should not be used by you. I'm not referring to any of his other scripts like XAS, or whatever else he has, but just his menu ones because no one bothers changing the graphics in them, which shows no initiation of caring about your project. With some simple script edits, you can have a custom window position, possible some fog, and a custom font for your command window. Don't worry, you shouldn't need any knowledge of how RGSS or scripting works. Just some basic knowledge on how to copy/paste code really. Lets go over our objectives. We will be working with Scene_Title (default one).
  • Change Command Choices
  • Move Window Position
  • Change Window Opacity
  • Add a scrolling/non-scrolling fog
  • Change Font

1. Change Command Choices
Changing the words on the title screen is really quite simple. Look for lines 37-39 in Scene_Title. Hopefully around there you should see
Code:
s1 = "New Game"

s2 = "Continue"

s3 = "Shutdown"
These three lines are what you will be changing if you want them to be something different. All words must be in double or single quotes "like this" or 'like this'. As I'm sure the rest is really quite self-explanatory I'll go through it anyways. Replace the words between the quotes with what you want it to say instead. Thats really it for this one. Heres what I did.
Code:
s1 = "Born Dead"

s2 = "Wake Up"

s3 = "Eternal End"
tut4.png

2. Move Window Position
Alright so this'll be fun. Open up your title screen image, lets find the area that we can work with.
tut1.png
My only options here would probably to place the command window in the center of that area or place it along the right line and try and follow the rule of thirds.
tut2.png
I think I'll just place it somewhere in that general area. In an image editing program, you can easily find an area you want it and easily get the x and y of the position. Probably keep the x at about 32 and the y at 320. So we'll edit these lines. (Around line 42-43)
Code:
@command_window.x = 320 - @command_window.width / 2

@command_window.y = 288
The first line is the X position of the window. I'm going to erase the "320 - @command_window.width / 2" and replace it with "32". This variable is an integer so I'm not going to be placing quotes. Also going to replace the 288 on the second line with 320.
Code:
@command_window.x = 32

@command_window.y = 320
Which produces the following.
tut5.png
Experiment with these variables. Probably should keep the window somewhere between the middle and the bottom of the screen. Having it at the top would be too awkward.

3. Changing Window Opacity
Having the window's background be transparent is a great effect. By default, the title screen has the command window's back opacity set to 160. The opacity can be anywhere between 0 and 255. We just have to change one simple line here, I'm going to make my window completely solid since the windows going to be layed over pure black area.
Look for this line (Around 41)
Code:
@command_window.back_opacity = 160
Change the 160 to whatever you want, as long as it stays between 0 and 255. I'm going to change it to 255 so its not transparent at all.
Code:
@command_window.back_opacity = 255
tut6.png
This is also experimental, do what looks best to you.

4. Adding a Fog
Skip this step if you do not want it.
This next step is going to a bit more difficult then any of the others. First thing we're going to do is setup our own configuration, this makes it so we can change the fog for later on. Look for this line (Line 7)
Code:
class Scene_Title
Above that, paste the below code.
Code:
[/hr]

FOG_NAME = "001-Fog01" # This is the name of the fog we'll draw over our title screen.

FOG_OPACITY = 60 # The transparency of the fog

FOG_SCROLL_X = 4 # The horizontal scroll speed of the fog, put 0 for no scrolling, positive values go left, negative values go right

FOG_SCROLL_Y = 4 # The vertical scroll speed of the fog, put 0 for no scrolling, positive values go up, negative values go left

FOG_HUE = 0 # The hue of the fog
Edit the settings to your liking. Now time to go add some more code to Scene_Title. Look for this line (Around 35-ish I think)
Code:
@sprite.bitmap = RPG::Cache.title($data_system.title_name)
Add a blank line below it and paste the following there.
Code:
@fog = Plane.new

    @fog.bitmap = RPG::Cache.fog(FOG_NAME, FOG_HUE)

    @fog.ox = FOG_SCROLL_X

    @fog.oy = FOG_SCROLL_Y

    @fog.opacity = FOG_OPACITY
Now we need to update our fog and dispose it. Look for this line (80-ish)
Code:
@command_window.dispose
Below it add
Code:
@fog.dispose
Look for
Code:
@command_window.update
Below it add
Code:
@fog.ox += FOG_SCROLL_X

    @fog.oy += FOG_SCROLL_Y
That should wrap up the fog. And with our config we can easily change settings whenever we want.
tut7.png
Now that the fogs there I think I'm gonna change the opacity to 0.
tut9.png

5. Changing Font
Skip this step if you do not want it.
This step also may be a tad more difficult than others. But its just pasting code where told so it should be alright. This just changes the font of the command window, in hopes to match it closer to the title text.
Lets add on to our config from the fog. If you did or did not do the fog step, just paste these lines,
Code:
FONT_NAME = "Bloody" # Name of font to use for the command window.
Above this line
Code:
class Scene_Title
Now look for this line
Code:
@command_window = Window_Command.new(192, [s1, s2, s3])
And below it paste these lines
Code:
@command_window.contents.font.name = FONT_NAME

    @command_window.refresh
And that should be it for font.
tut8.png

[size=24pt]Done![/size]


The final result looks fabulous! Well in my opinion. I'm sure there are a few trolls out there who disagree. But oh well. If you have any questions please ask. I will eventually add a tutorial for VX but that'll be in a different topic due to trying to keep this one somewhat pretty looking. I hope this topic helps out people as much as possible. Also, I'm not saying that you can't and shouldn't use awesome title screen scripts but if you're not a scripter then don't go out and find a public one thats probably been overused. With options and setup like this, its pretty easy to setup one that looks pretty original. One thing I didn't go over was choosing the right Window Skin, but I figured you'd have enough common sense to change that yourself. Anyways enjoy!
 
hey wow man, this is a pretty solid base for people to improve upon
you've covered a lot of aspects that might stimulate people to do something with their title screen.

the only thin you didn't address might be splash screens or interactive scenes in a title screen
however, like i said, this is a solid base.
 
Thanks! ^_^ I'll probably make a separate tutorial for splash screens, it seems right. Another thing I forgot to mention was the change of the windowskin.
 
Cool stuff!
I'd like to add a few bits of advice: avoid foggy overlays that are too thick; if the fog is all you can see, it can easily detract just as likely as embellish the screen. To be safe, you can make the fog slightly clearer in opacity. Another thing is to make sure the change in text is understandable. Creativity is great, but don't go overboard with stuff like "Metamorphose!" etc. in lieu of "Start New Game."
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top