MAPS AS TITLE SCREENS...

A mostly simple tutorial on making highly customizable title screens

  • giaks
  • 08/29/2013 09:43 PM
  • 29020 views
Want to see more examples of title screens you could make using this tutorial?


Today I'm going to cover a quick easy way to get your game's title screen to potentially stand out from the rest. Using this technique and your creativity, you will be able to achieve a high level of customization without using any pre-made scripts. We will however be using the script editor to do some very simple modifications to how the current title screen works. So let's begin...

If you manage to make it all the way through this entire tutorial, you will have created a title screen that looks something like this:



GOALS:
1) Modify how the current title screen works so it acts more as a splash screen.

2) Move the game's title screen to a map so we can unlock all the beautiful features of events and scripts.


Tutorial:
Part 1 - Step 1
Eliminate the continue and shutdown options on the title screen.

We are going to jump right into this by opening up the Script Editor (F11)
On the left side scroll down until you find:

Window_TitleCommand

When you click on it, you will see the right side of the editor now displays the Window_TitleCommand script. You will notice that there is green text throughout the script, and always at the beginning of this text you will see a hash mark '#'. This mark indicates a comment, and the game will 'skip' over these lines because they are not considered executable code.

On the right side of the editor find the comment 'Create Command List'.

In the command list you will probably notice the words 'new game', 'continue' and 'shutdown'. These are the same commands you are offered at the default title screen. What we want to do, is get rid of the continue and shutdown options.

To do this, simply add a hash mark at the very beginning of the lines that say 'continue' and 'shutdown'. This will make the game think that those lines are comments and it will not run them as code.

If done correctly, your title screen should now look like this:



Part 1 - Step 2
Hide the new game window.

Let's go back into the Script Editor (F11)

You should still be on the Window_TitleCommand script, if not find it again on the left side of the editor and click on it.

Now on the right side find the comment 'Update Window Position'. This is the code that tells the game where to place the menu window for the title screen. We are simply going to push the window off the screen, so the player can't see it.

To do this simply find the number:

1.6

It should be only a few lines below the 'Update Window Position' comment.

Once you find it, change it from '1.6' to '2.6'

That will push the window down and off of the viewable area of the screen.

When you are finished your script editor should look something like this:

and your title screen should look something like this:

--------------------------------------------------------------------------------------
Want to skip any sort of user input? Want to make your 'Splash screen' disappear on it's own? Want to skip the title screen altogether and go straight to a map/map title screen?
author=Rave
How to make it so "current" title screen would disappear after some time so user won't have to press space?





That is a very good question Rave! :) I'm glad you asked. This can be accomplished with 4 very simple script edits...

----------------------------------------------------------------------------------

We are going to start by going back into the Script Editor (F11).

On the left side, scroll down until you see Scene_Title.
We will be working entirely within this section of script.

On the right side, we need to find the * Start Processing section.

Just below that we will find "create_command_window" (it should be roughly line 17).
We need to add a Hash tag '#' in front of it, so the engine does not run that section of the script.

When you finish it should look green, like this: #create_command_window

Now go to the end of line 17 and press enter.
This should add a blank space at line 18. Here we are going to type 'command_new_game'. This tells the script to automatically run the new game command without any user input.

We are half way done, however before you can run it we still need to change up 2 lines of code.

Next find the * Termination Processing section.

In this section, just under the word: super
add the line: 800.times { Graphics.freeze }

This is basically how we get the "Splash Screen" to pause for a few seconds before continuing to the title. It seems that about every 200.times = 1 second. So 800.times = 4 seconds, 1200.times = 6 seconds...and so one. This will be how long your "Splash Screen" will display until moving on.
If you didn't want a splash screen you could leave this line out and set your title graphics to 'None' in the database.

To finish this off, on the right side find the * New Game Command section.
It should be down around line 105ish

