How to Make an Animated Title Screen Scripting Tutorial

[+ TBWCS 951]

How to Make an Animated Title Screen Scripting Tutorial

Tutorial Made by: Soulpour777

Graphics: Moghunter's Master Demo

 

Q: I wanted to make my own simple animated title screen, but I don't have the knowledge to do so. I want to make my own way of making a Title Screen just like Moghunter's scripts, can you teach me?

 

This is basically the goal of this tutorial. Today, we're going to make our own Animated Title Screen! Awesome, right? Yayy! Before we start, we will need the following materials! Remember that I may add new materials as we go on to the tutorial.

 

 

 

Save this with the name as Background.

 

Save them with the name as Fog0.

 

Save this with the name as Fog1.

 

And lastly, save this with the name as Game_Title.

 

 

 

 

 

Save them under your Titles1 folder. That is where we will all be putting our graphics in. Now that we have the necessary graphics needed, let's jump right into the scripting. Open your RPG Maker VX Ace and start a new project. I recommend making this in a fresh project so it won't cause any disruption on your project. Just to be safe

 

Now, once you created a new project, press F11 to go the Script Section. You can also click the Script Section Icon on your Ace's tool ribbon. Go to the Materials part on your script and create a new section below. This is where we are going to start our scripting. 

 

The things we need to do on our Title Screen are the following:

• Use our Game_Title as the title instead of the Default Game Title
• Make our background
• Make some images move

To begin with, start with this on your script:

 

 

 

class Scene_Title < Scene_Base
  alias :soul_animated_titlescreen_simple :start
  #--------------------------------------------------------------------------
  # * Start Processing
  #--------------------------------------------------------------------------
  def start
    soul_animated_titlescreen_simple
    create_grass_fog
    create_trees
  end
end 

 

 

 

What we did here was to create a class called Scene_Title inheriting its functions from Scene_Base. Instead of rewriting Scene_Title's method start, we created an alias. What is an alias? Alias simply means a new name for our method. We need to call the alias on that method as well, it is called Calling the Original Method. If you are wondering why there is a : sign on the alias, that is because : signed things are considered methods. You can also alias it this way if you want:

alias soul_animated_titlescreen_simple start

Does the alias need to be like that? Can't we make our own alias?

 

No. It is not necessary. You can alias it with any name you want.

 

If you are wondering what create_grass_fog and create_trees are, that is what we will define next.

 

We need to overwrite our create_background from the original Scene_Title, so do this:

 

 

 

  #--------------------------------------------------------------------------
  # * Create Background
  #--------------------------------------------------------------------------
  def create_background
      @background = Plane.new
      @background.bitmap = Cache.title1("Background")
      @background.z = 0
  end 

 

 

 

This time, we changed the original things inside the create_background method. We created a new Plane object and made a bitmap whose name is the "Background" which we just had saved awhile ago. Now, let me explain a few things here (also from the help file to be more accurate of what they actually mean):

 

Planes

Planes are special sprites that tile bitmap patterns across the entire screen and are used to display parallax backgrounds and so on.

 

Bitmap

The bitmap class. It represents images.

 

Now that we got those done, when we created our instance variable named background, which is a plane and holds a bitmap named "Background" from our game folder Titles1, we set up its z attribute. What does the z do?

 

z

The plane's z-coordinate. The larger the value, the closer to the player the plane will be displayed.

If multiple objects share the same z-coordinate, the more recently created object will be displayed closest to the player.

 

Basically what it means is the higher the value of the z, the closer the plane would be displayed. Treat it like a layer in Photoshop. For example, if you created a new layer from Layer 1, Layer 2 is displayed before Layer 1.

 

Now, we need to do that for the Fog0 and Fog1 too, so on your script, add this:

 

  #--------------------------------------------------------------------------
  # * Create Grass
  #--------------------------------------------------------------------------  
  def create_grass_fog
    @grass_fog = Plane.new
    @grass_fog.bitmap = Cache.title1("Fog0")
    @grass_fog.z = 3
  end
  #--------------------------------------------------------------------------
  # * Create Trees
  #--------------------------------------------------------------------------  
  def create_trees
    @trees = Plane.new
    @trees.bitmap = Cache.title1("Fog1")
    @trees.z = 2
  end

 

So on this part, we defined our create_grass_fog and create_trees that we just called on our start method.

 

This is the interesting part. Well first off, as you noticed, we inherited methods from Scene_Base, right? That means everything from the Scene_Base also works in Scene_Title. We need to borrow the update_basic method from Scene_Base and call it on Scene_Title. If you search your Scene_Base, you can see there the update_basic method. So, on our script, we need to make something like this:

 

  #--------------------------------------------------------------------------
  # * Update Frame (Basic)
  #--------------------------------------------------------------------------
  def update_basic
    Graphics.update
    Input.update
    update_all_windows
    @grass_fog.ox += 3
    @trees.ox += 1
  end   

 

