[XP] Improving Your Title Screen

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!

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.

Spoiler for:

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.

Spoiler for:

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?

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: [Select]

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: [Select]

s1 = "Born Dead"
s2 = "Wake Up"
s3 = "Eternal End"

Spoiler for Result:

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.

Spoiler for:

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.

Spoiler for:

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: [Select]

@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: [Select]

@command_window.x = 32
@command_window.y = 320

Which produces the following.

Spoiler for:

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: [Select]

@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: [Select]

@command_window.back_opacity = 255

Spoiler for Result:

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: [Select]

class Scene_Title

Above that, paste the below code.

Code: [Select]

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: [Select]

@sprite.bitmap = RPG::Cache.title($data_system.title_name)

Add a blank line below it and paste the following there.

Code: [Select]

@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: [Select]

@command_window.dispose

Below it add

Code: [Select]

@fog.dispose

Look for

Code: [Select]

@command_window.update

Below it add

Code: [Select]

@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.

Spoiler for Result:

Now that the fogs there I think I'm gonna change the opacity to 0.

Spoiler for Result 2:

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: [Select]

FONT_NAME = "Bloody" # Name of font to use for the command window.

Above this line

Code: [Select]

class Scene_Title

Now look for this line

Code: [Select]

@command_window = Window_Command.new(192, [s1, s2, s3])

And below it paste these lines

Code: [Select]

@command_window.contents.font.name = FONT_NAME
    @command_window.refresh

And that should be it for font.

Spoiler for Result:

Done!

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!

This looks incredible. Too bad I've moved on to VX. I'll have to wait a bit
Several questions, however;
Where'd you get that font? I likey.
Is there any way to get rid of that white border around your choices?
How long did this take?
Why are you so good at RGSS? And RGSS2 (I presume)?
Kthxbai.

Bloody font http://www.fontspace.com/category/blood fourth one down
Different windowskin I guess
2 hours to write, the process itself is like 5-10 minutes at most.
I started 3 years ago with a rewrite of Scene_Menu and expiremented with scripts ever since. I've worked little with RGSS2 but its still practically the same.

The VX one will have to wait a a day or so, schools been busy.

I preferred it before the fog to be honest, fogs don't really add anything especially when they're used all over the place.

True. But the fogs don't have to be just fogs. It could be leaves flying across the screen, snow gently falling down, a whirring sandstorm. etc... But in all honesty I agree with you. But ya know it fit the mood of the title screen.