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

[The Law G14]

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:

CODE

class Window_Base < Window

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:

CODE

class Window_Gold < Window_Base

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:

CODE

#==============================================================================
# **
#------------------------------------------------------------------------------
#  
#==============================================================================

class
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
  end
end

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:

[Show/Hide] Large Pic

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:

CODE

Class Window_Text < Window_Base

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:

CODE

def stop_print
print “Hello” unless Input.trigger?(Input::A)
end

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:

CODE

def print_things
print “Hey”
print “World”
stop_print
print “What”
end

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:

CODE

def initialize

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:

[Show/Hide] Big Pic

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:

CODE

$window = Window_Text.new

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:

CODE

$window.dispose

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:

CODE

self.contents.clear

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:

CODE

self.contents.draw_text(0, 0, 100, 100, "Hello World")

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:

CODE

self.contents.font.color = system_color
self.contents.draw_text(150, 0, 100, 100, "Hello World")
self.contents.font.color = knockout_color
self.contents.draw_text(300, 0, 100, 100, "Hello World")
self.contents.font.color = crisis_color
self.contents.draw_text(450, 0, 100, 100, "Hello World")

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:

[Show/Hide] Big Pic

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.

[Chibichan]

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

[The Law G14]

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

[Night_Runner]

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

[The Law G14]

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

[thatbennyguy]

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

[Show/Hide] Open me!

This post has been edited by thatbennyguy: Oct 17 2009, 05:04 PM

[Otaku Son]

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

[The Law G14]

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

This post has been edited by The Law G14: Oct 18 2009, 12:22 PM

[darkhalo]

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

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.

[Ratty524]

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.

[The Law G14]

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

This post has been edited by The Law G14: Oct 18 2009, 02:34 PM

[Holder]

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

[thatbennyguy]

[Show/Hide] Code

CODE

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

class Window_Text < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(0, 320, 640, 160)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    self.contents.draw_text(50, 0, 100, 100, "!!ThAnK yOu!!")
    self.contents.font.color = system_color
    self.contents.draw_text(200, 15, 100, 100, "!!LaW G14!!")
    self.contents.font.color = knockout_color
    self.contents.draw_text(350, 0, 100, 100, "!!YoU aRe!!")
    self.contents.font.color = crisis_color
    self.contents.draw_text(500, 15, 100, 100, "!!ThE bEsT!!")
  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?

[The Law G14]

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

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.

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:

CODE

$window = Window_Text.new

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

CODE

$window = Your_Window

Hope you get what I'm trying to say lol

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

CODE

self.contents.draw_text(0, 0, 100, 100, "Super Tutorial")

to something like this:

CODE

self.contents.draw_text(0, 0, 150, 100, "Super Tutorial")

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 post has been edited by The Law G14: Oct 19 2009, 12:55 PM

[darkhalo]

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.

[The Law G14]

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?

[Chibichan]

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

[darkhalo]

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.

[The Law G14]

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

This post has been edited by The Law G14: Oct 20 2009, 01:37 PM

[darkhalo]

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 ?