The Script Builders' Tutorials:
----Lesson 1: Basic Windows----

I. Introduction
II. The Window Creation Story
III. Inheritance
IV. Set-Up
V. Making Our Window
VI. Showing Our Window
VII. Adding Content to Our Window
VIII. Conclusion
IX. Homework


I. Introduction

Hey everyone This is the first tutorial of the several that will be created by the Script Builders. In this tutorial, we’ll be helping you guys get familiar with Windows. At the end of this tutorial you should be able to make your own windows that can show text that you can call upon once you interact with an event. I’m gonna try my best to have more code then talk in this tutorial, but if I don’t, please bear with me


II. The Window Creation Story

You may not know it, but windows are one of the most vital aspects of rpg maker xp. Without windows you wouldn’t have a menu, a message system, huds, shops and ect. Basically, to explain what windows are in a nutshell, they are surfaces that you can draw information on. In RGSS, there are two types of windows: Window_Base and Window_Selectable. Let’s think about it like this: Once upon a time, there was a man named Window. He was getting old and wished to have a child. So, he decided marry a lady named Syntax, and soon after, had a kid named Window_Base. Window_Base was raised properly by his loving parents and soon got married and had several children such as Window_Gold, Window_Menustatus, and more. But one of kids was…odd. His name was Window_Selectable and he carried extra traits besides the ones that his mother, father, and siblings carried. He was able to create selections on the windows that he created. His family shunned him for his abnormalities and the sad Window_Selctable went off and got married to restore his happiness. He had several children as well who carried his traits. His children included Window_Command, Window_ShopCommand, and more. So…how do I know that? Who do I think I am to tell you guys who Window_Selectable’s father is or Window_Base’s? Well, that’s because I have evidence.


III. Inheritance

Open up an empty rmxp project and press F11 to open up the script editor. Scroll down to the Window_Base script and click it. On line 7 of the script, there is something that looks like this:



This line of code tells us that Window_Base is Window’s son, or Window_Base is a subclass of Window. If you look at the Window_Gold script, you’ll see something similar on line 7:



What it shows here is that the Window_Gold class is a subclass of Window_Base. When a class is a subclass, it carries all the same methods from the old class. Basically, the subclass caries all the same traits from the old class plus new traits that you can define yourself.


IV. Set-Up

I’m pretty sure I’ve bored you guys enough with that big wall of text but now we’re finally gonna get to the code 

Alright, first of all, we have to make a new blank page in the script editor. If you haven’t already, make a new rmxp project and press F11 to open the script editor. Scroll all the way down to the script that says Main. Right click it and press insert. Now you should see a blank space above Main, click it. Now look down under Main and you should see a blank space where you can type. In there, type the title of our new script: Custom Text Window. After you name your window, to the right, there should be a huge white sheet of space for us to start typing our script. Before we begin, we need to know who the father or the super class of our script is going to be. Since this window we’re going to make is just gonna show information and not going have choices for you to choose, then the super class of this window is going to be Window_Base. Since that’s out of the way, it’s time for me to give you the outline that you usually use when making a window script that is a sub class of Window_Base:



First copy this outline into a blank notepad file and call it Basic Window Outline. You should do this so that you can just copy this outline from notepad every time you need it. Now, copy this outline into that huge white sheet of space that I was telling you guys about in the script editor. You should be at this step as of now:



Let’s start making our window!


V. Making Our Window

First, let’s start off with lines 1 - 5 of the script. The # symbol means that the rest of the line will be a comment. Comments don’t change the outcome of a script, their only purpose is to help people understand your script better. Try your best to comment often but not all the time. Well, we see that on line 2, there is a comment symbol and two asterisks. Here goes the name of our window class that we plan to make show some text. Let’s call it Window_Text. Now, on line 4, there should also be a comment symbol. In here, we’ll write the description of our class. Just right something like “This class displays text in a window”. Now let’s go down to the line that starts with class. Class is a keyword in Ruby/RGSS. It’s the keyword that you use every time you define a class. Since in our comments, we said that the class name was going to be Window_Text and since we said that this window is going to be inherited from Window_Base since it only displays information, this line should look like this:




Good, now we have all that class coding down, let’s move on to the script’s methods

First of all, what is a method? Well in Ruby/RGSS a method is basically a block of code that you can call though out a class. An example would be something like:



What this simple method does is print “Hello” unless the A button is pressed. The way you call a method in your script is by writing its name. Something like:



What happens here is that we keep printing out text until we get to stop_print which gives us the option to press A and not print that line of text.

Now, that we have a basic understanding of methods, let’s get back to our code, shall we?

