[Scripting][Series]RGSS: Windows - Lesson 1: An Introduction to Windows Options

[ccoa]

Ccoa's Guide To Windows In RGSS

What is a window?

Let's start out with the basics. What is a window? A window is essentially an image that you can draw on. The image is "skinned" with a windowskin that you specify. Windows are the backbone of all the scenes in RMXP.

Making a Simple Window

Let's jump right in and get our feet wet, yes?

Open up your script editor in a new project. Right click Arrow_Base and select Insert. Name the new section Window_First. Type the following in the script editor:

CODE

class Window_First < Window_Base
  
end

This tells the Ruby interpreter that there is a new class named Window_First, and that it is descended from Window_Base. The magic of inheritance means that Window_First has inherited all of Window_Base's data members and methods. In plain English, Window_First can now do anything Window_Base can do.

However, it can't do anything of its own. Let's remedy that, shall we?

CODE

class Window_First < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(0, 0, 256, 96)
  end
end

The initialize method is special. It's what's automatically called when you create a new object of the class (in this case, a new window). The super keyword tells the interpreter to go to the parent class, and look for a method of the same name. In this case, it's looking in Window_Base for a method named initialize. Look in Window_Base:

CODE

  #--------------------------------------------------------------------------
  # * Object Initialization
  #     x      : window x-coordinate
  #     y      : window y-coordinate
  #     width  : window width
  #     height : window height
  #--------------------------------------------------------------------------
  def initialize(x, y, width, height)
    super()
    @windowskin_name = $game_system.windowskin_name
    self.windowskin = RPG::Cache.windowskin(@windowskin_name)
    self.x = x
    self.y = y
    self.width = width
    self.height = height
    self.z = 100
  end

See the (x, y, width, height) parameters? These line up with the (0, 0, 256, 96) arguments we passed into the super call. In other words, we're making a window that is a coordinate 0, 0, and is 256 pixels wide and 96 pixels high.

Not bad, but the window still isn't doing anything! Let's add some text to it.

CODE

class Window_First < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(0, 0, 256, 96)
    self.contents = Bitmap.new(width - 32, height - 32)
    
    refresh
  end
  
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    
    self.contents.draw_text(0, 0, 256, 32, "Hello, World")
  end
end

Let's take this a little at a time.

CODE

    self.contents = Bitmap.new(width - 32, height - 32)

This creates a new bitmap for the window to draw on. This line is necessary if you want to place any text or draw images on the window. Because of the limitations of the Window classes, there is a 16 pixel border inside every window that cannot be drawn on. Thus the - 32's.

CODE

    refresh

This is a call to the method titled refresh. Everything in that method will execute until it reaches the end of the method or it hits a return statement, and only then will we return to the initialize method to finish.

CODE

  def refresh

We just defined a method called refresh. Looking around, you'll notice most of the RGSS Window classes have refresh methods. They usually do exactly what they sound like - refresh the image.

CODE

    self.contents.clear

This "erases" anything that might already have been drawn on the bitmap.

CODE

    self.contents.draw_text(0, 0, 256, 32, "Hello, World")

This asks the bitmap object to draw some text on itself. The draw_text method looks like this:

draw_text(x, y, width, height, text, alignment)

x is the x coordinate to draw it at, and y is the y coordinate. Note that these are coordinates on the window, not the screen. 0, 0 is the upper left corner of the window.

Width is how wide to fit the text into. If the text won't fit, the method will try to squeeze it in, making the text narrower. Height works similarly for height.

Text is the text you want to draw. In this case, Hello, World.

Alignment is optional. By default, it's 0, which is aligned left. 1 would center the text, 2 would right align it. So if we changed the above line to

CODE

    self.contents.draw_text(0, 0, 256, 32, "Hello, World", 1)

The text will be drawn centered inside the 256 pixel width you specified.

Now let's take a look at this window. Create a new event. Place the following in a Script event command:

CODE

$window = Window_First.new

$window is the name of your variable. The $ indicates that it's a global variable - that is, you can access it from anywhere. This is the name of your window object.

Window_First.new tells the interpreter that you want a new object of class Window_First. This will automatically call the initialize method we wrote just a moment ago.

