Pygame X: Fuentes tipográficas

Continuamos con lo que dejamos a medias, en el tutorial anterior creamos un sistema de puntos, ahora vamos a ver como mostrarlo en pantalla mediante textos con Pygame.

Cargando tipografías

Pygame puede cargar las tipografías del sistema en el que se está ejecutando y si no la encuentra cargar la tipografía por defecto, yo prefiero proporcionar incluir mi propia fuente en el juego y así me aseguro de que todo se ve como quiero.

Para este juego usaré la tipografía DroidSans.ttf descargarla y meterla en la carpeta images. No es una imagen propiamente dicha, pero para una sola fuente no voy a crear una carpeta llamada fonts.

Hay que tener en cuenta cuando se trabaja con textos en Pygame es que este a última instancia trata a todos los textos como Sprites, una vez puesto se pueden manipular como si de una Sprite más se tratara, esto tiene muchas ventajas como veremos.

Lo primero que vamos a hacer es crear una función que nos facilite el trabajar con textos y nos automatice el proceso.

def texto(texto, posx, posy, color=(255, 255, 255)):
	fuente = pygame.font.Font("images/DroidSans.ttf", 25)
	salida = pygame.font.Font.render(fuente, texto, 1, color)
	salida_rect = salida.get_rect()
	salida_rect.centerx = posx
	salida_rect.centery = posy
	return salida, salida_rect

En la línea 1 creamos la función, vemos que recibe 4 parámetros: texto que debe ser una string, posx y posy que serán las coordenadas del centro de nuestro texto y color que es una tupla con los valores RGB, color es opcional y si no se define, por defecto será blanco.

La línea 2 asigna una tipografía a la variable fuente como vemos lo hacemos con pygame.font.Font() al que le pasamos como primer parámetro la ruta de la tipografía que queremos usar y como segundo el tamaño de la tipografía.

En la linea 3 creamos la variable salida asignandole pygame.font.Font.render() este método lo que hace es convertir un texto en un Sprite, como vemos como primer parámetro recibe una fuente tipográfica, le pasamos la creada en la línea anterior, como segundo recibe el texto a mostrar, el tercer parámetro es el antialias y puede ser verdadero o falso (con o sin antialias), por último recibe el color.

En la línea 4 obtenemos el rect como si de un Sprite más se tratare y lo almacenamos en salida_rect.

Las líneas 5 y 6 modifican el centro del Sprite en función de los valores posx y posy.

Por último la línea 7 retorna una tupla con el Sprite y su correspondiente rect. Ojo a la ahora de utlizarla, recordad que retorna dos valores y no uno.

Con esta función poner texto es muy fácil, vamos a utilizarla para mostrar nuestras puntuaciones, añadimos las siguientes líneas en el bucle del juego:

p_jug, p_jug_rect = texto(str(puntos[0]), WIDTH/4, 40)
p_cpu, p_cpu_rect = texto(str(puntos[1]), WIDTH-WIDTH/4, 40)

Esto nos crea dos Sprites con sus respectivos rects. El primero recibe como texto puntos[0], es decir los puntos del jugador (ojo con la conversión str(), recodad que debe de ser una string), como parámetro posx recibe WIDTH/4 es decir la WIDTH/2/2 que es la mitad de la mitad de la pantalla (para centrarlo en el campo del jugador) y como parámetro posy he situado a 40px del norde superior.

El otro Sprite exactamente lo mismo, pero para los puntos de la CPU y centrado en el campo de la CPU el posx (WIDTH-WIDTH/4).

por último solo debemos actualizarlo en pantalla como hacemos siempre.

screen.blit(p_jug, p_jug_rect)
screen.blit(p_cpu, p_cpu_rect)

Yo recomiendo ponerlas justo después del blit del fondo, porque si los ponemos al final la pelota pasara por “debajo” de los marcadores y eso queda algo feo.

El juego nos queda de la siguiente manera:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Módulos
import sys, pygame
from pygame.locals import *

# Constantes
WIDTH = 640
HEIGHT = 480

# Clases
# ---------------------------------------------------------------------

