Titles are kind of a pain to make without using images from somewhere else, just using an abundance of brushes you didn't make, or even using a stock title someone made and slapping your title on it. These are all pretty... Unfulfilling, in terms of the creator, really. You want something that looks great, you want something that you made, you want awesome, and you want it now! Well I'm sure you're probably not so enthusiastic as that, but my point stands regardless.
Making a title out of crap you didn't make is relatively lame-ish, so I'll be detailing how one might go about making a title using minimalistic shapes and RGSS (I'll try to keep the RGSS pretty basic, which shouldn't be too hard since I kind of don't know ruby anyways). It'll involve shapes, and they'll move, and it'll be fun looking. I guarantee it.
CREATING YOUR TITLE
Well I'm going to be keeping this relatively simple, so we'll just be doing an easy black on white title. Let's call our game something cute, something original (since it won't be a real word). "Incandesia" should do wonderful, it's like an idea light bulb (incandescent lighting), only put into proper noun-esque form! Now I'm also just going to be using shapes and default fonts (I'll just stick with Garamond font, since I rather like it).
NOW, the title graphic that you load into the database! It's just going to be a white 640x480 image. So just boot up your photo editing program (for free ones I'd suggest The Gimp or Paint.net, but since this isn't really an art tutorial I'm not going to be going too in depth to the exact creation of this stuff, so you'll have to bear with me). Create nice 640x480 sized image, fill it with white and save it into your titles folder, we'll just call it white_title for now, simple and fun!
And now we'll be making our fantastic little shapes. [I should note that we'll be working with layers and transperency here, so using a simple program like paint might make this part a bit dicey for you.] I think for this we're going to have a line extend into the screen from the left as a little intro image, and it'll be black, and reveal the white text of the title. So! In our graphical editing program, let's go about making that line. For sizing purposes, let's first make the title text (in black so you can see it for now), and find a nice size and way to type it out. I decided to just have size 72 i, followed by the rest of the word in caps in size 60. Looking something faintly like this:
iNCANDESIA
Now let's put together that nice little black line I was talking about. On a new layer, take a nice big rectangle around your letters (preferably with the same amount of space on each vertical side of the text, but guesswork isn't exact and this isn't exactly a perfectionist job right now), and fill it with black. (rectangular maraquee followed by alt+backspace in photoshop) Now we'll put a rounded edge on the rectangle, so take a circular selection at the end of the rectangle and fill it with black. Note that you cannot see the letters anymore so it's about time we changed those to white (and of course put that layer above the black layer so it shows)!
Since I've said a lot of garbage without any pictures, I'd say it's about time we got a visual representation of what I'm talking about, the stuff with the layers you need to know about, etc.
http://img185.imageshack.us/img185/5780 ... m01ly0.jpg[/img]
Notice how there's three layers in the picture, the background (what we originally saved as the title, only visible so we can get an idea of how the final product will look), the text layer (iNCANDESIA), and the black line layer.
Well alright, I'm satisfied with how the title text and line look (since I'm not using any brushes and it's supposed to be pretty darn simple for the sake of ease), so we'll be going on to the newgame, continue, and endgame buttons. Note that we're not going to use the little default menu here (ugly window skin creation, etc), but we're still gonna stick with the default names. It's a good point of knowledge to know that in no way are these names stuck in stone, which is nice.
So for the buttons, I'm thinking we're going to have a grayed out version of the button text for when it's not selected, and just have it fade into black text when it's selected and have a simple line be drawn under it. The line is going to be drawn using RGSS, so be forewarned!
Anywho, let's get to typing in that text. We're going to be saving over that nice title background we saved before, since it's more efficient to have the grayed out text for newgame, continue and endgame to just be on the title image than another bitmap object altogether. Let's just type the three selections in rather simply in lower case, size 36, and in a rather light gray color. Make sure they're all on seperate layers so we can change them to black and save them individually later.
This is what your title image should look like now:
http://img167.imageshack.us/img167/1108 ... tlemj1.png[/img]
Well anyways, change the colors on the selections to pure black now, and we'll get around to saving our images. We'll be using/abusing the pictures folder in your project folder for this one. Make every layer but your black line layer invisible and then save the image as 'black_line' in your pictures folder, make sure you're saving as a .png so you can keep your transperency (it's pretty important!). Rinse and repeat with the other layers, naming the text layer 'text.png', new game layer as 'newgame.png', continue as 'continue.png', and end game as 'endgame.png' (pretty simple but this sort of stuff can trip up some people occasionally).
And now we are officially done with the graphics part of our title making fun. Be wary since we're moving into the RGSS hell section. (note that we didn't resize anything, this is so we just don't have to deal with that in the coding section because it's kind of a hassle!)
DEALING WITH RGSS
Alright, so let's open up our project and get down to it. Set your title to the white nonsense you made up above, turn the title music off (because it gets annoying listening to the first 30 seconds of it over and over and over again while testing/improving/whatever) and get ready for confusion (unless you know ruby, in which case you'll probably have a better idea of what I'm doing than I will). Now that you've got that nonsense out of the way, we'll just be jumping into the confusing coding, open up your lovely script editor and navigate here:
http://img166.imageshack.us/img166/7899 ... m02ph4.jpg[/img]
And to our first order of business:
Disabling the Command Box Graphic
As I'm relatively lazy, and the command box fits the general theme of selection, we're going to just make it invisible, but still use it completely. It makes it so we don't have to run through and cut out the relevant code, and we also don't have to code in the selection system. Anyways, to disable the graphics for it, all we need to do is make it's visible property set to false. Scroll your way down to (what's currently) line #43 (the lines are numbered on the left margin), and press that shiny enter key and make a new line, and type you in some, "@command_window.visible = false". Relatively simple is it not?! And so we move onto the next subject!
Making the Button Graphics Work
As the command window is now invisible, it's slightly difficult for the user to find out what selection he's on. Not to fear though, as we'll be putting in the nice button graphics now. We need to start by making a sprite for the button graphic. Find your way over to line #35, make a new line after it, and type in, "@button_sprite = Sprite.new" This is going to be our button graphic. On the next line, we'll make it invisible to start with, since it'll be fading in. The next line is going to be "@button_sprite.opacity = 0" (the opacity property ranges from 0 [invisible] to 255 [fully visible])
And now we'll go about checking what the user's selected index is, and fading those nice button graphics in relatively smoothly using loops and if statements! (the bread and butter of fun programming everywhere) Scroll on down to cool line #71 and take note of the "loop do" there, that means an infinite loop as long as the scene is open, which means this is where we'll be doing our graphical updating and whatnot. Under line #71, we'll be adding a relatively complex bit of coding to determine what graphic we should have @button_sprite set to.
Well alright, the first if statement (if Input.trigger etc) is a big way of asking 'did the user press up or down?', and then 'if they did, make the button invisible'. So whenever they change the selection, their new selection will be invisible to begin with. The next if statement is checking the (now invisible) command window's index (index is just a numbered representation of what selection is highlighted, starting with 0 being new game in this case), and changing the @button_sprite's graphic accordingly. The last if statement is checking if the button isn't fully visible, and if it's not, then it'll up it's opacity gradually until it is. The higher that number is, the faster it'll fade in, set it to 50 and it'll fade in in no time, set it to 1, and it'll take a while.
And now our fading buttons are complete! If you didn't care about anything but the selection buttons looking relatively acceptable, then your title is done! But now we'll be moving on to...
Creating the Intro Graphic
How I talked earlier about the black line sliding in and revealing the title text. This will deal more with loops than our last efforts. So we'll start our little intro adventure at line #38, and we'll enter in these three lines for the black_line graphic.
And then we'll enter two more lines for the text graphic.
(looking familiar enough to you yet?)
And now that we've initialized the graphics and placed them accordingly, let's move down to line #77 and add in the loop to bring that black line out and make the text visible! Add this in and I'll explain it:
It's largely self-explanatory, unless the x position of the black_line graphic (x is horizontal going from the top left pixel of the graphic) is 0 or above, it'll keep adding 4 to it every frame.
And now that we have the intro done, it's time for...
Me Continuing this Tutorial Some Other Time!
Yeah it's a letdown I'm sure, but it's 6:30AM and I haven't slept for over a day. (I really don't know why I did this right now, but hey whatever when the whim strikes you just gotta do it) Sorry for not getting to the underlines, but I'm pretty sure I'll be adding them to the 'advanced-esque' section of this tutorial, since it'd be kind of a big chunk of code to do it how I thought I would (what with irregularly placed buttons and all that jazz)
Oh and the title so far. It's got a nice little space for a logo or somesuch other nonsense, I figured someone might like to see it in action without making it for themselves so I put it here:
http://www.sendspace.com/file/rx50vk
EDIT: oh wow I kind of forgot to mention disposing of your graphics! Go to line #111, and enter in:
PART TWO
The point of this tutorial has kind of changed, now I'm just going to encompass 'making a nice title' instead of 'making a nice title without having to do a lot of work to make nice artwork'. I'm going to be using some pre-made artwork from the game S.T.A.L.K.E.R. and a font called 1942 report (you can look it up on deviantart), and I'm going to be giving a little less 'go here do this exactly' direction to make you think a little more, and thus probably learn a little more if you're trying. We're going to be making the title a little more advanced this time, and probably take up some more disc space while we're at it. We're going to use the same title because I'm uninventive, but it's going to look pretty nice in my opinion!
This is what the end-product should look like generally:
http://i4.photobucket.com/albums/y111/A ... utIm03.jpg[/img]
The newgame will scroll up/down to display continue and end game, and there's going to be an animation of static overlaying everything (slight static). I've uploaded the graphics I'll be using in case you feel like just following along with what I'm doing, but the main point of this part of the tutorial is just learning how to do similar things with your own choice of graphics, so keep that in mind: http://www.sendspace.com/file/yfhgeo
Well alright, we've got our graphics, we've got a shiny new project, so we may as well get started.
Since eventually you'll probably just want to disable the command window for the title (left/right movement or something), we'll just do it for this one (even though I have the same lazy excuse as last time to leave it there).
So we'll start with this, I'll just name off the lines you'll want to get rid of stuff, and I'll leave it to you to figure out what exactly needs to be deleted (the command window object is called @command_window, we'll pretty much just be deleting every line that has that in it and replacing it's use with an @index variable). Lines: #36-43, #56, #58, #82-83, #93. And those are all the lines we'll need to take out (I took some of the comments as well since they refer to @command_window and are thus super-useless to us for now).
So, as we've killed any way of user interaction for now, I submit that we should add in the basic function of our own menu-esque selection system now.
Remember how we added in "if Input.trigger?(Input::UP) or Input.trigger?(Input::DOWN)" up above? Well now we're going to differentiate between the up and down, and add in the @index variable to make the system save which place we're on.
Let's make the index variable first and introduce it to the code already there so we don't forget later, as I've done in the past. Head over to line #32, and put in a new line, this is where we'll be putting our variables. Add in "@index = 0" and we've got the rudimentary piece necesary to a menu! Now to the start of implementing it, head down to line #49, and replace the "else" (since without the @command_window command we won't be using it) on that line with @index = 1 to make it so if there's savegame data, we'll set the selection to default on continue instead of new game. Now we'll go down to line #84 and change the @command_window.index to just @index. And that'll do it for that.
Let's get to that user input shall we? We'll place that right under the loop do, now located at line #59. Add this nice little tidbit in so we have our @index determined by user input.
And now we have a menu, and the user could use it, if you don't mind them not being able to see it. So let's remedy that situation, and make our button graphic. Back up to line #36 to add in "@sprite_button = Sprite.new". Now let's travel back down to line #94 to update graphics with another branch. Add this in:
And our basics are done! The user can use this title now! Sure it's pretty basic and lame for the moment, but we'll be fixing that later. Let's not forget to make sure our graphic is disposed of however, since I kind of make this mistake like every time and forget about it. Go to line #89 and add in "@sprite_button.bitmap.dispose" and "@sprite_button.dispose".
Now we'll add in that overlying static effect for something relatively maybe pretty to look at. Let's head up to where we declared our variables and graphics and add in a @animation_count = 0 in the variables, and @sprite_static = Sprite.new in the graphics. Now head back down to the graphics update (line #98 now), and we'll be adding in a case for animating things frame by frame (since .gifs aren't accepted into RMXP). This is the code I use for this:
And now let's test it out. Well it doesn't look too amazingly nice, too patterned, so let's just decrease the opacity some, go back up to where you declared the graphic, and add in @sprite_static.opacity = 60. I'd just go back and edit the pictures (because the odd flashing does look like it calls for it), but I'm feeling lazy so I'll just downplay the effect so you don't notice it. Make sure to dispose of the graphics, and let's move on.
The title text seems a good next stop I'd dare say. Make two graphics called @sprite_text and @sprite_textcover. Set the graphics for them to text.png and text_cover.png respectively, and then add in a @sprite_textcover.x = -100 afterwards to make it start completely covering @sprite_text's graphic.
Let's go down to our loop do and just under it add in some code to slowly bring out the cover to reveal the title. We'll add this:
We'll keep it relatively simple for now, we'll be 'prettying' things up last. Well actually that's the phase we're going on to now, but we're starting with the buttons (since they've looked far too ugly for far too long really). And of course the last thought I nearly forget, make sure to dispose of the graphics.
Well I would be doing that except I have to leave so to the two people that find this interesting, wait a while, I'll finish it.
Making a title out of crap you didn't make is relatively lame-ish, so I'll be detailing how one might go about making a title using minimalistic shapes and RGSS (I'll try to keep the RGSS pretty basic, which shouldn't be too hard since I kind of don't know ruby anyways). It'll involve shapes, and they'll move, and it'll be fun looking. I guarantee it.
CREATING YOUR TITLE
Well I'm going to be keeping this relatively simple, so we'll just be doing an easy black on white title. Let's call our game something cute, something original (since it won't be a real word). "Incandesia" should do wonderful, it's like an idea light bulb (incandescent lighting), only put into proper noun-esque form! Now I'm also just going to be using shapes and default fonts (I'll just stick with Garamond font, since I rather like it).
NOW, the title graphic that you load into the database! It's just going to be a white 640x480 image. So just boot up your photo editing program (for free ones I'd suggest The Gimp or Paint.net, but since this isn't really an art tutorial I'm not going to be going too in depth to the exact creation of this stuff, so you'll have to bear with me). Create nice 640x480 sized image, fill it with white and save it into your titles folder, we'll just call it white_title for now, simple and fun!
And now we'll be making our fantastic little shapes. [I should note that we'll be working with layers and transperency here, so using a simple program like paint might make this part a bit dicey for you.] I think for this we're going to have a line extend into the screen from the left as a little intro image, and it'll be black, and reveal the white text of the title. So! In our graphical editing program, let's go about making that line. For sizing purposes, let's first make the title text (in black so you can see it for now), and find a nice size and way to type it out. I decided to just have size 72 i, followed by the rest of the word in caps in size 60. Looking something faintly like this:
iNCANDESIA
Now let's put together that nice little black line I was talking about. On a new layer, take a nice big rectangle around your letters (preferably with the same amount of space on each vertical side of the text, but guesswork isn't exact and this isn't exactly a perfectionist job right now), and fill it with black. (rectangular maraquee followed by alt+backspace in photoshop) Now we'll put a rounded edge on the rectangle, so take a circular selection at the end of the rectangle and fill it with black. Note that you cannot see the letters anymore so it's about time we changed those to white (and of course put that layer above the black layer so it shows)!
Since I've said a lot of garbage without any pictures, I'd say it's about time we got a visual representation of what I'm talking about, the stuff with the layers you need to know about, etc.
http://img185.imageshack.us/img185/5780 ... m01ly0.jpg[/img]
Notice how there's three layers in the picture, the background (what we originally saved as the title, only visible so we can get an idea of how the final product will look), the text layer (iNCANDESIA), and the black line layer.
Well alright, I'm satisfied with how the title text and line look (since I'm not using any brushes and it's supposed to be pretty darn simple for the sake of ease), so we'll be going on to the newgame, continue, and endgame buttons. Note that we're not going to use the little default menu here (ugly window skin creation, etc), but we're still gonna stick with the default names. It's a good point of knowledge to know that in no way are these names stuck in stone, which is nice.
So for the buttons, I'm thinking we're going to have a grayed out version of the button text for when it's not selected, and just have it fade into black text when it's selected and have a simple line be drawn under it. The line is going to be drawn using RGSS, so be forewarned!
Anywho, let's get to typing in that text. We're going to be saving over that nice title background we saved before, since it's more efficient to have the grayed out text for newgame, continue and endgame to just be on the title image than another bitmap object altogether. Let's just type the three selections in rather simply in lower case, size 36, and in a rather light gray color. Make sure they're all on seperate layers so we can change them to black and save them individually later.
This is what your title image should look like now:
http://img167.imageshack.us/img167/1108 ... tlemj1.png[/img]
Well anyways, change the colors on the selections to pure black now, and we'll get around to saving our images. We'll be using/abusing the pictures folder in your project folder for this one. Make every layer but your black line layer invisible and then save the image as 'black_line' in your pictures folder, make sure you're saving as a .png so you can keep your transperency (it's pretty important!). Rinse and repeat with the other layers, naming the text layer 'text.png', new game layer as 'newgame.png', continue as 'continue.png', and end game as 'endgame.png' (pretty simple but this sort of stuff can trip up some people occasionally).
And now we are officially done with the graphics part of our title making fun. Be wary since we're moving into the RGSS hell section. (note that we didn't resize anything, this is so we just don't have to deal with that in the coding section because it's kind of a hassle!)
DEALING WITH RGSS
Alright, so let's open up our project and get down to it. Set your title to the white nonsense you made up above, turn the title music off (because it gets annoying listening to the first 30 seconds of it over and over and over again while testing/improving/whatever) and get ready for confusion (unless you know ruby, in which case you'll probably have a better idea of what I'm doing than I will). Now that you've got that nonsense out of the way, we'll just be jumping into the confusing coding, open up your lovely script editor and navigate here:
http://img166.imageshack.us/img166/7899 ... m02ph4.jpg[/img]
And to our first order of business:
Disabling the Command Box Graphic
As I'm relatively lazy, and the command box fits the general theme of selection, we're going to just make it invisible, but still use it completely. It makes it so we don't have to run through and cut out the relevant code, and we also don't have to code in the selection system. Anyways, to disable the graphics for it, all we need to do is make it's visible property set to false. Scroll your way down to (what's currently) line #43 (the lines are numbered on the left margin), and press that shiny enter key and make a new line, and type you in some, "@command_window.visible = false". Relatively simple is it not?! And so we move onto the next subject!
Making the Button Graphics Work
As the command window is now invisible, it's slightly difficult for the user to find out what selection he's on. Not to fear though, as we'll be putting in the nice button graphics now. We need to start by making a sprite for the button graphic. Find your way over to line #35, make a new line after it, and type in, "@button_sprite = Sprite.new" This is going to be our button graphic. On the next line, we'll make it invisible to start with, since it'll be fading in. The next line is going to be "@button_sprite.opacity = 0" (the opacity property ranges from 0 [invisible] to 255 [fully visible])
And now we'll go about checking what the user's selected index is, and fading those nice button graphics in relatively smoothly using loops and if statements! (the bread and butter of fun programming everywhere) Scroll on down to cool line #71 and take note of the "loop do" there, that means an infinite loop as long as the scene is open, which means this is where we'll be doing our graphical updating and whatnot. Under line #71, we'll be adding a relatively complex bit of coding to determine what graphic we should have @button_sprite set to.
Code:
if Input.trigger?(Input::UP) or Input.trigger?(Input::DOWN)
@button_sprite.opacity = 0
end
if @command_window.index == 0
@button_sprite.bitmap = RPG::Cache.picture("newgame.png")
elsif @command_window.index == 1
@button_sprite.bitmap = RPG::Cache.picture("continue.png")
elsif @command_window.index == 2
@button_sprite.bitmap = RPG::Cache.picture("endgame.png")
end
if @button_sprite.opacity <= 255
@button_sprite.opacity += 15
endWell alright, the first if statement (if Input.trigger etc) is a big way of asking 'did the user press up or down?', and then 'if they did, make the button invisible'. So whenever they change the selection, their new selection will be invisible to begin with. The next if statement is checking the (now invisible) command window's index (index is just a numbered representation of what selection is highlighted, starting with 0 being new game in this case), and changing the @button_sprite's graphic accordingly. The last if statement is checking if the button isn't fully visible, and if it's not, then it'll up it's opacity gradually until it is. The higher that number is, the faster it'll fade in, set it to 50 and it'll fade in in no time, set it to 1, and it'll take a while.
And now our fading buttons are complete! If you didn't care about anything but the selection buttons looking relatively acceptable, then your title is done! But now we'll be moving on to...
Creating the Intro Graphic
How I talked earlier about the black line sliding in and revealing the title text. This will deal more with loops than our last efforts. So we'll start our little intro adventure at line #38, and we'll enter in these three lines for the black_line graphic.
Code:
@black_line = Sprite.new
@black_line.bitmap = RPG::Cache.picture("black_line.png")
@black_line.x = -480And then we'll enter two more lines for the text graphic.
Code:
@text_sprite = Sprite.new
@text_sprite.button = RPG::Cache.picture("text.png")And now that we've initialized the graphics and placed them accordingly, let's move down to line #77 and add in the loop to bring that black line out and make the text visible! Add this in and I'll explain it:
Code:
unless @black_line.x >= 0
@black_line.x += 4
endIt's largely self-explanatory, unless the x position of the black_line graphic (x is horizontal going from the top left pixel of the graphic) is 0 or above, it'll keep adding 4 to it every frame.
And now that we have the intro done, it's time for...
Me Continuing this Tutorial Some Other Time!
Yeah it's a letdown I'm sure, but it's 6:30AM and I haven't slept for over a day. (I really don't know why I did this right now, but hey whatever when the whim strikes you just gotta do it) Sorry for not getting to the underlines, but I'm pretty sure I'll be adding them to the 'advanced-esque' section of this tutorial, since it'd be kind of a big chunk of code to do it how I thought I would (what with irregularly placed buttons and all that jazz)
Oh and the title so far. It's got a nice little space for a logo or somesuch other nonsense, I figured someone might like to see it in action without making it for themselves so I put it here:
http://www.sendspace.com/file/rx50vk
EDIT: oh wow I kind of forgot to mention disposing of your graphics! Go to line #111, and enter in:
Code:
@button_sprite.bitmap.dispose
@button_sprite.dispose
@black_line.bitmap.dispose
@black_line.dispose
@text_sprite.bitmap.dispose
@text_sprite.disposePART TWO
The point of this tutorial has kind of changed, now I'm just going to encompass 'making a nice title' instead of 'making a nice title without having to do a lot of work to make nice artwork'. I'm going to be using some pre-made artwork from the game S.T.A.L.K.E.R. and a font called 1942 report (you can look it up on deviantart), and I'm going to be giving a little less 'go here do this exactly' direction to make you think a little more, and thus probably learn a little more if you're trying. We're going to be making the title a little more advanced this time, and probably take up some more disc space while we're at it. We're going to use the same title because I'm uninventive, but it's going to look pretty nice in my opinion!
This is what the end-product should look like generally:
http://i4.photobucket.com/albums/y111/A ... utIm03.jpg[/img]
The newgame will scroll up/down to display continue and end game, and there's going to be an animation of static overlaying everything (slight static). I've uploaded the graphics I'll be using in case you feel like just following along with what I'm doing, but the main point of this part of the tutorial is just learning how to do similar things with your own choice of graphics, so keep that in mind: http://www.sendspace.com/file/yfhgeo
Well alright, we've got our graphics, we've got a shiny new project, so we may as well get started.
Since eventually you'll probably just want to disable the command window for the title (left/right movement or something), we'll just do it for this one (even though I have the same lazy excuse as last time to leave it there).
So we'll start with this, I'll just name off the lines you'll want to get rid of stuff, and I'll leave it to you to figure out what exactly needs to be deleted (the command window object is called @command_window, we'll pretty much just be deleting every line that has that in it and replacing it's use with an @index variable). Lines: #36-43, #56, #58, #82-83, #93. And those are all the lines we'll need to take out (I took some of the comments as well since they refer to @command_window and are thus super-useless to us for now).
So, as we've killed any way of user interaction for now, I submit that we should add in the basic function of our own menu-esque selection system now.
Remember how we added in "if Input.trigger?(Input::UP) or Input.trigger?(Input::DOWN)" up above? Well now we're going to differentiate between the up and down, and add in the @index variable to make the system save which place we're on.
Let's make the index variable first and introduce it to the code already there so we don't forget later, as I've done in the past. Head over to line #32, and put in a new line, this is where we'll be putting our variables. Add in "@index = 0" and we've got the rudimentary piece necesary to a menu! Now to the start of implementing it, head down to line #49, and replace the "else" (since without the @command_window command we won't be using it) on that line with @index = 1 to make it so if there's savegame data, we'll set the selection to default on continue instead of new game. Now we'll go down to line #84 and change the @command_window.index to just @index. And that'll do it for that.
Let's get to that user input shall we? We'll place that right under the loop do, now located at line #59. Add this nice little tidbit in so we have our @index determined by user input.
Code:
if Input.trigger?(Input::UP)
if @index == 0
@index = 2
else
@index -= 1
end
elsif Input.trigger?(Input::DOWN)
if @index == 2
@index = 0
else
@index += 1
end
endAnd now we have a menu, and the user could use it, if you don't mind them not being able to see it. So let's remedy that situation, and make our button graphic. Back up to line #36 to add in "@sprite_button = Sprite.new". Now let's travel back down to line #94 to update graphics with another branch. Add this in:
Code:
if @index == 0
@sprite_button.bitmap = RPG::Cache.picture("newgame.png")
elsif @index == 1
@sprite_button.bitmap = RPG::Cache.picture("continue.png")
elsif @index == 2
@sprite_button.bitmap = RPG::Cache.picture("endgame.png")
endAnd our basics are done! The user can use this title now! Sure it's pretty basic and lame for the moment, but we'll be fixing that later. Let's not forget to make sure our graphic is disposed of however, since I kind of make this mistake like every time and forget about it. Go to line #89 and add in "@sprite_button.bitmap.dispose" and "@sprite_button.dispose".
Now we'll add in that overlying static effect for something relatively maybe pretty to look at. Let's head up to where we declared our variables and graphics and add in a @animation_count = 0 in the variables, and @sprite_static = Sprite.new in the graphics. Now head back down to the graphics update (line #98 now), and we'll be adding in a case for animating things frame by frame (since .gifs aren't accepted into RMXP). This is the code I use for this:
Code:
case @animation_count
when 0
@sprite_static.bitmap = RPG::Cache.picture("static01.png")
when 3
@sprite_static.bitmap = RPG::Cache.picture("static02.png")
when 6
@sprite_static.bitmap = RPG::Cache.picture("static03.png")
when 9
@sprite_static.bitmap = RPG::Cache.picture("static04.png")
when 12
@sprite_static.bitmap = RPG::Cache.picture("static05.png")
when 15
@animation_count = -1
end
@animation_count += 1And now let's test it out. Well it doesn't look too amazingly nice, too patterned, so let's just decrease the opacity some, go back up to where you declared the graphic, and add in @sprite_static.opacity = 60. I'd just go back and edit the pictures (because the odd flashing does look like it calls for it), but I'm feeling lazy so I'll just downplay the effect so you don't notice it. Make sure to dispose of the graphics, and let's move on.
The title text seems a good next stop I'd dare say. Make two graphics called @sprite_text and @sprite_textcover. Set the graphics for them to text.png and text_cover.png respectively, and then add in a @sprite_textcover.x = -100 afterwards to make it start completely covering @sprite_text's graphic.
Let's go down to our loop do and just under it add in some code to slowly bring out the cover to reveal the title. We'll add this:
Code:
if @sprite_textcover.x <= 640
@sprite_textcover.x += 2
endWe'll keep it relatively simple for now, we'll be 'prettying' things up last. Well actually that's the phase we're going on to now, but we're starting with the buttons (since they've looked far too ugly for far too long really). And of course the last thought I nearly forget, make sure to dispose of the graphics.
Well I would be doing that except I have to leave so to the two people that find this interesting, wait a while, I'll finish it.