Generació de gràfics dinàmics interactius

Els sprites, si són animats, estan compostos d’una o diverses imatges. Cadascuna d’aquestes imatges és un quadre d’animació. En el món del desenvolupament de videojocs cadascuna d’aquestes imatges és un fotograma (frame).

Les animacions dels personatges no són més que una seqüència de frames que, vistos un darrere l’altre a una velocitat adequada, produeixen l’efecte de moviment. El fons de pantalla constitueix generalment l’escenari i els sprites són els personatges i objectes que se superposen al fons de pantalla i que es desplacen. Un sprite també pot de vegades passar darrere un element del fons de la pantalla.

Els sprites han anat evolucionant al llarg de la història dels videojocs. Al principi, mentre alguns eren generats per ordinador, d’altres eren dibuixats a mà per ser posteriorment traspassats a l’ordinador. En altres casos, com en el famós videojoc Mortal Kombat, que va ser el primer a produir sprites completament digitalitzats en un joc, el que es feia era fotografiar actors per fer cada animació dels personatges.

Veieu un exemple dels sprites d’un personatge per un videojoc per a cada una de les unitats d’animació la figura:

Autor: Kin Ng

Amb l’arribada dels videojocs en 3D, l’ús d’sprites s’ha començat a deixar de banda per personatges poligonals. Però els videojocs en HTML5 i diversos frameworks n’han tornat a popularitzar l’ús.

També es denomina sprite a una sèrie d’imatges unides en un mateix arxiu, una al costat de l’altra, que representen el mateix personatge (o objecte) en diferents posicions. A diferència d’un arxiu GIF animat, totes les imatges estan visibles en el mateix moment i pot estar codificat en un format d’imatge més lleuger (en general, PNG). Això és útil sobretot en videojocs per a telèfons mòbils, ja que el temps de càrrega d’una imatge és molt superior al que ocupa seleccionar i mostrar una àrea en particular d’una imatge ja carregada en la memòria.

En desenvolupament d’aplicacions web, un sprite és un conjunt d’imatges relacionades que componen un sol arxiu. Aquest arxiu s’usa posteriorment al disseny web, de manera que només es vegi al navegador una imatge seleccionada entre totes les que formen l’sprite. Aquesta és una bona pràctica molt utilitzada al disseny web. L’ús de les imatges sprite es combina amb el llenguatge CSS, per això s’anomenen sprites CSS (o CSS sprites). Veieu un exemple d’sprites CSS amb les icones de les xarxes socials a la figura:

Font: Free Icons Library

Aquesta tècnica consisteix a utilitzar una sola imatge composta per diverses imatges més petites i utilitzar la propietat background-position de CSS per aconseguir visualitzar cada imatge de forma individual, cosa que permet reduir el nombre de peticions HTTP, però també disminuir la mida total de l’arxiu de les imatges. Aquest fet optimitza tant el temps de descàrrega d’una pàgina com el rendiment. És a dir, millora el rendiment al moment d’usar-les, perquè només es descarrega el primer cop. Aleshores, en cada sol·licitud d’una de les imatges es mostrarà la part desitjada de la imatge global.

Un cop hem dissenyat individualment els fotogrames de l’animació d’un personatge, hem d’agrupar totes les petites imatges en un sol arxiu.

Cal diferenciar entre dos tipus d’arxiu, encara que són molt semblants: els fulls d’sprite (sprite sheet)) i els atles de textures (texture atlas).

Un sprite sheet és, bàsicament, un arxiu d’imatge conformat per petites imatges o sprites. Sol tenir una mida gran, ja que en ell s’hi guarden tots els sprites. Per altra banda, un atles de textures és un arxiu molt semblant a l’sprite sheet. També és una imatge conformada per peces. Les petites imatges o elements gràfics d’un atles combinen, a més dels fotogrames de l’animació, totes les textures i elements que hi apareixeran a la interfície del joc.

En un atles les imatges poden tenir diferents mides, mentre que en un sprite sheet totes les imatges han d’ocupar el mateix espai. A banda d’aquesta diferència, en tots dos tipus de mapes cada imatge ha d’estar una mica distanciada de l’altra per no tallar-ne cap part. L’atles de textures resulta molt útil per usar-lo en motors de joc com Unity, de manera que només s’hagi de carregar una imatge per a diferents clips d’animació. Gràcies als atles, és molt més fàcil personalitzar la imatge i reduir el tems de càrrega dels gràfics del joc.

Per crear sprite sheets es fa ús d’una aplicació anomenada TexturePacker, que és compatible amb els sistems operatius MacOS (MacOS 10.10 i versions posteriors), Windows (Windows 7, 8, 8.1 i 10, 32 bits i 64 bits) i Linux (Ubuntu 16.04 o superior).

Tot i que TexturePacker és una aplicació de pagament, també disposa d’una opció de prova de set dies per provar totes les funcionalitats de la versió Pro. Aquest mode de llicència es tria automàticament per a noves instal·lacions, i quan el període de prova caduca, es disposa de les llicències Essential o Pro.

La llicència TexturePacker Essential és el mode gratuït en el qual només hi ha les funcions bàsiques per crear sprite sheets, mentre que amb la llicència TexturePacker Pro es pot accedir a totes les característiques avançades de TexturePacker, com les opcions de configuració i d’optimització de les imatges.

Un cop instal·lat TexturePacker a l’ordinador, cal triar la versió Pro de prova de set dies per tal de realitzar els dissenys amb totes les característiques disponibles, com mostra la figura.

