Mr. Mos In-Depth Scenes and Windows

[Guest Mr Mo]

 

Also teaches how to make a custom menu.

I'm bored so I'll explain how to make a CMS in details. I will explain what each thing does. In this turtorial you will learn;

 

- What is Window_Base and how to use it

- How to add animated and non-animated graphics to your window.

- What is Window_Selectable and how to use it

- What is Window_Command and how to use it

- How to make a CMS

Enjoy.

Chapter 1 - Making a window

 

Lesson 1 - Making a Window using Window_Base

 

Windows_Base is just what it sounds like. It is a base to all windows. It contains codes and funtions that you can call and use for your custom windows.

 

How can you use Window_Base to make a window?

 

Like so;

class MyCustomWindow < Window_Base

end

You should already know what class is but I will explain non the less.

 

class is used to start scripts. Imagine it as a container(folder). It contains data like, functions and variables, thats used to make a script.

When naming a class it must start with a capital letter. The following will give you an error;

 

myCustomClass

 

Every class must end with an end

 

Next we will learn how to give the window its characteristics;

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


end

 

When a script starts it first looks for "def initialize", if it can't find it, it will look for "def main", if it can't find that it will probably give an error.

super is used to call the same function in the parent class. The "parent" class in this script is Window_Base. Here super is used to call "def initialize(x, y, width, height)" in Window_Base. With it you can define the window's size and location.

- x = the horizantel location of the window.

- y = the vertical location of the window.

- width = the width of the window. Its not reccomanded to past 640 because it will be missing some parts.

- height = the height of the window. Its not reccomanded to past 480 or it will be missing some parts.

self is used to access either the parent class or the class its used in. It is sometimes not needed, but in this case it is.

self.contents = Bitmap.new(width - 32, height - 32) is used to create a bitmap in the window so you can;

 

- Show text in it

- Show images in it.

 

Congratulations, you now have a window.

[Couldnt salvage image]

The settings were; super(100, 100, 200, 200)

Hmm.. The window looks a little dull tho. It doesn't have anything in it.

Lesson 2 - Adding text to your Window

 

class MyCustomWindow < Window_Base
#----------------------------------------------------------------------
# * Object Initialization
#----------------------------------------------------------------------
def initialize
super(x, y, width, height)
self.contents = Bitmap.new(width - 32, height - 32)
refresh # Calls the refresh function in this class
end

def refresh
self.contents.clear
self.contents.font.color = normal_color
self.contents.font.size = 20
self.contents.draw_text(x, y, width, height, text)
end

end

 

self.contents.clear is used to clear the contents of the window. This is so that when the window is refreshed each time, its contents doesn't over lap their selfs each time.

self.contents.font.color = normal_color sets the font color of the window. It only affects the text(s) that comes after it. This means you can have different colors of texts in your window.

self.contents.font.size = 20 sets the font size of the text(s) that comes after it. This mean you can have different sized texts in your window.

self.contents.draw_text(x, y, width, height, text) this draws the given text on the window.

 

x = X position in the window, not the screen.

y = y position in the window, not the screen.

width = This should equalt to the width of the text. Its hard to guess sometimes.

height = This is the height of your text, it is usually 32.

text = This is the text you want to show. "I am TEXT. Obey ME!!"

 

Congratulation, now you have a window and have stuff in it;

[Couldnt salvage image]

The new settings for the window is; super(0, 0, 640, 480)

 

The settigns for the text is; self.contents.draw_text(50, 50, cx, 32, "I am TEXT. Obey ME!!")

 

Whats "cx"?

cx = contents.text_size("I am TEXT. Obey ME!!").width

 

It gets the width of the text given. In this case "I am TEXT. Obey ME!!"

 

Chapter 2 - Showing Your Window

 

Lesson 1 - Making the Scene

 

To show a window, you need a scene. Scenes are what makes your game run. There can be only 1 scene running at a time.

 

$scene holds the current scene. If there is no scene the game will close.

$scene = nil will close the game.

 

Now on to the scripting;

#==============================================================================
# * Scene_ShowWindow
#==============================================================================

