RGSS: Basic Window

Let’s take a look at another built-in class from RGSS, the Window class. Creating a window in RGSS is a straightforward process that requires minimal intervention from the programmer. RGSS takes care of most of the details for us, and all we need to do is create a window object and assign property values.

Creating an empty window

my_window = Window.new()

my_skin = Bitmap.new("Graphics/System/Window")
my_window.windowskin = my_skin

my_window.x = 72
my_window.y = 50
my_window.width = 400
my_window.height = 100
my_window.opacity = 255
my_window.back_opacity = 150

loop { Graphics.update }

Notice how incredibly easy it is to create a basic window using RGSS. First, we instantiate a window object with the line my_window = Window.new(). Then, we create a bitmap object to hold the window’s skin, which we can do with my_skin = Bitmap.new(“Graphics/System/Window”). To display the skin on the window, we simply plug it in with the line my_window.windowskin = my_skin.

It’s important to note that the window class behaves similarly to a sprite object; the bitmap object itself cannot display anything on the screen because it’s only data. In the background, the skin is assembled in a hidden part of RGSS, and unfortunately, we can’t see or manipulate the code involved. If you want to import a custom skin, it’s crucial to ensure that it has the same visual layout, and RGSS will take care of the rest for you.

Lastly, keep in mind that the filename path is relative to the .exe file of the project folder.

Adding text in Window

my_window = Window.new()
my_window.x = 72
my_window.y = 50
my_window.width = 400
my_window.height = 64
skin = Bitmap.new("Graphics/System/Window")
my_window.windowskin = skin

my_window.contents = Bitmap.new(368, 32)
my_window.contents.draw_text(0, 0, 368, 20, "Hello World, again!", 0)

loop { Graphics.update }

As you can see, I’ve shortened the code for brevity. It’s worth noting that the contents property in the Window class actually refers to the Bitmap class used for the window’s contents.

In this example, I’ve initialized the width to 368 and the height to 32. This leaves a margin of 32 pixels on each side of the content, allowing it to be centered within our window framework, which is actually 400×64 in size.

Display image in window

my_window = Window.new()
my_window.x = 72
my_window.y = 10
my_window.width = 410
my_window.height = 410
skin = Bitmap.new("Graphics/System/Window")
my_window.windowskin = skin
my_img="Graphics/System/IconSet"
my_window.contents = Bitmap.new(my_img)

loop { Graphics.update }

Embedding an image within a window is just as easy as displaying text. In the RGSS Reference Manual, you can find that the initialize method of the Bitmap class can be called in two ways: Bitmap.new(filename) and Bitmap.new(width, height).

In this example, we use the former to load the IconSet image file. To ensure the window is large enough to display the entire image, we set its size to 410×410. This is no different from what we did with bitmap objects in previous tutorials.

Keep in mind that a Bitmap is just data and needs to be rendered from a sprite-based object. In the case of a window, two bitmap objects are encapsulated within it: windowskin and contents

Shorter code version

my_window = Window.new(72, 10, 410, 410)
my_window.windowskin = Bitmap.new("Graphics/System/Window")
my_window.contents = Bitmap.new("Graphics/System/IconSet")

loop { Graphics.update }

P.S. It’s generally best practice to avoid using “magic numbers” (hard-coded numerical values) in your code, as they can make it more difficult to understand the purpose of the code.