How to display image and text at the same time in python (like SanctuaryRPG)?

Question

So, I'm pretty new to python, but I'm currently coding a text-adventure game. I was wondering how I would be able to display the text at the bottom of the screen while an ASCII image is displayed on top, just like SanctuaryRPG.

Answer 1

Alright, so basically, you want to print an ASCII image with text. This shouldn't be too difficult.

Firstly, set the ASCII image to a variable. For example:

img = '''
                 __,__
        .--.  .-"     "-.  .--.
       / .. \/  .-. .-.  \/ .. \
      | |  '|  /   Y   \  |'  | |
      | \   \  \ 0 | 0 /  /   / |
       \ '- ,\.-"`` ``"-./, -' /
        `'-' /_   ^ ^   _\ '-'`
        .--'|  \._   _./  |'--. 
      /`    \   \ `~` /   /    `\
     /       '._ '---' _.'       \
    /           '~---~'   |       \
   /        _.             \       \
  /   .'-./`/        .'~'-.|\       \
 /   /    `\:       /      `\'.      \
/   |       ;      |         '.`;    /
\   \       ;      \           \/   /
 '.  \      ;       \       \   `  /
   '._'.     \       '.      |   ;/_
    /__>     '.       \_ _ _/   ,  '--.
   .'   '.   .-~~~~~-. /     |--'`~~-.  \
  // / .---'/  .-~~-._/ / / /---..__.'  /
 ((_(_/    /  /      (_(_(_(---.__    .'
           | |     _              `~~`
           | |     \'.
            \ '....' |
             '.,___.'
'''

Next, set the text you want to print out to another variable.

text = "Do you want to say hi to the monkey?"

Finally, print the two like this:

print(img)
print(text)

OR:

print(img + "\n\n" + text)

\n Just means a new line.

Answer 2

To do the same as in SanctuaryRPG with Pygame, you need to use a font where each character is the same width (e.g. Courier):

font = pygame.font.SysFont("Courier", text_height)

Split the text into lines with splitlines() (see How to split a python string on new line characters):

img_text = img.splitlines()

Render the text line by line in a loop:

for i, line in enumerate(img_text):
    text_surf = font.render(line, True, (255, 255, 0))
    window.blit(text_surf, (50, 20 + i * text_height))

Use the following function:

def renderTextImage(surf, font, text, x, y, color):
    img_text = text.splitlines()
    for i, line in enumerate(img_text):
        text_surf = font.render(line, True, color)
        surf.blit(text_surf, (x, y + i * text_height))

---

Minimal example:

repl.it/@Rabbid76/PyGame-AsciiTextImage

import pygame

img_text = r'''
                 __,__
        .--.  .-"     "-.  .--.
       / .. \/  .-. .-.  \/ .. \
      | |  '|  /   Y   \  |'  | |
      | \   \  \ 0 | 0 /  /   / |
       \ '- ,\.-"`` ``"-./, -' /
        `'-' /_   ^ ^   _\ '-'`
        .--'|  \._   _./  |'--. 
      /`    \   \ `~` /   /    `\
     /       '._ '---' _.'       \
    /           '~---~'   |       \
   /        _.             \       \
  /   .'-./`/        .'~'-.|\       \
 /   /    `\:       /      `\'.      \
/   |       ;      |         '.`;    /
\   \       ;      \           \/   /
 '.  \      ;       \       \   `  /
   '._'.     \       '.      |   ;/_
    /__>     '.       \_ _ _/   ,  '--.
   .'   '.   .-~~~~~-. /     |--'`~~-.  \
  // / .---'/  .-~~-._/ / / /---..__.'  /
 ((_(_/    /  /      (_(_(_(---.__    .'
           | |     _              `~~`
           | |     \'.
            \ '....' |
             '.,___.'
'''

def renderTextImage(surf, font, text, x, y, color):
    img_text = text.splitlines()
    for i, line in enumerate(img_text):
        text_surf = font.render(line, True, color)
        surf.blit(text_surf, (x, y + i * text_height))

pygame.init()
window = pygame.display.set_mode((500, 500))
clock = pygame.time.Clock()

text_height = 16 
font = pygame.font.SysFont("Courier", text_height)

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

    window.fill(0)
    renderTextImage(window, font, img_text, 50, 20, (255, 255, 0))
    pygame.display.flip()

pygame.quit()
exit()