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

• < is used so that you can access information from a different class without referring it. In this case, MyCustomWindow can now use all the functions and variables that are in Window_Base.
• 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.

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!!"

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.imageshack.us/img57/5812/heroareadyxi4.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.

Comments (3)

...
written by Ty 101 , December 19, 2008

were do you put your code to display it.

report abuse

vote down

vote up

Votes: +1

...
written by Admin , December 21, 2008

In RPG Maker XP: Open the Script Editor(Tools -> Script Editor).

Scroll to the bottom of the scripts, and insert a new one above the "Main" script(Right Click -> Insert).

The rest you should figure out by following the instructions of the tutorial.

report abuse

vote down

vote up

Votes: -1

...
written by Ty 101 , December 21, 2008

it still does not work

report abuse

vote down

vote up

Votes: +1

Write comment

Name

Comment

smaller | bigger

I have read and agree to the Terms of Usage.

Add Comment Preview