La interfície de TexturePacker és senzilla, a primera vista veieu que conté una barra d’eines en la part superior, un tauler a l’esquerra anomenat Sprites, un central anomenat Preview i, per últim, a la dreta es troba el tauler Settings (veieu la figura).

A la barra d’eines hi ha diverses eines per obrir, crear i guardar un nou projecte, entre altres funcions:

Taula Descripció de les icones de la barra d’eines de TexturePacker

Icona	Nom de la icona	Descripció
	Nou projecte	Crear un sprite sheet nou per al framework desitjat.
	Projecte obert	Obrir un fitxer .tps existent.
	Desa el projecte	Desar el projecte actual al disc. Crea un fitxer .tps.
	Afegeix sprites	Afegir nous sprites a l’sprite sheet.
	Elimina els sprites	Eliminar sprite o carpeta seleccionada des de l’sprite sheet.
	Afegeix una carpeta intel·ligent	Afegir una carpeta que conté sprites.
	Configura sprite	Editar les característiques de configuració de l’sprite.
	Vista prèvia d’animació	Mostrar una vista prèvia d’animació per a sprites seleccionats.
	Publica sprite sheet.	Publicar sprite sheet actual.
	Mostra el tutorial	Obrir la pàgina de tutorial de TexturePacker en el navegador web.
	Envia comentaris	Enviar comentaris de millora a l’equip de TexturePacker.

A la part esquerra trobareu el tauler de Sprites. En aquesta finestra es llisten tots els arxius d’imatge que formaràn part de l’sprite sheet final. Per afegir els sprites al tauler, només heu d’arrosegar els arxius i es carregaràn a TexturePacker (vegeu figura):

També podeu arrossegar i deixar anar carpetes completes de sprites al tauler. TexturePacker importa totes les imatges dins d’aquesta carpeta i fa servir noms de subcarpeta com a part del nom de l’sprite final. Qualsevol canvi en l’estructura de la carpeta se sincronitza amb TexturePacker. Cal tenir en compte que podeu eliminar sprites del tauler només si els heu afegit com a sprites individuals.

Després d’afegir sprites al Tauler Sprites de TexturePacker, el full de sprite es veurà a la finestra central de previsualització, amb tots els sprites alineats, com es mostra a la figura:

Gairebé totes les opcions de TexturePacker s’actualitzen en temps real per veure immediatament els canvis realitzats al full de sprite. Des del control lliscant de Zoom, situat a baix del tauler de previsualització, podeu ajustar el factor d’escala de la vista prèvia:

1. Establiu el factor d’ampliació al 100%, utilitzant els botons - o + per ampliar els passos predefinits. Per veure el full de sprite completament a la finestra TexturePacker useu l’opció Fit.
2. Si activeu la casella Display outlines (Desplegament de visualització), veureu els contorns de l’sprite.

A la part dreta de TexturePacker, al tauler Settings, hi ha moltes opcions per optimitzar el full de sprites. Per defecte es veuen les més imporants, com el punt d’ancora de les imatges o l’escala. Per veure més opcions, heu d’anar Advanced settings (veieu figura figura).

La creació d’un sprite sheet és tan fàcil com arrossegar una carpeta amb els sprites a la finestra central de Texture Packer:

L’eina agafa tots els fitxers amb format d’imatge de la carpeta i els empaqueta a l’sprite sheet.

Així doncs, els passos que cal seguir per a crear un sprite sheet són:

1. Seleccionar el format exportador i el fitxer de dades: seleccioneu el format des del tauler Settings > Data > Data format. Aquest pas no és obligatori, però és molt recomanable si es té previst utilitzar els sprite sheets amb un motor de joc. El fitxer de dades conté informació sobre les posicions de l’sprite, noms, retallades, punts de pivot entre altres coses.
2. Deixar anar els sprites: cal arrossegar i deixar anar al tauler central una carpeta que contingui els sprites. Al tauler esquerre, anomenat Sprites es veuran llistats els arxius. TexturePacker examina per formats d’imatge coneguts com png, jpg, psd, svg, bmp, tiff i altres. La vista dels sprites s’actualitza cada vegada que s’afegeixen nous sprites a la carpeta, se’n canvia el nom o se’n modifiquen els sprites.
3. Configuració de textures: per ajustar el disseny de l’sprite sheet cal anar al tauler dret de configuració, Settings. Quan es faci servir la versió gratuïta, s’hauran de canviar tres opcions dels valors predeterminats, que són:
   • Algorisme: Valor a establir bàsic
   • Mode de retallada: Valor a establir cap
   • Png Opt Nivell: Valor a establir 0 (aquesta opció hi és a la configuració avançada).
4. Fer clic a Publicar: un clic al botó Publicar crea els sprite sheets.
5. Importació de l’sprite sheet: molts marcs de desenvolupament de jocs han incorporat el suport de TexturePacker; alguns requereixen passos addicionals com Unity (instal·lant el connector gratuït TexturePacker importer).

L’optimització dels sprite sheets significa la correcta exportació dels arxius per al motor de joc que farem servir. Per tant, hem de seleccionar el motor del videojoc que es vol utilitzar. TexturePacker admet més de 30 motors de joc, i es pot estendre per admetre’n qualsevol de nou.

Per seleccionar el motor de joc, heu d’anar al tauler Settings i clicar el botó Choose data format. Seleccioneu el motor des del menú desplegable:

Vegeu altres característiques del tauler de Settings:

• Data file (Format de dades): proporciona la possibilitat de seleccionar el format dels fitxers de dades coincident amb el framework. Si el format no apareix a la llista (cosa poc probable), es pot crear un format personalitzat que admeti les necessitats pròpies.
• Texture format (Format de textures): especifica el format de fitxer gràfic desitjat per a l’sprite sheet.
• Pixel format (Format de píxel): especifica el format de píxel per al fitxer de text. Aquests paràmetres afecten aspectes com la quantitat de bytes per píxel del gràfic.
• Dithering: permet especificar l’algoritme que s’utilitzarà en computar valors per intentar mantenir la qualitat d’imatge durant la compressió.
• Scaling variants (Escala): permet desar l’sprite sheet en una escala més gran o més petita que les imatges que hi ha dins.
• Max size (Mida màxima/mida fixada): permet especificar una mida màxima per a un sprite sheet, cosa que pot ser pràctica si es vol limitar a una determinada mida (a determinats dispositius, o simplement per no superar determinats límits).
• Algorithm (Algorisme): inclou dos algoritmes, MaxRects i Basic.
  • MaxRects: aquest és l’algorisme més conegut per empaquetar textures, ja que és ràpid i té una alta optimització. Només disponible en la versió TexturePacker Pro.
  • Basic: aquest és millor per a tilesets. Els sprites es col·loquen en una fila fins que aquesta està plena i els ordena pel nom, l’amplada, l’alçària o l’àrea. A més, aquest algorisme és gratuït i es pot utilitzar per a tots els projectes.
• Border/shape padding: determina l’espai entre la vora de l’sprite sheet i els sprites entre ells. Permet triar augmentar els valors per afegir més d’una separació entre les vores/sprites.
• Extrude (Extrudir): aquesta opció repeteix els píxels al voltant dels límits dels sprites.
• Trim: elimina les franges transparents al voltant dels sprites per empaquetar-los en els sprite sheets de forma més eficient.
• Esquemes de formes: és útil activar-los per veure les vores dels sprites amb finalitats de depuració.

Un cop configurats tots els paràmetres, procedirem a publicar l’sprite sheet. TexturePacker aplica els paràmetres que hem configurat d’optimització per al motor del videojoc. També escriu un fitxer de dades amb la informació de sprite necessària en prémer Publish.

Vegeu un exemple a figura d’un full d’sprites optimitzat i el seu arxiu de dades .json:

Un tile (rajola) és la part gràfica d’un videojoc que s’utilitza per construir el fons o escenaris. El conjunt d’elements gràfics o tiles formen un arxiu anomenat tileset. En els jocs en 2D, els tiles s’emmagatzemen en un o diversos atles de tiles, i aquests al seu torn formen part d’un mapa de tiles amb tota la informació d’un joc. Tots els tiles tenen la mateixa mida. Cada atles de tiles conté els elements bàsics dels escenaris del joc, que en combinar-se formen els diferents objectes: muntanyes, llacs, boscos, etc.

Veieu en la figura un exemple de tileset:

Autor:Rawdanitsu

Per la creació de tileset s’utilitza el programa Tiled Map Editor, que és un editor de nivells en 2D de codi obert que ajuda a desenvolupar el contingut dels videojocs. Permet editar mapes de mosaic (tileset), configurar-los i exportar-los per al seu ús en el desenvolupament del joc.

Pel que fa als mapes de tiles, admeten capes de tiles rectangulars, però també projecten capes hexagonals isomètriques i isomètriques escalonades. Un joc de tiles (tileset) pot ser una sola imatge que conté molts tiles o pot ser una col·lecció d’imatges individuals. Per tal de donar suport a certes tècniques de falsificació de profunditat, les taules i les capes es poden compensar amb una distància personalitzada i se’n pot configurar l’ordre de representació.

L’eina principal per a l’edició de capes de tiles és un pinzell d’estampat que permet una pintura i còpia d’àrees de tiles. També admet dibuixar línies i cercles. A més, hi ha diverses eines de selecció i una eina que fa transicions de terreny automàtiques.

Actualment, Tiled admet dos tipus de tilesets:

• Basat en una imatge tileset: és un taulell de càlcul que defineix una mida fixa per a totes les fitxes i la imatge des de la qual se suposa que aquestes taules es tallen. A més, admet un marge al voltant del tiles i una separació entre ells, la qual cosa permet utilitzar imatges de tiles que tinguin espai entre o al voltant d’aquestos, o aquells que han extrudit els píxels fronterers de cada tile per evitar el sagnat del color.
• Col·lecció d’imatges: cada fitxa fa referència al seu propi fitxer d’imatge. És útil quan les fitxes no són de la mateixa mida, o quan l’embalatge de tiles en una textura es fa posteriorment.

Independentment del tipus de tileset, es pot associar molta metainformació en tileset i els seus tiles. Part d’aquesta informació pot ser utilitzada en el videojoc, com ara informació de col·lisió i animacions. La resta d’informació està principalment destinada a certes eines d’edició.

Hi ha diferents tipus de tilemaps, dels quals els principals i més utilitzats són:

• Ortogonal: són tilemaps 2D. Exemples: Mario Bros, Megaman i d’altres (veieu la figura).

• Isomètric: donen una perspectiva 3D. Exemples: videojocs tan coneguts com Age of Empires o Sim City (veieu la figura).