Oops! Let's explain what happened here. We retained the Graphics.update, Input.update and update_all_methods from update_basic. That is because they are important on making the Scene_Title work. Now, what does @grass_fog.ox += 3 and @trees.ox += 1 mean? What is ox?

 

ox

The x-coordinate of the plane's starting point. Change this value to scroll the plane.

 

Q: I advance read the Sprite Class and it says it also has ox. Can't we just use sprites instead?

 

A: Good question, isn't it? Well the reason for that is because the Sprite won't replicate itself or rather does not work like a Parallax. When you use Planes, it works like a parallax and repeats itself, unlike sprites, they don't when they scroll.

 

So what we did here is: we made the Fog0 scroll horizontally by 3 and the trees by 1. We created it in update_basic because it works every frame.

 

Moving on, we need to draw our Game's Title, so we need to overwrite the draw_game_title. On your script, do this:

 

 

 

  #--------------------------------------------------------------------------
  # * Draw Game Title
  #--------------------------------------------------------------------------
  def draw_game_title
    @game_title = Sprite.new
    @game_title.bitmap = Cache.title1("Game_Title")
    @game_title.z = 4
    center_sprite(@game_title)
    @game_title.y = Graphics.height / 2
  end 

 

 

 

And lastly, we need to dispose every image that we made here. So, on your script, do this:

 

 

 

  #--------------------------------------------------------------------------

  # * Free All Graphics

  #--------------------------------------------------------------------------

  def dispose_all_used_graphics

    @background.bitmap.dispose

    @background.dispose

    @grass_fog.bitmap.dispose

    @grass_fog.dispose

    @trees.bitmap.dispose

    @trees.dispose

    @game_title.bitmap.dispose

    @game_title.dispose

  end

 

 

 

Let me explain what we did here on the dispose method.

 

dispose 

Frees the plane. If the plane has already been freed, does nothing.

 

We freed the bitmap first and freed the object. So we disposed the image and disposed the Plane object we just created. It works the same if you created a Plane or a Sprite. The bitmap we just disposed there is the bitmap object we used on the plane.

 

Since we did not overwrite the dispose_background method, we need to do this on our script:

 

  #--------------------------------------------------------------------------
  # * Free Background
  #--------------------------------------------------------------------------
  def dispose_background; end  

 

What we did there is just removing the things its doing on dispose_background. You can also put the things on dispose_all_used_graphics on dispose_background if you like.

 

That's basically it!

 

This should be the final product of your code:

 

#==============================================================================
# ** Scene_Title
#------------------------------------------------------------------------------
#  This class performs the title screen processing.
#==============================================================================

class Scene_Title < Scene_Base
  alias :soul_animated_titlescreen_simple :start
  #--------------------------------------------------------------------------
  # * Start Processing
  #--------------------------------------------------------------------------
  def start
    soul_animated_titlescreen_simple
    create_grass_fog
    create_trees
  end
  #--------------------------------------------------------------------------
  # * Termination Processing
  #--------------------------------------------------------------------------
  def terminate
    super
    dispose_background
    dispose_all_used_graphics
  end  
  #--------------------------------------------------------------------------
  # * Create Background
  #--------------------------------------------------------------------------
  def create_background
      @background = Plane.new
      @background.bitmap = Cache.title1("Background")
      @background.z = 0
  end
  #--------------------------------------------------------------------------
  # * Create Grass
  #--------------------------------------------------------------------------  
  def create_grass_fog
    @grass_fog = Plane.new
    @grass_fog.bitmap = Cache.title1("Fog0")
    @grass_fog.z = 3
  end
  #--------------------------------------------------------------------------
  # * Create Trees
  #--------------------------------------------------------------------------  
  def create_trees
    @trees = Plane.new
    @trees.bitmap = Cache.title1("Fog1")
    @trees.z = 2
  end
  #--------------------------------------------------------------------------
  # * Update Frame (Basic)
  #--------------------------------------------------------------------------
  def update_basic
    Graphics.update
    Input.update
    update_all_windows
    @grass_fog.ox += 3
    @trees.ox += 1
  end    
  #--------------------------------------------------------------------------
  # * Draw Game Title
  #--------------------------------------------------------------------------
  def draw_game_title
    @game_title = Sprite.new
    @game_title.bitmap = Cache.title1("Game_Title")
    @game_title.z = 4
    center_sprite(@game_title)
    @game_title.y = Graphics.height / 2
  end
  #--------------------------------------------------------------------------
  # * Free Background
  #--------------------------------------------------------------------------
  def dispose_background; end  
  #--------------------------------------------------------------------------
  # * Free All Graphics
  #--------------------------------------------------------------------------
  def dispose_all_used_graphics
    @background.bitmap.dispose
    @background.dispose
    @grass_fog.bitmap.dispose
    @grass_fog.dispose
    @trees.bitmap.dispose
    @trees.dispose
    @game_title.bitmap.dispose
    @game_title.dispose
  end
