Creació de jocs amb PyBadge

Programació Dades pràctiques     Recursos CITCEA
Tutorial Exemples Projectes   Inici

Ús del programa IrfanView

Per crear i editar imatges podeu fer servir qualsevol programa però si habitualment no en feu servir cap podeu provar amb IrfanView. A continuació us donarem les indicacions per fer les coses que més probablement necessitareu per treballar amb la placa PyBadge.

Preparació del programa IrfanView

El primer que hem de fer és instal·lar l'IrfanView. Per a això, anirem a la pàgina principal d'IrfanView i buscarem el botó download corresponent al nostre sistema operatiu (32 o 64 bits). Si no trobeu aquests botons, podeu fer servir la pestanya download del menú. Un cop descarregat el fitxer, l'executarem per instal·lar el programa.

Un cop instal·lat, convindrà afegir-li les extensions, que li donaran més potencialitats al programa. Al web de l'IrfanView, anirem a la pestanya PlugIns i cercarem l'opció de download ALL PlugIns as a ZIP (o similar) corresponent al nostre sistema operatiu (32 o 64 bits); pot ser que haguem de canviar de pàgina una o més vegades. Un cop descarregat el fitxer comprimit, l'obrirem, en copiarem el seu contingut i l'enganxarem dins de la carpeta Plugins de la carpeta on tinguem instal·lat el programa (per exemple C:\Program Files\IrfanView\Plugins).

També podem afegir una o més llengües (català, castellà, etc.) per fer el programa més fàcil d'utilitzar. Per fer això, anirem a la pestanya languages, cercarem la llengua desitjada i picarem on diu ZIP. Un cop descarregat el fitxer comprimit, l'obrirem, en copiarem el seu contingut i l'enganxarem dins de la carpeta Languages de la carpeta on tinguem instal·lat el programa (per exemple C:\Program Files\IrfanView\Languages). En la resta d'aquesta pàgina, posarem les comandes corresponents a la versió en català.

Retallar i redimensionar una imatge

És molt habitual que necessitem retallar i redimensionar una imatge per fer-la servir com a fons. Imaginem que tenim la imatge següent:

cel

La imatge mesura 500 ⨯ 354 píxels i necessitem passar-la a 160 ⨯ 128 píxels i guardar-la en format BMP. Primer reduirem la imatge i després la retallarem. Cal mirar si hem de retallar en amplada o en alçada per tal de poder-la dimensionar de manera proporcional. A la taula següent hi tenim els resultats que obtindríem reduïnt la imatge sense retallar a l'amplada o a l'alçada.

Ample   Alt  
Original 500 354
A l'ample 160 113
A l'alt 181 128

Si ajustéssim la imatge a l'ample, ens quedaria curta d'alçada; en canvi, si l'ajustem a l'alçada ens sobrarà una mica d'ample i la podrem retallar. Anem, doncs, a reduir-la. Obrirem el programa IrfanView. En el menú, anirem a Fitxer, triarem l'opció Obre... i seleccionarem la imatge que volem obrir. Un cop oberta, anirem a la pestanya Imatge i picarem a Redimensiona/Refés la mostra... i se'ns obrirà una finestra en la que podrem posar les mides desitjades (181 ⨯ 128 píxels).

Ara que ja tenim la imatge a l'alçada (en aquest cas) correcta, anem a retallar-la d'amplada per aconseguir la mida desitjada. Anirem a la pestanya Imatge i picarem a Canvia mida marc... i se'ns obrirà una finestra en la que marcarem l'opció Set total canvas dimensions i pixels i posarem les mides desitjades (160 ⨯ 128 píxels). En aquest cas, quedarà millor si retallem pels dos costats, per tant marcarem l'opció Center.

Ara ja només ens queda guardar la imatge en format BMP. Per fer-ho, anirem a la pestanya Fitxer i triarem l'opció Anomena i desa... que ens obrirà una finestra on triarem la carpeta on volem guardar la imatge, el seu nom i el tipus de fitxer (BMP). El resultat obtingut seria aquest.

Crear una imatge i editar els píxels

Anem a veure com crearíem la imatge per a un sprite o una rajola del mosaic. Suposem que volem crear una imatge, en format BMP, de 16 ⨯ 16 píxels i dibuixar-hi això:

Sprites

Aquest dibuix representat sobre una quadrícula seria així:

Sprites

Obrirem el programa IrfanView. En el menú, anirem a Imatge, triarem l'opció Crea una imatge nova (buida)... i se'ns obrirà una finestra en la que podrem indicar la mida (16 ⨯ 16 píxels) i el color de fons (198 de vermell, 90 de verd i 16 de blau). També convindrà indicar que volem treballar amb 16 Colors o, excepcionalment en imatges amb molts colors, amb 256 Colors.