Un cop realitzat el disseny, l’output de Tiled és un fitxer TMX que pot ser utilitzat en gairebé qualsevol motor de videojoc. El format del mapa TMX (Tile Map XML) és una forma flexible de descriure un mapa basat en mosaic. Es poden descriure mapes amb qualsevol mida de mosaic, quantitat de capes, nombre de conjunts de mosaics. Cal tenir en compte que hi ha moltes biblioteques i marcs disponibles que poden funcionar amb mapes TMX.

Finalment, un altre dels seus avantatges és que es tracta d’un programa multiplataforma i està disponible tant per a Microsoft Windows com per Linux o Mac.

El procés de disseny a l’hora d’utilitzar Tiled per crear mapes funciona seguint aquests passos:

1. Triar la mida del mapa i la mida del tile.
2. Afegir fitxes de la imatge o les imatges.
3. Col·locar les fitxes en el mapa.
4. Afegir objectes addicionals.
5. Desar el mapa com a fitxer .tmx.
6. Importar el fitxer .tmx i interpretar-lo per al joc.

Vegeu-ho pas a pas. En llançar Tiled per primera vegada, s’obre la finestra de la figura:

Independentment del tipus de mapa, es mostra la següent finestra (vegeu figura):

Tiled s’organitza mitjançant capes. Qualsevol videojoc ha de disposar d’una estructura de capes bàsica, que òbviament pot ser modificada per cada dissenyador, però que farà molt més entenedor i escalable el projecte corresponent. No obstant això, qualsevol de les capes pot estar buida, però ha de formar part de l’estructura.

Les cinc capes que allotgen els gràfics del joc són:

1. floor: és el fons de tot. Aquesta capa s’utilitza per dibuixar diferents tipus de terra, com ara sorra, herba, aigua o qualsevol altra cosa d’aquest tipus. Assegureu-vos que dibuixeu un tile complet (una “rajola completa” és una rajola que no té píxels transparents) a cada tile d’aquesta capa (encara que sigui només un tile negre). Si no hi ha cap color en el fons gris, el camp de reproducció no s’actualitza després de caminar a prop. Això genera un efecte de desenfocament estrany fins que aquest lloc surt de la pantalla.
2. terrain: aquesta capa s’utilitza principalment per unir l’herba, la sorra, l’aigua o un altre terreny, fent que els diferents terrenys es barregin juntament amb rajoles de vora. Aquesta capa també s’utilitza per donar naturalitat al mapa.
3. objects: aquesta capa està destinada principalment a col·locar arbustos, flors, bases d’arbres i altres coses petites que puguin existir al món. Aquesta capa també es pot utilitzar com la capa terrain per barrejar petits objectes al món.
4. roof: qualsevol cosa que es posi en aquesta capa es dibuixarà “a dalt” del jugador, i farà l’efecte de caminar darrere seu (comunament usat per a les capes d’arbres, per exemple).
5. roof-add: de la mateixa manera que la capa roof permet que el personatge camini darrere seu, aquesta també es dibuixa per sobre de la capa roof, de manera que, per exemple, permet dibuixar xemeneies a les cobertes. També es poden posar flames en aquesta capa, a sobre d’una torxa o una peça superior de la llum a la capa roof.

A més, també hi ha les capes lògiques, com les capes d’objectes i les capes que emmagatzemen les col·lisions.

Les capes de tiles, encara que no siguin tan flexibles com les capes d’objectes, proporcionen un emmagatzematge eficient de dades i un bon rendiment, així com una creació eficient de contingut. Cada nou mapa n’obté una per defecte, així que no dubteu a eliminar-la quan no la utilitzeu.

En la part superior de la interfície del programa hi veureu la barra d’eines (figura) que permet manipular els tiles:

A continuació es detallen les eines de Tiled:

Taula Descripció de les icones de la barra d’eines de Tiled

Icona	Nom de la icona	Descripció
	Pinzell d’estampat	S’utilitza per pintar tiles, així com per a “estampats” més grans. Utilitzant el botó dret del ratolí també pot capturar ràpidament els estampats de la capa actualment activa. Normalment es crea un estampat de tiles seleccionant una o més fitxes a la vista Tilesets.
	Pinzell de terra	Permet una edició eficient amb cert tipus de transicions de terreny basades en cantonades. La configuració requereix associar informació sobre el terreny amb les teules.
	Pinzell Wang	Fa de suport de les vores i les cantonades, fet que fa que siguin útils per dibuixar rutes o tanques. Per utilitzar l’eina, cal seleccionar un color des de la vista en color de Wang.
	Eina d’ompliment	Proporciona una manera ràpida d’omplir àrees o àrees buides cobertes amb els mateixos tiles. El segell de tiles actiu es repetirà a l’àrea completa. Amb la tecla Majús, l’eina omple l’àrea seleccionada independentment dels seus continguts.
	Eina de formes	Proporciona una manera ràpida d’omplir rectangles o el·lipsis amb un cert tiles o patró. Amb Shift premut permet omplir un quadrat o cercle exactes.
	Goma d’esborrar	És una senzilla eina d’esborrar. Cal fer clic amb el botó esquerre per esborrar els tiles solts i fer clic amb el botó dret per esborrar ràpidament les àrees rectangulars.
	Selecció rectangular	Permet la selecció de zones rectangulars.
	Vareta màgica	Permet la selecció d’àrees connectades amb el mateix tile.

