I Concurs Escolar de disseny de videojocs científics de Catalunya
6
Com interactuem amb el videojoc?
Les interfícies i els recursos
Un videojoc és, per sobre de tot, un món interactiu de ficció en el qual s’ha de jugar.
Per això, la manera com el jugador accedeix a aquest univers de ficció és molt important.
En aquest últim capítol veurem com es dis- senyen les diferents maneres d’interaccio- nar amb el joc, conegudes com a interfícies, i descriurem els principals objectes que for- men part dels trencaclosques d’un videojoc.
Disseny de les interfícies d’un videojoc
6
Perquè un jugador pugui jugar a un videojoc, cal que pugui interactuar amb el món de ficció. Aques- ta interacció es duu a terme a través de les anomenades interfícies d’usuari (en anglès, user interface o UI). Les interfícies són el conjunt de botons, cursors, textos i imatges que permeten al jugador fer alguna acció concreta dins de l’univers del joc. Per dissenyar-les, s’han de tenir en compte alguns principis bàsics:
• S’ha de tenir clar què ha de fer el jugador i l’impacte que tindran les seves accions en el joc.
• Executar una acció ha de ser tan senzill com sigui possible per al jugador.
• La interfície ha d’ocupar al mínim espai possible perquè no entorpeixi el joc.
• La interfície s’ha d’adaptar a la plataforma. Si el joc està dissenyat per a ordinador, com és el cas del vostre joc, s’ha de pensar en la interacció mitjançant el ratolí i el teclat.
• La interfície ha d’utilitzar formes, colors i sons coherents amb l’estètica del joc.
A l’hora de dissenyar el vostre videojoc, haureu de crear quatre interfícies:
• El menú d’inici
• Els menús in-game
• El HUD (Head-Up Display)
• L’inventari
El menú d’inici
La principal interfície que hau- reu de crear és la que permet accedir al món del joc. Aquesta interfície rep el nom de menú d’inici o menú principal. El menú d’inici bàsicament ha de permetre al jugador iniciar una sessió de joc nova, carregar-ne una d’anterior i sortir del joc.
Menú d’inici del videojoc Minecraft.
6
El primer pas per dissenyar un menú d’inici és decidir quins elements ha de contenir. Després, cal fer un disseny senzill de la distribució d’aquests elements a la pantalla i de l’aspecte que tindran.
En el menú d’inici de Minecraft, el dissenyador ha optat per col·locar uns botons llargs al centre de la pantalla, a sota del títol del videojoc. Com a fons, ha utilitzat una imatge desenfocada d’un dels nivells. Tant la lletra com el color dels botons recorden l’estètica que trobarem en el joc.
En aquest altre exemple, el dissenyador del prototip del videojoc Abandon va optar per un menú d’inici molt senzill i es va centrar a buscar una estètica que fos impressionant.
Els menús in-game
A més de definir el menú d’inici, cal pensar en tots els menús que es poden trobar a dins del joc, els anomenats menús in-game. El vostre joc haurà de tenir, com a mínim, un menú in-game que permeti desar la partida actual, recuperar-ne una de desada prèviament i sortir del joc en qualsevol moment. Normalment, a aquests menús s’hi accedeix prement la tecla <ESC> del teclat.
Diverses propostes del menú d’inici del videojoc Abandon (inicialment, Alone).
6
El HUD (Head-Up Display)
El HUD o Head-Up Display és la interfície principal, on es mostra tota la informació que necessita el jugador i les maneres de controlar les accions del joc. El HUD sol ser molt diferent en funció del gènere del joc al qual juguem. Per exemple, en un joc de plataformes, el HUD acostuma a contenir el nombre de vides del protagonista, el temps que li queda per superar el nivell i els punts aconse- guits. En canvi, en els jocs més complexos, com els d’estratègia, aquests menús contenen molta més informació.
En una aventura gràfica com la que esteu dissenyant, el més important és que tingueu clar com vo- leu que el jugador utilitzi les diferents accions que vau pensar en el capítol anterior. Vegem algunes de les opcions més habituals.
El HUD d’Angry Birds (esquerra) mostra poca informació i el control és senzill.
El dels Sims 4 (dreta) té molts més elements i, per tant, el control és més complicat.
6
El sistema de verbs
Una de les maneres més senzilles per facilitar el control del joc és assignar un botó a cadascuna de les accions que pot dur a terme el personatge. És a dir, si en el disseny del joc heu designat les diferents accions amb els verbs agafar, tirar, mirar i parlar, el més còmode és crear un botó per a cada verb. Així, si el jugador vol mirar un objecte de l’escenari, només caldrà que cliqui el botó Mira i, a continuació, l’objecte en qüestió.
El sistema de cursors
Un cursor és un indicador visual que permet conèixer la posició a dins del joc i facilita la interactivitat. Estem molt acostumats a utilitzar diferents tipus de cursors, el més conegut dels quals és probablement la fletxa de Windows.
En el cas de les aventures gràfiques, la llista de verbs va anar evolucionant fins a desaparèixer. Totes les accions es van convertir en un sistema de cursors que descrivien les accions que es podien fer a partir d’icones. Així, uns peus podien significar Camina; un ull o una lupa, Mira; una mà, Agafa; i una boca, Parla.
A Maniac Mansion el control consisteix en un llistat de verbs que s’han de clicar.
6
Si escolliu un sistema de cursors us caldrà fer una taula d’equivalències entre les icones utilitzades i els verbs que substitueixen. Les quatre maneres principals d’utilitzar el sistema de cursors són:
• Icones fixes: és el sistema més bàsic. Consisteix a substituir tots els verbs per icones que els simbolitzen. En aquest exemple, podem veure com la barra de verbs en el joc King’s Quest V simplement s’ha substituït per una barra d’icones.
Així, si el jugador es vol desplaçar haurà de clicar el botó de l’esquerra i després el punt de l’esce- nari on vulgui anar. Si fa clic a l’ull podrà mirar els objectes. La mà, en canvi, pot servir per a dur a terme diverses accions. Si s’utilitza a sobre d’un objecte, el podrà recollir; i si s’empra a sobre d’una màquina, el joc entendrà que l'ha d'activar.
• Icones cícliques amb el botó dret: el model fix implicava clicar les icones en una barra per executar cada acció. Amb el temps es va veure que aquest sistema era poc pràctic, ja que el jugador primer havia de desplaçar el ratolí fins a la barra de les icones i després fins a l’objecte o la persona amb qui volia interactuar. En el videojoc Sam & Max Hit the Road apareix un sistema més senzill d’icones, que s’anomenen cícliques. En aquest sistema, el botó esquerre del ratolí correspon a l’acció Mou; i amb el botó dret, es pot canviar d’icona per dur a terme altres accions.
El sistema cíclic d’icones fa que l’acció Camina (botó esquerra) canviï gràcies al botó dret del ratolí.
6
• El sistema emergent: en aquest model, el botó esquerre del ratolí serveix per des- plaçar-se. Quan es clica un objecte o una persona, es despleguen de manera emer- gent unes icones amb les diverses accions possibles que es poden dur a terme sobre l’objecte o la persona. Aquest sistema es- talvia anar fins a la barra d’icones i la inte- racció amb el botó dret del ratolí.
• El cursor intel·ligent: el model més avançat d’interfície simplifica encara més la interacció en- tre el jugador i el món del joc. En aquest cas, el botó dret sempre serveix per mirar i l’esquerre, per desplaçar-se. Tanmateix, quan posem el cursor al damunt d’un objecte o un personatge, el mateix joc escull la millor acció possible. Per exemple, si el posem a sobre d’una maleta, el cursor canviarà automàticament a l’acció Obre, i quan cliquem el botó esquerre aquesta acció s’execu- tarà. Amb aquest sistema, doncs, ja no cal escollir una acció, sinó que és el mateix joc el que tria la més adequada.
L’inventari
L’inventari és la interfície que conté tots els objectes que el protagonis- ta va recollint al llarg de l’aventura.
El podem trobar a la mateixa bar- ra de verbs, o bé pot aparèixer si premem alguna tecla específica del teclat, com en el joc The Whispered World.
El videojoc Full Throttle utilitza el sistema emergent amb tres accions.
A Broken Age, l’inventari apareix a la part inferior si cliquem l’extrem inferior esquerre de la pantalla.
Els recursos del nostre joc
6
Tal com vam veure en el primer capítol, els recursos dels videojocs són aquells elements clau i opci- onals que utilitza el personatge principal per avançar en la història. En el cas d’una aventura gràfica com la vostra, els recursos principals són els objectes que s’utilitzaran en els trencaclosques. Per dissenyar correctament tots els recursos, cal especificar:
• Número de l’objecte: cada objecte té un número únic que l’identifica.
• Nom de l’objecte.
• Número del trencaclosques al qual pertany: cal consultar les fitxes de trencaclosques per vincular l’objecte al trencaclosques al qual pertany.
• Descripció de l’objecte.
Imatge il·lustrativa (opcional)
6
RECORDEU
6
A tall d’exemple...
En aquest exemple veurem com es construeixen les interfícies i els recursos del joc que protagonitza Marie Curie.
Interfícies
Menú d’inici i menús in-game
Menú d’inici
El nostre menú d’inici mostrarà les opcions per iniciar el joc, recuperar una sessió, sortir a l’escriptori i accedir als crèdits. El fons del menú serà la imatge suavitzada del laboratori de Marie Curie. El títol apareixerà a la part superior esquerra. A sota del títol hi haurà un dibuix de la Marie.
Els botons per iniciar el joc, recuperar-lo i sortir tindran forma arrodonida i seran de color marronós, en consonància amb l’estètica del videojoc. El botó de crèdits serà una proveta.
La tipografia serà la mateixa que s’utilitzarà en el joc. La música de fons serà una música parisenca alegre.
6
Menús in-game
El menú in-game principal mantindrà l’estètica del menú inicial però serà més senzill. S’hi accedirà amb la tecla
<ESC> del teclat. Les opcions principals que contindrà seran: Torna al joc, Desa la sessió, Recupera una sessió, Opcions i Surt.
6
Els menús in-game per desar una sessió i recuperar-la seran iguals. Caldrà seleccionar un espai en blanc per desar-hi el joc, o bé escollir una imatge en miniatura del joc desat per recuperar-lo.
El menú d’opcions tindrà controls bàsics com el volum del so o la lluminositat de la pantalla.
6
HUD i sistemes de control
El HUD principal del joc serà totalment invisible, excepte en el cas de l’inventari.
El videojoc utilitzarà un sistema de control d’icones emergents. El botó esquerre del ratolí servirà per caminar.
Si cliquem a sobre d’un objecte o una persona apareixerà un cercle amb tres icones: una mà, una boca i un ull.
La relació entre aquestes icones i la llista d’accions que ja teníem escrita és la següent:
Icona Conjunt d’accions
Mà Agafa, Obre, Tanca, Empeny, Estira
Boca Parla
Ull Mira
Inventari
Amb el botó dret del ratolí s’obre i s’amaga un inventari a la part inferior de la pantalla. Pel que fa a l’estètica, l’inventari serà una prestatgeria de fusta, semblant a les que hi ha al laboratori de la Marie. La prestatgeria tindrà 8 espais diferents per desar-hi objectes. Per dur a terme l’acció Utilitza, caldrà obrir l’inventari, clicar el botó esquerre a sobre de l’objecte i arrossegar-lo bé a sobre d’un altre objecte de l’inventari, o bé a sobre d’un objecte de l’escenari. Si es vol donar l’objecte, s’haurà d’arrossegar a sobre d’un personatge de l’escenari.
6
Recursos
Número de l’objecte 1
Nom de l’objecte Pila de llibres I
Número del trencaclosques al qual pertany 1
Descripció de l’objecte Conjunt de llibres antics i malmesos de diferent temàtica científica (física, química...). Són a l’escriptori de la Marie.
Imatge il·lustrativa (opcional)
Número de l’objecte 2
Nom de l’objecte Pila de llibres II
Número del trencaclosques al qual pertany 1
Descripció de l’objecte Conjunt de llibres antics i malmesos de diferent temàtica científica (física, química...). Són a sota del llit de la Marie.
Imatge il·lustrativa (opcional)
Número de l’objecte 3
Nom de l’objecte Cadira
Número del trencaclosques al qual pertany 1
Descripció de l’objecte Cadira vella i senzilla que pertany al conjunt de l’escriptori de la Marie.
Imatge il·lustrativa (opcional)
6
Número de l’objecte 4
Nom de l’objecte Escombra vella
Número del trencaclosques al qual pertany 1
Descripció de l’objecte Escombra de fusta desgastada Imatge il·lustrativa (opcional)
Número de l’objecte 5
Nom de l’objecte Atiador de la llar de foc
Número del trencaclosques al qual pertany 1
Descripció de l’objecte Atiador de ferro negre, desgastat. Està penjat al costat de la xemeneia.
Imatge il·lustrativa (opcional)
Número de l’objecte 6
Nom de l’objecte Carnet d’estudiant de la Marie
Número del trencaclosques al qual pertany 1
Descripció de l’objecte Cartolina marró vella on hi ha el segell de la Universitat Flotant i les dades de la Marie escrites a mà.
Les seccions de les interfícies i els recursos les trobareu a les pàgines 10 i 11 del document Game Proposal.
