Menu
CoddyTech

Píxeles transparentes

Parte de la sección Sprites e imágenes del Journey de Pygame de Coddy. Lección 5 de 36.

Un archivo de imagen siempre es un rectángulo, pero una nave enemiga no. Los píxeles que la rodean son transparentes: cada píxel de un PNG tiene un cuarto número, su alfa, de 0 (transparente) a 255 (opaco).

El código inicial carga los tres enemigos con convert(), que descarta el alfa: cada píxel transparente se vuelve negro y cada enemigo queda dentro de un recuadro negro. convert_alpha() conserva el alfa, así que solo los píxeles opacos cubren la ventana. Úsalo con todo lo que no sea un rectángulo sólido.

El Rect sigue siendo el rectángulo completo. Delimítalo para ver el recuadro que ocupa la imagen:

rect = red.get_rect(topleft=(128, 200))
screen.blit(red, rect)
pygame.draw.rect(screen, (90, 90, 120), rect, 1)

El último número, 1, dibuja un contorno de 1 píxel en lugar de rellenar el Rect. Observa los espacios entre el contorno y la nave. Dos Rect pueden superponerse aunque las imágenes que contienen no se toquen, y una prueba de colisión con Rect seguirá indicando que chocaron. El capítulo 5 soluciona eso.

challenge icon

Desafío

Fácil
  1. Carga los tres enemigos con .convert_alpha() en lugar de .convert(), para que desaparezcan los recuadros negros.
  2. Después de cada enemigo, dibuja el contorno de su Rect en (90, 90, 120), con 1 píxel de ancho. Los enemigos se mantienen en (128, 200), (288, 200) y (448, 200).

Pruébalo tú mismo

import pygame

pygame.init()
screen = pygame.display.set_mode((640, 480))
pygame.display.set_caption("Three Enemies")
clock = pygame.time.Clock()

red = pygame.image.load("assets/images/enemy_red.png").convert()
green = pygame.image.load("assets/images/enemy_green.png").convert()
yellow = pygame.image.load("assets/images/enemy_yellow.png").convert()

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

    screen.fill((20, 22, 40))
    screen.blit(red, (128, 200))
    screen.blit(green, (288, 200))
    screen.blit(yellow, (448, 200))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Sprites e imágenes

Practica por tu cuenta: Playground de Pygame