Within this section find the line that says 'close_command_window'.
As we aren't running the command window, we can't close it. So put a Hash tag '#' in front of this line to make it appear as a comment so the engine won't run it as code.

It should turn green and end up looking like: #close_command_window

----------------------------------------------------------------------------------

...and that's it! Now you can run a Splash Screen(or not) to your map title menu without the need for any pesky user interaction. I hope this helped Rave. If I can ever assist, let me know. :)

--------------------------------------------------------------------------------------

Moving on to our second goal...

This is where your creativity comes into play. I will present the basic concepts of how to emulate the title screen on a map, however because you will have access to all the functions of events, it's all up to you as to how your title screen really turns out.

Part 2 - Step 1
Create a map we will use as the title screen and make events to emulate the title screen options.

In your project create a new map.
If you don't know how to do this, you may be reading the wrong tutorial...

On this map we are going to make 4 events...

EVENT 1-

Make an Autorun event that disables save and menu access. We are trying to emulate a title screen, so you don't want the player being able to hit 'ESC' and access the menu. You will find those event commands on...

Tab 3 - under 'System Settings'

Once you have disable those, head to...

Tab 1 - under 'Game Progression' - 'Control Self Switch...'

Turn self switch A - ON.

Now on the same event, make a New Event Page and under conditions click the box that says Self Switch next to it. Make sure that it reads that Self Switch A is ON.

EVENT 2-

This is our 'New Game' event. So go ahead and rename it to new game.

Now in this event re-enable save and menu access.

We will also want to erase all of the pictures we have used to create our title screen.

Tab 2 - under 'Picture and Weather' - 'Erase Picture...'

For this example make sure to erase pictures 1 through 5.

Set the destination of the transfer to be where you want the player to start your game.

Tab 2 - under 'Movement' - 'Transfer Player'

At the end of this tutorial we will be making the character transparent by default, so we want to make sure the Player will be able to see the character on the screen once they start a new game.

Tab 2 - under 'Character' - 'Change Transparency...'
Transparency = OFF

EVENT 3-

For this event we are going to go back into our Script Editor (F11).

On the left side scroll down until you find:

Scene_Title

Once you have clicked on it, on the right side scroll down until you find the comment '(Continue) Command'.
Below that you will see a line that starts with 'SceneManager.call', Highlight and copy that entire single line.

Yes, I could have just typed it out here, and you could have copied it off of this tutorial. However I feel that it is important to get comfortable navigating the Script Editor.

Let's make our third event on our map, this is our 'Load Game' event. So go ahead and rename it to load game.

In the Event Commands...
Tab 3 - under 'Advanced' - 'Script...'

Here we are going to paste that single line of code we have just copied from the script editor.

EVENT 4-

Again open up the Script Editor (F11) and again find:

Scene_Title

On the right side scroll down until you find the comment '(Shut Down) Command'

Once again a few lines below it is another 'SceneManager' this one says exit rather then call. Highlight and copy this entire single line. Then head back out to our map and create our fourth event. Much like the load game event we are going to go into the Event Commands and head to...

Tab 3 - under 'Advanced' - 'Script...'

Paste the single line of code here.

As a final note about events 2-4 in this example, you will want to make sure that the 'Priority = Same as Characters' and the 'Trigger = Action Button'

Part 2 - Step 2
It's time to make the title screen.

We now have the basic frame work for our title screen, this is the part that requires your creativity. How do you want to use these events? Are you going to make them into NPC's that will allow you to start, load or exit your game? Are you going to make them into doors that the player can enter to access start, load and exit? Are you going to limit the players movement and make a cut scene happen while they choose what to do? The options are nearly endless, however for this tutorial I'm going to use the 'Show Picture...' and 'Conditional Branch...' commands to make my simple custom title screen.

If you aren't quite sure what the next steps to turning this map into a title screen are, please continue this tutorial. However at this point the foundation has been laid and I consider the next part of the tutorial more an example then a tutorial, though I will try to present it as a tutorial.

