Programació | Gràfics | Recursos CITCEA | ||
Tutorial | Exemples | Projectes | Inici |
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:
Per entendre com el farem servir, el trossejarem en les corresponents rajoles de 16 ⨯ 16 píxels.
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:
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:
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í:
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
Esta obra de Oriol Boix está licenciada bajo una licencia no importada Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0.