Les capes d’objectes són útils, ja que poden emmagatzemar molts tipus d’informació que no caben en una capa de rajoles. Els objectes es poden situar lliurement, canviar-los la mida i girar-los. També poden tenir propietats personalitzades individuals. Hi ha molts tipus d’objectes, tal com observem en la barra d’objectes que es mostra en la figura figura:

Llegiu a continuació la descripció de les eines de la capa objectes:

Taula Descripció de les icones de la barra d’eines de la capa d’objectes

Icona	Nom de la icona	Descripció
	Eina de selecció	Selecciona elements en àrees rectangulars personalitzades.
	Eina de d’edició de polígons	Marca ubicacions exactes.
	Rectangle	Marca àrees rectangulars personalitzades.
	El·lipsi	Marca el·lipsis personals o àrees circulars.
	Polígon	S’utilitza quan un rectangle o el·lipse no la talla (sovint és un àrea de col·lisió).
	Polilínia	Pot ser un camí a seguir o una paret amb la qual col·lidir.

Un cop seleccionada la capa d’objectes, es poden utilitzar les eines anteriors per dibuixar els rectangles, quadres o qualsevol altra forma al mapa. Només s’han de proporcionar propietats personalitzades o noms diferents dels objectes per identificar-los en el videojoc si l’objecte és un jugador, un enemic, etc.

Per exemple, per crear un objecte de reproducció del jugador, s’ha d’afegir un objecte rectangular. A continuació, cal clicar el botó dret sobre l’objecte i anar a Propietats de l’objecte. A continuació, s’estableix “Reproductor” com a Nom a les propietats. De la mateixa manera, es poden crear altres objectes per dissenyar enemics, power-ups, etc.

També es poden afegir propietats personalitzades per a cada fitxa del taulell d’eines per proporcionar la detecció de col·lisions.

Tiled disposa de dos tipus més de capes: capes d’imatges i capes de grup. Les capes d’imatges proporcionen una manera d’incloure ràpidament una única imatge com a primer pla o fons del mapa. Actualment no són tan útils, perquè si s’afegeix la imatge com a tileset i es col·loca com a objecte de tile, s’obté la possibilitat d’escalar i rotar lliurement la imatge.

Les capes de grup funcionen com a carpetes i es poden utilitzar per organitzar les capes en una jerarquia. Això és útil quan el mapa conté una gran quantitat de capes. La visibilitat, opacitat, compensació i bloqueig d’una capa de grup afecta totes les capes secundàries. Les capes es poden arrossegar fàcilment dins i fora dels grups amb el ratolí.

Per crear un mapa ortogonal el primer que cal fer és començar un nou mapa amb Fitxer> Nou> Nou Mapa o Ctrl + N. Apareix el quadre de diàleg de la figura:

El primer que cal fer és escollir la mida del mapa inicial, la mida del tauler, l’orientació, el format de la capa de rajoles, l’ordre de representació del tauler (només és compatible amb els mapes ortogonals) i si el mapa és infinit o no. Tots aquests aspectes es poden canviar més endavant quan sigui necessari, de manera que no és important fer-ho bé la primera vegada.

A continuació vegeu el mètode de treball amb un exemple de creació d’un mapa ortogonal a partir d’un exemple proporcionat per l’editor Tiled:

• Orientació: permet seleccionar entre ortogonal i isomètrica. Per a aquest apartat, seleccioneu Orthogonal.
• Mida del mapa: seleccioneu 10 tant per a l’amplada com per a l’alçària, ja que no necessiteu un mapa gran per a aquest exemple. Es pot canviar la mida més endavant.
• Mida de tile: establiu tant l’amplada com l’alçada a 32px. La mida del tile no es pot canviar una vegada seleccionada, i s’hauria de començar un nou mapa des de zero per a una nova mida de mosaic.

Després de desar el mapa, apareix la graella de mosaic i s’afegeix una capa de mosaic inicial al mapa. No obstant això, abans de poder començar a utilitzar qualsevol tile cal afegir una tauleta de fitxes. Trieu Fitxer> Nou> Nou conjunt de dades… per obrir el diàleg Tileset nou (vegeu figura):

Feu clic al botó Navega… i seleccioneu el tileset anomenat tmw_desert_spacing.jpg, proporcionat a la carpeta examples, situada en el directori on s’ha instal·lat Tiled (o utilitzeu-ne un dels vostres si ho voleu). Aques arxiu d’exemple utilitza una mida de mosaic de 32×32. També té un marge de píxels al voltant de les rajoles i un espai d’un píxel entre les rajoles (en general, es deixarien aquests valors en 0).

Deixeu l’opció Incrustar a mapa desactivada. El motiu és que permetrà que el tauler d’eines s’utilitzi per a diversos mapes sense la necessitat de tornar a configurar els paràmetres. També és bo emmagatzemar el fitxer de tiles en el seu propi fitxer si posteriorment afegiu propietats de rajoles, definicions del terreny, formes de col·lisió, etc., ja que aquesta informació es comparteix entre tots els mapes.

Després d’emmagatzemar tileset, hauria de tenir el següent aspecte (figura):

Només cal tornar al fitxer del mapa, que es mostrarà de la següent manera (figura):

A la part inferior dreta de la imatge a la vista Tilesets, hi apareixen els tiles per utilitzar. Les podeu seleccionar simplement fent-hi clic a sobre. Quan feu clic a l’àrea grisa gran, el tile seleccionat s’estampa a la coordenada on cliqueu (i que apareix a la part inferior esquerra de l’àrea grisa). Tingueu en compte que no podeu estampar fora de la coordenada del mapa, que en té 10 en aquest cas (tal com hem especificat a la configuració del mapa). Assegureu-vos de desar sovint.