If you want to follow along I have uploaded the images I made for this tutorial here:

CLICK HERE TO DOWNLOAD THE IMAGES USED IN THIS TUTORIAL

Click the Show button to continue this tutorial...
First I have laid out what I want my title screen to look like in a image editor, in my case GIMP.


You will note that I have added an 'About Game' Option to the menu. I did this because I am going to be using the direction the player is facing to determine what option is selected, however there are many ways to do this depending on how you want your title screen setup.

Next I have saved the different components of my title screen as individual .PNG images and imported them into the project. The image 'title_para.png' I have imported as a parallax background, 'tut_splash.png' I have imported to Title 1, everything else I have imported as a Picture.
*If you don't know how to import into VX Ace, you may be reading the wrong tutorial.

Now that the images are in our project we need to display them on the screen. To do this we are going to edit our first event. On Page 1 of our first event we are going to add these Event Commands:

Tab 2 - Under 'Picture and Weather' - 'Show Picture'

Number: 1 - Picture Graphic: title_foreground - Display Position - Constant X: 0, Y: 0
Number: 2 - Picture Graphic: new_game - Display Position - Constant X: 200, Y: 240
Number: 3 - Picture Graphic: load_game - Display Position - Constant X: 290, Y: 290
Number: 4 - Picture Graphic: about_game - Display Position - Constant X: 80, Y: 290
Number: 5 - Picture Graphic: exit_game - Display Position - Constant X: 190, Y: 340

Tab 3 - under 'Map' - 'Change Parallax Back...'

Graphic: title_para
Check the box next to 'Loop Vertical'
Auto Scroll: 2

By default the player is facing down, and because we will be using the direction the player is facing as our indication for what option is select we want them to be facing up when our title screen loads. So we must turn the player to be facing up. To do this head to...

Tab 2 - under 'Movement' - 'Set Move Route...'

Make sure you have the Player selected and not 'This event'

---------------------------------------------------------------------------------------

Now lets head to Page 2.

First set the 'Trigger' to Parallel Process.

Next we need to determine what direction the player is facing. To do this simply head to...

Tab 1 - under 'Flow Control' - 'Conditional Branch...'

This will open another window with 4 more tabs and a bunch of fuzzy options. For right now head to...

Tab 3

Mark the circle next to 'Character' and make sure 'Player' is selected.
Also make sure the check box at the bottom that reads 'Set handling when conditions do not apply' is selected.

We need to add four of these 'Conditional Branch...' commands, Facing Down, Up, Left and Right.

At this point the second page of this event should look something like this:


Finally, we need to indicate to the player what option is currently being selected. To do this we are going to change the tint of our option pictures. The 'Tint Picture...' Event Command can be found in...

Tab 2 - under 'Picture and Weather'

Facing UP = New Game
Facing Down = Exit Game
Facing Left = About Game
Facing Right = Load Game

I used the default tint while an option was selected, and simple put the Gray Color Tone slider all the way up when that same option was not selected. Your second page will end up looking something like this:



---------------------------------------------------------------------------------------
Part 3 - Step 1
Let's finish this sucker off!

We need to set the players start position to be on our new title screen map.

Next surround the player on all 4 sides with our events. Make sure the 'New Game' event is above the player, the 'Load Game' event is to the right of the player, the 'Exit Game' event is below the player and the 'About Game' event is to the left of the player...this is of course assuming you have made a 5th event on your map for the 'About Game' Option. This is what my 'About Game' Event looks like...



...however as I've said before this entire title screen is just a simple example, and you could do much more or even less if you wanted.

Finally open up the Database (F9).
and head to the 'System' Tab

Under 'Options' check the box next to 'Transparent ON'
Under 'Music' make sure no music is selected for 'Title Screen'
Under 'Title Screen' Select the 'Graphic' - tut_Splash, None and make sure 'Draw Game Title' is not checked.