end

 

Go ahead and test it!

 

Q: Can we add more images and create more animations into it like scrolling upwards too?

 

A: Definitely yes! Make sure to create them in a method, call them from the start method. Make sure they're instance variables too! Also, don't forget to dispose them Organize your Plane's z well too.

 

Q: If its possible to do an upward motion for the plane, how would I do that?

 

oy 

The y-coordinate of the plane's starting point. Change this value to scroll the plane.

 

You can do something like this:

 

@image_i_like_to_scroll.oy += value

where value is the number of scroll speed you want to deal with the image. Add that in update_basic.

 

That's all folks! I added a DEMO of this tutorial as well, so you can get to see it in action!

 

 

Edited March 31, 2014 by SoulpourVII

[+ Sughayyer 163]

Not only you create the scripts, but you deconstruct them so everyone can learn!

[trapless 12]

???

I don't see a call to:

dispose_all_used_graphics

I don't understand how the images are disposed from memory here. Would someone please explain.

Edited March 31, 2014 by trapless

[+ DarthVollis 59]

It is right here in this method.

 

def terminate
super
dispose_background
dispose_all_used_graphics
end

[Horror Friend 21]

I used mog animated title screen and it was verry easy to use and it looks great so for those that didn't really understand here is the link: http://atelier-rgss.com/RGSS/Menu/ACE_Menu09.html

 

I also tried the animated title screen from wiltheunpropro and it was always saying me that there was an error so if you have the same problem mog animated title is a good alternative.

 

Tutorial on the script :http://m.youtube.com/watch?v=JrvpuGJAMWA

[+ TBWCS 951]

This is not about Moghunter's Animated Title Screen. This is to teach people how to make their own.

[+ DarthVollis 59]

I know. Thanks Soul.

[+ TBWCS 951]

You're welcome. I was just wondering why links of Moghunter is being posted on my thread.

[EearlJjay 1]

For someone like who is a Business Major. This tutorial is really quite easy to grasp. Spot on dude... i hope there will be lots like you here. I love how to learn making this scripts ASAP so i can start helping others here too...

[+ TBWCS 951]

Thank you. There is a more extensive way I did a title making script, but to be included somewhere on my deeper works.

[Tsarmina 2,610]

Wow!~ <3 Thanks Soul! This is great. owo I've really been wanting to try something like this for a while but I'm a scripting idiot so I never really had the chance or methods...but this is really in-depth and helpful. Imma try this next time I get an opportunity :3

[Sparkbomber 2]

Thanks for creating this guide, the script works like a charm.

[ladykataana 0]

Seriously, thank you for this! This is incredible! 

[+ TBWCS 951]

An updated tutorial if you also want to make your title commands custom: 

 

https://www.youtube.com/watch?v=WddEXGH9rV0

[Arrpeegeemaker 62]

Wow, scripting never really made sense all the way to me, only in it's individual components. This is a nice step by step, and it really helps me understand a lot about how the individual things are used to work together. Seriously, I've taken notes on long tutorials and everything, this helps big time. 

 

And I cant wait to watch the video, now.

 

 

*Update* I just plugged in the script, stared at the screen for a while, like there was some hidden message in it and then got smacked in the face with about forty ideas, which each called forty ideas to smack me in the face, which each called etc. 

 

So I'm probably gonna be addicted to smack now. That's what you've done to me. Thanks a lot.

Edited July 24, 2015 by Arrpeegeemaker

[dannyalder88 0]

Amazing tutorial and easy to follow. Introduced me to Plane classes which I didn't know existed! I'm now confused between the update() and update_basic() methods. You say that update_basic() is called every frame, I was under the impression update() was called every frame and update_basic() was for inputs. Have I got this wrong?

[+ TBWCS 951]

The update_basic indeed updates the graphics, the input and all the windows getting called / executed on that particular scene. The update scene is called per frame. Let us see in Scene_Base particularly how it was done:

  #--------------------------------------------------------------------------
  # * Frame Update
  #--------------------------------------------------------------------------
  def update
    update_basic
  end
  #--------------------------------------------------------------------------
  # * Update Frame (Basic)
  #--------------------------------------------------------------------------
  def update_basic
    Graphics.update
    Input.update
    update_all_windows
  end

Notice in this snippet that the update_basic holds the Graphics.update, Input.update and update_all_windows methods, right? If we create a new method called update_something and did the same as update_basic and call it on update and all other places it was called at and changed it, it would have the same result. That's why you see me do super on update on any new scene because that is calling update_basic.

[ohsew 1]

This is a great tutorial. Im totally doing this.