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

[Red Knight]

Easily done.

CODE

#==============================================================================
# **
#------------------------------------------------------------------------------
# This script displays basic text.
#==============================================================================

class Window_Text < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(0, 415, 240, 60)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    self.contents.draw_text(75, 0, 100, 30, "Text here!")
  end
end