Now put in a short wait, say 80 frames, using the Wait event command.

Finally, put the following in a Script event command:

CODE

$window.dispose

The dispose method will make the window disappear. It's very important to dispose windows, even if they're not currently visible. If you don't, they'll hang around forever and lag your game.

But wait, you say. We didn't write a dispose method!

That's okay, the dispose method exists in Window_Base:

CODE

  #--------------------------------------------------------------------------
  # * Dispose
  #--------------------------------------------------------------------------
  def dispose
    # Dispose if window contents bit map is set
    if self.contents != nil
      self.contents.dispose
    end
    super
  end

Remember when I said Window_First can do anything Window_Base can do? That means accessing any and all methods defined in Window_Base.

The end result:



Homework

Try it yourself. Play with the code, show me what you can do. Some time after I get at least 5 homework assignments, I'll write the next part.

[Asi]

Thanks this is is almost too easy (witch is perfect for n00bs like me ;D )
Though I don't know enough to play around with it much
heres my home work
Homework Demo

[Show/Hide] The script

#=============================================#
# #
# Making Windows Made Simple #
# This is my very first script #
# thanks ccoa #
# -Asi #
#=============================================#
class Window_First < Window_Base
#*******************************************#
# -Object Initialization #
#*******************************************#

def initialize
#Edit these to move the text or resize
#([x(horisontal position)], [y(vertical position)], [width], [height])
#note the position is the upper left corner of the window
super (200, 64, 256, 96)
#Making a drawing board to but text on
#REMBER THERE IS A 16 PIXEL BORDER THAT CAN'T BE DRAWN ON!! (16+16=32!!)
self.contents = Bitmap.new (width - 32, height - 32)

#Lets call a refresh to keep it on the screen
refresh
end
#*******************************************#
# -Refresh #
#*******************************************#

#defining the method we called above (...I think)
def refresh
self.contents.clear
self.contents.draw_text (0, 0, 256, 32, "Hello World")
self.contents.draw_text (0, 32, 256, 32, "I use two lines")
end
end
#*******************************************#
# How do I use wait inside a script #
#*******************************************#
class Window_Second < Window_Base
#*******************************************#
# -Object Initialization #
#*******************************************#

def initialize
super (200, 64, 358, 128)
self.contents = Bitmap.new (width - 32, height - 32)


refresh
end
#*******************************************#
# -Refresh #
#*******************************************#

#defining the method we called above (...I think)
def refresh
self.contents.clear
self.contents.draw_text (0, 0, 288, 32, "How do I use wait inside a script?")
self.contents.draw_text (0, 32, 288, 32, "so I wont have to copy paste the")
self.contents.draw_text (0, 64, 326, 32, "script every time i update the window")
end
end

I hope more people do this so I can get the next lesson
//EDIT: added screenshots and the script
-Asi

This post has been edited by Asi: Jan 7 2008, 03:05 PM

[ccoa]

For playing around, you can try changing the window coordinates or size, or try aligning the text to center or right. Just easy things.

You don't have to send me a demo, BTW. If you post a screenshot, I'll believe you!

This post has been edited by ccoa: Jan 7 2008, 02:48 PM

[Asi]

I already did all of the changes mentioned

And I'll put in some screenshots and the script i used :Þ

//EDIT: Done

-Asi

This post has been edited by Asi: Jan 7 2008, 03:51 PM

[Holder]

Ah I remember seeing this a while ago.

I was trying to get to grips with all the text documents telling you what such and such was and what it does, but I actually found doing something like this actually helped me alot more in grasping the basic concepts of what to alter, how and why.
Some people learn more from doing this sort of thing rather than just reading and doing what is said, breaking it down into small parts like this and explaining this in condescending terms could bring a whole set of scripters into the community

I think from this I went on to another tutorial about adding a new choice in the menu system and using this as a reference to altering the menu so everything went back to fitting all snug and nice but that's off topic sorry.

I don't recall seeing the continuing parts so I'll be watching this space...

[ccoa]

There's no way you could have seen this before, I just wrote it. ^^; But I'm glad you're interested.

Asi, those are some great improvisions! Good work.

[Asi]

thanks

