+ TBWCS 952 Posted March 27, 2014 (edited) 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 11 TheoAllen, Arrpeegeemaker, Sughayyer and 8 others reacted to this Share this post Link to post Share on other sites
+ Sughayyer 163 Posted March 27, 2014 Not only you create the scripts, but you deconstruct them so everyone can learn! 1 TBWCS reacted to this Share this post Link to post Share on other sites
trapless 12 Posted March 31, 2014 (edited) ??? 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 Share this post Link to post Share on other sites
+ DarthVollis 59 Posted February 23, 2015 It is right here in this method. def terminatesuperdispose_backgrounddispose_all_used_graphicsend Share this post Link to post Share on other sites
Horror Friend 21 Posted March 13, 2015 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 Share this post Link to post Share on other sites
+ TBWCS 952 Posted March 13, 2015 This is not about Moghunter's Animated Title Screen. This is to teach people how to make their own. Share this post Link to post Share on other sites
+ DarthVollis 59 Posted March 15, 2015 I know. Thanks Soul. Share this post Link to post Share on other sites
+ TBWCS 952 Posted March 16, 2015 You're welcome. I was just wondering why links of Moghunter is being posted on my thread. Share this post Link to post Share on other sites
EearlJjay 1 Posted March 29, 2015 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... 1 TBWCS reacted to this Share this post Link to post Share on other sites
+ TBWCS 952 Posted March 29, 2015 Thank you. There is a more extensive way I did a title making script, but to be included somewhere on my deeper works. 1 EearlJjay reacted to this Share this post Link to post Share on other sites
Tsarmina 2,611 Posted March 31, 2015 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 1 TBWCS reacted to this Share this post Link to post Share on other sites
Sparkbomber 2 Posted May 2, 2015 Thanks for creating this guide, the script works like a charm. 1 TBWCS reacted to this Share this post Link to post Share on other sites
ladykataana 0 Posted July 23, 2015 Seriously, thank you for this! This is incredible! Share this post Link to post Share on other sites
+ TBWCS 952 Posted July 24, 2015 An updated tutorial if you also want to make your title commands custom: https://www.youtube.com/watch?v=WddEXGH9rV0 Share this post Link to post Share on other sites
Arrpeegeemaker 135 Posted July 24, 2015 (edited) 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 Share this post Link to post Share on other sites
dannyalder88 0 Posted July 30, 2015 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? Share this post Link to post Share on other sites
+ TBWCS 952 Posted July 30, 2015 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. Share this post Link to post Share on other sites
ohsew 1 Posted January 10, 2020 This is a great tutorial. Im totally doing this. 1 UncannyBoots reacted to this Share this post Link to post Share on other sites