class Bola(pygame.sprite.Sprite):
	def __init__(self):
		pygame.sprite.Sprite.__init__(self)
		self.image = load_image("images/ball.png", True)
		self.rect = self.image.get_rect()
		self.rect.centerx = WIDTH / 2
		self.rect.centery = HEIGHT / 2
		self.speed = [0.5, -0.5]

	def actualizar(self, time, pala_jug, pala_cpu, puntos):
		self.rect.centerx += self.speed[0] * time
		self.rect.centery += self.speed[1] * time

		if self.rect.left <= 0:
			puntos[1] += 1
		if self.rect.right >= WIDTH:
			puntos[0] += 1

		if self.rect.left <= 0 or self.rect.right >= WIDTH:
			self.speed[0] = -self.speed[0]
			self.rect.centerx += self.speed[0] * time
		if self.rect.top <= 0 or self.rect.bottom >= HEIGHT:
			self.speed[1] = -self.speed[1]
			self.rect.centery += self.speed[1] * time

		if pygame.sprite.collide_rect(self, pala_jug):
			self.speed[0] = -self.speed[0]
			self.rect.centerx += self.speed[0] * time

		if pygame.sprite.collide_rect(self, pala_cpu):
			self.speed[0] = -self.speed[0]
			self.rect.centerx += self.speed[0] * time

		return puntos

class Pala(pygame.sprite.Sprite):
	def __init__(self, x):
		pygame.sprite.Sprite.__init__(self)
		self.image = load_image("images/pala.png")
		self.rect = self.image.get_rect()
		self.rect.centerx = x
		self.rect.centery = HEIGHT / 2
		self.speed = 0.5

	def mover(self, time, keys):
		if self.rect.top >= 0:
			if keys[K_UP]:
				self.rect.centery -= self.speed * time
		if self.rect.bottom <= HEIGHT:
			if keys[K_DOWN]:
				self.rect.centery += self.speed * time

	def ia(self, time, ball):
		if ball.speed[0] >= 0 and ball.rect.centerx >= WIDTH/2:
			if self.rect.centery < ball.rect.centery:
				self.rect.centery += self.speed * time
			if self.rect.centery > ball.rect.centery:
				self.rect.centery -= self.speed * time

# ---------------------------------------------------------------------

# Funciones
# ---------------------------------------------------------------------

def load_image(filename, transparent=False):
        try: image = pygame.image.load(filename)
        except pygame.error, message:
                raise SystemExit, message
        image = image.convert()
        if transparent:
                color = image.get_at((0,0))
                image.set_colorkey(color, RLEACCEL)
        return image

def texto(texto, posx, posy, color=(255, 255, 255)):
	fuente = pygame.font.Font("images/DroidSans.ttf", 25)
	salida = pygame.font.Font.render(fuente, texto, 1, color)
	salida_rect = salida.get_rect()
	salida_rect.centerx = posx
	salida_rect.centery = posy
	return salida, salida_rect

# ---------------------------------------------------------------------

def main():
	screen = pygame.display.set_mode((WIDTH, HEIGHT))
	pygame.display.set_caption("Pruebas Pygame")

	background_image = load_image('images/fondo_pong.png')
	bola = Bola()
	pala_jug = Pala(30)
	pala_cpu = Pala(WIDTH - 30)

	clock = pygame.time.Clock()

	puntos = [0, 0]

	while True:
		time = clock.tick(60)
		keys = pygame.key.get_pressed()
		for eventos in pygame.event.get():
			if eventos.type == QUIT:
				sys.exit(0)

		puntos = bola.actualizar(time, pala_jug, pala_cpu, puntos)
		pala_jug.mover(time, keys)
		pala_cpu.ia(time, bola)

		p_jug, p_jug_rect = texto(str(puntos[0]), WIDTH/4, 40)
		p_cpu, p_cpu_rect = texto(str(puntos[1]), WIDTH-WIDTH/4, 40)

		screen.blit(background_image, (0, 0))
		screen.blit(p_jug, p_jug_rect)
		screen.blit(p_cpu, p_cpu_rect)
		screen.blit(bola.image, bola.rect)
		screen.blit(pala_jug.image, pala_jug.rect)
		screen.blit(pala_cpu.image, pala_cpu.rect)
		pygame.display.flip()
	return 0

if __name__ == '__main__':
	pygame.init()
	main()

Ya tenemos nuestros marcadores, pero el juego ni se inmuta cuando marcas un punto, lo solucionaremos en próximas entregas.

Entradas relacionadas

• Juego de la serpiente paso a paso. Parte 2
• Engine II: El archivo principal
• Engine I: Preparándonos para trabajar
• Pygame IX: Sistema de puntuación
• Pygame VIII: Inteligencia artificial