Help - Search - Members - Calendar
Full Version: [Scripting][Series]RGSS: Windows - Lesson 1: An Introduction to Windows
RPG RPG Revolution Forums > Scripting > Script Tutorials > RGSS
Pages: 1, 2
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 smile.gif #
# 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 biggrin.gif
#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 pinch.gif
//EDIT: added screenshots and the script
-Asi
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! smile.gif
Asi
I already did all of the changes mentioned

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

//EDIT: Done

-Asi
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 thumbsup.gif

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 teehee.gif 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. smile.gif
Asi
thanks

-Asi
PS congarts on making staff happy.gif
Zeriab
What a cute tutorial ccoa. I like it happy.gif
Here's a screenie of a window to increase the number of homework assignments: (So you sooner can write the next part >_>)
Click to view attachment

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

@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. sweat.gif 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
QUOTE (ccoa @ Jan 7 2008, 11:49 PM) *
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
ccoa
Hey, Punk! Good to see you stepping outside your event comfort zone. happy.gif
Asi
QUOTE (Zeriab @ Jan 8 2008, 01:41 PM) *
@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 wink.gif
*hugs back*
-Asi
Ty
QUOTE (Asi @ Jan 8 2008, 07:56 PM) *
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 wink.gif
*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 wink.gif
PK8
QUOTE (ccoa @ Jan 8 2008, 02:31 PM) *
Hey, Punk! Good to see you stepping outside your event comfort zone. happy.gif

Haha. Heya ccoa. I think I'm glad that I'm trying to step out of eventing territory. happy.gif 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
QUOTE (SeeYouAlways @ Jan 16 2008, 03:24 AM) *
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?
SeeYouAlways
Sure. You have to buy it online. Go to http://www.rpgrevolution.com/rmxp and click on the "Buy" link. It'll direct you to the online store. Hope you come back with the legal version. tongue.gif
ccoa
RPG Maker XP is sold as a download, so anyone anywhere in the world can buy it in theory.

http://www.download.com/RPG-Maker-XP/3000-....html?tag=lst-1

EDIT: Gah, Ninja'd!
bryandamage
thank you both! although i try to restrain myself to buy things online i really want to get to grips with rmxp! it was really confusing though when a blank box appeared even though the script was ok...

i didnt think this version was illegal.... dry.gif cba to email my brother...he doesnt reply hardly and he lives too far away to give a good kicking up the backside
SeeYouAlways
Good news is that you get a free 30 day trial with the program, so download it, try it out for 30 days, then register for a license!
bryandamage
K it will give me some time to learn some scripts and plan out my game more. I've had fun making doors, movable objects and makng long conditional branched events etc. but they have a lot of limitations...

btw can you use events to make a player press a button and the char will increase walking speed for a certain length of time? I tried adding wait commands but the char stops moving then... i did make a simular event sequence like pegasus boots from zelda

*another thought* going to try and make other chars jump out the way in terror when approached by speeding player
SeeYouAlways
Well, let's not derail from the thread since it's about the tutorial, so post a new topic on our support forum if you need help. thumbsup.gif

To answer your question, yes, it can be done. You need to use parallel process. Read this tutorial for reference: http://www.rpgrevolution.com/tutorial/28

Now, on to discussing this tutorial.
Ember
[Show/Hide] Obvious pro skillz:


Emby did his homework. It's a first, ever.
ccoa
Great job playing around with it! That's what I like to see. smile.gif
bryandamage
sweat.gif i will buy the official version but i got around the 'no text' problem in postality knights i had earlier. i just wanted to know what was missing (determind not to be beaten by an annoying code)

for some reason it won't show without "self.contents.font.name = $defaultfonttype" just thought you would like to know... i can't look at postality knights the same way now i know it's an illegal remake... sad.gif
jamiez
Hey ccoa I know you're here!!!
Why you not make a book for the newbie like me!?
SeeYouAlways
Err... Aren't her tutorials helping you enough already? Maybe you can request for a tutorial to be written if you need help in other areas.
animetor07
I am super new to scripting, I adjusted my codes to match yours. Was I supposed to delete some codes off of them? And if I want to add more codes in, where do they go?
ccoa
Your question is too vague to really be answered. If you want to do something different than what I've done, you will need to change some lines or add some.

If you're completely new to scripting, I recommend reading some of the beginner tutorials on scripting on the main site before doing this lesson. It assumes at least some small familiarity with programming, Ruby, or RGSS scripting.
Jadak
I get an error on line 9.

CODE
  #-------------------------------------------------------
  # * Window First
  # * First_Script happy.gif
  #-------------------------------------------------------
  # * Credit:
  # * Ccoa-Tan
  #-------------------------------------------------------
[b]  class Window_First > Window_Base [/b]
  #-------------------------------------------------------
  # *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...Shuyu-tan!", 2)
   end
end
jens009
Line 9?

You're not suppose to have an error over there since it's commented. Unless of course you delete that bold tag on line 8 [ b ]
Kinnison
I think you got the arrow pointing the wrong way, it should be pointing the other way, like the one below:

