Drawing

Drawing Fonts and Rectangles

For simple geometric shapes or to print text, you can use 32blit's drawing routines instead of pulling in assets from a spritesheet. This can save space and render shapes faster than blit'ing operations.

Drawing Geometric Shapes

The 32blit SDK can draw individual pixels at a time or can quickly render lines, rectangles, circles, triangles, or arbitrary polygons. picosystem-demo uses the 32blit rectangle drawing routines to show the countdown timer, rendering a progress bar at the bottom of the game field.

The function to render the progress bar is:

void render_time() {
  Pen oldPen = screen.pen;
  screen.pen = Pen(0xFF, 0xFF, 0xFF);

  uint32_t remaining_time = MAX_GAME_TIME - time_elapsed;
  uint32_t length = (remaining_time * 170) / MAX_GAME_TIME;
  screen.rectangle(Rect(64, 228, length, 8));
  screen.pen = oldPen;
}

Here you can see we save the current value of the pen (the color we will draw on screen), calculate how much time (in milliseconds) is remaining, and then calculate how long we want the bar to be. Next we divide our remaining time by the maximum game time to determine the percentage of time remaining, and then we take that percentage times our maximum bar length of 170 pixels. This gives us our rectangle length, which we begin drawing at coordinate (64, 228). The rectangle is hard-coded to 8 pixels in height.

Drawing Fonts

32blit has font drawing routines that can render text directly to a display. 32blit has three fonts included: outline_font, fat_font, and minimal_font. For most purposes you will want to use minimal_font, however you can also import your own fonts as assets.

The current score and the high score is shown using the built-in 32blit minimal_font, a monospaced font that renders 8 pixels in height.

void render_score() {
  Pen oldPen = screen.pen;
  screen.pen = Pen(0xFF, 0xFF, 0xFF);
  screen.text("Score: " + std::to_string(current_score), minimal_font, Point(9, 224));
  screen.text("Best: " + std::to_string(best_score), minimal_font, Point(9, 232));
  screen.pen = oldPen;
}

Not unlike the render_time function, render_score saves the pen's current color. We then convert our scores into a string, then render them at (9, 224) and (9, 232) on the game board.