"first"&newline&"second"&newline&"third"&newline&"fourth"&newline&"fifth"[/code:l8egaw9v]
will type on the screen:
[code:l8egaw9v]first
second
third
fourth
fifth
[/code:l8egaw9v]
<img src="http://dl.getdropbox.com/u/1013446/New%20folder%20%283%29/Capture2.PNG">
you can ignore the actions in the brackets, that's setting up a new fontsprite the same way as the first, if you are familiar with the 'function' object, you'll only need those actions once
so it goes like this,
[code:l8egaw9v]On Left Clicked on sprite[/code:l8egaw9v]
each letter is a sprite, so that means if the player clicks on any letter
this event triggers
[code:l8egaw9v]Pick Current Word[/code:l8egaw9v]
this takes that sprite, and goes back to the fontobject
now it's picked every sprite that makes up the word that the sprite was a part of
so if you click on the sprite for "i" in the word "first"
it picks every sprite that makes up the word "first"
[code:l8egaw9v]SpriteFont.CurrentWord Equal to "first"[/code:l8egaw9v]
here's where the magic happens
if the word they clicked on (the 'CurrentWord') is equal to "first", this event will trigger
<img src="http://dl.getdropbox.com/u/1013446/New%20folder%20%283%29/Capture6.PNG">
you then create a SpriteFont2 object (just another spritefont, for the submenu)
I created it at
x= spritefont.phraseleft (the left edge of the all the letters) +30 (for an indent)
and
y = Sprite.Top+spritefont.newlineheight
remember, when we picked Current Word, we picked the sprites that make up that word,
spritefont ignores hotspots, so 'newlineheight' measures from the top of the letter sprite (the sprites that make up the word we clicked on),
so sprite.top+newlineheight, is where it would be writing the next line if you weren't doing a weird menu thing,
this means that your submenu (we just created, SpriteFont2) is positioned exactly as if you had just put a regular newline after the word you clicked on, with no guesswork
then those actions in brackets, are the same setup things we did for the original menu
the Showtext again, this time with SpriteFont2 with all our submenu option separated again by Newlines
<img src="http://dl.getdropbox.com/u/1013446/New%20folder%20%283%29/Capture8.PNG">
[code:l8egaw9v]SpriteFont:Set private variable "option" to spritefont.WordPositionInPhrase[/code:l8egaw9v]
we make a private variable called option, to keep track of what the player clicked on. as you'll see, you won't need a different event for each option from here on out
WordPositionInPhrase is just that
[code:l8egaw9v]"hello, how are you?"[/code:l8egaw9v]
so the WordPositionInPhrase for "hello" is 0, "how" is 1, "are" is 2, etc...
you are setting the private variable "option", to this number, so you can remember which word you clicked on for later, this will make sense in a minute
[code:l8egaw9v]SpriteFont:Set private variable "submenuopen" to "yes"[/code:l8egaw9v]
the default is set to "no", so we can use this later to see if the submenu is open or not
[code:l8egaw9v]SpriteFont2:For Each Character
Sprite:Set opacity to 0[/code:l8egaw9v]
I did this so the submenu is invisible until we've made space for it
<img src="http://dl.getdropbox.com/u/1013446/New%20folder%20%283%29/Capture3.PNG">
[code:l8egaw9v]"submenuopen" equal to "yes"
trigger once[/code:l8egaw9v]
once the menu is open, we want to do this one time
[code:l8egaw9v]SpriteFont:for each character
SpriteFont:Private Variable "option" less than SpriteFont.WordPositionInPhrase[/code:l8egaw9v]
Remember how we set "option" to the word number earlier?
now every letter that is in a word AFTER that original option, will trigger this event
so we set in each letter/sprite:
a private variable:
[code:l8egaw9v]StartHeight = .y (the current y position)[/code:l8egaw9v]
(where it is now, the beginning of the scrolling)
[code:l8egaw9v]EndHeight = StartHeight + SpriteFont2.PhraseHeight + 7[/code:l8egaw9v]
and we want it to end at the end of our submenu
PhraseHeight calculates the distance from the top pixel of the highest word in the phrase, to the lowest pixel at the bottom of the phrase, so this is how big, vertically, the submenu is.
why +7?
because as I said before, spritefont ignores hotspots, so this is to compensate
you can just do this by trial and error, or by checking the position of the sprite hotspot in the sprite editor
almost home...
<img src="http://dl.getdropbox.com/u/1013446/New%20folder%20%283%29/Capture4.PNG">
once again
[code:l8egaw9v]SpriteFont:private variable SubmenuOpen equal to "yes"?
For Each Word
Value of "option" less than WordPositionInPhrase?[/code:l8egaw9v]
these are the same as in the last step
if the submenu is open, check each word and see if it comes after the wordnumber of the option that was clicked on, if so, we need to scroll it
now
[code:l8egaw9v]Sprite.Value('EndHeight') greater than .y?[/code:l8egaw9v]
if so, the sprites haven't scrolled down enough
so
I made a counter to use with lerp to move the sprites
it's a private variable in FontSprite2 called 'counter'
it starts at 0
[code:l8egaw9v]SpriteFont2('Counter') : Add 0.5 * timedelta[/code:l8egaw9v], this will add a tiny number to 'counter',
that will vary based on framerate, to make sure it moves at the same speed on any computer, regardless of slowdown,
if you don't care about slow down, you could have just put 'Add 0.1'
[code:l8egaw9v]Set Y to lerp(('StartHeight'),('EndHeight'),SpriteFont2('counter'))[/code:l8egaw9v]
quazi explained how lerp works, a number between 0 and 1, takes you from the first number to the second number, we set startheight and endheight variables for each sprite(each letter), to take it from where it was to where it was + the height of the submenu
now we've taken care of scrolling the sprites, and stopping the sprites,
because if they've gotten to the end, then the event:[code:l8egaw9v]Sprite.Value('EndHeight') greater than .y?[/code:l8egaw9v] won't be true anymore, so they will stop scrolling
all that's left now is making the submenu not invisible anymore when we're done scrolling
[code:l8egaw9v]Sprite.Value('EndHeight') less than or equal to .y?[/code:l8egaw9v]
this will be true when the sprites reach their final destination after they are done scrolling where they need to be...
it's opposite of the last event, so you could have also just used "else"
[code:l8egaw9v]SpriteFont2:for each character[/code:l8egaw9v]
remember, spritefont2 is the submenu, so now this will pick each sprite in those words one at a time
[code:l8egaw9v]SpriteFont2:Opacity less than 100[/code:l8egaw9v]
remember we set it to opacity to 0?
[code:l8egaw9v]Sprite: Set opacity to .opacity + (50*timedelta)[/code:l8egaw9v]
again, if you don't care that it goes at the exact same speed during slow down, you could have just put opacity +1
since this will keep being true until it's no longer transparent at all (opacity = 100), it gives you a nice slow fade in for the the sub menu...
as you can see, using this method, you don't have to keep guessing how much distance there is for different menus, or setup many objects for each word, and even though it's alot to take in the first time you use the spritefont object
it has a very simple logic to it, once you get over the initial learning curve
if you use functions with this example, the code could be drastically reduced
you could have also used "else", and a private variable to show whether it was a menu, or a submenu instead of a second spritefont object to reduce it further