class Scene_ShowWindow
#--------------------------------------------------------------------------
# * Main Processing
#--------------------------------------------------------------------------
def main
#call the window
@window = MyCustomwindow.new
# Execute transition
Graphics.transition
# Main loop
loop do
# Update game screen
Graphics.update
# Update input information
Input.update
# Frame update
update
# Abort loop if screen is changed
if $scene != self
break
end
end
# Prepare for transition
Graphics.freeze
# Dispose of windows
@window.dispose
end
#--------------------------------------------------------------------------
# * Frame Update
#--------------------------------------------------------------------------
def update
# Update windows
@window.update
end
end

 

Earlier I said, when a script starts it first calls initialize and then main, if its there. If initialize isn't there it will call main, if thats not there, it will crash.

You have one or the other and you can also have both.

@window = MyCustomwindow.new calls our window. The window will now show on the screen when this code is read.

if $scene != self

break

end

That exits the "main loop" which keeps the scene functioning. If there is no loop the script will just end.

@window.dispose closes our window. When the scene ends, you want close all the windows or it will interfere with the next scene. The script will only read that if the "main loop" breaks.

@window.update updates the window. Wait, we don't have "def update" in our window but no worries, because Window_Base has it.

 

Lesson 2 - Calling Your Scene

 

I know what you are thinking. "How am I suppose to use that to show my window using this script?" Easy, just call it from a different Scene, in this case we will use "Scene_Menu" because most people are familiar with it.

 

go to line 128 on Scene_Menu, it should look like this;

$scene = Scene_Item.new

and change it with

$scene = Scene_Showwindow.new

Thats all. Now Test Play and pess ESC and then choose the first option in your menu, which should be "Item" and your window should now appear on screen.

Lesson 3 - Adding Controls to your Scene

 

Oh, no, you can't go back to the MENU!!! What WILL WE DO?!?!

 

Easy, lets just add some controls to your scene, so you can exit it.

Replace you "def update" with the one I will provide below.

def update
   # Update windows
@window.update
# If B button was pressed
if Input.trigger?(Input::B)
# Play cancel SE
$game_system.se_play($data_system.cancel_se)
# Switch to Menu screen
$scene = Scene_Menu.new
return
end
end

 

Its best to update windows first.

if Input.trigger?(Input::B) checks if the key B or ESC has been pressed. RMXP has a weird Input class...

$scene = Scene_Menu.new calls the menu scene. Now your scene will close because if you remember what we learned earlier;

 

 if $scene != self
break
end
end

 

The variable $scene no longer holds your scene, there for it does not equal "self".

 

Side Note: != means Not Equals.

 

Now test play and go to your scene like we did before. Now if you press ESC you will go back to the menu.

Chapter 3 - Adding More to your Window

 

Lesson 1 - Adding Images to your Window

 

 

For this chapter you will need this battler;

http://img57.imagesh...roareadyxi4.png

Credit to Ccoa if you plan to use them in your game.

Don't worry about how it will look. I chose that because we will be using it for the next lesson. Put it in your Battlers folder.

 

Now, replace your window code with this.

#==============================================================================
# **MyCustomWindow
#==============================================================================

class MyCustomWindow < Window_Base

#----------------------------------------------------------------------
# * Object Initialization
#----------------------------------------------------------------------
def initialize
super(0, 0, 640, 480)
self.contents = Bitmap.new(width - 32, height - 32)
refresh
end
#--------------------------------------------------------------------------
# * Refresh
#--------------------------------------------------------------------------
def refresh
self.contents.clear
self.contents.font.color = normal_color
self.contents.font.size = 20
cx = contents.text_size("I am TEXT. Obey ME!!").width
self.contents.draw_text(width/3, height/3+100, cx, 32, "I am TEXT. Obey ME!!")

#Shows the picture on the window
#Stores the picture into the battler
@bitmap = RPG::Cache.battler("HeroA_ready.png", 0)
self.contents.blt(width/3, height/3, @bitmap, Rect.new(0, 0, @bitmap.width, @bitmap.height), 160)
end
end

Not much changed except "def refresh". Now that will display a picture on your window.

 

