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

[The Law G14]

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.

[Holder]

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.

[The Law G14]

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

[crimson_plague10...]

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

This post has been edited by crimson_plague101: Nov 15 2009, 07:50 PM

Attached File(s)

 Untitled.png ( 49.72K ) Number of downloads: 40
 Untitled2.png ( 59.52K ) Number of downloads: 35

 

[Lato]

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

[MetalnosX]

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.

[MentalSickness]

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

[The Law G14]

@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?

This post has been edited by The Law G14: Nov 16 2009, 01:30 PM

[BigEd781]

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:

CODE

actor = $game_party.actors[000]

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

CODE

5 + 10   => 15
5 + 010 => 13
5 + 008 => ERROR!

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

[The Law G14]

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?

This post has been edited by The Law G14: Nov 16 2009, 01:53 PM

[BigEd781]

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:

CODE

actor = $game_party.actors[010]

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:

CODE

puts 5 + 010  #prints "13", not "15" as one might expect

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

[The Law G14]

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

[MetalnosX]

Okay here is one of my problems:

Look at my Attachement

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

Attached File(s)

 Prob.bmp ( 142.4K ) Number of downloads: 14

 

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

[MentalSickness]

@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?

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? ><

This post has been edited by MentalSickness: Nov 17 2009, 10:18 AM

[The Law G14]

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

CODE

class Window_Advanced < Window_Base

Put in these two lines of code:

CODE

attr_reader   :actors
@actors = []

@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:

[Show/Hide] Script

CODE

#==============================================================================
# ** Window_Advanced
#------------------------------------------------------------------------------
# This class uses the draw methods.  
#==============================================================================

class Window_Advanced < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(0, 0, 200, 150)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    actor = $game_party.actors[000]
    draw_actor_name(actor, 0, 0)
    draw_actor_hp(actor, 0, 30)
    draw_actor_sp(actor, 0, 60)
    draw_actor_exp(actor, 0, 90)
  end
end

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

This post has been edited by The Law G14: Nov 17 2009, 01:45 PM

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