-Asi
PS congarts on making staff

[Zeriab]

What a cute tutorial ccoa. I like it
Here's a screenie of a window to increase the number of homework assignments: (So you sooner can write the next part >_>)
 screenie.png ( 42.02K ) Number of downloads: 124


I suggest using the word 'renew' as well when explain the purpose of the refresh method. It has about the same meaning and could help some understand it better.
Other than that. Good job, and congratulations on staff

@Asi:
Do you mean wait like this?
http://www.sendspace.com/file/92stwx
Using wait inside a script is a bit complicated more complicated and require what I would call a 'hack'. At least if you want the window to show on the map.

*hugs*
- Zeriab

[ccoa]

Don't worry, I'm going to cover adding a window to a scene next lesson (the map and menu scenes, as it happens). In fact, I've already started writing it this morning. I'll include how to make the window hang around and how to remove it when you don't want it anymore.

This was just a basic, get-your-feet wet-and-boost-your-ego lesson.

[Holder]

There's no way you could have seen this before, I just wrote it. ^^; But I'm glad you're interested.

Very odd... it must have been something very similar then as I recall having problems with the length of time that the window is displayed for.

[PK8]

Whoa! I was a member here? (OT and I have not been an active member of this place at all.)

Anyway, pretty awesome tutorial ccoa. *faves*

CODE

#=========================================================================
=====
# ■ Window_First
#------------------------------------------------------------------------------
# Making windows gone simple.
# Thanks to ccoa
#==============================================================================
class Window_First < Window_Base
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize
    super(200, 200, 256, 96)
    self.contents = Bitmap.new(width - 32, height - 32)

    refresh
  end
  
  #--------------------------------------------------------------------------
  # * Refresh
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    
    self.contents.draw_text(0, -8, 256, 32, "Screenie me! Dang you Punkster!")
    self.contents.draw_text(0, 8, 256, 32, "DANG YOU!!!", 1)
  end
end

This post has been edited by Punk: Jan 8 2008, 12:10 PM

[ccoa]

Hey, Punk! Good to see you stepping outside your event comfort zone.

[Asi]

@Asi:
Do you mean wait like this?
http://www.sendspace.com/file/92stwx
Using wait inside a script is a bit complicated more complicated and require what I would call a 'hack'. At least if you want the window to show on the map.

*hugs*
- Zeriab

not quite I meant something similar to the wait command in events so the so it would wait 80 frames then clear the bitmap then show the new one then wait 80 frames then dispose of the window without using any events.. bagh!.. probably too hard for a beginner like me anyways
*hugs back*
-Asi

[Ty]

not quite I meant something similar to the wait command in events so the so it would wait 80 frames then clear the bitmap then show the new one then wait 80 frames then dispose of the window without using any events.. bagh!.. probably too hard for a beginner like me anyways
*hugs back*
-Asi

In order to accomplish this you need to make a looping command like so:
popsicle = #Amount of frames to wait
while popsicle > 0
popsicle -= 1
# Update lines and stuff here
end

[Asi]

thanks I'll try that when I wakeup from my much needed sleep

-Asi

[Kinnison]

Why I didn't notice this earlier XD

It's an awesome tutorial. I bookmark this page and start doing one right away

[PK8]

Hey, Punk! Good to see you stepping outside your event comfort zone.

Haha. Heya ccoa. I think I'm glad that I'm trying to step out of eventing territory. I've been trying to learn a bit about scripting this week but so far, I only learned a few things but I'm still confused about a great deal of stuff. XD

Whoops, didn't mean to threadjack. *gives the topic back to ccoa*

[bryandamage]

*cries* I cant do a simple script

I even copied and pasted the script onto the script editor and all that comes up is a blank message box. everything else is working but no text is showing at all...

what am i doing wrong???

help me please!!

Bryan

[SeeYouAlways]

Are you using Postality Knight's (i.e. free) version of RPG Maker XP?

[bryandamage]

Are you using Postality Knight's (i.e. free) version of RPG Maker XP?

omg yes! my brother got it so i'v been using that...

are some of the scripts disabled or something?

grrr.... *casts evil glare towards whichever direction he is*

is the rpg maker xp sold in the UK?