@bitmap = RPG::Cache.battler("HeroA_ready.png", 0) saves the bitmap to the variable so we can use it esier. I will explain each part.

 

RPG::Cache lets you access your graphics folder esier. To access a folder in the graphics folder just do;

 

RPG::Cache.folderName, but remember that this only goes for the default folders in the Graphics folder. If you want to call other foders, you need to edit RPG::Cache class. You can see how it looks like in the help file, just search for it, using search.

 

In this case we are trying to access the battlers folder;

 

RPG::Cache.battler, simple. Now to access an actual battler;

 

RPG::Cache.battler("HeroA_ready.png", 0), 0 is the Hue. You can change it and the color of the image will change.

 

Now your picture is called and turned into a bitmap.

self.contents.blt(width/3, height/3, @bitmap, Rect.new(0, 0, @bitmap.width, @bitmap.height), 160), displays the picture on the screen. I'll rewrite the code so you can understand better.

 

self.contents.blt(x, y, bitmap, Rect.new(xr, yr, bitmap_width, bitmap_height), opacity)

 

x = x postion of the picture. In this case; we want to place it in the middle so we divide the window's width by 3. width/3.

y = y postion of the picture. In this case; we want to place it in the middle so we divide the window's height by 3. height/3.

bitmap = the picture. In this case @bitmap. Remember the picture is saved in the @bitmap variable.

Rect.new() creates a rectangle around or in the picture. With it you can show part of the picture or the whole picture by changing the variables in it.

xr = The x position of the rectangle.

yr = The y position of the rectangle.

bitmap_width = width of the rectangle. In this case the width of the picture. @bitmap.width.

bitmap_height = height of the rectangle. In this case the height of the picture. @bitmap.height.

 

We will use the rect.new again in the next lesson to animate the picture.

 

Now take a test play. I changed text position too.

 

Lesson 2 - Adding Animated Images to your Window

 

Note:

The following uses the battler from the last lesson.

I referenced ccoa's animation engine from her CBS for this. I edited to make it work for use.

 

Replace your window code, again, with the following code;

#==============================================================================
# **MyCustomWindow
#==============================================================================

class MyCustomWindow < Window_Base

#----------------------------------------------------------------------
# * Object Initialization
#----------------------------------------------------------------------
def initialize
super(0, 0, 640, 480)
self.contents = Bitmap.new(width - 32, height - 32)
#Create the needed variables
@frame = 0
@frames = 0
@frame_count = Graphics.frame_count
@frame_width = 0
@frame_height = 0
#Stores the picture into the battler
@bitmap = RPG::Cache.battler("HeroA_ready.png", 0)
#Gets the bitmap frames and settings
get_settings
#update
update
end
#--------------------------------------------------------------------------
# * Update
#--------------------------------------------------------------------------
def update
self.contents.clear
self.contents.font.color = normal_color
self.contents.font.size = 20
cx = contents.text_size("I am TEXT. Obey ME!!").width
self.contents.draw_text(width/3, height/3+100, cx, 32, "I am TEXT. Obey ME!!")
#Gets the current time difference
time = Graphics.frame_count - @frame_count
if time >= 10
#Save the current frame count
@frame_count = Graphics.frame_count
#Get the next frame
rect = Rect.new(@frame * @frame_width, 0, @frame_width, @frame_height)
#Displays the image
self.contents.blt(width/3, height/3, @bitmap, rect, 160)
#Increase the current frame
@frame += 1
# if its the end of the frame
if @frame == @frames
@frame = 0
end
   else #if its the same frame;
#Get the next frame
rect = Rect.new(@frame * @frame_width, 0, @frame_width, @frame_height)
#Displays the image
self.contents.blt(width/3, height/3, @bitmap, rect, 160)
end
end
#--------------------------------------------------------------------------
# * Get Settings
#--------------------------------------------------------------------------
def get_settings
#Gets the number of frames from the image
@frames = @bitmap.width / @bitmap.height
#Get's the frame height
@frame_height = @bitmap.height
#Get's the frame width;
@frame_width = @bitmap.width / @frames
end
end

