IMPROVING YOUR TITLE SCREEN

Make your title screen snazzy with a few tricks.





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.
http://decisive-media.net/gameguy/title/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.
http://decisive-media.net/gameguy/title/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?



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
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.
s1 = "Born Dead"
s2 = "Wake Up"
s3 = "Eternal End"

http://decisive-media.net/gameguy/title/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.
http://decisive-media.net/gameguy/title/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.
http://decisive-media.net/gameguy/title/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)
@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.
@command_window.x = 32
@command_window.y = 320

Which produces the following.
http://decisive-media.net/gameguy/title/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)
@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.
@command_window.back_opacity = 255

http://decisive-media.net/gameguy/title/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)
class Scene_Title

Above that, paste the below code.
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)
@sprite.bitmap = RPG::Cache.title($data_system.title_name)

Add a blank line below it and paste the following there.
@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)
@command_window.dispose

Below it add
@fog.dispose

Look for
@command_window.update

Below it add
@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.
http://decisive-media.net/gameguy/title/tut7.png
Now that the fogs there I think I'm gonna change the opacity to 0.
http://decisive-media.net/gameguy/title/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,
FONT_NAME = "Bloody" # Name of font to use for the command window.

Above this line
class Scene_Title

Now look for this line
@command_window = Window_Command.new(192, [s1, s2, s3])

And below it paste these lines
@command_window.contents.font.name = FONT_NAME
    @command_window.refresh

And that should be it for font.
http://decisive-media.net/gameguy/title/tut8.png

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!

Posts

Pages: 1
Excellent article. Very helpful and easy to understand.
That looks very cool! Great article!
Creation
An avid lover of Heartache 101
1446
Great article, thanks for sharing. I'll use some of those tips.
This sounds insteresting.
maybe some screen shots
of your game?
author=ShadowX321
This sounds insteresting.
maybe some screen shots
of your game?

Gio Adventures: Eras Title

I used his advice and came up with this title screen.

By the way, GameGuys, thanks for your advice!
How can I change the command choices in VX?
author=Foofy
How can I change the command choices in VX?


Theres a script at the top called Words or Vocab. Can't remember. Should be in there somewhere.
Dose anybody have a request for a title screen called
1B THE HEART anime title screen Mail me
The font code didn't work for my title screen, I use RMXP so that might be the issue. -v-
Pages: 1