Introduction to Title Screens
Chapter 1 - Introduction
This is just a basic introduction to making Title Screens. The knowledge of which can be applied to making menu screens, decision branches, pretty much anything that needs a cursor. The final result to this tutorial can be seen in Figure 1.1.
Figure 1.1 – The final result.
As far as resources go, you can use your own, but for the tutorials sake, I’ll provide you with some resources.
Spoiler
Okay, where to start? ... at the beginning I guess.
Chapter 2 - Importing the Resources
You can leave all the boxes checked, and if you do, you can skip this chapter, I’m just a bit pedantic about this stuff.
This is really simple, just untick all the boxes on all the resources and then re-tick these boxes:
ResourceTitle: Wallpapers
ResourceFont: Fonts (Jesus no, really?)
ResourceText: Animations
ResourceCursor: Menu Parts
Chapter 3 – Setting it all up
We’ll start with the font. In the Materials section, click on the Fonts tab. Add a new font, call it what you want. Make sure the “Make Font from a Graphic file” radio button is selected. In the Display Data, you can leave the Right and Lower margins as is, these are for if you use an actual true type font, what you’re looking for is the Letter Width part, select the “Proportional” radio button, with the 1 byte Space Width value being 5, and the 2-byte Space Width value being one. I don’t know what these are exactly, but I do know that if you don’t have them like this, then Spaces won’t be displayed properly. The image to use is ResourceFont, the “Input as framed graphics” checkbox only removes the black outline from the image. Characters are basically what letters are in the image, if the Japanese letters in the codebox below don’t display properly, you can just go to your sample games and copy those and paste them into your own Text Placement box.
!"#$%&'()*+,-./
0123456789:;?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~
ぁあぃいぅうぇえぉおかがきぎく
ぐけげこごさざしじすずせぜそぞた
だちぢっつづてでとどなにぬねのは
ばぱひびぴふぶぷへべぺほぼぽまみ
むめもゃやゅゆょよらりるれろゎわ
ゐゑをん、。ー～「」→←↑↓゛゜
ァアィイゥウェエォオカガキギクグ
ケゲコゴサザシジスズセゼソゾタダ
チヂッツヅテデトドナニヌネノハバ
パヒビピフブプヘベペホボポマミム
メモャヤュユョヨラリルレロヮワヰ
ヱヲンヴヵヶ
Cool, now your font is ready to use, click on the tab next to the Fonts which will take you to Text. Click on the Create button to add a new Text input. When you do, a box will appear asking to input your text. This doesn’t actually input the text in the box, this is just to let you see it on the Canvas... slightly redundant, but moving on, put in the text something like “Start Game” or “New Game”. Select your font and input the text again into the “English (US)”. Rinse and repeat for the Load Game.
Figure 3.1 – Input Text for Display on Canvas
Okay, with our Font and Text set up, go to your Genre tab (Action RPG/Shoot ‘em Up/Jumping Action) and create a new canvas. Select your canvas background to be ResourceTitle, then go to the Animatons tab, add the ResourceText and also make it a gadget (such a tutorial can be found [url="https://rpgcrisis.net/forums/tutorials/article/36-creating-animations-and-gadgets/“%5Dhere%5B/url%5D).
Chapter 4 - The "Menus" Area
Well here we are people, the meat and potatoes of the whole tutorial, the Menus section. The Menus section is where you set up your title screens, menu screens, Head's-Up Displays (HUD's), etc. First what we need to do is create a new Menu, hit the "Create" button and rename the resulting menu to something like "TitleScreen". This is the menu screen that we'll be placing our cursor and text on, but hold on! We have no cursor or text set up for use on the Menu Screen. First we'll set up the cursor, and to do this, we need to go to the "Menu Parts" and look for the "Create" button, but you'll notice something different about this button, it's got a small black triangle pointing down. This simply means that there are a few options to select from when you click "New", these options are: "Window", "Button", "Cursor", "Number Settings", "Graphic", "Horizontal Meter", and "Vertical Meter". You can refer to the helpfile to find out what these are (trusting you're using Indie Game Maker, the official English Translation of the program), if not, they should be pretty easy to understand anyway. For now we only need the Cursor, so go ahead and select that.
This part is pretty simple, when you select a new cursor, it automatically puts you in the Per Menu Part Settings tab (on the right side of the screen), from there you can select which image to use as the cursor from the drop down menu, which in this case is "ResourceCursor", also make sure that you have 2 horizontal and vertical slices and check the box at the top "Infinite Looping", this ensures that your cursor will always loop (trusting you give it a looping animation). Now go to the "Per Frame Settings" tab to set up your animations and what not. There's also something special you need to do with the frame's placement. What you need to do is offset the frame's position -100 in the X direction, and -50 in the y. This is simply because if we dont do this, the cursor will appear to be half way through the text. check Figure 4.1 to get an idea where the Cursor should be. This applies to all the frames in your cursor loop animation.
Figure 4.1 - Where your cursor should be.
Now we need to go into the "Items" tab to set up the Text to be displayed on the Menu Screen. Click the "Create" button twice to bring up two new items. Name them something like "New Game" and "Load Game". Select the "New Game" item and in its "Selecting" state, bring the Red and Blue colour slides down, leaving the green slide up at 255. This means that when the Cursor is on the New Game text, it will be highlighted as green. Cool, huh? Now click on the Item Specific Functions tab (found in the right section of the screen), and now you'll see a few options. What we're looking at is the "Text Display" and "Memories and Switches that Change after use" sections. The Text Display is simple, select "New Game" from the drop down menu. In the "Memories and Switches that Change after use", we want to check the Memory Change checkbox, and the variable we want to use is "Area Number", set that value to 1. Do the same for the Load Game, but instead of ticking the Variable box, tick the switch box, and select "Read from File" as the switch (which is on). Read from File is a special function inbuilt to the program which reads from a special saved file (which is called and saved to every time the switch "Save File" is called, and when this file is called, all variables and switches above the "Saved Target is up to Here" indicators (the ones with the arrows pointing up)).
Now we go back the Menus Tab and place our Cursor Layout Part, when you do, you'll see a giant window appear with special properties, for now, just hit okay. The cursor can be placed anywhere on or off the map, it really doesn't matter, because when we place our Text Items, the cursor will realign itself to be in front of the text, trusting you set it up properly. Fear not, I'll teach you how to set it up properly, but first, we need to put our Items down. This is where alignment becomes important, if you want the result to look like Figure 1.1 then you'll need to place the New Game and Load Game aligned to each other (i.e. one under the other, not randomly around the screen), dont get me wrong, if you want, you can place them wherever you want, and the cursor will still go to them, it's an automated process. It's just for aesthetics to place them all neatly aligned. Now when you add a new item, you'll get a new window popping up, asking for a few properties. Just set them up like in Figure 4.2 and you should be fine. I should note that the 2 number inputs are for an offset to the placement. For the cursor we're using I've found that 4 and 4 work best.
Figure 4.2 - The Detailed Information
After placing both New and Load Game texts, look for the "Setting a Cursor Group (the Cursor and Linked Selectable Items)" tab. It's in the bottom section. Now remember the giant window full of properties you can set for your cursor, this is the time to set them. In the "Appearance and Disappearance Positions" area, make sure the grid highlight is in the centre and the Appearance Method and initial Location (drop down boxes) are set to "Switch Immediately". The only other property we need to set is the "Making a Cursor Group and Setting Cursor Controls," in this section, you'll see two boxes, one named "Candidates," this box should have the New Game and Load Game items in it, what you need to do is select them and press the "Add (>>)" button. This will take them across to the Box named "Groups". There we have it, you've set up a cursor group, how easy was that? Since this cursor doesn't lead to any others, you can leave the rest of the stuff default.
Chapter 5 - Finishing Up
We're nearly done. Now we need to go back into your Genre tab (Action RPG/Jump/Shooter), in Canvases, select your "Title" canvas and go into the Per Canvas Settings. Ensure that your "Menu to be displayed on this Canvas" is set to the TitleScreen menu we made. Now go into the "Flow" tab. Click on the green "Start" Box and delete it's canvas branch to your first map, then click from the yellow box onto your "Title" canvas (found in the Non-Connected Canvases section). This ensures that when the program starts up, it'll start on the Title screen. Now click on the black box with the Asterisk (*) and drag to the first map. In the branch conditions you then need to check the "The designated memory's value changed" box, the Variable being Area Number, condition being Equal (==), and the value being 1. To set up a load of another map, you simply repeat the process but instead of Area Number being 1, it'd be 2. It's really up to you to give set the area number every time you enter a map, but thats the cost of having a loading system.
There you have it, a hopefully easy way to set up menu's and save/load screens and whatnot. This has been Kyle_Katarn with another AGM tutorial. Happy game making.