Your tutorial title screen is now ready to be tested. With any luck it should turn out very close to the video at the beginning of this tutorial. A few suggestions that I didn't cover in this tutorial are:

Background music
Sound effects
Animated Events
and all the other great things you can do with events and even scripts when deal with maps.

Posts

Pages: first 12 next last
pianotm
The TM is for Totally Magical.
32388
Just my two cents: I was able to make a title screen perfectly using only this tutorial. And I've figured out different ways of making it just from the info this tutorial gives. For example, you could block the sprite so it can only walk up and down on a certain number of squares and each one he walks on selects an option. You could even turn him into a cursor and put him over the picture. I don't know what all the butthurt is about.

Edit:

@snehkstehr, I wish I could help, but I don't know how XP works.

I have something useful to add! If you want your cursors to make noise whenever you switch options, simply create a new event and set to parallel process. Create four conditional branches, each set to trigger for one of the arrow keys. Put your chosen sound effect in the trigger portion of each branch (add a short wait after each; 10 frames is good.). That's all there is to it.
Could someone tell me how to add the "New Game", "Load Game", and "Shutdown" functions in a map title screen in RPG Maker XP?
That's awesome! In 2k3 no less. You really can do some need things with maps as title screens, and imagine in the new RPG makers...not only are you unlocking events but also other scripts. You must have put a lot of work into getting that menu.
Rave
Even newspapers have those nowadays.
290
I understand concept behind maps as title screen pretty well - my previous project which ended only as demo (it's in Polish and I'd need translator to show it here) was made in 2k3 using BetterAEP by Cherry to make map as title screen. In the past I've even made RGSS script for XP that basically allowed for titlescreen made with events.

But yeah, you can do some really cool stuff with events that would be hard to achieve with pure RGSS. I think I'll record titlescreen of that 2k3 game I was talking about and post it here.
//edit:
Maybe I'll add it in. I feel like the tutorial is already pretty long. I'm not sure how many people make it through it because of that. maybe I can add it somewhere as a 'SHOW' button or something like the second half of the tutorial. I'd be excited to see the title you made out of a map. I have made a lot of them(not many of them find their way into the public eye though). The most recent one was on All Hallows Event '13 here at RMN. Once you understand the concept behind making maps into title screens, it really does feel like it opens up a lot of possibilities(of course scripting opens up those same possibilities :p ). Anyway, here's the video of the title I made for the contest, don't watch it all just the beginning for the title haha.

Rave
Even newspapers have those nowadays.
290
Thanks! Anyway, maybe you could make this part of the tutorial? It would help people who want something similar and don't have time to read comments.
author=Rave
How to make it so "current" title screen would disappear after some time so user won't have to press space?


That is a very good question Rave! :) I'm glad you asked. This can be accomplished with 4 very simple script edits...

----------------------------------------------------------------------------------

We are going to start by going back into the Script Editor (F11).

On the left side, scroll down until you see Scene_Title.
We will be working entirely within this section of script.

On the right side, we need to find the * Start Processing section.

Just below that we will find "create_command_window" (it should be roughly line 17).
We need to add a Hash tag '#' in front of it, so the engine does not run that section of the script.

When you finish it should look green, like this: #create_command_window

Now go to the end of line 17 and press enter.
This should add a blank space at line 18. Here we are going to type 'command_new_game'. This tells the script to automatically run the new game command without any user input.

We are half way done, however before you can run it we still need to change up 2 lines of code.

Next find the * Termination Processing section.

In this section, just under the word: super
add the line: 800.times { Graphics.freeze }

This is basically how we get the "Splash Screen" to pause for a few seconds before continuing to the title. It seems that about every 200.times = 1 second. So 800.times = 4 seconds, 1200.times = 6 seconds...and so one. This will be how long your "Splash Screen" will display until moving on.
If you didn't want a splash screen you could leave this line out and set your title graphics to 'None' in the database.

