Game Development Reference
In-Depth Information
The High-Scores Screen
The high-scores screen simply draws the top five high scores we store in the
Settings
class,
plus a fancy header telling the player that he or she is on the high-scores screen, and a button
at the bottom left that will transition back to the main menu when pressed. The interesting part
is how we render the high scores. Let's first have a look at where we render the images, which is
shown in Figure
6-4
.
Figure 6-4.
The high-scores screen, without high scores
That looks as easy as the other screens we have implemented. But how can we draw the
dynamic scores?
Rendering Numbers: An Excursion
We have an asset image called
numbers.png
that contains all digits from 0 to 9 plus a dot. Each
digit is 20 × 32 pixels, and the dot is 10 × 32 pixels. The digits are arranged from left to right in
ascending order. The high-scores screen should display five lines, each line showing one of the
five high scores. One such line would start with the high score's position (for example, “1.� or
“5.�), followed by a space, and then by the actual score. How can we do that?
We have two things at our disposal: the
numbers.png
image and the
Graphics.drawPixmap()
method, which allows us to draw portions of an image to the screen. Say we want the first line
of the default high scores (with the string “1. 100�) to be rendered at (20,100), so that the top-left
corner of the digit 1 coincides with those coordinates. We call
Graphics.drawPixmap()
like this:
game.getGraphics().drawPixmap(Assets.
numbers
, 20, 100, 20, 0, 20, 32);
