[Scripting]Advanced Windows, A tutorial from the Script Builders Options

[The Law G14]

The Script Builders' Tutorials:
----Lesson 3: Advanced Windows----

I. Introduction
II. Using the Draw methods
III. Showing Pictures
IV. Window Opacity
V. Conclusion
VI. Homework


I. Introduction

Hey R3! Welcome to the third lesson by the Script Builders. So far, we know how to make Basic Windows and Selectable Windows. In this tutorial we’re going to be learning how to display useful information, not just text. Also, in this tutorial, I’m going to be teaching you guys in a different fashion. There will be three mini lessons inside of this lesson which are ‘Using the Draw methods’, ‘Showing Pictures’, and ‘Window Opacity’. Why am I doing it like this? Two reasons. One, it’s a more effective way to teach you, rather than just me making a script and showing you what everything means, I’ll be showing you guys how to manipulate each part so that you have a better understanding of everything. And two, I’ll feel better when you give in your homework as I’ll know you didn’t just copy the script I made at the end and just change around the values, since there will be none; rather you will actually be thinking about how you can put the pieces together from the three mini-lessons into a script. Without further ado, let’s begin the tutorial


II. Using the Draw Methods

The draw methods are very useful tools when making your windows. Remember from The Basic Windows tutorial that methods are blocks of code you can reuse throughout your script. Examples of these draw methods include:

CODE

draw_actor_hp(actor, 0, 0)

CODE

draw_actor_state(actor, 0, 0)

The preceding codes are used to draw the hp of an actor and their state. The parameters, the values inside the parenthesis, of the two methods are from left to right: the actor being passed through the method, the x coordinate of the text, and the y coordinate. You can find all the draw methods from lines 102 to 321 of Window_Base.

Now, without further ado, let’s utilize these draw methods!

First of all, take out that Window Base Outline from Notepad and open it up. Copy it into the script editor of a new rmxp project and put it right above the Main script. Name the script “Advanced Window” in the space provided below the Main script.

Now, on line two of the script, type in the name of our class after the comment symbol, which is going to be ‘Window_Advanced’. On line four of the script, type in a simple description like “This class uses the draw methods”. Now, on line seven of the script, which starts with ‘class’, change the line to this since we are inheriting from Window_Base:

CODE

class Window_Advanced < Window_Base

Now, before we continue our script, we have to have a clear idea on what we are going to make. Since we plan on showing actor values using our draw methods, let’s make a basic hud that shows the HP, SP, Exp, and name of the first character in your party (We’ll get to showing huds that go for all four party members in later tutorials). So, our window shouldn’t be that big. For our x coordinate and y coordinate (first two values in the parenthesis next to the super keyword) let’s leave them at 0 so that we can have our window in the upper left corner of the screen. Our width (third value) should be about 200 and our height (last value), should be about 150.

Now, let’s move on to our refresh method. To start out, let’s write out our actor’s name on the first line of our window. The code to draw an actor’s name is this:

CODE

draw_actor_name(actor, x, y)

Put this line of code after this line

CODE

self.contents.clear

But wait, why is ‘actor’ left as the first value in the parenthesis of the draw_actor_name method? We haven’t assigned a value to it so what’s it doing like that? Well, why don’t we assign a value to ‘actor’ so that we know what actor we are drawing the name of? Before the draw_actor_name line, put this line of code in:

CODE

actor = $game_party.actors[000]

This line of code allows us to go through the actors in your $game_party and in the brackets, we’ve chosen the first actor in our list of actors in the database. If you’re in a new rmxp project, that means we just chose Aluxes, which means that our draw_actor_name method will draw Aluxes’ name which is Aluxes.
Next, change the x value to 0 and the y value to 0 in the draw draw_actor_name parameters so that our text is at the upper left corner of the screen.

Now, all we have to do is space out the rest of our text by about 30 pixels. So, basically, we would just copy the rest of the draw methods we need under our draw_actor_name method to essentially have three more lines of code under our draw_actor_name method. These three lines would look like this:

CODE

draw_actor_hp(actor, 0, 30)
draw_actor_sp(actor, 0, 60)
draw_actor_exp(actor, 0, 90)

As you may notice, the only change we have done inside the parameters is increase the y value by 30 pixels by each line of text. By now, your script editor should look like this:

[Show/Hide] Big Image

If it does, move on to showing the window using events like explained in the past two tutorials (so I shouldn’t have to explain it again). Your ending result should look like this:



If it does, congratulations, you’re one step closer to making complex windows


III. Showing Pictures

This mini-tutorial is fairly hard to grasp, but hopefully, you’ll be able to follow along my explanations.
First of all, open up your script editor in a new rmxp project and go to the Window_Gold script. To make a picture, you need to define a method which I’ve learned as the draw_picture method (yes, this is technically a draw_method, so you can put it in the Window_Base script if you’d like so that you don’t have to define it all the time). After line 15 of the Window_Gold script, make a space to put this line of code in:

CODE

def draw_picture(x, y)

As you can see, we’ve just defined a method called draw_picture and we set its parameters to x and y which will come to use later in our code.
Next, add this line in:

CODE

bitmap = RPG::Cache.picture("")