The initialize method is in every window class. Just look at the Window_Gold or Window_PlayTime scripts and you’ll notice that the initialize method is in both scripts. The initialize method defines the properties of the window. The first line of this block of code says this:



This just tells us that we are making a method called initialize.

Next we have the line that starts with super. Super is a keyword that calls a method from the class that this class inherits from. So, basically, in this case, it’s calling the initialize method from Window_Base class so that we can define the x-coordinate, the y-coordinate, the width and the height of our new window. Since this is going to act as a normal text window, let’s make the x-coordinate 0, the y-coordinate 320, the width 640 and the height 160. Try playing around with these values so that you can get a better grasp of manipulating window properties.

Next we have that line that starts with self.contents. This line basically just initializes our window from the values you just put in and makes a bitmap out of it. After that, our refresh method is called and the method is ended with the end keyword. Your script should look like this as of now:




VI. Showing Our Window

Alright, now let’s see what we have made so far. Press OK on the script editor window to close out of it. Now press F8 to have your events layer opened up. Double click on any random tile to open up the Event Window. On the left side of the window, there should be something labeled ‘Graphic’. Double click on the box under that to open up your list of character graphics. Choose the second one called 002-Fighter02 and close out by pressing OK. Now, go to the right side of the Event Window to the List of Event Commands and double click any random space there to open up the Event Commands Window. Go to page three and click the last command that says ‘Script…’. Now the Script Window should be opened. Copy this piece of code in:


After this, press OK and then double click that space in the Event Window labeled: List of Event Commands again and go to page one and click the sixth event command down called ‘Wait’. Set the value to 40 frames and click OK. Lastly, add one more event command by going to the third page of the Event Commands window and clicking the script command again. Copy in this piece of code:



Now press OK and check to see if your event window looks like this:




Now that that’s over, press OK on your event window to close out of it and press F12 to test run our project. Be sure to save if it asks you to.

Go up to the event we just made and press the action button on it. A window should appear at the bottom of the screen and disappear after about 2 seconds. If that’s the case, let’s continue on with this tutorial, if not, try rereading the tutorial from the part we started creating our event at.


VII. Adding Content To Our Window

Now it’s time for the last step of our tutorial. We need to edit our refresh method. Open our script editor (F11) back up and go to line 19 of our script. We’ve already discussed what these types of lines are; they simply use the def keyword to show that we are defining a method and then gives the name of the method which in this case is ‘Refresh’. On the next line, we have something that looks like this:



This line simply clears our bitmap/window that has been made so we can start drawing some text. Now, add a new line after this line by pressing enter at the end of it and copy this line of code in:



This line tells us that we are going to draw text in our window. The values in the parentheses going from left to right are the x-coordinate, the y-coordinate, the width, the height, and finally the string of text. Try playing around with these values to get a gist of what they do. Next, add these lines of code after the one we just added:



On the first line of this code, we have changed the color of our next string of text to ‘system color’ which is like a bluish color. After that, we add another string of text that also says “Hello World” but now at an x-coordinate of 150. The next line after this, we change our font color to the ‘knockout color’ which is a red color. Like before, we add another string of text that also says “Hello World” but is now at an x-coordinate of 300. Finally, we change our font color to crisis-color which is a yellow color. After this, we draw our final string of our “Hello World” text at an x-coordinate of 450. Also, as a side note, to know what type of colors you can use for your font, just go to the Window_Base script and look at lines 61 – 90.

Your script editor window should look like this:



Now let’s save our project and test run our game again (F12). Go up to that event we created and press the action button to reveal the window we have drawn on. It should look like this:




If it does, then you have successfully made your first window!


VIII. Conclusion

Hopefully, I was clear enough in this tutorial for you guys to follow along with ease, if not, I apologize. Hopefully you’ve learned a lot about windows from this tutorial and just so everyone knows, there will definitely be more tutorials about windows in the near future such as adding pictures. Thank you all for you time in reading this tutorial and please look at the Homework section so I can know how well I taught you guys



IX. Homework

From this tutorial, try making your own window. Change the width, height and all that other good stuff and show me your results. It’ll make me very happy if at least one person showed me what they could do from this tutorial.

I think it's fantastic that you're making scripting tutorials! Rock on!

Thanks Chibichan This tutorial took me forever to write becasue I wanted to make it as easy to read yet as informative as possible. I hope I did well at doing that

This is beautiful!!! Such a good job!!
Is it cheating if I do the homework?

lol, thanks Night_Runner

And it's defintely not cheating to do the homework, makes me feel like I did a good job if someone does it

Law, you are truly amazing! Here is my attempt:

Okay, can someone please tell me where 1) adding "and" before etc, and 2) writing "etc" as "ect" both originated from? I've seen too many people writing one or both, and it's annoying. "Etc" already includes "and" in it (et cetera, Latin for "and others").

Okay? Ask yourself how this is relevant to the tutorial as a whole. You are just commenting on his grammar and not really adding much input on the tutorial itself. Please don't spam, this is a verbal warning ~Ratty524

@ThatBennyGuy: Great work, you get an A, lol But seriously, good job Benny, my only suggestion is that you make the width of the strings of text wider since some of them are kind of squeezed. Also, can you post the script you used to make your window? It's easier for me to critique like that

@Otaku Son: Ok, sorry, but I was trying to teach RGSS not grammer....

Reading this tutorial through, I had no problem with it, and I'm sure this applies to everyone else.
Can we please keep to the topic in hand.
Thanks. DH.

Otaku Son please talk more about the topic itself as oppose to solely criticizing the Law's grammar. I edited your post with a verbal warn.

Anyway, this seems like a great tutorial G14. I've considered trying to script with RGSS for a bit, though I'm a bit nervous and I don't know where to start with it.

Thanks for the comments Ratty

I've started up a topic about helping people with situations just like yours. It's for asking questions and advice pertaining to RGSS and how to start. You can find it here:

http://www.rpgrevolution.com/forums/index....showtopic=35685

Hope that helps

Done!
Great work on this Law, the beginning was really understandable. I could grasp the point of inheritance and why scripters sometimes create an add-on rather than create a whole new script.
Oh here's my Homework glimpse at the tileset I was testing aswel as a bonus lol:


I do have one little thing to suggest for the next one though, during step six it felt like nothing was being taught only copied. I had to think about why it was $window.dispose and not $window_Text.dispose may sound stupid to you but it just got me thinking, probably a bit too much lol.

Anyway I can't wait to keep on going with this and try some more things out. Oh for reference here's my code as tried to alter a few things as best as I could with it still working :

[Show/Hide] Code

CODE

#==============================================================================
# **Window_Text
#------------------------------------------------------------------------------
#  This class displays text in a window
#==============================================================================

class Window_Text < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(0, 160, 640, 160)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    self.contents.font.color = knockout_color
    self.contents.draw_text(0, 0, 100, 100, "Super Tutorial")
    self.contents.draw_text(150, 16, 100, 100, "Thanks Law ")
    self.contents.draw_text(300, 32, 100, 100, "~Holder")
  end
end

This has been really beneficial, Law. Thanks for the effort you've put in. You truly are the best! I'm also reading the tutorials you recommended in the tutorial section of the overarching RRR site, but this is a good practical application that I would otherwise struggle to understand. I wish to see more!

Holder, why do you have to look so much more professional than me?

@Holder: Good work Holder, and that tileset looks amazing



Yeah, I started to get a little lazy on that part because I just trying my best to just submit the tutorial but I guess I was a little unclear on that part, sorry lol The reason it's $window and not $window_Text, is because before we made it so that the variable is $window when we said:



You can think of $window as the call for windows, like the general refrence term for windows. When you want to call a window, you just do



Hope you get what I'm trying to say lol

Also, for you window, my only suggestions are to change this line:



to something like this:



Because we don't want our text to be sqeezed so you have to have the width bigger. Try doing the same thing for the next line as well because that text is kind of squeezed as well. Great work overall, though, you get an A lol

@ThatBennyGuy: Alright now that I see the code, I think you should change the third value or the width of each string of text to something larger so that your text isn't squeezed. Also I'm very gald you found this tutorial beneficial and that's great to hear that you're reading the RGSS for Dummies tutorials, they are really helpful

Oh, and lol, it doesn't matter how professional it is Benny, as long as you're grasping the concept

My last note is that the next tutorial is under develpmont, it's going to be brought to you guys by Night_Runner this time

This tuition adds thousands of possibilities to any game, I will certainly try it. I still find the window bases
puzzling, how they all piece together. How could I say make a text window that comes up next to the
character themselves, rather than in a same given area ? ie, like a bubble text.
Anyways, Law, hope you add more to this in the future.

Hey thanks for the comments D.H

I've been trying to figure out what you asked when you said how to make the text box go next to character but I'm not doing to well. I was able to find out how to make it so that the text box came above the character you're using but not the character you are talking to. Did you want it so that the text box goes above the character you're using or the event you're talking to?

This seems to be really helping people out! I have VX, so I can't do my homework.

Ideally from both characters, that would mean two different events...I guess. But I thought of a bubble
text window from the person I was talking too. That would be perfect for my game and for others too
out there.

@Chibichan: Thanks, and it's perfectly fine that you won't be able to do the homework, it's only something optional