Per omplir el mapa, si voleu crear moltes rajoles del mateix color, useu l’eina d’ompliment i, si voleu netejar-ne alguna, feu ús de la goma d’esborrar. A més, podeu girar i invertir la fitxa seleccionada amb les tecles Z i X.

El primer mapa hauria de quedar com la figura figura:

Com a mostra dels primers passos, visualitzeu el següent vídeo:

El pinzell de terra permet una edició eficient amb un cert tipus de transicions de terreny basades en les cantonades. La configuració requereix associar informació sobre el terreny amb els tiles. Es poden dibuixar línies mantenint premuda la tecla Majús. Quan es manté premuda la tecla Ctrl, la mida de l’àrea d’edició es redueix a una cantonada.

En mantenir la tecla Alt premuda, les operacions d’edició també s’apliquen a una rotació de 180 graus. Això és especialment útil a l’hora d’editar mapes estratègics on les dues parts necessiten tenir les mateixes característiques. Aquesta funciona bé en combinació amb Shift per dibuixar línies o Ctrl per reduir l’àrea editada.

Podeu visualitzar el seu comportament en aquest vídeo:

Per mostrar com agregar un objecte en primer pla, primer s’ha de crear un nou mapa, seguint ja les bones pràctiques:

1. Creació d’un mapa ortogonal, mida del mapa 20×20 i mida del patró 32×32.
2. Creació d’un nou tileset. Per a aquest exemple, amb tiles de gespa i terra.
3. Creació de les diferents capes, amb els seus noms pertinents per al desenvolupament d’un projecte professional.
4. Disseny del mapa.

Si heu anat seguint els passos, el mapa hauria de ser semblant al disseny que mostra la figura figura:

El mapa està una mica nu, així que podeu afegir un arbre a l’escena. Aneu a Mapa> Nou Tileset i seleccioneu el fitxer de l’arbre.

Configureu, de nou, una amplada i alçada de 32 px. A continuació, creeu l’arbre en la nova capa de tiles anomenada Objects, creada en l’estructura per superposar a la capa creada anteriorment anomenada Floor. Si no està creada, ho podeu fer ara, seleccionant Capa> Afegeix capa de tiles.

Quan creeu una nova capa, es llista amb el nom Capa de teules 2 en el menú Capes. Aquests no són noms que proporcionin massa informació o siguin fàcils recordar. En iniciar un projecte és recomanable anar anomenant les capes i els objectes amb noms descriptius que donin informació de què són i/o contenen. Com a exemple, en un projecte professional ha de ser fàcil trobar el que es busca ja que els tiles i els objectes es divideixen en carpetes segons com s’utilitzen. Vegeu de mostra l’exemple següent:

• edifici
  • finestra
  • decoració
  • porta
  • entrada
  • sostre
• terra
  • foc
  • gel
  • aigua
  • interior
  • escala
• ítem
  • armadura
  • cofre
  • beure
  • menjar
  • vida
  • mobles
    • bany
    • llit
    • catifa
    • cadira
• planta
  • arbust
  • flor
• cel
  • núvol

En aquesta nova capa Objects afegiu només el tronc de l’arbre, com es mostra a la figura figura:

Quan tingueu aquest mapa en el videojoc, imagineu que voleu que el personatge aparegui darrere de l’arbre quan passi, així que cal dir-li que l’arbre es representi sobre el personatge. Per tal de fer-ho possible, creeu una nova capa anomenada roof. Amb la capa superior seleccionada, seleccioneu la resta del tauler de l’arbre (tot menys el tronc) i col·loqueu-ho sobre el tronc que ja teníeu creat en el mapa (vegeu figura). Utilitzar capes per a tot el que es representarà per sobre de la resta d’elements, com ara els personatges, ajuda a mantenir-ho tot organitzat.

Per especificar col·lisions, hi ha algunes maneres de fer-ho, també. Creeu una capa d’objectes, a partir de Capa> Afegeix capa d’objectes. Amb la capa d’objecte seleccionada, seleccioneu l’eina del rectangle a la part superior del menú. Ara podeu fer clic i arrossegar una caixa al voltant del tronc de l’arbre per definir el quadre de col·lisió que utilitzareu més endavant en el projecte (vegeu figura).

La isometria determina una direcció de visualització en què la projecció dels eixos de coordenades x, y, z conformen el mateix angle, és a dir, 120° entre si. Els objectes es mostren amb una rotació del punt de vista de 45° en les tres direccions principals (x, y, z).

Aquesta perspectiva es pot visualitzar considerant el punt de vista situat en el vèrtex superior d’un objecte cúbic, mirant cap al vèrtex oposat. Els eixos x i y són les rectes de trobada de les parets amb el terra, i l’eix z, el vertical, la trobada de les parets. En el dibuix, els eixos (i les seves línies paral·leles), mantenen 120° entre ells.

Per a la creació de mapes isomètrics cal usar i configurar les característiques de la mateixa manera que en els mapes ortogonals. L’única diferència és que els recursos com a tilesets han de ser adequats per als mapes isomètrics. Vegeu-ne un exemple en la figura figura:

