[Tutorial][RGSS] Image Title Screen

[wyatt 0]

I am going to show you how to edit one of the default scenes of RPG Maker XP to add a bit of originality and glamour to your project.

 

Image Title Screen

 

What we are going to do is show a different image for each selection. I was going to make this as a script but decided a tutorial might help.

 

Sprites

 

A sprite is an image with some functions along with it to manipulate it.

 

If we look at lines 34-35 of Scene_Title we find:

 

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

 

This creates a new sprite and assigns the system title screen image to it's bitmap.

 

While the sprite is in the scene we can change this bitmap however we want.

 

RPG Cache?

 

To speed up load times RPG Cache is used. See the help file for more information, there are detailed explanations of the RPG class and it's methods.

 

$data_system is an object with various attributes assigned to it. Here title_name is the name of the file for the title screen.

 

Command Windows

 

Head down a sec and we'll find a command window.

 

	s1 = "New Game"
s2 = "Continue"
s3 = "Shutdown"
@command_window = Window_Command.new(192, [s1, s2, s3])

 

s1, s2, and s3 are variables assigning words to display for the three actions.

 

Ignoring the 1, 2, 3 numbering system for a second, because it will confuse matters, the actual command window itself has an attribute called index. Index defines which of these words is currently being pointed to.

 

Indexes start at 0. They can actually include -1, which means basically "no selection", used for when a command window is inactive. Anyway.

 

-> index

0: "New Game"

1: "Continue

2: "Shutdown"

 

We can use this to our advantage to create this new gimmicky feature.

 

Update

 

Scroll down to line 91 and you will find the update method. Every frame, this is called, and it basically changes what is in going on in the scene depending on what we have chosen and so on.

 

We can use a select case to "do things" depending on the value of @command_window.index, so let's see how we do that. This is used later on to "do things" when enter is pressed.

 

Insert below "def update":

 

#...

 def update


case @command_window.index
when 0
  # do something
when 1
  # do something else
when 2
  # do something completely different
end

#...

 

Hopefully it is easy to understand, but basically this system is saying:

 

"What is command window's index value?"

"If it is 0, do something"

"If it is 1, do something else"

"If it is 2, do something completely different"

 

# symbol defines a comment - i.e. this line is ignored. This is used to explain what a line of code does - for both yourself and/or any members of your team or anyone who later has to help you with your code.

 

 

Changing our Images

 

Now that we know how to test for the index we can do something with it.

 

Create three images in the titles folder. Assign the first as your system title.

 

- title.png

- title_continue.png

- title_endgame.png

 

They should all be descriptive of what is happening.

 

 

If you remember, before I said we can change the bitmap attribute of Sprite however we want.

 

 

#...

 def update


case @command_window.index
when 0

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

when 1

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

when 2

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

end

#...

 

What's going on there?

 

$data_system.title_name is a string, i.e. "title" in this case (as that's what we set our system title to). We can add or subtract from this as we like with another string.

 

"title" + "_continue" # = "title_continue"

 

RGSS automatically finds the file "title_continue.png" in this case.

 

 

Removing the command window

 

We may wish to remove the command window, or at least hide it.

 

To do this we will access an attribute of the Window class, in this case opacity. Opacity defines how "visible" an object which uses it is.

 

So what can we do? Opacity ranges from:

 

255 - completely visible

127 - about halfway

0 - invisible

 

Any value can be used of course. In this case, we want 0.

 

 

Find the following lines:

 

	@command_window = Window_Command.new(192, [s1, s2, s3])
@command_window.back_opacity = 160
@command_window.x = 320 - @command_window.width / 2
@command_window.y = 288

 

After this we can set some more attributes. Here you can see back_opacity has already been set. This is the opacity of the background of the window (funnily enough), as well as the x position and y position.

 

For cleanliness, let's remove those three lines, as they are irrelevant now that we are hiding the window.

 

Instead, let's change the opacity attribute to 0:

 

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

 

 

There you have it!

 

Now see if you can put this to work in some new systems.

 

How about a shop which has a different background depending on whether you are buying or selling? What about a battle system with a different battle backdrop if it is a surprise attack?

[Kiriashi 117]

Nice tutorial!

 

Thanks for posting, Wyatt!

[Broken Messiah 20]

Believe it or not I was just wondering how to do this.

[ianeli 0]

Wow this adds a fantastic twist on my title screen, thank you so much :biggrin_002:

and nice tutorial too :alright:

[Kiriashi 117]

Please don't necropostjust to thank the author. Thanks.

 

 

http://www.rmxpunlimited.net/rules-and-policies#necroposting