CODE
class Window_First < Window_Base
Jadak
ah...that's probably why then. XD Thanks.
darkkyros
Here's mine. smile.gif

jamiez
I'm Sorry ohmy.gif ,but it's make me confuse wacko.gif
cuz you make like thousand script with you...
and damn...... sweat.gif how long you make a script
so i have idea why you not make some e-book? happy.gif
S_n_a_k_e
Nice tutorial (Y)

i have a question.. if you would want to remove the window, when you press a button, lets say C, how would you script that? ^^
If you wouldn't want to wait 80 frames and then the window is removed automaticlly, but make it so that the player can press a button to remove it himself..

i hope you understand what i mean ^^
Thx.
Daldraeic
[Show/Hide] My first RGSS lesson.


I tried to make two windows but ran into a problem...
I tried renaming the "class Window_First" part on one of them to "class Window_Second" both in their own separate scripts at different coordinates. It worked fine except after a couple seconds one of the windows disappears on its own. How do I fix this?
ccoa
QUOTE (S_n_a_k_e @ Feb 21 2008, 02:09 PM) *
Nice tutorial (Y)

i have a question.. if you would want to remove the window, when you press a button, lets say C, how would you script that? ^^
If you wouldn't want to wait 80 frames and then the window is removed automaticlly, but make it so that the player can press a button to remove it himself..

i hope you understand what i mean ^^
Thx.


Well, if you wanted to do it through events like this, you could add a parallel process that listens for a button press and dispose the window when it's found. However, the better way would probably be to build it into the scene.


QUOTE (Daldraeic @ Feb 25 2008, 10:13 PM) *
[Show/Hide] My first RGSS lesson.


I tried to make two windows but ran into a problem...
I tried renaming the "class Window_First" part on one of them to "class Window_Second" both in their own separate scripts at different coordinates. It worked fine except after a couple seconds one of the windows disappears on its own. How do I fix this?


I'm not sure what the problem is. I'd have to see what you're doing.
Daldraeic
First Window...
CODE
class Window_First < Window_Base
#--------------------------------------------------------------------------
# * Object Initialization
#--------------------------------------------------------------------------
def initialize
super(384, 224, 256, 256)
self.contents = Bitmap.new(width - 32, height - 32)

refresh
end

#--------------------------------------------------------------------------
# * Refresh
#--------------------------------------------------------------------------
def refresh
self.contents.clear

self.contents.draw_text(0, 0, 256, 32, "A B C D E F G H I J K L M")
self.contents.draw_text(0, 25, 256, 32, "N O P Q R S T U V W X Y")
self.contents.draw_text(0, 50, 222, 32, "1", 1)
self.contents.draw_text(0, 75, 222, 32, "2", 2)
self.contents.draw_text(0, 100, 256, 32, "0", 0)
self.contents.draw_text(0, 125, 256, 32, "I used 25 height spacing")
self.contents.draw_text(0, 150, 256, 32, "for each line.")
self.contents.draw_text(0, 200, 256, 32, "...oh and Z.")
end
end


And second...
CODE
class Window_Second < Window_Base
#--------------------------------------------------------------------------
# * Object Initialization
#--------------------------------------------------------------------------
def initialize
super(0, 0, 256, 256)
self.contents = Bitmap.new(width - 32, height - 32)

refresh
end

#--------------------------------------------------------------------------
# * Refresh
#--------------------------------------------------------------------------
def refresh
self.contents.clear

self.contents.draw_text(0, 0, 256, 32, "test")
end
end


they are each in their own part in the script editor, I wouldn't know how or if I should put them in the same one. If theres anything else you need to know let me know.

Oh and, if it matters, the way I brought them up was
CODE
$window = Window_First.new;
$window = Window_Second.new

I tried putting them in separate events, but it didn't change anything. Its always the lower right (first) one that disappears.
ccoa
It's because you named the variables exactly the same thing. If you assign a variable a new value, the old one will be garbage collected (removed), because there's no longer any references to it.

Try naming the second variable $window2.
Daldraeic
I see. Thank you. Yeah lots of monday details with this stuff I suppose laugh.gif
S_n_a_k_e
QUOTE
Well, if you wanted to do it through events like this, you could add a parallel process that listens for a button press and dispose the window when it's found. However, the better way would probably be to build it into the scene.


yeah, i would like to build it into the scene, but i can't quite figure out how to do it. huh.gif
If it's not to much, can you please show me how to do it? rolleyes.gif

Thanks
//Gando
ccoa
That's planned on being part of the next lesson (selectable and command windows), which I'm hoping to have done by Friday. If it's not done Friday, it will probably not be ready until Wednesday of next week.
S_n_a_k_e
Okaay, that sounds good, thanks ^^
Someonation
Wait i have a question.....
you said that
CODE
self.contents = Bitmap.new(width - 32, height - 32

is for text and images.....so how do i put an image?
HeroOfHyla
What would I need to change in this to make it RGSS2 compatible? I'm getting a blank window.

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


It's just the original code from the tutorial pretty much, but uncommented.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2013 Invision Power Services, Inc.