En veure el tileset de la figura figura es pot pensar que la creació dels mapes és força diferent, però no és així. La configuració del mapa en general segueix els mateixos principis, però en concret presenta les següents peculiaritats:

• El tileset està format per elements en 3D.
• Cal situar cada tile de tal manera que uns no se superposin als altres.

L’ús dels mapes infinits no té límits i el llenç creix automàticament mentre avança el videojoc. En termes del disseny, vol dir que no cal preocupar-se per les mides del mapa, alçària i amplada respectivament, perquè els límits d’una capa determinada s’expandeixen cada vegada que les fitxes es pinten fora dels límits actuals.

Per tal de crear un mapa infinit cal indicar que se’n vol crear un, com indica la figura figura:

Assegureu-vos que l’opció Infinit estigui seleccionada en el diàleg de configuració del nou mapa.

A excepció de l’eina d’ompliment, la resta d’eines funcionen exactament de la mateixa manera que en els mapes de mida fixa. L’eina d’ompliment omple els límits actuals d’aquesta capa de rajoles en particular. Aquests límits s’incrementen pintant més tiles d’aquesta capa de mosaic.

En les propietats del mapa, com es mostra en la figura, és possible alternar si el mapa ha de ser infinit o no.

Quan es converteix el mapa infinit en un de finit, l’amplada i l’alçària del mapa final es trien a partir dels límits de totes les capes de mosaic.

Quan pensem en un joc de plataformes, un dels primers exemples que ens ve al cap és el clàssic Super Mario Bros, en què un personatge recorre un mapa amb obstacles per saltar i pous on caure o saltar de plataforma en plataforma per arribar a superar aquell nivell.

Per crear un mapa de l’estil d’aquest clàssic, en primer lloc cal saber que es tracta d’un mapa ortogonal. Les dimensions de la configuració estableixen una amplada amb un nombre de tiles elevat. En canvi, l’alçada ha de ser força inferior al valor anterior.

El pas següent és importar el tileset per a la creació del nostre món. Un cop importat, cal saber la configuració, la mateixa que s’ha establert en la creació del projecte.

Un cop definides les característiques i importat el tileset, comença el procés de disseny:

1. Creació de les diferents capes, segons el seu ús.
2. Disseny i implementació dels elements cada capa:
   • Creació de les monedes a la capa creada per a aquest propòsit i amb el mateix nom: Monedes.
   • Creació de les canonades a la capa Canonades.
   • I així successivament per als diferents elements.

En aquest vídeo, vegeu una execució ràpida del que es pot arribar a fer amb Tiled Map Editor:

Tiled Map Editor també permet crear mapes d’una peça, sense tiles. Primer s’ha d’importar el tileset, que aquest cop es tracta d’un conjunt de patrons, com mostra la figura figura:

Establint aquesta configuració, permet importar una imatge completa per situar en el fons del mapa i no un tileset, com fins ara. També és possible afegir altres elements o el mateix personatge.

El fet d’utilitzar imatges completes o sense tiles no descarta la possibilitat de treballar també amb tilesets per afegir detalls o altres parts del mapa.

En aquest vídeo, vegeu una execució ràpida del que es pot arribar a fer amb Tiled Map Editor:

L’editor està molt ben dissenyat i és perfecte per a editors de nivells, però com a dissenyadors de projecte en moltes ocasions el que més interessa és el format de mapa per saber com usar els arxius generats en Tiled. Utilitzant l’especificació TMX es poden emmagatzemar les dades en una varietat de formes.

En aquest apartat es tracta com gravar el mapa en XML i en Base64 i les diferències entre els dos tipus.

Versions anteriors de Tiled permetien des del menú Editar> Preferències modificar la manera d’emmagatzemar el mapa, però en l’actual versió, quan no es proporciona cap codificació o compressió, els tiles s’emmagatzemen com a elements de mosaic XML individuals. Cal afegir que el format més fàcil d’analitzar és el format .csv.

Les dades de les capes codificades i opcionalment comprimides en base64 són una mica més complicades d’analitzar. Primer cal descodificar-les, i després és possible descomprimir-les. Ara disposeu d’una sèrie de bytes, que s’han d’interpretar com una sèrie 32 bits d’enters sense signe.

El format de Tiled és el .TMX, que no és més que un fitxer .XML. Per tant, es pot editar fàcilment en un editor de text.

Vegeu-ne un exemple:

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="20" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="grass-tiles-2-small" tilewidth="32" tileheight="32">
  <image source="grass-tiles-2-small.jpg" width="384" height="192"/>
 </tileset>
 <tileset firstgid="73" name="tree2-final" tilewidth="32" tileheight="32">
  <image source="tree2-final.jpg" width="256" height="256"/>
 </tileset>
 <layer name="floor" width="20" height="20">
  <data>
   <tile gid="13"/>
   <tile gid="2"/>
   <tile gid="1"/>
   ...
  </data>
 </layer>
 <layer name="terrain" width="20" height="20">
  <data>
   <tile gid="0"/>
   ...
  </data>
 </layer>
 <objectgroup name="Collision" width="20" height="20">
  <object x="287" y="354" width="127" height="60"/>
 </objectgroup>
</map>

Simplement emmagatzema tota la informació del mapa. Les propietats han de ser senzilles, amb l’excepció de gid. Dirigiu l’atenció a l’element Collision de l’objectgroup. Aquesta part del codi fa referència a l’àrea de col·lisió al voltant de l’arbre especificat en la creació del mapa en l’apartat “Especificació de col·lisions”. Així és com està emmagatzemat.

