Scratch

This is a tutorial on how to make a score display that works by stamping the score digits rather than using a displayed orange variable.

Here is the game project that demos this system...
stamped score demo

1) Decide on the which font and size you want to use for your numbers. This cannot be changed easily later so be careful.

2) Make a sprite costume and type out the numbers 0-9 over a solid color background. I used black for my numbers but you can change this easily later.

3) Once that is showing in your project window, right click the window and select "grab screen region for a new costume" and drag a square around all of the numbers.

4) Unless you used a font where all the numerals are the same width, you must measure each digit by zooming in and counting how many pixels wide it is. On a sheet of paper, write down 0 through 9 and beside each number, record its pixel width. For example, I used Helvetica Bold size 24 with the following results: 0-11, 1-7, 2-11, 3-11, 4-12, 5-11, 6-11, 7-11, 8-11, 9-11 This is so that after stamping a digit of the score, you know how far to move the sprite over to stamp the next digit.

5) To make the individual digit costumes, I start working on the costume by filling in the background around the numbers with a solid color, like blue. Fill in any areas inside numbers like 4, 6, 8, 9, and 0. Then I use the smallest size pen and the box drawing tool set to outline mode to draw a border exactly around each number with a contrasting color, like red. After I do each number, I fill in the entire background with that color (red) leaving me with each number in a small box shape with the digit in black and the empty space around it in blue with a red background around all of the numbers. Then I go back and fill the red area with a solid transparent color.

6) We need 10 digits so save that costume and then make 9 more copies of it.Now go through and edit out the unwanted numbers from each costume so that the first one only has a "0", the second costume only has a "1", etc all the way through the last costume of "9". Set each costume's center to the top left corner as this will make it much easier to line them up into a single score when stamping. Also, use a solid transparent fill to remove the blue from around each number so that you are left only with a black numeral with everything else transparent.

7) Draw your background. One thing you will need to have is a small, rectangular copy of the background wherever you want the score to go. Use the same method from step 3 to get this. Open the costume view of the new sprite and drag it into the sprite with your number costumes in it. Then open that sprite's costume view and drag it to the top, making it the first costume. I finish my costume editing by naming the block costume "clear", the 0 costume "zero", the 1 costume "one, etc.

8) Make the sprite draggable, select costume 1 to show, then go into presentation mode and drag it around until it blends in with the background correctly. Use these X, Y coordinates when doing the first stamp using the background rectangle. This is done to erase the last score and make an empty spot to stamp the next score.

Here is a picture of the script that handles the actual score stamping...


The first set of blocks is used to clear the score area and print the starting score of 0 (the "Set score to 0" block is in the Stage script and it gets executed before any other scripts, including this one.)

The next (long) set of blocks works like this...

The variable "digit count" is set to 1. It is used to get the next digit for the printing the score. For example, if the score was 168, the digit count would go 1, 2, and then 3 as the whole score gets printed. This is so that we can use a single loop that repeats to print every digit of the total score.

The sprite switches to the "clear" costume, makes sure it is in the right place on the screen, becomes visible, then stamps itself. This erases any previously stamped score in preparation for the new score to be stamped in the same spot.

The variable "hide check" gets set to the length of the score. If the score was 1362, the length of score would be 4. If the score is 11, the length of score is 2. All it means is how many digits are in the score. The "hide check" variable will be used later to keep the score from flashing or appearing incorrect on the screen due to moving the stamping sprite.

Now we start the actual stamping loop. It is set to repeat as many times as there are digits in the score variable.

We immediately decrease the "hide check variable" by 1.

Then we introduce another variable "digit" which gets set to the number located at "digit count" of the score. Here is an explanation...
If the score is 538 and this is the first loop of this stamping procedure, "digit count" will equal 1 so "digit" will get set to "5".
On the next loop, "digit count" will have been increased by one (this happens later, at the end of the loop) to the value "2" and the variable "digit" will be reset to "3".
The last loop will use a "digit count" of 3 and set "digit" to "8"

Now we have broken the score into whatever single number needs to be stamped next. The next 10 If statements check to see what digit from 0 to 9 needs to be stamped, switches to the correct costume, and stamps.
Hide check is used to determine if we have stamped the last digit or if there are more stamping loops that need to be done. If so, the sprite's X value gets adjusted to the right. Remember step 4 where we measured how wide all the numbers were? Now for each different number, we take its width and add 2 to it. The 2 will give us a uniform spacing between digits. Example: stamping a "6" using the font and size that I picked will take up 11 pixels across the screen. So we add 2 more for the space and then when a 6 is stamped, we adjust the sprite 13 pixels to the right afterwards to make sure that whatever the next number is, it goes in the right spot.
But if "hide check" equals 0, this means that we are stamping the last digit so do NOT move the sprite to the right again. If you don't do this, you will see the number sprite show again, repeating the last number. Even if you Hide it, it will still show for just a second, creating a flashing effect that just looks bad.

At the bottom of the If list is the "change digit count by 1" block. By the time the loop gets here, it has just finished stamping a number and is ready to either loop again of is finished stamping the entire score. even if it is finished, increasing "digit count" by one doesn't hurt because the next time we stamp again, it gets reset to "1" before the whole process begins again.

The very last block is only gets run after the entire score is stamped and it hides our stamping sprite. Not completely necessary but it saves us from having to worry about the sprite interacting with other sprites via layers. Not a big deal in my overly simple demo game but in a more complicated game with sprites that change layers, it could be an issue.

edit: I added one more thing. I went back and colored each number costume so they wouldn't be solid black. Now they are graduated light to dark orange with a black outline.
________________________________________

Lastly, the stamping script is setup to be called whenever the broadcast "score" is made. In my game, catching or missing the fruit or fortune cookie first adjusts the actual "score" variable and then does the "score" broadcast. I should have named the broadcast differently to avoid confusion but it is 3:15 AM and I am at the end of this whole tutorial. Hopefully this will help out Scratchers who want to use something besides "that ugly orange variable!" I've been meaning to do this for a long time now so now I can finally say that I have done it, yay! Now, on to a glass of milk and some sleep!

Last edited by Locomule (2010-08-30 10:58:41)