The animation engine can easily be edited. I was first going to use RMXP's animation engine but I prefer more frames over directions. I'll make Lesson for using RMXP's animation engine too. Anyways, lets get to explaining;

 

As you can see we added some new variables to "def initialize". Its best to define your varialbes so that you know what variables we will see in the script.

We also moved @bitmap to "def initialize". I did this to avoid errors.

One particular variable stands out tho;

@frame_count = Graphics.frame_count

We did that to save the current frame count. 10 frames = 1 second, do the math. We use it to check the difference between the current frame count and the laset saved frame count.

We are also calling a new function "def get_settings" using "get_settings" in "def initialize".

get_settings just gets the;

@frames = how many frames are there in the picture.

@frame_height = The height of the frame, in this case the picture.

@frame_width = This is the width of all the frames, seperate not togather.

Now you can also see, we changed the refresh function to update function because we want it to be updated everframe. If you remember our previous lessons, I said that our window class didn't have a update function but it wouldn't matter because the parent class has it. We changed refresh to update for this reason, its just esier.

The update function now has more code. Lets see what it is;

 

#Gets the current time difference
time = Graphics.frame_count - @frame_count
if time >= 10
#Save the current frame count
@frame_count = Graphics.frame_count
#Get the next frame
rect = Rect.new(@frame * @frame_width, 0, @frame_width, @frame_height)
#Displays the image
self.contents.blt(width/3, height/3, @bitmap, rect, 160)
#Increase the current frame
@frame += 1
# if its the end of the frame
if @frame == @frames
@frame = 0
end
   else #if its the same frame;
#Get the current frame
rect = Rect.new(@frame * @frame_width, 0, @frame_width, @frame_height)
#Displays the image
self.contents.blt(width/3, height/3, @bitmap, rect, 160)
end

Remember what I said about @frame_count? We are using it here;

#Gets the current time difference
time = Graphics.frame_count - @frame_count

That takes the current frame difference. We want it to be 10 or more because;

if time >= 10

As you can see that checks if the 10 frames(1 sec) passed and if it did passed;

 #Save the current frame count
@frame_count = Graphics.frame_count
#Get the next frame
rect = Rect.new(@frame * @frame_width, 0, @frame_width, @frame_height)
#Displays the image
self.contents.blt(width/3, height/3, @bitmap, rect, 160)
#Increase the current frame
@frame += 1
# if its the end of the frame
if @frame == @frames
@frame = 0
end

 

As you can see, we save the current frame again so we can check the difference again.

We also create the rect.new in a variable(rect) instead of the command;

 

self.contents.blt(width/3, height/3, @bitmap, rect, 160)

 

This is because it would be too messy to do so in that command.

The size and the position of the rectangle on the picture changes as the variables in it change.

Like I said earlier the rectangle class can show the image as a whole or part of it.

@frame += 1 increases the current frame.

if @frame == @frames, checks if the current frame equals the picture's frames.

if it is it resets the current frame by making it 0

the following happes if 10 frames didn't past from the last animation;

 

    else #if its the same frame;
#Get the next frame
rect = Rect.new(@frame * @frame_width, 0, @frame_width, @frame_height)
#Displays the image
self.contents.blt(width/3, height/3, @bitmap, rect, 160)
end

 

This is so the animation doesn't flicker. It just displays the last frame and thats.

 

I hope you learned something. I know this was a little advanced but I hope you understood something.':|

 

 

[dolarmak 23]

Okay, you need to fix the script on this thread so that the html works, cause it's all manners of f*ed up lol

[Moonpearl 32]

We could use a tutorial on how to convert HTML into BBcode there. ;)

[Polraudio 122]

Updated the top post as best as i can.

All i did was copy that and paste it into a htm file opened it up in the web browser. copied that back here and went through and did all the code tags.

[Marked 197]

Oh :/ It's a shame. I haven't got hours to spend on doing stuff like this, I already spent hours converting these tutorials into HTML in the first instance. Though that was some 4 years ago now when time a commodity. What happened was, while preparing to release GDU we had a bunch of articles that were written in HTML on the old website. I simply copied that HTML and pasted them into these topics and enabled html. To convert all of them into BBCode would just take too long...