With the Title Screen dialog changed, let's move on to editing the status bar that displays across the top of the game the whole time. While we are here, we may as well play with a few of the other options that we have available to us as well.
First though, we need to find the code that generates the status bar. It is located in the Main script 000. Down around line 528, you should see the statusLineCode instance.
Altering the Status Bar Text
The text is just a bit different this time than it was in the Title Screen. You'll notice that this time there isn't a Print command that pulls in the Message resource text. This time we are actually doing something a little bit more complex. First we are getting the message and assigning the line of text to a variable. Then, we are formatting that text along with another variable and placing it in a third variable which then gets displayed to the status bar area. For what we are doing though, we only have to concern ourselves with the first step of the process. This line of code is what goes out to the message resource and finds the appropriate line of text.
This time the order of values is slightly different than it was in our title screen edits, for the msgGet call the order of the values are:
With that in mind, lets head back into Message resource 0 and look for the combination that points to our text line.
Hopefully you were able to find this, now simply change the text to indicate your actual game name and perhaps the subtitle if you want. In my case, I would be going with Tutorial Game: The Beginning, now it might take a bit of work to get the spacing right between your title and the word score found at the end of the line in order to get it to display correctly. If it looks a little garbled when you run your game, then chances are good that you will need to remove some of the spaces in order to shorten up the text. It will be because you are drawing the text off of the screen and the interpreter really doesn't like that.
Changing the Color of the Status Bar
Now, since we are here, what about if we want to change the colors of the status bar? In order to do that, we will need to address the various Graph statements found in this instance. For example, the first one
Is a command that tells the interpreter to draw a box y1 x1 y2 x2 screens visualColor priColor ctlColor, you can find more information about the Graph kernel in Phil's documentation. But for now, let's change the background color of the status bar. The 5 in the above statement tells the interpreter to use the color from our palette in position 5. In order to change it, let's go ahead and open up the palette 999 in the Palette editor. Right now, I am feeling in a bit of an orange mood, so I click on the color that I want and in the area on the right it tells me that the index number is 20 for that color.
In the Graph statement that we looked at a moment ago, let's go ahead and change that 5 to a 20. Now our status bar should draw with the orangish color that we selected. But at this point, it still won't look quite right if we just stop there. If you take a closer look at our screenshot of our current room, you will notice that there are some highlights on the status bar that give it a bit of a 3D effect. The left hand side as well as the top have a lighter colored line and the right hand side and bottom are colored a bit darker. With the background set to orange instead of gray, the current colors may not look quite right. So let's go ahead and find the lines that are creating these and alter them as well so that they match up a bit better with our new color selection. In this case, we are looking for the command that tells the interpreter to draw these four lines.
Just like with the background color, we could go back and forth between the palette editor and here and put each one of our new colors in but we are going to stop here and take a shortcut. We are going to create a new temporary variable in this instance called baseColor. Then we give that variable a value, in this case our orange color. Then for the lines, we are just going to do a bit of math to select the highlight and shadow colors of the lines drawn around it. One of the reasons we are doing this is so that if we change our mind, we don't have to go in and change every single line again, instead just the initial value that we assign to our new variable. Another reason, is that after we are done with the drawn lines, we will also need to address the displayed text's color, highlight color and shadow color, because if you notice it's on there as well.
Scrolling up to the doit method line of our instance, this is where we want to add in our temporary variable name. I am calling it temporary because since it is defined inside of this instance, then it can only be used by this instance, it has a very small scope. Anyway, like I said, I intend to call my new variable baseColor and we will also need to give it a value so this code from above
Gets changed into this
With our new baseColor defined and set, let's go ahead and undo the edit we made a second ago. The Fill Box statement, where we changed the initial value of 5 to 20, well now let's change that 20 to baseColor.
So now we are back to our four draw line commands. just like with fill box command, the first four values represent x an y positions, the fifth value represents the color. Instead of hard coding a number in there, we are going to change those values so that we are simply adding or subtracting a number from our baseColor to get highlights and shadows to match. Remember that our initial value was 5, and looking at the draw line commands, hopefully you can see that the first line is given a color index of 7... or for our purposes + 2. Likewise going down the list we see that the second draw line command has a color index of 6 or + 1, line three has a color of 4 or -1, and line four has a color index of 3 or -2. Now lets apply that to our new variable.
We aren't quite done yet though. As I mentioned earlier, and one of the reasons that we created this new baseColor variable, the text displayed also has highlights and shadows applied to it. In order to isolate the text, you will need to locate the Display commands. Display is a command that is used to permanently or semi-permanently display text on the screen.
This time, it is a little easier to spot the value that represents the text color, the value directly following dsCOLOR. The first line is the highlight and it is drawn first with a color value of 6, or for our purposes + 1 from the baseColor because as you remember, before we changed it the background color was set to 5. The second color is the shadow and it is drawn next with a color value of 4 or - 1 from the base color. The final display command draws the text right on top of these other two in black. I am going to go ahead and leave that text as it is. But if you feel the desire to change it, then simply change the number to the index of the color you want. With the offsets from the base color in mind, let's go ahead and change the display codes just like we did with the draw line statements. These three lines become
Adjusting the Text Position on the Status Bar
Before we walk away though, there is one more thing that constantly bugs me about the status bar and the displayed text that we are going to address. If you notice, the bottom of the text lands directly above the bottom shadow of the bar. Meanwhile above it, there are a few pixels of clear space. In my opinion it is definitely crowding the bottom more than it needs to. In order to fix it and quiet my inner voice from complaining about it constantly, let's just nudge the text up a tad. We can do this by editing the values of the x and y positions set in the Display statement, they follow the dsCOORD. It is this that determines where to draw the text on the screen. So adjusting the current y value and just subtracting 1 from each one of the display statements, we end up with this as our final three display commands.
Wrap up and Test
And we're done. With any luck, your statusLineCode Instance now looks exactly like this:
Compile your script, and since we touched the main script, use compile all to compile all of the scripts. You are going to want to do this anytime you edit the Main script, compile all, compile all, compile all, I really can't say it enough when it comes to the Main script. Then click on run to see your new status bar in action.
Now we are ready to move on and actually apply a background to our first room.
First though, we need to find the code that generates the status bar. It is located in the Main script 000. Down around line 528, you should see the statusLineCode instance.
Code: [Select]
(instance statusLineCode of Code
(properties)
(method (doit &tmp [temp0 50] [temp50 50] temp100)
(= temp100 (GetPort))
(SetPort -1)
(Graph grFILL_BOX 0 0 10 320 VISUAL 5 -1 -1)
(Graph grUPDATE_BOX 0 0 10 320 VISUAL)
(Message msgGET 0 N_TITLEBAR 0 0 1 @temp0)
(Format @temp50 {%s %d} @temp0 gScore)
(Display @temp50 dsCOORD 4 1 dsFONT gFont dsCOLOR 6)
(Display @temp50 dsCOORD 6 3 dsFONT gFont dsCOLOR 4)
(Display @temp50 dsCOORD 5 2 dsFONT gFont dsCOLOR 0)
(Graph grDRAW_LINE 0 0 0 319 7 -1 -1)
(Graph grDRAW_LINE 0 0 9 0 6 -1 -1)
(Graph grDRAW_LINE 9 0 9 319 4 -1 -1)
(Graph grDRAW_LINE 0 319 9 319 3 -1 -1)
(Graph grUPDATE_BOX 0 0 10 319 VISUAL)
(SetPort temp100)
)
)
Altering the Status Bar Text
The text is just a bit different this time than it was in the Title Screen. You'll notice that this time there isn't a Print command that pulls in the Message resource text. This time we are actually doing something a little bit more complex. First we are getting the message and assigning the line of text to a variable. Then, we are formatting that text along with another variable and placing it in a third variable which then gets displayed to the status bar area. For what we are doing though, we only have to concern ourselves with the first step of the process. This line of code is what goes out to the message resource and finds the appropriate line of text.
Code: [Select]
(Message msgGET 0 N_TITLEBAR 0 0 1 @temp0)
This time the order of values is slightly different than it was in our title screen edits, for the msgGet call the order of the values are:
Code: [Select]
(Message msgGet Resource Noun Verb Condition Sequence variableName)
With that in mind, lets head back into Message resource 0 and look for the combination that points to our text line.
Hopefully you were able to find this, now simply change the text to indicate your actual game name and perhaps the subtitle if you want. In my case, I would be going with Tutorial Game: The Beginning, now it might take a bit of work to get the spacing right between your title and the word score found at the end of the line in order to get it to display correctly. If it looks a little garbled when you run your game, then chances are good that you will need to remove some of the spaces in order to shorten up the text. It will be because you are drawing the text off of the screen and the interpreter really doesn't like that.
Changing the Color of the Status Bar
Now, since we are here, what about if we want to change the colors of the status bar? In order to do that, we will need to address the various Graph statements found in this instance. For example, the first one
Code: [Select]
(Graph grFILL_BOX 0 0 10 320 VISUAL 5 -1 -1)
Is a command that tells the interpreter to draw a box y1 x1 y2 x2 screens visualColor priColor ctlColor, you can find more information about the Graph kernel in Phil's documentation. But for now, let's change the background color of the status bar. The 5 in the above statement tells the interpreter to use the color from our palette in position 5. In order to change it, let's go ahead and open up the palette 999 in the Palette editor. Right now, I am feeling in a bit of an orange mood, so I click on the color that I want and in the area on the right it tells me that the index number is 20 for that color.
In the Graph statement that we looked at a moment ago, let's go ahead and change that 5 to a 20. Now our status bar should draw with the orangish color that we selected. But at this point, it still won't look quite right if we just stop there. If you take a closer look at our screenshot of our current room, you will notice that there are some highlights on the status bar that give it a bit of a 3D effect. The left hand side as well as the top have a lighter colored line and the right hand side and bottom are colored a bit darker. With the background set to orange instead of gray, the current colors may not look quite right. So let's go ahead and find the lines that are creating these and alter them as well so that they match up a bit better with our new color selection. In this case, we are looking for the command that tells the interpreter to draw these four lines.
Code: [Select]
(Graph grDRAW_LINE 0 0 0 319 7 -1 -1)
(Graph grDRAW_LINE 0 0 9 0 6 -1 -1)
(Graph grDRAW_LINE 9 0 9 319 4 -1 -1)
(Graph grDRAW_LINE 0 319 9 319 3 -1 -1)
Just like with the background color, we could go back and forth between the palette editor and here and put each one of our new colors in but we are going to stop here and take a shortcut. We are going to create a new temporary variable in this instance called baseColor. Then we give that variable a value, in this case our orange color. Then for the lines, we are just going to do a bit of math to select the highlight and shadow colors of the lines drawn around it. One of the reasons we are doing this is so that if we change our mind, we don't have to go in and change every single line again, instead just the initial value that we assign to our new variable. Another reason, is that after we are done with the drawn lines, we will also need to address the displayed text's color, highlight color and shadow color, because if you notice it's on there as well.
Scrolling up to the doit method line of our instance, this is where we want to add in our temporary variable name. I am calling it temporary because since it is defined inside of this instance, then it can only be used by this instance, it has a very small scope. Anyway, like I said, I intend to call my new variable baseColor and we will also need to give it a value so this code from above
Code: [Select]
(method (doit &tmp [temp0 50] [temp50 50] temp100)
(= temp100 (GetPort))
Gets changed into this
Code: [Select]
(method (doit &tmp [temp0 50] [temp50 50] temp100 baseColor)
(= baseColor 20)
(= temp100 (GetPort))
With our new baseColor defined and set, let's go ahead and undo the edit we made a second ago. The Fill Box statement, where we changed the initial value of 5 to 20, well now let's change that 20 to baseColor.
Code: [Select]
(Graph grFILL_BOX 0 0 10 320 VISUAL baseColor -1 -1)
So now we are back to our four draw line commands. just like with fill box command, the first four values represent x an y positions, the fifth value represents the color. Instead of hard coding a number in there, we are going to change those values so that we are simply adding or subtracting a number from our baseColor to get highlights and shadows to match. Remember that our initial value was 5, and looking at the draw line commands, hopefully you can see that the first line is given a color index of 7... or for our purposes + 2. Likewise going down the list we see that the second draw line command has a color index of 6 or + 1, line three has a color of 4 or -1, and line four has a color index of 3 or -2. Now lets apply that to our new variable.
Code: [Select]
(Graph grDRAW_LINE 0 0 0 319 (+ baseColor 2) -1 -1)
(Graph grDRAW_LINE 0 0 9 0 (+ baseColor 1) -1 -1)
(Graph grDRAW_LINE 9 0 9 319 (- baseColor 1) -1 -1)
(Graph grDRAW_LINE 0 319 9 319 (- baseColor 2) -1 -1)
We aren't quite done yet though. As I mentioned earlier, and one of the reasons that we created this new baseColor variable, the text displayed also has highlights and shadows applied to it. In order to isolate the text, you will need to locate the Display commands. Display is a command that is used to permanently or semi-permanently display text on the screen.
Code: [Select]
(Display @temp50 dsCOORD 4 1 dsFONT gFont dsCOLOR 6)
(Display @temp50 dsCOORD 6 3 dsFONT gFont dsCOLOR 4)
(Display @temp50 dsCOORD 5 2 dsFONT gFont dsCOLOR 0)
This time, it is a little easier to spot the value that represents the text color, the value directly following dsCOLOR. The first line is the highlight and it is drawn first with a color value of 6, or for our purposes + 1 from the baseColor because as you remember, before we changed it the background color was set to 5. The second color is the shadow and it is drawn next with a color value of 4 or - 1 from the base color. The final display command draws the text right on top of these other two in black. I am going to go ahead and leave that text as it is. But if you feel the desire to change it, then simply change the number to the index of the color you want. With the offsets from the base color in mind, let's go ahead and change the display codes just like we did with the draw line statements. These three lines become
Code: [Select]
(Display @temp50 dsCOORD 4 1 dsFONT gFont dsCOLOR (+ baseColor 1))
(Display @temp50 dsCOORD 6 3 dsFONT gFont dsCOLOR (- baseColor 1))
(Display @temp50 dsCOORD 5 2 dsFONT gFont dsCOLOR 0)
Adjusting the Text Position on the Status Bar
Before we walk away though, there is one more thing that constantly bugs me about the status bar and the displayed text that we are going to address. If you notice, the bottom of the text lands directly above the bottom shadow of the bar. Meanwhile above it, there are a few pixels of clear space. In my opinion it is definitely crowding the bottom more than it needs to. In order to fix it and quiet my inner voice from complaining about it constantly, let's just nudge the text up a tad. We can do this by editing the values of the x and y positions set in the Display statement, they follow the dsCOORD. It is this that determines where to draw the text on the screen. So adjusting the current y value and just subtracting 1 from each one of the display statements, we end up with this as our final three display commands.
Code: [Select]
(Display @temp50 dsCOORD 4 0 dsFONT gFont dsCOLOR (+ baseColor 1))
(Display @temp50 dsCOORD 6 2 dsFONT gFont dsCOLOR (- baseColor 1))
(Display @temp50 dsCOORD 5 1 dsFONT gFont dsCOLOR 0)
Wrap up and Test
And we're done. With any luck, your statusLineCode Instance now looks exactly like this:
Code: [Select]
(instance statusLineCode of Code
(properties)
(method (doit &tmp [temp0 50] [temp50 50] temp100 baseColor)
(= baseColor 20)
(= temp100 (GetPort))
(SetPort -1)
(Graph grFILL_BOX 0 0 10 320 VISUAL baseColor -1 -1)
(Graph grUPDATE_BOX 0 0 10 320 VISUAL)
(Message msgGET 0 N_TITLEBAR 0 0 1 @temp0)
(Format @temp50 {%s %d} @temp0 gScore)
(Display @temp50 dsCOORD 4 0 dsFONT gFont dsCOLOR (+ baseColor 1))
(Display @temp50 dsCOORD 6 2 dsFONT gFont dsCOLOR (- baseColor 1))
(Display @temp50 dsCOORD 5 1 dsFONT gFont dsCOLOR 0)
(Graph grDRAW_LINE 0 0 0 319 (+ baseColor 2) -1 -1)
(Graph grDRAW_LINE 0 0 9 0 (+ baseColor 1) -1 -1)
(Graph grDRAW_LINE 9 0 9 319 (- baseColor 1) -1 -1)
(Graph grDRAW_LINE 0 319 9 319 (- baseColor 2) -1 -1)
(Graph grUPDATE_BOX 0 0 10 319 VISUAL)
(SetPort temp100)
)
)
Compile your script, and since we touched the main script, use compile all to compile all of the scripts. You are going to want to do this anytime you edit the Main script, compile all, compile all, compile all, I really can't say it enough when it comes to the Main script. Then click on run to see your new status bar in action.
Now we are ready to move on and actually apply a background to our first room.
| << Previous | Back to Index | Next >> |