This line assigns a value to the bitmap variable. The value assigned is a picture in the pictures section of our recourse manager. The way the system knows what picture we are talking about is by placing the name of the picture inside the quotes of that line. So, save this picture (I know random):

In the pictures section of your recourse manager and then inside the quotes of that line we just added, put the name of what you saved this picture as. I called mine ‘picture’, thus the line we just added, I would change it to this:

CODE

bitmap = RPG::Cache.picture("picture")

After that line, add this line:

CODE

src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)

What does this line do? Well, we just assigned yet another value to another variable. This value assigned is a rectangle. Yup, you heard me. When you say Rect.new, that means you’re drawing a rectangle which is where we will show our picture. When you make a new object of the Rectangle class, you have to define its x and y coordinates, its width and height. Well, for the width and height, all you have to do is make it the same of the width and height of our picture. So, it would be bitmap.width and bitamp.height since we assigned our picture to the bitmap variable. Just leave your x and y values as zero since they are just dummy values, our real x and y values will be defined later.

The last line of our method is this:

CODE

self.contents.blt(x, y, bitmap, src_rect)

Add this line after that last line we just added. What this line of code does is put everything together. It makes the image set at its x and y values (which will be defined later), the image to draw, and the rectangle to draw on.

After that line, put the ‘end’ keyword to show that we closed our method. The last thing we need to do define our x and y values which will happen in our refresh method like any other draw_method.

Add a space after the self.contents.clear line and put this line of code in:

CODE

draw_picture(x, y)

Change the x and y values to whatever you like (I did something simple and put them both at zero). So, our script editor should look similar to this:

[Show/Hide] Big Image

Go to your menu to see if there is a picture in the gold window. If there is, then congrats, you know how to show pictures now!


IV. Window Opacity

This mini tutorial should be very easy for you to grasp. First of all, go the script editor in an rmxp project and go to the Window_Item script. In this mini-tutorial, we’ll be basically talking about how to change the opacity of windows. Go to line 15 of the script and make a new line after it to paste in this line of code:

CODE

self.back_opacity = 0

What this does is make the window (self) change its back opacity (which dis-includes the white border around it) to zero (which means it is completely transparent). Test run your game and go to the item screen and you’ll notice that the bottom window is completely black with a white border around it. Try playing around with the opacity to see the effect.

Go back to the Window_Item script and change the line we just added to this:

CODE

self.opacity = 0

This code includes the white border on the window so that the bottom window in the item screen is completely black. Just check it yourself, test run your game and go back to the item screen and you’ll notice that the bottom window is completely black. Play around with the opacity to see what happens.


V. Conclusion

Hopefully, you’ve guys grasped everything I’ve said, and if not, don’t worry at all. Just reread the tutorial as this tutorial is a very hard and complex one. If you have any questions, please post. Now for a summary of what you have learned:

• The draw methods are useful methods that you can use to show a bunch of information on your window such as hp, sp, exp, etc.
  
  
• You can create your own draw methods, just be sure they are useful enough to belong in that category.
  
  
• You can show pictures using the draw_picture method and change its x and y values in the refresh method of your window.
  
  
• You can change the opacity of your windows in two ways. One way is by using the self.back_opacity code that affects the opacity of a window except for the border around it. The other way is the self.opacity code that changes the opacity of everything on the window.
  
  
• You can edit pre-existing scripts to show pictures, change opacity, edit values, etc.

VI. Homework

Combine everything you’ve learned in this tutorial to make some great windows. Good techniques you can use is making your window completely opaque and then putting a picture on it so that the background would be a picture instead of a window. You can also use the draw methods to show actor stats and then putting icons as pictures in front of them. Try your best to amaze me and just do what you can to show that you have mastery over windows.

[BigEd781]

The example shows the method as $game_party.actors, plural, not "actor", singular.

[MetalnosX]

The example shows the method as $game_party.actors, plural, not "actor", singular

Woops sorry i know it was "actors" but it still have the same problem? Have at the image now.

This post has been edited by MetalnosX: Nov 16 2009, 11:00 PM

[BigEd781]

The example shows the method as $game_party.actors, plural, not "actor", singular

Woops sorry i know it was "actors" but it still have the same problem? Have at the image now.

Hmmm, not sure then, we will have to wait until someone who knows XP comes around. I have never written scripts for XP, and in VX there is a global collection named $game_actors from which you get actor objects.

[MetalnosX]

The example shows the method as $game_party.actors, plural, not "actor", singular

Woops sorry i know it was "actors" but it still have the same problem? Have at the image now.

Hmmm, not sure then, we will have to wait until someone who knows XP comes around. I have never written scripts for XP, and in VX there is a global collection named $game_actors from which you get actor objects.

Well im using VX and the problem is in VX not XP so yeah.

[BigEd781]

Well im using VX and the problem is in VX not XP so yeah.

This tutorial is for XP, so using $game_actors[id] will solve your current problem, but in general XP scripts are not compatible with VX.

[MetalnosX]

Well im using VX and the problem is in VX not XP so yeah.

This tutorial is for XP, so using $game_actors[id] will solve your current problem, but in general XP scripts are not compatible with VX.

Yeah i think your right. I have alot of problems right now with this XP script. So should i wait until there is a RGSS2 Script tutorial like this or should i try to change to my script to be able to work on VX?