@D.H: Alright, I'll start working on this, though I'm pretty sure Ccoa's UMS can handle this feature.

Well that would be great, theres no rush at all. What I was thinking off, was a window text coming from
say an NPC who was some distance away, ie without touching them...a script call maybe ?

Hey just so you know, D.H, I haven't abonded you lol, just been really busy. I asked Night_Runner to help me out with this request and he gave some nice help for me to finish it off. Hopefully I can have this done by the end of the weekend

Great script! I have 2 problems I can't fix.
1st : I want to make the window invisible, but I can't....

2nd : Night Runner told me about your script from my request for a window that shows me variables. he said I had to chance "Hello World" into $Game_Variables[1], $Game_Variables[2] and so on. but that doesn't work.

I'd be sharding rainbows if you guys could make a VX tutorial for this.

@> henkhuizen
Fixed version:


@> kabuto202
It works fine in VX, I just tried it, you may need to change the width / height of the window to suit VX's smaller resolution (544x416), but either way it works perfectly
Give it a shot

@D.H: I haven't gotten the cahnce the edit the script that Night_Runner gave me to make your request completely perfect, but here's a WIP of it:



@Henkhuizen: For your first request to make the window invisible, just add to Night_Runner's script after this line:



This:




@Kabuto: Yeah, Night_Runner pretty much nailed it in the head. All you'd really have to do is readjust the window height and width and you're set to go

Yay, thanks Law (and to night runner). I'm sure this script will be very popular with many out there.
It just adds a bit more professionalism to the games somehow. Can't wait to screenshot this once it's
made and up and running in a game. Again, thanks for doing this .

Well here's another WIP:



To call the script, just go to the script option in the event commands window and put this in:



I'm not sure what else you asked for after allowing the text window to be next to the character so I'm at a road block lol

Oh, and if anybody does the homework can you pleeaase post it, I'd love to see it

Here's my homwork =D


Good tutorial. =)

P.S. "Hola Mundo" is Spanish for "Hello World" ^^;

Very nice work, Dummy I don't think I see anything wrong so you get an A

haha, everyone's loving your tutorial and nightrunners, but mine is just so empty.. I'm no good at this tutorial writing thing XP.

nice tutorial thanks

@NightShade: Naw, don't worry, you're great at it I just saw someone post their homework over at your tutorial, maybe you should chekc it out

@DarkKnight: Very nice Only problem is that you should change this line:



To this:



That way the arrows will be gone since you need to remove 32 pixels from the widht and height. Also, try rearrange yor text since it seems that you made that line 16 and 16 because you wanted the text to fit. Good work though

This is mine =/ i think its bad though.....

No, this is great, man, you did everything the tutorial taught Don't really see anything wrong with your code so great job man

This tutorial's great!!
And um, I have a problem with the homework.
I wanted to try and put the window next to warrior02 and it turned out like this:
(I also changed the size of the window....I think)



As you can see, the text is placed weird. I didn't change the coordinates of the text....(right?)

Wait, so is the problem you're having the fact that your text isn't fitting properly in the window or that your window is too small?

The text isn't fitting properly. I wanted it to be right in the middle of the window.
Although, I set the text coordinates to 0,0 it was still placed weird.

Easily done.

@Magic: Oops, sorry for the late reply man Change the y coordinate (second value) to something like -10. Sometimes it doesn't fit properly so you have to go into negative integers.

@RedKnight: Beautiful man! Nice and simple

Hey here's my homework:


I added a shadow effect to all of the options, and played around with the text colors a bit
I must admit, I'm pretty proud of myself.

THIS TUTORIAL ROCKS!

Woah, awesome stuff there Redd! Where did you find out how to make the shadow, I barely know how to do it lol, I only have a rough understanding of it after looking at Ccoa's UMS. Great job, anyway, man

I just made extra text that looked black and placed it under the text. Easy enough. I made a few new colors in Window_Base such as Green and Black, which made it so that I could have the shadow

lol, completed this but i don't have time to post anything cause i am working on my project.

This is an amazing tutorial. Thank you so much, for the TIME, EFFORT, and most of all, DETAIL, you've put into this. It's been an amazing help to me, and I look forward to going through the others.

What I like the most is that you don't make assumptions about someones skill. You're very thorough and precise, and cover everything, slowly and respectfully. If you haven't heard it enough, thanks again! I'm extremely grateful to you.

ya i had to dig for this but here is ur answer kabuto202

http://www.rpgrevolution.com/tutorial/wind...perties_16.html

hope its helpful

p.s. i only dug for liek 10 mins but still it was grueling

Here's my homework!