To finish this off, on the right side find the * New Game Command section.
It should be down around line 105ish

Within this section find the line that says 'close_command_window'.
As we aren't running the command window, we can't close it. So put a Hash tag '#' in front of this line to make it appear as a comment so the engine won't run it as code.

It should turn green and end up looking like: #close_command_window

----------------------------------------------------------------------------------

...and that's it! Now you can run a Splash Screen(or not) to your map title menu without the need for any pesky user interaction. I hope this helped Rave. If I can ever assist, let me know. :)



Rave
Even newspapers have those nowadays.
290
How to make it so "current" title screen would disappear after some time so user won't have to press space?
Great it Worked....
I had put all my events in a line at the top of the map, not thinking they need to be touched to activate them..Doh my brain must need oiling a bit lol.
Keep up the excellent work im loving the tutorials and learning loads.
Mike
Hey popsmike, I'm happy to help. Sadly I have to head to work shortly. However when I get off I should have more time to see what needs to be done. For right now however I would say...
1) Make sure your events surround the player start position so that it looks like a little plus '+' sign on the map and make sure the priority is set to same as character.
2) Make sure in your load game and exit game events that you have the right script processes. For example the the exit game event script should be 'SceneManager.exit'
3) If none of the menu command events are working check over the events sections of the tutorial again.
Sadly I'm more of a visual person, if you could take screen shots or upload a youtube video showing the map/events...etc. I could probably be more help. I have made several title screens using this technique, the latest being for my All Hallow's Event 2013: http://rpgmaker.net/games/5603/
It was fun, I made an animated T.V.
At any rate. I'll check in when I get off work today and see if any of my tips have helped, if not I'll see about getting into it more. Good luck my friend.
Hey guys how about a real question here to be answered please.
Im new to this game creation stuff and thought I would try this as my first intro into it.

I have followed it to a t as far as I can see but on completion it all runs and I get the arrow keys to do thier job as decribed but nothing happens from there when I press a key (Space or Enter) and was wondering where I have gone wrong or have I missed something like an event call.
Thanks in Advance...
I know he's banned, but just for the lulz I shall evaluate this elegant piece of 'legal advice' from the holder of a criminal justice degree FROM THE CYBER POLICE for purposes of entertainment on the intermenets not to be confused with legal advice from a real lawyer- but I can understand all of your confusion!

author=createdjusttopostthis
Well kentona you can think whatever you like but the fact is anyone can take any script on this site that does not have instructions and do whatever they want with it.


Except by using this website you understand all submissions by users not affiliated with the website give the website permission to publish, but allow the user to reserve all their rights rpgmaker.net ToS 6.

author=createdjusttopostthis
They can even copyright and legally sell them and there is nothing anyone can do about it.


Well, except sending C&Ds to the infringer's hosts, payment providers, etc.

author=createdjusttopostthis
Why, because when products are release for FREE or paid for, they are required to have 2 things, warning labels, and INSTRUCTIONS anything released without proper instructions is not a valid product and is thus not subjected to those laws.


I guess you didn't read rpgmaker.net ToS 9. either.

author=createdjusttopostthis
...Also in school you have to quote the source or something that is written, but this isn't a written aspect, this is about who legally gets credit. By your logic, anyone that gets a script working the author has to credit all those people whenever they use it because doing work to get it to work is the exact same thing as typing it all up and uploading it. You absolutely cannot one side this.


giaks could have written his tutorial by tap dancing on his keyboard while huffing air duster cans and it would still be legally the copyrights under a pseudonym "giaks". But you knew that, knowledgeable in copyright law as you to have read even the basic guidebook from the US Copyright Office.
I have to admit I'm sort of flattered about all this.

The law in general is shifty, copyright law being among some of the most slippery. So I won't get into copyright. I will say that as far as this tutorial goes, it is based out of logic...so I would like to believe that anyone could have come up with it, and I personally hold no copyright to it. The 'scripting' I used was provided in the default engine script provided by Enterbrain...so that may have to be taken up with them.

