如何在Pygame中将段落渲染到表面上

Question

I've made a fully functioning main menu with buttons where one button take you to the game and another button that takes you to the instruction page.

However, in my instructions page I can only write a one line sentence. If I add multiple lines it shows squares in the middle.

What I want achieve is to write a multi-line paragraph onto the screen for displaying some instruction, game information, etc.

Here es a screen shot of my current game GUI:

And this is the relevant code I have so far:

def text_objects(text, font):
   textSurface = font.render(text, True, (0,0,0))
   return textSurface, textSurface.get_rect()


def ParagraphText(text, font):
   ParagraphSize = (600,500)
   FontSize = font.get_height()

   ParagraphSurf = pygame.Surface(ParagraphSize)

   ParagraphSurf.fill(WHITE)
   ParagraphSurf.set_colorkey(WHITE)

   SplitLines = text.splitlines()

   CentreText = (ParagraphSize[1] - len(SplitLines)*(FontSize + 1)//2)

   for idx, line in enumerate(SplitLines):
       currentTextline = font.render(text, False, (0, 0, 0))
       currentPostion = (0, idx * FontSize + CentreText)
       ParagraphSurf.blit(currentTextline, currentPostion)

   return ParagraphSurf, ParagraphSize



def Instructions():
   paragraph = """Your are the last surviving rhino. Your horn
   is worth millions! Right now you are trapped in a zoo and
   waiting to be slaughtered for your horn. But you can't give
   up! Escape from the tribesmen and zoo security so you can
   enjoy your life as a free being once again"""

   screen.blit(pygame.image.load("background0.jpg").convert(), (0,0))
   InstructionsFont = pygame.font.SysFont("elephant",15)
   TextSurf, TextRect = text_objects("Instructions", InstructionsFont)
   TextRect.center = ((screen_width/2),(screen_height/6))
   screen.blit(TextSurf, TextRect)

   ParagraphText(paragraph,InstructionsFont)

   intro = True

   while intro:
       for event in pygame.event.get():
           if event.type == pygame.QUIT:
               pygame.quit()
               quit()

       Buttons("BACK",100,500,120,50,TURQUOISE,DARK_TURQUOISE,"back")

       pygame.display.update()
       clock.tick(15)

Answer 1

The render() method of a pygame.font.Font object can only blit single line text, as stated in the documentation .

To work around this you have to adapt your text_objects() function to draw each line of the passed in text string separately onto the appropriate position:

1. Create a new surface onto which the whole paragraph will be drawn. To fake a transparent surface use Pygame's set_colorkey() method. ¹⁾
2. Split the text into several lines of characters using Python's built-in splitlines() method.
3. Compute an optional offset value if you want to align (eg center) the text vertically inside the paragraph surface.
4. Loop (ie enumerate) over the split lines:
   • Render the current line of characters onto a dummy surface. ¹⁾
   • Calculate the position of this line to fit into a paragraph style.
   • Blit the dummy surface onto the main paragraph surface.
5. Draw the paragraph surface onto the main screen or return it with other parameters.

Now it´s time implement this:

def text_objects(text, font):
    paragraphSize = (xsize, ysize)
    fontSize = font.get_height()

    # Step 1
    paragraphSurface = pygame.Surface(paragraphSize ) 

    #Set colorkey to fake transparent paragraph surface
    paragraphSurface.fill((255, 255, 255))
    paragraphSurface.set_colorkey((255, 255, 255))

    # Step 2
    splitLines = text.splitlines() 

    # Step 3: center the text vertically 
    offSet = (paragraphSize[1] - len(splitLines) * (fontSize + 1)) // 2 

    #Step 4
    for idx, line in enumerate(splitLines):
        currentTextline = font.render(line, False, (0, 0, 0))
        currentPostion = (0, idx * fontSize + offSet)
        paragraphSurface.blit(currentTextline, currentPostion)

    #Step 5
    return paragraphSurface, paragraphSize

---

If you want to center each line in the text, don't set the x -coordinate of the currentPostion to 0 but use the following calculation:

#center paragraph
currentPostion = ((paragraphSize[0] - currentTextline.get_width()) // 2, #x-coordinate
                  idx * fontSize + offSet) #y-coordinate

or right align:

#right align paragraph
currentPostion = (paragraphSize[0] - currentTextline.get_width(), #x-coordinate
                  idx * fontSize + offSet) #y-coordinate

¹⁾ Please note that setting the antialias parameter to true when rendering a line, can have bad effects because of the set color-key of the paragraph surface!

I hope this helps you :)