Si per qualsevol motiu decidiu utilitzar les dades de les capes codificades i opcionalment comprimides en base64, així és com es mostrarà el fitxer .tmx. Continua tenint l’estructura d’un document XML, però hi afegeix informació:

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="isometric" width="40" height="40" tilewidth="64" tileheight="32">
 <properties>
  <property name="prop_map" value="25"/>
 </properties>
 <tileset firstgid="1" name="tiled_dungeon" tilewidth="64" tileheight="128">
  <image source="../graphics/tilesets/tiled_dungeon.jpg" width="1024" height="1920"/>
 </tileset>
 <layer name="Capa de Patrones 1" width="40" height="40">
  <properties>
   <property name="tipo" value="base"/>
  </properties>
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+3SUQoAIQgAUa9Q9z9sN0jMFJUZ8K9dHpYI/WopU8G0L1Pdp+03Yu8W36u9q8+69+z7ffF5zlub5vv9f+/gw2fxeb+f5ou+L3y57x0fPnz48PXwERERUUwH5o9HhQAZAAA=
  </data>
 </layer>
 <layer name="Capa de patrones 2" width="40" height="40" visible="0">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+2V3QrCMAyF8066+f+H3ggK3ikivv9jWGGwWGNYllS9OB8cKGvWnaVNSgQimCfVTPdG/NnqB76q5tvTDrGDwl4kKkNs/UFXZc6bc4u/Poyc7x+Tdo32fjtvbJW5JdnyvlHWetbPmNp/GSZNmIcDm+NaK2tqeyf9lxYv7ROP71M7Vn8Les0R10mIP3/ZnxXub0bt2bkIY+mZ1tMi/JWs/ej8RROdP+nMauL1X8qfN3+l68N7/rz+eH+/CeO8/rQ7WboPvP4i61Pq79Z+mxPpL+I85cCfD/jzAX8+4M+H1t+t6nIfAAAAAOA/eACNJESSABkAAA==
  </data>
 </layer>
 <layer name="Capa de patrones 3" width="40" height="40" visible="0">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+3QMQrAIAxGYa+cpeBcsL1TPZwdHBzE0KGJ4vvgB4cMD0PAbpJ3ALb1vMveEQCA5UnzPupGzrqZzd5nKXoHfHB5B3Ro/3ebVOAvop8AAACgUQAv8zdRABkAAA==
  </data>
 </layer>
 <objectgroup name="Capa de Objetos 1" width="40" height="40">
  <object type="start" x="556" y="650"/>
  <object x="266" y="692" width="149" height="135"/>
 </objectgroup>
 <objectgroup color="#ffaaff" name="Capa de Objetos 2" width="40" height="40">
  <object x="188" y="193" width="110" height="92"/>
 </objectgroup>
</map>

És fàcil de veure en el document tota la informació del mapa, n’hi ha prou amb fer servir la biblioteca XML del llenguatge que utilitzi el motor de videojoc per extreure’n tota la informació necessària.

Potser la part més difícil de desxifrar del codi és aquesta:

<layer name="Capa de patrones 3" width="40" height="40" visible="0">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+3QMQrAIAxGYa+cpeBcsL1TPZwdHBzE0KGJ4vvgB4cMD0PAbpJ3ALb1vMveEQCA5UnzPupGzrqZzd5nKXoHfHB5B3Ro/3ebVOAvop8AAACgUQAv8zdRABkAAA==
  </data>
 </layer>

Aquesta part guarda la informació de les capes de tiles, però les dades venen codificades en base64 i comprimides en .gzip (en les últimes versions s’utilitza per defecte .zlib en lloc de .gzip). Per eficiència, són la part que més s’ocupa de l’arxiu ja que contenen la llista d’etiquetes de la graella. Els mapes sense codificar i comprimir ocupen entre 40 i 50 vegades més, per això és més eficient tenir-los en aquest format i utilitzar el llenguatge per comprimir i descodificar la informació.

Independentment del format per a les dades de la capa, sempre contindrà els anomenats IDs de mosaic global (gids). Aquests són globals, ja que poden referir-se a un tile des de qualsevol dels tilesets utilitzats pel mapa. Per esbrinar a quin tileset pertany un tile en concret, primer és necessari trobar el tileset amb el firstgid més alt que sigui més baix o igual que el gid. Els tilesets sempre s’emmagatzemen amb els firtsgid creixents.

Per comprendre els gids, cal saber que cada tile s’ha d’associar d’alguna manera amb un conjunt de mosaics i una ubicació particular a aquest conjunt de mosaics. Aquest és el propòsit del gid.

Fixeu-vos en el tileset utilitzat, en la figura; en conté 72 de diferents:

A cada un d’aquests mosaics se li dona un gid únic de l’1 al 72, per poder referir-se a qualsevol d’ells amb un sol número. No obstant això, el format .tmx només especifica el primer gid del conjunt del tileset, ja que tots els altres es poden obtenir coneixent la mida del tileset i la mida de cada tile individual.

La següent figura pot resultar útil per ajudar a visualitzar i explicar el procés:

En col·locar el mosaic inferior dret d’aquest joc de fitxes en un mapa en algun lloc s’emmagatzema el gid 72 en aquesta ubicació al mapa.

Es poden especificar potenciadors o punts de generació de jugadors de la mateixa manera; hi ha moltes possibilitats per a Tiled com a editor de mapes.