Welcome Guest ( Log In | Register )

[ Big| Medium| Small] -



Post new topic Reply to topic  [ 4 posts ] 
    game_guy
  Sun May 01, 2011 4:54 pm
Opera == Epic
User avatar
Member


Location: 1337
Image



Image


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!


Image


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.
Content Hidden

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.
Quote:
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.
Content Hidden

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?


Image


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
Expand to see the code.

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.
Expand to see the code.

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.
Content Hidden

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.
Content Hidden

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)
Expand to see the code.

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.
Expand to see the code.

Which produces the following.
Content Hidden

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)
Expand to see the code.

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.
Expand to see the code.

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)
Expand to see the code.

Above that, paste the below code.
Expand to see the code.

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)
Expand to see the code.

Add a blank line below it and paste the following there.
Expand to see the code.

Now we need to update our fog and dispose it. Look for this line (80-ish)
Expand to see the code.

Below it add
Expand to see the code.

Look for
Expand to see the code.

Below it add
Expand to see the code.

That should wrap up the fog. And with our config we can easily change settings whenever we want.
Result

Now that the fogs there I think I'm gonna change the opacity to 0.
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,
Expand to see the code.

Above this line
Expand to see the code.

Now look for this line
Expand to see the code.

And below it paste these lines
Expand to see the code.

And that should be it for font.
Result



[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!

_________________
Image


Top Top
Profile      
 

    Toams
  Sun May 01, 2011 11:08 pm
THAT foreigner
User avatar
Sponsor


Location: Netherlands
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.

_________________
?????


Top Top
Profile      
 

    game_guy
  Mon May 02, 2011 12:25 am
Opera == Epic
User avatar
Member


Location: 1337
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.

_________________
Image


Top Top
Profile      
 

    regi
  Mon May 02, 2011 1:02 am
raptor king
User avatar
Sponsor

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


Top Top
Profile      
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 


Who is online

Users browsing this forum: No users and 9 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

We are an independent, not-for-profit game making community.
Homepage
Board Index
About Us
Downloadable Games
Free Browser Games
Games in Development
RPG Maker Support
Game Maker Support
Construct 2 Support
HBGames the eZine
Advanced RPG Maker
Site Announcements
Powered by phpBB © phpBB Group