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:





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:



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:



Put this line of code after this line



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:



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:



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:



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:



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:



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:



After that line, add this line:



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:



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:



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:



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:



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:



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.

Updated the tutorial a bit. And also....over 30 views and no responses...I was hoping I could at least get some feedback. I worked really hard on this tutorial, and I really want to see what you guys can make out of it.

I've got quite a bit of catching up to do, Presentation wise it's perfect, I think this is the time when most tutorials stop. Could be because people haven't caught up with the rate that you're creating them, so I'd not be discouraged by that.
People cry out for advancing tutorials but all there seems to be are beginner types without major practical involvement.

You're doing a great job.

Ah, thanks Holder Yeah, it's probably because people aren't reading them at the same rate that we are creating them at. I guess we should go a little slower at the pace. Hopefully I can get some homework in soon as this tutorial is essientially the tutorial that tells if you really get everything so far

well here is my homework law i done the best i could with the knowledge i got from it.

Grade please be harsh if you must!!!

Hmm very interesting, its always good to get more info about how to script, I find it alot better for me to learn from the scripts ppl post in demos but its great ppl are putting out dif ways of doing and understanding it, great job i been reading over them and hope to see more

Hello! Anyway can this tutorial work on RPG Maker VX? I'm not used to XP and i tried the tutorial with VX but having some problems. But when i put it in Xp it works! Can anyone help?

PS: If you want to know which problems i'm having, just tell me.

This tut really helped me ^^
But, a problem O:
I tried doing the hp mp and exp window thing, and this is what happened:

I did it exactly like the script you created, and it still happens..
So.. if you'll tell me what's the problem, It'll be great
Btw, this is my script, maybe I have some errors that I didn't see ><

@Crimson: The first screen is very exellent, glad to see that you are editing default scripts like that. Once you start doing that, you'll be scripting in no time as editing the default scripts is exellent practice. Your second is pretty good as well, I like how you put in that face graphic. However, try not to have extra window space if you're not going to use it. Also, instead of just putting the state of the actor like that, try putting something in front of it like a string of text that says 'State:'. Then people would have a clearer idea on what '[normal]' meant. All in all, great job, man

@Lato: Thanks for the kind words Lato, I appreciate it alot

@MetalnosX: Yeah, just tell me what the problem is and I'll try to help out. This tutorial shouldn't be that much different with VX, however, so it'll probably only require a little tweaking to have it compatible with vx

@MentalSickness: What version of rmxp do you have as in your first screenshot, the button on the error screen definitly does not look English. Do you have an English copy of rmxp?

Very nice tutorial, you obviously put a lot of thought into it. I didn't have time to read through everything, but this line caught my eye:



I would advise against using the form "000" or "001" etc. for integral constants. The problem is that Ruby interprets any integral literal with a leading zero as an octal (base 8) number, so while 001 is still 1 in decimal, 010 is actually 8 decimal, and 008..009 do not make any sense and will cause a runtime error. So...



Anyhow, just a word of caution here because beginners will have no clue as to why using $game_party.actors[008] causes an error, or why $game_party.actors[010] returns the wrong actor. Otherwise, great tutorial

Hey, BigEd, your that great scripter, nice to meet you

And thanks for the tip, so should I just let it be [0] instead of [000] er something else?

Yes, unless you actually want to use and manipulate base 8 numbers (which is *very* unlikely in Ruby), no integer literal should have a leading '0'. Perhaps a better example is this:



Now what does that actually return? It returns the actor with an id of 8 in the database, because in base-8 land, 10 = 8 decimal. Also, like I stated previously, using something like '008' will actually throw a runtime error because '8' is not a valid digit in a base-8 number system. You can fire up irb and try something like this to see what I mean:



P.S. I'm not sure how great I am, but thanks for the compliment

Thanks for all the help BigEd, I think I fully understand this concept now. Thanks again for the great advice and tips

Okay here is one of my problems:

Look at my Attachement

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.

Umm.. I think I have an english copy.. maybe because I'm from isreal? O:
And the version I have is 1.02a
Does that help? ><