La nostra imatge és molt petita i ens interessa fer-la grossa per poder seleccionar els píxels que volem pintar. A la barra d'eines hi ha un desplegable en el que podem indicar el nivell de zoom desitjat; en el nostre cas, en lloc de triar un dels valors disponibles, podem posar un valor gran, per exemple 2000.

Normalment l'IrfanView té un fons de pantalla de color negre i això és un inconvenient quan el fons de la nostra imatge és del mateix color, ja que no distingim les vores de la imatge. Però podem canviar el fons de pantalla anant a la pestanya Opcions i picant a Propietats/Configuració.... Se'ns obrirà una finestra en la que triarem l'opció Visualització i allà podrem canviar el color del fons de la finestra principal.

Ara hem de posar a la paleta els colors que necessitem. Anem a la pestanya Imatge, desplegarem el submenú Paleta i triarem l'opció Edita la paleta.... Se'ns obre una finestra amb els 16 (o 256) colors de la paleta, que probablement seran tots iguals. El primer color és el del fons i podem editar els altres. Per exemple, piquem dos cops en el segon i ajustem els valors 49, 206 i 49. Si ens calguessin més colors, només cladria repetir el procés tants cops com fos necessari.

Per poder pintar sobre la imatge necessitem obrir la barra d'eines corresponent, per això anem a la pestanya Edita i picarem a l'opció Mostra diàleg de Paint. A la part inferior de la barra hi trobarem uns rectangles de color que ens permetran triar amb quin volem pintar i amb el pinzell podrem pintar cada píxel del color triat. Quan passem el pinzell per sobre la imatge se'ns mostrarà un cercle que té per diàmetre la mida d'un píxel.

Abans de començar a dibuixar, és recomanable tenir representat en un paper quadriculat el que volem dibuixar, així podrem comptar els quadrets (cada un corresponent, per exemple, a un píxel) mentre dibuixem.

Una possible manera de dibuixar la imatge desitjada seria començar per la línia inferior de la fletxa, la més llarga, que té tots els píxels en verd excepte un a cada costat; aquesta és la vuitena línia del gràfic. A partir d'aquí, podem anar pujant, fent cada vegada la línia més curta un píxel per banda. Un cop arribats a la part superior, podem fer la línia vertical en les mateixes columnes que els dos píxels de la punta de la fletxa.

Ara ja només ens queda guardar la imatge en format BMP. Per fer-ho, anirem a la pestanya Fitxer i triarem l'opció Anomena i desa... que ens obrirà una finestra on triarem la carpeta on volem guardar la imatge, el seu nom i el tipus de fitxer (BMP). El resultat obtingut seria aquest.

Fer un mosaic a partir de diverses imatges

Imaginem que volem fer un fitxer BMP que contingui quatre cops la fletxa que hem fet abans, girada en les quatre direccions. Podem posar les figures en una filera de quatre elements o en dues fileres de dos, agafem la primera opció.

Abans de res, farem una còpia de la nostra imatge i l'obrirem amb el programa IrfanView. Aquesta serà la primera rajola del mosaic i ara hi posarem les altres tres al voltant. Obrirem una segona vegada l'IrfanView i carregarem la imatge original, que haurem de girar abans d'afegir-la al fitxer del mosaic. En les dues finestres de l'IrfanView anirem a la pestanya Edita i picarem a l'opció Mostra diàleg de Paint. És possible que quan obrim les imatges, aquestes es vegin estranyes però quan s'obri la barra d'eines la imatge es mostrarà com esperàvem. Convindrà també que ampliem (per exemple amb un zoom de 2000) la visualització de la imatge.

A la imatge original, anirem a la pestanya Imatge i picarem l'opció Gira a la dreta (sentit horari) (també podríem fer servir l'opció de gir en sentit contrari). Pot ser que després del gir haguem de tornar a fer zoom. Ara, a la barra d'eines triarem l'opció de la fletxa i seleccionarem la imatge completa. Un cop seleccionada, anirem a la pestanya Edita i agafarem l'opció Copia; en la imatge que ha de contenir el mosaic anirem a la pestanya Edita i triarem Enganya especial (afegir al costat) i picarem a a dreta, pot ser que haguem de tornar a ajustar el zoom.

Ara ja tenim dues versions de la fletxa i només cal repetir aquest procés dos cops més per aconseguir posar les altres dues al costat. El resultat serà aquesta imatge:

Sprites

Si haguéssim volgut fer un mosaic de dues fileres i dues columnes, hauríem tingut una mica més de complicació. Si haguéssim intentat enganxar la tercera figura a sota, atès que la part superior ja té dues rajoles i, per tant, és el doble d'ampla, ens hauria redimensionat la tercera figura per tal que tingués la mateixa amplada que la filera superior. La manera d'aconseguir-ho és fent una figura amb la primera filera i una altra amb la segona, per després combinar-les en una sola imatge.

Sprites

 

 

 

 

 

 

 

 

 

 

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