Creació de jocs amb PyBadge

Programació Gràfics     Recursos CITCEA
Tutorial Exemples Projectes   Inici

Sprites

Ara farem servir un mosaic per fer un fons i hi posarem un personatge mitjançant un sprite. El fons estarà format per nou peces que es repetiran convenientment. En tindrem una per a cada cantonada, una per a la resta de cada un dels quatre costats i una per al centre. Tindrem un únic fitxer d'imatge que contindrà les nou peces i tres sprites. El fitxer d'imatge tiles.bmp és aquest:

Fitxer

Per entendre com el farem servir, el trossejarem en les corresponents rajoles de 16 ⨯ 16 píxels.

Mosaic Espai Mosaic Espai Mosaic Espai Mosaic
Espai Espai Espai Espai Espai Espai Espai
Mosaic Espai Mosaic Espai Mosaic Espai Mosaic
Espai Espai Espai Espai Espai Espai Espai
Mosaic Espai Mosaic Espai Mosaic Espai Mosaic

La següent taula mostra el número d'ordre que correspon a cada una de les parts:

 0  1  2  3
 4  5  6  7
 8  9 10 11

També podem fer servir IrfanView per combinar diverses rajoles en una mateixa imatge.

El fons de la imatge el crearem agafant, per a cada posició, les rajoles que s'indiquen a continuació:

 0  1  2  3  4  5  6  7  8  9
 0  0  1  1  1  1  1  1  1  1  2
 1  4  5  5  5  5  5  5  5  5  6
 2  4  5  5  5  5  5  5  5  5  6
 3  4  5  5  5  5  5  5  5  5  6
 4  4  5  5  5  5  5  5  5  5  6
 5  4  5  5  5  5  5  5  5  5  6
 6  4  5  5  5  5  5  5  5  5  6
 7  8  9  9  9  9  9  9  9  9 10

I obtindrem la imatge de fons següent:

Fons

Hem fet el fons amb un disseny de quadrícula perquè ens ajudi a veure com funciona tot plegat. Podríem, si volem, fer un fons sense quadrícula o, fins i tot, amb algun dibuix.

Si observem els tres sprites que fan de personatges, veurem que tots tenen el fons del mateix color, un to morat. Hem triat un color que no es faci servir en tota la resta dels gràfics perquè l'objectiu és que aquest fons esdevingui transparent. Amb el programa que hem fet servir per crear la imatge tiles.bmp, consultem quina és la seva paleta de colors:

Fons

Observem que el color de fons dels personatges, que volem fer transparent, és el tercer. La instrucció següent (recordem que es compta a partir de zero) fara que aquest color sigui transparent i, per tant, es vegi el que hi ha sota.

palette.make_transparent(2)

Llavors els personatges es veuran així:

Sprite         Sprite         Sprite

Ara ja tenim tots els ingredients per fer el programa. Crearem un sprite (TileGrid d'un sol element) per al personatge i un mosaic (en aquest cas un TileGrid de 10 ⨯ 8 rajoles) per al fons. Després crearem un grup per a cada un i, finalment, un grup per al conjunt. A l'hora d'afegir els elements al grup global cal posar primer el fons i després el personatge ja que si ho féssim en ordre invers el personatge quedaria amagat darrere del fons i no es veuria.

import board
import displayio
import adafruit_imageload
# Creem un objecte per a la pantalla
pant = board.DISPLAY
# Carreguem el fitxer amb la imatge
imatge, palette = adafruit_imageload.load("/tiles.bmp",
                                                bitmap=displayio.Bitmap,
                                                palette=displayio.Palette)
# Creem l'sprite (personatge)
pers = displayio.TileGrid(imatge, pixel_shader=palette,
                            width = 1, height = 1,
                            tile_width = 16, tile_height = 16,
                            default_tile = 3)
# Creem un mosaic per al taulell
taulell = displayio.TileGrid(imatge, pixel_shader=palette,
                            width = 10, height = 8,
                            tile_width = 16, tile_height = 16)
# Definim un grup per a l'sprite
grup_pers = displayio.Group(scale=1)
grup_pers.append(pers)
# Definim un grup per al taulell
grup_taulell = displayio.Group(scale=1)
grup_taulell.append(taulell)
# Creem un grup per englobar-ho tot
grup = displayio.Group()
# Afegim els grups anteriors al global
grup.append(grup_taulell)  # Primer el taulell
grup.append(grup_pers)  # Despres el personatge
# Fem que el fons dels personatges sigui transparent
palette.make_transparent(2)
# Dibuixem el taulell
# Cantonades
taulell[0, 0] = 0  # Superior esquerra
taulell[9, 0] = 2  # Superior dreta
taulell[0, 7] = 8  # Inferior esquerra
taulell[9, 7] = 10 # Inferior dreta
# Vores superior i inferior
for x in range(1, 9):
    taulell[x, 0] = 1  # Superior
    taulell[x, 7] = 9  # Inferior
# Vores laterals
for y in range(1, 7):
    taulell[0, y] = 4  # Esquerra
    taulell[9, y] = 6  # Dreta
# Centre del taulell
for x in range(1, 9):
    for y in range(1, 7):
        taulell[x, y] = 5
# Situem el personatge
cx = 4
cy = 3
pers.x = 16 * (1 + cx)
pers.y = 16 * (1 + cy)
# Mostra el grup a la pantalla
pant.show(grup)
while True:
    pass

 

 

 

 

 

 

 

 

 

 

Licencia de Creative Commons
Esta obra de Oriol Boix está licenciada bajo una licencia no importada Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0.