Code 4 Tomorrow

Text and Fonts Fonts Text Displaying the Text Example Practice Moving Text

Text and Fonts

Text is a vital key to games. pygame has a way to make text. It can be broken down into fonts and text.

Fonts

The first step to displaying text is knowing which font to use. pygame has support for several fonts, such as Arial, Comic Sans, Times New Roman, and more. It all depends on what fonts your system has.

To load the font, we do the following: ourfont = pygame.font.SysFont(fontname, fontsize)

fontname is the name of the font as a str. For example, "Arial" and "Times New Roman" are valid font names to pass as the first parameter

fontsize is the size of the font. It should be an integer. For example, 32 is a valid size (2.0 isn't because it isn't an integer)

💡

You should use a positive fontsize because negative integers lead to extremely small text.

So, if we wanted to have the font for our text be Arial and we wanted its size to be 32, then we'd do


ourfont = pygame.font.SysFont("Arial", 32)

💡

Instead of defining a certain font, you can also just get the default font with pygame.font.get_default_font() in place of fontname

Text

Now that we have a font, we need to have the actual text written in that font. So, we call our font's render method.

Here's how the render method works:

(font variable name).render(text: string, antialias: bool, color: tuple, background=None)

text is the text that you want to have displayed

antialias is whether or not to antialias the text

color is the color that the text should be (use an RGB tuple)

background is the background color. It defaults to None (no background)

So, if we wanted to say "Hello World!" in white text and not antialias, we'd do the following:


ourtext = ourfont.render("Hello World!", True, (0, 0, 0))

Displaying the Text

Now that we have the text, all we have to do is display it. We use the (window variable name).blit method.

Here's how the blit method works:

(window variable name).blit(source, dest)

source is the image that you want to display. Note that, ourtext will actually be an image since the render method returns an image.

dest is the destination for the image or text. It can either be a tuple of coordinates (like (30, 30) that represents the top-left pixel for the image to be drawn on. Or, it could be a Rect object or tuple of (top-left x, top-left y, width, height) similar to the ones we showed in
3️⃣
2.3 - Drawing and Moving for the font to be drawn on.

So, if we wanted to display our text and have its top-left corner be at (100, 100), then we'd do:


window.blit(ourtext, (100, 100))

Example


import pygame
from pygame.locals import RESIZABLE

pygame.init()
flag = RESIZABLE
window = pygame.display.set_mode((500, 400), flag)
pygame.display.set_caption("Text!")
WHITE = (255, 255, 255)

run = True
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False

    # step 1 to writing: load the font with pygame.font.SysFont(fontname, fontsize)
    # For font - You can either use the default font
    # (pygame.font.get_default_font()) or use a font name
    # (like Comic Sans or Arial).
    # For size - a positive integer representing the font size.
    font = pygame.font.SysFont("Arial", 32)

    # step 2 - render the font with
    # (font variable name).render(
    #   text: string, antialias: bool, color: tuple, background=None
    # )
    # In this case, we render the text "Hello World!", pass True as antiaalias
    # and have the color of the text be WHITE
    text = font.render("Hello World!", True, WHITE)

    # step 3 - blit to the screen
    # You can either blit the text to a rectangle on the screen or a specified
    # coordinate
    # In this case, we blit (draw) the text with a top-left value of (0, 0)
    window.blit(text, (100, 100))

    # update the screen; just like with moving/displaying rectangles
    pygame.display.update()

pygame.quit()

View code on GitHub.

Practice

Moving Text

Move some text!

The text should start in the upper corner and be moving down and to the right. You can move the text using coordinates or blitz the text on to a moving rectangle. Feel free to be creative with colors, fonts, and font sizes. However, if applicable, make the rectangle proportional to the text, and everything smaller than the screen

Note: you can import the time module as well and use time.sleep(0.01) in your mainloop to act as a frame cap to make your text more visible

💻 Template code

✅ Solution code

Previous Section

3️⃣

2.3 - Drawing and Moving

Next Section

5️⃣

2.5 - Example

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.

2.4 - Text and Fonts