I am pretty confident that no law exists pertaining to the requirements of posting tutorials or the like online. Without getting into the semantics about what the word 'tutorial' means and personal opinions as they apply to the interpretative nature of communication. It seems that the author of anything online has the right to write as little or as much as they feel necessary to portray their ideas, just like the reader has the right to not understand and get frustrated because they don't get it. Sadly I believe this is one such case.

I would also like to point out that there is indeed small print...

author=ME, I wrote this.
Next I have saved the different components of my title screen as individual .PNG images and imported them into the project. The image 'title_para.png' I have imported as a parallax background, 'tut_splash.png' I have imported to Title 1, everything else I have imported as a Picture.

*If you don't know how to import into VX Ace, you may be reading the wrong tutorial.


I have of course enlarged the small print...so it is no longer small, however if you want to read it for yourself, click the button to the second part of the tutorial and presto! You may now see the small print(be it small, it is still print). This can be verified in your video as well. I point this out because it amuses me.

Finally, the law that is prominently subject in this case is about hacking. All this other stuff aside I would caution you as hacking is not so much a slippery slope. I would like to point out that usc title 18 part 1 chapter 47 section 1030 is all about it. As someone with a degree in criminal justice I would have expected you to play your cards a little closer to your chest, and not openly threaten to hack a website. I will close by saying that I do not consent to having this page, or any other page I post on this website or any other website, hacked. I can not speak for anyone else involved in this website, though logic would lead me to believe they feel the same. That being said, it is entertaining thinking that the clock may be ticking...tick tock.

I would like to get the posts on this tutorial back to being about this tutorial, be it opinions about its flaws or questions about...stuff. I rather enjoy discussing stuff.

...as really quick final side note, good luck to Nicholas Power. I hope they will not be infringing on copyright.
Instructions unclear. I now own your script.
Hey it is the RM edition of
Solitayre
Circumstance penalty for being the bard.
18257
author=createdjusttopostthis
While I don't agree with some of the stuff MPC4utube talks about,


Well you would know, wouldn't you.

Stop spamming up this tutorial, nobody cares about this but you.
Oh, did you go to Upstairs Hollywood Law School, too?

I'll ask again, can you show me the statutes? The ones that say "You are allowed to take credit of another's work, as long as it was hard to implement in your own work."


EDIT:
PS, I'm an astronaut.

This is posted on the internet, therefore must be true.


EDIT2:
As far as I can tell, the warning you are giving is "Don't post free scripts for RPG Maker on the internet, else some kid will claim your work as his own! And he might be an idiot, so this is bad for you, for reasons!"
You internet kids are all the same, you think you know how things work and then you find later on you know nothing. The difference between you and I, is that I have a degree in criminal justice, and I also work closely with several legal entities regarding internet and copyright law. Not that I'm better than you or anyone, but the point is that I know exactly what I'm talking about, and you do not. You're free to disagree with what you want, but you're in for a rude awakening if you think what you're saying is correct.

When you find out you're wrong, don't say you weren't already told.

BTW stop getting your legal information from places that really know nothing about the law and there is a significant difference between how people think law works, and how the law actually works.

Have a good night.



Good thing that all of the tutorials and scripts on here have instructions then! I will get to work on adding a warning label to all script pages that says: "WARNING! The use of this script should not be attempted by idiots with a limited grasp of copyright law! Do not print this script, tape it to a toaster, plug toaster in and throw it in a bathtub, and then jump in! Not to be used as a personal flotation device."

And yes, the person who did the work writing the script will get the credit. Just like you say. Copying it to your project and "getting it to work" does not transfer credit to you.

Are you 12? (and I would use phrases like "by your logic", but as far as I can tell, you aren't using any logic in your arguments)
Pages: first 12 next last