@MtealnosX: After the line of your script that says this:



Put in these two lines of code:



@MentalSickness: Hm...I have the same version as you so it couldn't be that, but I don't know if it has to do with you being from Isreal. Try replacing your script with this:



EDIT: Also, what does your Window_Base script look like and do you have any other custom scripts?

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.

Umm.. I found the problem with my script, I wrote "intialize" instead of "initialize".. "^^
So.. thank you very much
It works now ^^

@MetalnosX: Did you look at my last post because I think that just might be the solution to your problem.

@MentalSickness: Oh, wow, lol, that's one of those things that would be almost impossible to find. But I'm glad you found out what the error was. For future references, when you are debugging window scripts, check out this tutorial by another member of the Script Builders, NightShade, on how to find errors in your window scripts: http://www.rpgrevolution.com/forums/index....showtopic=36295

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?

Yeah I've already read it ^^
I've read all your tuts

@MetalnosX: I'll say it again since you keep looking over my posts lol:


After the line of your script that says this:



Put in these two lines of code:




@MentalSickness: Oh, lol, that's cool and can you show me a screenshot of your script?

Umm.. sure yeah :]
I didn't add much, just gold and class..
Just wanted to check if I can add more commands and a picture :]

Well you did great

I love the fact that you put a picture next to the class and added the gold, looks great, and I don't see any problems

Srry i did what you said before and it didnt work. But that was my old script now i put it into a new fresh script and now its workin. The other script i made had tooo mant problems. Thanx for help me and thanx BigEd

Thanks, :]
But I have question, is there a way to make the sword picture come along with the class command everytime I use the class command instead of just adding the sword pic in a drawing command?

Yeah, you would have to edit the preexisting code for the draw_actor_class method. So, go to line 131 to 134 of the Window_Base script and add the picture code you used there so that everytime you call the draw_actor_class method, the sword picture would appear

Ooo, that's nice
Thanks ^^

EDIT:
Umm.. I guess I still don't really know how to do that yet "^^
When I change it, it doesn't show anything, not the pic and the not the class name :|

lol, try this:

I thought about switching back to XP for my RPG(since it'd take forever to get everything scripted) and this a very nice tutorial.
I'll post in a few hrs with what I've learned!

Going to try out this tutorial tomorrow it looks interesting.

... Finished.. I was one slow guy with this one...

@Rukiri and BioWolfz: Thanks guys, I'm glad you guys like the tutorial. Hope you learn something from it

@Red Knight: Wow, this looks great Red Kinght, and I see that you've played around with the window opacity, great job Also, as a little critique, it's good to stay consistent when scripting things so you should try to make "State:" and "Class:" in blue text as "HP", "SP", and "E" are all blue as well. All in all, great job man

Thanks for the suggestion, I forgot all about the text colors.

Much better, looks great Red Knight

This is really nice, I'll try it out now.
Thanks for sharing.

Um i'm having a bit of an issue here. Whenever I call Hero_1, Hero_2, and Hero_3, they all come up and after a while, Hero_1 and Hero_2 go down and Hero_3 stays up. What am I doing wrong?

Here's the script:



That's just the main, non commented stuff.

Are you sure that you made your event also dispose of Hero_3?

I didn't make it dispose of anything. I didn't want it to.

Hey, sorry for the late response, kept forgetting to reply



So what does your event look like, then?

That's what the common event looks like. It turns on using a switch.

Except it wasn't supposed to have that dispose in there, and it's supposed to be Autorun. I wonder who changed it *looks at brother*

Ah, I see the problem. You're event should look like this:



The problem with yours is that you keep reassigning $window so that when you dispose $window, only Hero_3 is diposed so we have to make three seperate windows and dispose all three seperately.

But I don't want them to dispose. I added that at the bottom. I want them to stay there so you can look at them forever if that switch is on.

Then it should look like this:

Even though I do have it like that, it still takes out the first and second one and keeps the third one up. WHY?

Do you want the first and second windows to go away or is it a matter of whether a switch is on or not. So basically, when a switch is on, do you want the windows to pop up and if the switch is off, you want the windows to go away?