Tutorials GDevelop 5: Joc de plataformes

Vídeo-tutorial

Anem a crear un projecte nou. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

Feu clic a “Create New Project” ("Crea un projecte nou") a la pàgina "Home" ( "Inici").

A continuació, teniu l’opció de crear un nou projecte mitjançant una plantilla o crear un projecte de “Joc buit” ("Empty game").

Per a aquest tutorial, necessiteu un projecte de joc buit, però abans de seleccionar aquesta opció, heu de triar una carpeta on es guardarà el joc. A la part inferior de la pàgina "Crea un joc nou", trobareu l'àrea "Choose folder" ("Trieu carpeta"). És possible que hàgiu de desplaçar-vos cap avall per veure aquesta opció. Conserveu la ubicació per defecte o seleccioneu la ubicació on voleu guardar el joc.

Per seleccionar una ubicació personalitzada, seleccioneu "Choose folder" ("Triar carpeta"). Navegueu pel sistema de fitxers del vostre ordinador. Localitzeu la carpeta que voleu utilitzar.

Un cop heu seleccionat una carpeta, seleccioneu l’opció "Empty game" (“Joc buit”) de la llista.

Vídeo-tutorial

Anem a crear l'escena del joc. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

Creeu una nova escena a la llista de coses que cal fer. Seleccioneu el botó “Click to add a scene” ("Feu clic per afegir una escena") al gestor de projectes:

A continuació, feu doble clic a la NewScene que acabeu de crear. Obrirà l'editor "Scene" ("Escena").

Vídeo-tutorial

Anem a crear el jugador del joc. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

El jugador controlarà un personatge que pot saltar i moure's a les plataformes. Crearem aquest objecte.

Crear el personatge

A la dreta, podeu veure un plafó anomenat "Objectes". Feu clic al botó + per afegir un objecte.

Apareixerà una finestra on es mostraran diferents tipus d'objectes on podeu triar.

Els diferents tipus d'objectes ofereixen característiques específiques. Per a la majoria dels nostres objectes, utilitzarem objectes Sprite, que són objectes animats que es poden utilitzar per a molts elements (jugador, plataformes, enemics,...).

Feu clic a Sprite a la llista. El nou objecte s’afegeix a l’escena i s’obre l’editor d’objectes:

L’objecte està buit de moment. Els objectes Sprite estan compostos per animacions i cada animació pot contenir una o més imatges. Afegiu una animació! Feu clic al botó +.

L’animació s’afegeix però continua buida sense imatges. Per afegir una imatge, feu clic a + a la miniatura en blanc.

Trieu la imatge anomenada p1_stand a la carpeta del projecte. La imatge s’afegeix a l’objecte:

Ara podeu tancar l'editor fent clic al botó "Apply" ("Aplica") a la cantonada inferior dreta.

Posar l’objecte a l'escena

Per mostrar el jugador al vostre nivell, l'hem de posar a l'escena. Cada objecte que afegim a l'escena s'anomena "instància" de l'objecte.

La nostra instància de jugador és única, ja que només en tindrem un al nostre nivell, però altres objectes (com plataformes, monedes, enemics ...) poden tenir diverses instàncies que resideixen a l'escena.

Per afegir l'objecte a l'escena, simplement arrossegueu i deixeu anar l'objecte de la llista a l'escena.

Renombrar l’objecte

Per fer més fàcil referir-se al nostre objecte, canvieu-li el nom predeterminat. Feu clic amb el botó dret a sobre (o feu clic a la icona ⋯) i escriviu el nou nom. A continuació, podeu escriure "Player" i fer clic a qualsevol part de la pantalla o prémer Enter per canviar el nom de l'objecte.

Fer moure el jugador

El moviment del jugador es podria crear mitjançant els esdeveniments de GDevelop, però seria una tasca bastant llarga i difícil per recrear un bon motor de plataforma. Per sort, GDevelop ja ve amb un complet motor de plataformes integrat que podem utilitzar. Per això, hem de fer servir els "comportaments de plataforma" (platformer behaviors), que ens permeten accedir i utilitzar el motor de plataforma integrat.

Obriu l'editor d'objectes "Player":

Canvieu a la pestanya Comportaments ("Behaviors") i feu clic al botó + per afegir un comportament a l'objecte. Trieu "Platformer character" a la llista de comportaments disponibles. A continuació, podeu veure el comportament de l'editor, amb molts paràmetres que podeu modificar: Podeu canviar algunes propietats com la velocitat de salt ("Jump speed"). Poseu-lo per exemple a 800 per a que el salt sigui més potent.

Vídeo-tutorial

Anem a Afegir algunes plataformes al joc. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

El nivell encara està buit de moment sense cap plataforma. Afegim-ne algunes.

Crear l'objecte plataforma

Creeu un objecte nou fent clic al botó + a la llista Objectes. Aquesta vegada, trieu "Tiled Sprite" quan us demani el tipus d'objecte:

S'obre l'editor d'objectes. És una mica diferent respecte a l'editor de l'objecte Sprite, ja que els objectes de Tiled Sprite no estan animats.

Seleccioneu una imatge ("Select an image") i, a continuació, a Tria una imatge nova ("Choose a new image"). Aquesta vegada, trieu la imatge anomenada grassHalfMid. Tanqueu l'editor fent clic al botó "Aplica" ("Apply") a la cantonada inferior dreta. Feu clic a l'objecte de la llista per seleccionar-lo i feu clic a l'escena per situar-lo al nivell: L’objecte s’afegeix a la nostra escena però és molt minúscul. Feu clic sobre ell i utilitzeu els afagadors per canviar la mida per a que sembli una plataforma:

No oblideu renombrar l'objecte amb el nom "GrassPlatform" en lloc del nom per defecte.

Guardar el projecte

No perdem el que hem fet fins ara: al menú "Fitxer" ("File") de l'aplicació, feu clic a "Desa" (o premeu Ctrl + S / Cmd + S) per desar els canvis.

Definir el comportament de la plataforma

També hem de configurar objectes com a plataformes, perquè el jugador pugui caminar i saltar sobre ells. En cas contrari, el jugador caurà a través de l'objecte, ja que no li hem dit al nostre personatge què fer quan aterra. Si es defineix un objecte com a plataforma, el personatge de plataforma xocarà amb ell i podrà caminar-hi.

Per definir l'objecte GrassPlatform com a plataforma, obriu l'editor d'objectes GrassPlatform. Canvieu a la pestanya Comportaments ("Behaviours") i, a continuació, afegiu un comportament: aquesta vegada, trieu el comportament "plataforma" ("Platform"). Hi ha algunes opcions que podeu canviar. Per exemple, l’opció “Can grab platform ledges” permet que el personatge de la plataforma agafi la vora de la plataforma. Si activem aquesta opció ara mateix, el resultat serà estrany, ja que no tenim cap animació que es mostri quan el personatge agafa la vora. Mantingueu això desmarcat.

Iniciar una vista prèvia

En aquest moment, hauríeu de poder provar el vostre joc prement el botó “Vista prèvia” a la part superior de la pantalla de la barra d’eines.

En prémer el botó, es genera una previsualització i, just després, s’obre una nova finestra.

Haureu de poder caminar i saltar per la volta mitjançant les tecles predeterminades: moveu el personatge amb les tecles de fletxa i premeu Majúscula o Espai per saltar. No dubteu a afegir algunes altres plataformes a l'escena tal com vam fer abans. Assegureu-vos que heu afegit els comportaments a les plataformes, per evitar que el personatge hi pugui passar.

De moment, l'objecte no té animacions, n'afegirem algunes més endavant. Si l'objecte no es mou, assegureu-vos que heu afegit els comportaments adequats.

Vídeo-tutorial

Ara canviarem el color del fons. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

El fons gris és una mica avorrit. Més endavant podrem afegir una imatge, però de moment, deixem les coses senzilles.

A l'editor, feu clic amb el botó dret sobre el fons gris i trieu "Propietats d'escena" ("Scene properties"):

A la nova finestra que s'obra, feu clic a "Color de fons de l'escena" (" Scene background color") i seleccioneu un bon color per al fons:

Vídeo-tutorial

Anem a fer que el jugador canviï els seus moviments quan salta o corre. Aquí teniu un vídeo que mostra els passos a seguir:

---

Codi

---

Pas a pas

Animació: Saltar

Primer, anem a afegir les animacions adequades a l’objecte Player.

Obriu l'editor de l'objecte "Play", assegureu-vos que esteu a la pestanya Propietats ("Properties") i, a continuació, feu clic al botó + a la part inferior de la finestra per afegir animació. Finalment, feu clic a la miniatura amb el signe + de la nova animació i trieu p1_jump com a imatge per afegir:

A les animacions els hi podem donar un nom. És una manera fàcil de diferenciar-les i utilitzar-les en els esdeveniments. És tan senzill com fer clic a "Nom d'animació opcional" (“Optional animation name” ) i escriure el nom que vulgueu.

Introduïu “Idle” i “Jumping” com a noms de les dues animacions:

Animació: córrer

També hem d’afegir l’animació de marxa per mostrar quan el personatge està caminant per una plataforma. Afegiu una altra animació com ho vam fer abans i, en afegir imatges, seleccioneu les 5 imatges p1walk03.png, p1walk04.png, ... i p1_walk07.png. Podeu seleccionar totes les imatges alhora o una per una. Finalment, definiu el nom de l'animació a "Running":

Aquestes imatges es mostraran per tal de crear l'animació. Hem d’ajustar una mica algunes opcions. Primer, feu clic a No Loop per canviar aquesta opció a Loop. Això farà que l’animació es reiniciï quan s’arribi al final. El temporitzador mostra el temps en segons entre cada imatge: aquesta és la velocitat de l'animació. Introduïu 0.05 en lloc d’1 per tal que l’animació es reprodueixi més ràpidament:

El nostre objecte ja està a punt, feu clic a "Aplica" ("Apply") a la cantonada inferior dreta.

Condició: Si el jugador està saltant 

El que volem és que el jugador canviï el seu aspecte a mida que corre. Per fer-ho utilitzarem un esdeveniment. Els esdeveniments serveixen per establir tant les normes del joc, com la manera en que actuen els objectes.

Obriu l'editor d'events de l'escena clicant a la pestanya "Nova escena (events)" ("NewScene (events)").

Ara per ara, l’editor d’esdeveniments està buit: Afegiu el primer esdeveniment fent clic al botó "Afegeix esdeveniment" ("Add event") de la barra d'eines superior.

Un esdeveniment està format per una llista de condicions (per exemple, per comprovar si hi ha una col·lisió, si es prem una tecla, si la vida del jugador és baixa, etc ...) i una llista d’accions que es produeixen quan es compleixen les condicions.

De moment l’esdeveniment està buit:

En aquest primer esdeveniment, comprovarem si el jugador està saltant i canviarem la seva animació en conseqüència. Primer feu clic a "Afegiu condició" ("Add condition").

A la nova finestra, podeu veure totes les condicions disponibles per fer el vostre joc. Volem comprovar si l’objecte Player, que té un comportament del personatge Platformer, està saltant. Obriu la categoria anomenada "Comportament de la plataforma" ("Platform behavior") i després seleccioneu "Saltant" ("Jumping").

La part dreta de la finestra mostra els paràmetres necessaris per configurar la condició. Aquí, volem comprovar si l'objecte "Player" està saltant, així que trieu "Player" per al primer paràmetre (el segon s'omple automàticament): Feu clic a "D'acord" ("Ok") a l'extrem inferior dret per tancar la finestra. Podreu veure la condició afegida a l'esdeveniment:

Acció: Canviar l'animació del personatge quan salta

Afegim ara l’acció per canviar l’animació del "Player" quan aquest està saltant. Feu clic a "Afegir acció" ("Add action").

S'obre una finestra mostrant totes les accions disponibles: Canviarem l’animació del Player, que és un objecte Sprite. Seleccioneu "Sprite > Animacions > Canviar l’animació (pel seu nom)" ("Sprite > Animations > Change the animation (by name)").

Seleccioneu l'objecte "Player" per al primer paràmetre i escriviu "Jumping" al segon camp. Tingueu en compte que heu d'escriure les cometes dobles per dir a GDevelop que es tracta d'un text:

Quan s'acabi, feu clic a "D'acord" (Ok") a l'extrem inferior dret. El primer esdeveniment ja està a punt!

Mirem el resultat

Feu clic al botó de reproducció a la barra d'eines per iniciar una vista prèvia. Fixeu-vos en els canvis d’animació del jugador quan salta.

Fixeu-vos que quan el Player retorna a terra, l’animació no està configurada per tornar a l’animació de correr. Això és degut a que mai no li vam dir a GDevelop que ho fes. Anem a afegir un altre esdeveniment per solucionar-ho.

Condició: Si el jugador està a terra

Anem a afegir un nou esdeveniment en blanc. Feu clic a "Afegir condició > Comportament de la plataforma > Està en terra" ("Add condition > Platformer behavior > Is on floor"). Tingueu en compte que podeu utilitzar el quadre de cerca a la part superior per trobar una condició ràpidament quan en sabeu el nom.

Ompliu el primer paràmetre escollint l’objecte "Player": Feu clic a D'acord per validar la condició:

Sub-esdeveniments: comprovar si el jugador es mou o no es mou

De fet, estaria bé que el "Player" mostrés, no només el "Idle" i el "Jumping", sinó també l’animació "Running":

Una manera de fer-ho seria afegir dos esdeveniments, amb dues condicions i una acció a cada esdeveniment:

• Quan el jugador està a terra * and * no funciona, s'ha de mostrar l'animació al ralentí.
• Quan el jugador està a terra * and * en execució, s’ha de mostrar l’animació en curs.

En lloc d'això, però, farem servir sub-esdeveniments, així tindrem només una condició la qual comprovarà una vegada si el "Player" és a terra.

Seleccioneu l’esdeveniment que hem creat fent clic a una zona buida prop d'Afegir condició o Afegir acció:

A continuació, feu clic dues vegades al botó per afegir un subesdeveniment:

S’afegeixen dos esdeveniments "child" (“fills”) a l’esdeveniment, el qual ara es considera l’esdeveniment pare:

Anem a afegir condicions a aquests esdeveniments. Per a la primera, afegeix una condició per comprovar si el jugador s'està movent: Per a la segona, afegiu la mateixa condició, però ara activeu l'opció "Condició inversa" ("Invert condition"). D’aquesta manera, les accions de l’esdeveniment s’iniciaran quan l’objecte Player NO es mogui: Aquí teniu els nostres esdeveniments fins ara:

Accions: Mou-te o atura't

Acabarem afegint les accions necessàries a cada esdeveniment. Utilitzeu el primer esdeveniment per definir l’animació del personatge a “Running” i el segon esdeveniment per definir l’animació del personatge a “Idle”.

Podeu afegir aquestes accions de la mateixa manera que ho vam fer abans per a l’animació saltant. No oblideu les cometes ("") quan introduïu els noms de l'animació.

Previsualitzar (i guardar)

Podeu fer una vista prèvia del joc i veure que l’animació del "Player" canvia mentre corre i salta.

Una petita millora que podem fer és establir l’animació a "Jumping" també quan el jugador caigui (en cas contrari, l’animació "Running" continua executant-se quan el jugador arriba a la plataforma).

Vídeo-tutorial

Anem a fer que la càmera segueixi els moviments del jugador. Aquí teniu un vídeo que mostra els passos a seguir:

---

Codi

---

Pas a pas

De moment, és difícil construir un gran nivell per explorar, ja que el jugador surt ràpidament fora de la pantalla.

Anem a afegir un altre esdeveniment per a que la càmera segueixi el "Player". Hi ha diverses maneres d’aconseguir-ho. El més senzill és afegir un esdeveniment sense condicions i l’acció" Capes i càmeres > Centre de la càmera sobre un objecte" ("Layers and cameras > Center the camera on an object"): El nou esdeveniment queda així:

Podeu fer una previsualització per veure que la càmera ara està centrada en el Player:

Vídeo-tutorial

Anem a crear una plataforma que no sigui sòlida a la qual el jugador pot saltar-hi des de baix!. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

És una mica avorrit tenir un únic tipus de plataforma. De moment, totes les plataformes són sòlides: no es pot saltar sobre elles quan el jugador està a sota d'elles. Podem crear noves plataformes que poden ser traspassades.

Crear l'objecte: Pont de troncs

Creeu un objecte Sprite nou, afegiu una animació i trieu la imatge anomenada "bridgeLogs":

Canvieu el nom de l'objecte a "SmallBridge":

Comportament: Plataforma traspassable

Convertiu-lo en una plataforma "traspassable"
Ara per ara, l'objecte encara no està considerat com una plataforma. Obriu l’editor d’objectes i canvieu a la pestanya Comportaments ("Behaviours"). Afegiu el comportament anomenat "Plataforma" ("Platform").  Al camp "Tipus" "Type" trieu "Plataforma traspassable" ("Plataforma Jumpthru"):

Feu una vista prèvia i veure-ho que podeu saltar al pont des de sota.

A més, com és habitual, no us oblideu de guardar el joc.

Vídeo-tutorial

Anem a afegir alguns objectes de fons per a que sigui més bonic. Aquí teniu un vídeo que mostra els passos a seguir:

---

Pas a pas

Ara mateix, el nivell és molt senzill sense decoracions. Anem a afegir alguns objectes estàtics al fons.

Crear objectes: matolls i núvols

Afegir objectes en segon pla és realment senzill: només cal afegir alguns Sprites amb les imatges que desitgeu i arrossegar-los a l'escena.

Per exemple, creeu un objecte Sprite, afegiu una animació i afegiu la imatge "bush":

Re-anomeneu aquest objecte com a "Bush". Afegiu un altre objecte amb la imatge "cloud" i canvieu-lo el nom a "Cloud":

Posar objectes endavant o darrera

Si afegiu objectes a l'escena, podreu veure que el Player es mostra al seu darrere:

Cada instància de l'escena té una propietat que s'anomena ordre z. És un número i els objectes amb un ordre Z més alt es mostraran davant d'objectes amb un ordre Z inferior. L’ordre Z pot ser qualsevol número, també pot ser negatiu.

Podeu canviar l’ordre Z dels matolls i dels núvols fent-los negatius, de manera que el Player (amb un ordre Z que hauria de ser 1) es mostri al davant. Per fer-ho, seleccioneu les instàncies de l'escena. Per seleccionar més d'un objecte mantingueu premuda la tecla shift del teclat de l'ordinador:

A continuació, canvieu el valor del camp "Ordre Z" al tauler de propietats de l'esquerra. Per exemple, -2 (o qualsevol nombre negatiu) es garantirà que aquests objectes queden darrere del jugador:

Ara tenim el resultat visual que volíem: Feu una vista prèvia per comprovar que tot funciona correctament.

Vídeo-tutorial

Anem a afegir un objectiu per al jugador: recollir tantes monedes possibles. Aquí teniu un vídeo que mostra els passos a seguir:

---

Codi

---

Pas a pas

Al joc que hem creat fins ara, el jugador no té res a fer: anem a afegir monedes per a que el jugador les col·lecti.

Crear objecte "moneda"

Comenceu per crear un nou objecte Sprite amb una animació amb la imatge "coinGold":

Podeu anomenar aquest objecte "Coin".

A continuació, podeu posar diverses monedes al nivell. Com que necessitareu diverses monedes, és una bona idea utilitzar la funció de "arrossegar i clonar" de l'editor d'escenes: seleccioneu una moneda, continueu prement Ctrl (o Cmd en macOS) i arrossegueu la moneda. Això ho duplicarà.

Si manteniu el botó Shift mentre es mou, també podreu moure la moneda creada al mateix lloc que l'original.

Fer desaparèixer les monedes quan es recullen

Ara, anem a fer que quan el jugador col·lecti una moneda, aquesta desaparegui. Afegiu un nou esdeveniment i afegiu una condició. Trieu la condició per provar la col·lisió entre dos objectes. El primer objecte hauria de ser "Player" i el segon objecte "Coin":

A continuació, podeu afegir una acció que suprimirà la moneda. Només s’utilitzaran els objectes de moneda que es recullin per la primera condició, de manera que només s’elimina la moneda que estava col·lidint amb el reproductor.

Afegiu l’acció “Eliminar un objecte” (de la categoria Accions comunes per a tots els objectes> Objectes) i introduïu Coin com a objecte a eliminar: L'esdeveniment hauria de ser així:

Ara podeu fer una vista prèvia i veure que la moneda s'esborra quan el jugador les executa.

Reprodueix un so en recollir una moneda

Per a que el joc sigui més dinàmic, reproduïm un so quan es recull una moneda.

És fàcil: ja tenim un fitxer de so anomenat coin.wav a la nostra carpeta de jocs (si no és així, podeu descarregar els recursos aquí i extreure’ls a la vostra carpeta de jocs).

És una cosa que no havíem fet abans: podem afegir diverses accions per executar a un sol esdeveniment. Per reproduir un so, afegim una altra acció a l'esdeveniment que vam utilitzar per eliminar les monedes. Feu clic a "Afegeix una acció" just a sota de l'acció "Eliminar moneda d'objecte" i afegeix l'acció anomenada Reproduir un so, de la categoria d'àudio. D’aquesta manera, no només eliminarem la moneda sinó que també reproduirem el so.

Hi ha un munt de paràmetres disponibles per reproduir un so. El primer i més important és el fitxer de so que s’ha de reproduir. Feu clic al camp i després a "Trieu un fitxer d'àudio nou".

Trieu el fitxer coin.wav que heu descarregat amb la resta d'actius i que heu introduït a la carpeta del joc:

Deixeu els altres paràmetres tal i com estan (és a dir: no repetiu el so, el volum a 100 i la velocitat predeterminada del so). Això és tot! Només cal veure la previsualització i el so es reproduirà en qualsevol moment que col·leccioni una moneda 👍

Vídeo-tutorial

Anem a fer que cada vegada que el jugador col·lecti una moneda aconsegueixi punts. Aquí teniu un vídeo que mostra els passos a seguir:

---

Codi

---

Pas a pas

Atorgar una puntuació mitjançant variables

Utilitzarem una variable per actualitzar i recordar la puntuació del jugador.

Les variables són com contenidors que podem utilitzar per emmagatzemar i recordar certa informació, com ara números i cadenes (text) ("strings"). A GDevelop hi ha diferents tipus de variables:

• Les variables d'objecte són variables privades, específiques per a cada instància d'un objecte. Això vol dir que cada instància pot emmagatzemar els seus propis valors, sense que es comparteixin amb les altres instàncies. Per exemple, pot ser útil si volem canviar la vida de cada enemic.
• Les variables d’escena (les més utilitzades) són variables adjuntes a una escena. Això vol dir que els seus valors no es comparteixen amb altres escenes del nostre joc. És útil emmagatzemar informació només rellevant per a l'escena actualment interpretada. Per exemple, la vida del jugador o la puntuació.
• Les variables globals, com el seu nom indica, són globals en tot el joc. Els valors es comparteixen amb les escenes de tot el joc. És útil si volem emmagatzemar informació que volem compartir entre totes les escenes, com ara la quantitat de bales o la quantitat de diners que té el jugador.

La variable que utilitzarem és una variable Escena i s’anomenarà “Score”.

Afegim una acció al darrer esdeveniment que hem realitzat. Trieu "Variables > Valor d’una variable" ("Variables > Value of a variable"). Aquesta acció s'utilitzarà per afegir 100 a la variable "Puntuació" ("Score"), així que ompliu el paràmetre tal com es mostra aquí: A GDevelop no necessitem declarar les variables abans d’utilitzar-les, podem utilitzar qualsevol variable sense declarar-la només anomenant-la en una acció o en una condició. En cas que utilitzem una acció sobre una variable que no sigui declarada, GDevelop la crearà automàticament per a nosaltres, amb el valor predeterminat de '0' (o un text buit) després d'executar l'acció de la variable per estalviar-nos qualsevol problema. .

Però, per tenir una millor organització del joc, és una bona pràctica declarar variables abans d’utilitzar-les. D’aquesta manera, és més fàcil trobar quines variables utilitzeu en el vostre joc. També podeu canviar el valor predeterminat si voleu que sigui diferent de 0. Per declarar una variable, feu clic al botó "..." a la dreta del nom de la variable. Apareixerà la llista de variables:

Es mostra la llista i està buida, ja que encara no s'ha declarat cap variable:

Podeu fer clic al botó + per afegir una variable i introduir “Score” com a nom:

Recordeu que això és completament opcional, només és una bona pràctica.

Mostrar la puntuació mitjançant un objecte de text

Afegiu un objecte de text
Ara per ara, la variable Puntuació no es pot veure, de manera que no podem verificar si la puntuació va augmentant (podríem utilitzar el Depurador, però el jugador no el pot veure).

Hem de utilitzar un objecte "Text" per mostrar el valor de la variable "Score". Afegim un objecte nou. Aquesta vegada escolliu "Text" quan us preguntin sobre quin tipus d'objecte voleu crear:

A continuació, canvieu les propietats de l'objecte per a que el text sigui negre i més gran que la mida predeterminada:

A continuació, arrossegueu l'objecte a l'escena:

Canviar la capa de text

Si reproduïu el joc, podreu veure que el text "Score" es mostra amb la resta d'objectes i que la seva posició no està fixada a la pantalla. Podem resoldre aquest problema fàcilment mitjançant una capa ("layer") a la part superior de la capa base. Obriu l'editor de capes mitjançant aquest botó:

Es mostra la llista de capes, de moment només hi ha la capa base:

Feu clic al botó + per afegir una capa. Poseu-li el nom de "UI" (UI significa "interfície d'usuari" ("User Interface")).

Finalment, moveu l'objecte de text a aquesta nova capa seleccionant la instància de text a l'escena i, a les propietats de l'esquerra, seleccioneu la capa UI:

Assegureu-vos que l'objecte es mostri en algun lloc visible de la pantalla, per exemple, situeu-lo a la part superior esquerra. El rectangle negre de l'editor d'escena representa la mida de la finestra:

Mostrar el valor de la puntuació

Ara que tenim un text a la pantalla, és hora de fer que mostri el valor de la variable "Score". Afegiu un esdeveniment nou. Aquest esdeveniment no tindrà cap condició, és a dir, que l'acció s'executarà cada vegada que es mostri un fotograma del joc a la pantalla (aproximadament 60 vegades per segon).

Afegiu una acció i seleccioneu "Objecte de text > Modifica el text" ("Text object > Modify the text").

Per al primer paràmetre, trieu l’objecte "Score", ja que és aquest l'objecte que volem actualitzar. Per al segon paràmetre, seleccioneu "= (establir a) operador" ("= (set to) operator"), ja que volem establir el text a un valor nou. Finalment, l’últim paràmetre representa el nou contingut del text. És una expressió de cadena que GDevelop avaluarà durant el joc quan s'acabi l'acció.

Podem especificar un text escrivint-lo entre cometes (com aquest: "Hola món"). Però també podem utilitzar expressions. Una expressió és una funció que retorna un determinat valor. En aquest cas, necessitem el valor de la variable "Score" i volem utilitzar aquest valor per actualitzar el contingut de l'objecte Text. Les expressions són un tema més avançat, de manera que ara no hi aprofundirem.

El que heu de saber de moment és que per obtenir el valor d’una variable d’escena, hem d’utilitzar l’expressió "Variable (variableName)". Aquesta variable és una variable de número, però el que nosaltres necessitem és tenir el valor com a text, per això hem de convertir el valor retornat d'aquesta expressió en una cadena. Podem fer-ho mitjançant una altra expressió anomenada "ToString (valueToConvert)". Per tant, l’expressió real ha d’assemblar a aquesta "ToString (Variable (Score))".

Finalment, podem afegir aquesta expressió després d’un text estàtic mitjançant l’operador +: "Score:" + ToString (Variable (Score)) (noteu les dobles cometes que envolten el text).

 

Hi ha moltes altres funcions i expressions disponibles a GDevelop. Combinant-les, podem crear accions avançades. Podeu trobar més expressions a l'editor d'expressions fent clic a la icona blava que hi ha al costat dels camps de valor:

Aquí teniu l’esdeveniment final:

Podeu previsualitzar el joc i veure que es mostra la puntuació i aquesta s'actualitza en recollir una moneda. Recollir dues monedes alhora.

Potser haureu notat que si recopileu dues monedes exactament al mateix temps (per exemple, si dues monedes es superposen), la puntuació només augmenta una vegada. Per exemple, si cada moneda val 100 punts i obteniu 2 monedes, la puntuació només ascendirà a 100 en lloc de 200. La solució és fàcil i és una cosa que encara no hem mirat: anem a utilitzar un esdeveniment anomenat "Per a cada objecte" ("For each object"). El que farem és dir-li al motor que per a cada moneda que es reculli, sumi 100 a la puntuació.

Per començar, feu clic al botó + a la barra d’eines de l’Editor d’esdeveniments:

Seleccioneu "Per a cada objecte" ("For each object"):

Això afegirà un esdeveniment a la part inferior de la pàgina de l’esdeveniment. Arrossegueu-lo i convertiu-lo en un sub-esdeveniment de "el jugador col·lisiona amb la moneda":

Feu clic per triar un objecte i seleccioneu l'objecte "Coin".

Ara que heu afegit l'objecte al sub-esdeveniment, passeu les accions al sub-esdeveniment (d'aquesta manera les accions es repetiran per a cada moneda segons la condició establerta).

Passeu el ratolí sobre la primera acció, feu clic amb el botó dret i talleu-lo ("cut") i, a continuació, passeu el ratolí per sobre l’acció al subesdeveniment, feu clic amb el botó dret i enganxeu. Feu això per a les altres dues accions. També podeu arrossegar accions desactivades, que és més ràpid que enganxar-les.

L’esdeveniment final ha de quedar de la següent manera:

Ara executeu el joc i veureu que si recolliu dues monedes al mateix temps, la puntuació s'actualitzarà correctament.

Vídeo-tutorial

Anem a afegir un enemic que es mourà per les plataformes d'esquerra a dreta. El jugador pot destruir-lo saltant a sobre. Aquí teniu un vídeo que mostra els passos a seguir:

---

Codi

---

Pas a pas

El que volem és afegir un enemic el qual el jugador pot destruir saltant-hi a sobre.

Crear i afegir l’objecte enemic a l'escena

Creeu un objecte "Sprite" nou. Afegiu les imatges slimeWalk1.png i slimeWalk2.png a la primera animació i anomeneu a aquesta animació "Walk".

Configureu l’animació en bucle fent clic al botó “No loop”, per col·locar-la a “Loop” i configureu la velocitat d’animació a 0,5 amb la icona del rellotge.

La finestra hauria de quedar així:

Confirmeu els canvis fent clic al botó "Apply".

A continuació, canvieu el nom de l'objecte a "Slime". Arrossegueu un objecte "slime" a l'escena, assegurant-vos que estigui just a sobre d'una plataforma.

Si executem la previsualització ara, l'enemic no fa gaire cosa. Només s’asseu tranquil·lament a la part superior de la plataforma i reprodueix l’animació "walk". Anem a fer que es mogui!

Desplaçar l’enemic a l’esquerra i a la dreta

En aquest tutorial, el nostre enemic es desplaçarà a l'esquerra i a la dreta. Ho farem mitjançant objectes invisibles: quan el llim toqui un dels objectes, revertirà la seva direcció.

Afegim dos objectes que actuaran com a delimitadors. Creeu un objecte nou Sprite i afegiu la imatge Left.png. Poseu-li el nom a nom "left". A continuació, creeu un objecte més i afegiu la imatge Right.png. Poseu-li el nom "right".

Finalment, poseu l’objecte anomenat "left" a la part dreta de la plataforma i l’objecte anomenat "right" al costat esquerre de la plataforma.

Hauria de quedar així:

La idea és que, si l'enemic xoca amb l’objecte anomenat ""left", establirem la seva direcció per anar cap a l’esquerra. I si xoca amb l’objecte anomenat "right", establirem la seva direcció per anar cap a la dreta.

Primer crearem una variable d’objecte anomenada "direction" amb el valor predeterminat “left”. Utilitzarem aquesta variable per canviar la direcció.

Per afegir una variable d'objecte al nostre enemic, feu clic amb el botó dret sobre l'objecte "Slime" de la llista d'objectes i trieu "Editar les variables d'objecte" ("Edit object variables").

Es mostra una finestra buida. Conté la llista de variables d'objecte que hem declarat per al nostre objecte "Slime". Ara és buit, ja que no n'hem declarat cap. Per afegir una variable d'objecte, feu clic al signe més (+) a la cantonada inferior dreta.

A això s'afegeix una variable anomenada "Variable". Feu clic al nom i canvieu-lo per "direction". Feu clic al camp valor i introduïu "left". La finestra hauria de quedar així:

Confirmeu els canvis fent clic al botó "Apply". Ara tenim una variable d'objecte anomenada "direction" amb el valor predeterminat "left".

Utilitzem ara aquesta variable per fer que el nostre enemic es mogui.

A l'editor d'esdeveniments, afegiu un esdeveniment en blanc i afegiu una condició per comprovar el text de la variable d'un objecte. Podeu trobar-lo a "Condicions comuns per a tots els objectes > Variables > Text d'una variable d'objecte" ("Common conditions for all objects > Variables > Text of an object's variable").

Als paràmetres, per al camp d'objecte, seleccioneu "Slime". Per al camp variable, seleccioneu la "direction". Al següent paràmetre, seleccioneu "= (equal to)" i finalment, per a l'últim valor, introduïu "left". No oblideu posar el valor entre cometes.

La finestra hauria de quedar així:

Premeu OK per confirmar i afegir la condició a l’esdeveniment. Ara afegim l’acció per moure l'enemic a l’esquerra.

Feu clic a "Afegir acció > Condicions comunes per a tots els objectes -> Moviment -> Afegir una força (angle)" (“Add action > Common conditions for all objects > Movement > Add a force (angle)"). Recordeu-ho, sempre podeu utilitzar el quadre de cerca per trobar el que busqueu.

Als paràmetres, per al camp d'objecte, torneu a seleccionar "Slime". Per a l'angle, introduïu "180" graus (que és el costat esquerre al sistema de coordenades GDevelop) i introduïu la velocitat de 100 píxels. Trieu l'opció "Instant" per a la força, ja que la força s'aplicarà en tots els fotogrames del joc, per tal que es mantingui vigent durant un cert temps.

La finestra hauria de quedar així:

Premeu OK per afegir la condició a l’esdeveniment.

Si executem la previsualització ara, el nostre enemic hauria de començar a moure’s cap a l’esquerra, però probablement notareu que continua movent-se i mai canvia de direcció.

Anem a arreglar això. Per fer-ho comprovarem la col·lisió entre l'objecte "Slime" i l'objecte anomenat "right" i canviarem el valor de la variable de direcció a "right".

Afegiu un esdeveniment en blanc i afegiu una condició per comprovar la col·lisió entre "Slime" i l'objecte anomenat "right". Ja hauríeu de saber-ho fer. A continuació, afegiu una acció a "Condicions comuns per a tots els objectes > Variables > Modificar el text d'una variable d'objecte" ("Common conditions for all objects > Variables > Modify the text of a variable of an object").

En els paràmetres, per a l'objecte seleccioneu "Slime", per a la variable, seleccioneu "direction", per a l'operador, trieu '= (set to)'. Per a l'últim valor introduïu "right". No oblideu les cometes.

La finestra hauria de quedar així:

Si executem la previsualització ara, és possible que observeu que no està passant res, ja que encara no li hem dit a GDevelop què fer si la direcció és "correcta".

Acabem afegint els mateixos dos esdeveniments similars, però invertint “left” per “right” i canviant la direcció. Quan hagueu acabat, els esdeveniments han de tenir el seu aspecte:

Si feu una previsualització del joc, l'enemic ha de moure’s a l’esquerra i a la dreta, però es manté de cara a l’esquerra quan es mou. Anem a invertir la seva orientació.

Canviar orientació de l'enemic

A la llista d’accions que fan que l'enemic es desplaci cap a l’esquerra, afegiu una acció per girar l'sprite horitzontalment ("Sprite > Effects > Flip the object horizontally"). Per a l'objecte, seleccioneu "Slime" i pel valor seleccioneu "No" (ja que no volem que l'objecte es giri quan es desplaça a l'esquerra). Repetiu el mateix, però ara a l'esdeveniment que es fa servir per moure l'enemic cap a la dreta. Aquesta vegada seleccioneu "Sí", ja que volem girar l'objecte quan es mogui cap a la dreta.

L'esdeveniment hauria de quedar així:

 

Ara l'enemic es desplaça cap a l’esquerra i cap a la dreta i també té l’orientació adequada quan es mou.

Fer que el jugador mati l'enemic

Fem que el jugador destrueixi l'enemic quan hi salta a sobre.

Afegiu un esdeveniment en blanc amb una condició per comprovar si hi ha una col·lisió entre el jugador i l'enemic. Afegiu una acció per suprimir l'objecte enemic. Això és el que vam fer amb les monedes abans, però aquesta vegada amb el "Slime".

Si ara reproduïm el joc, l'enemic s’elimina tan aviat com ens topem amb ell, però això no és el que volem. Només volem suprimir-lo si el jugador hi salta a sobre.

Per fer-ho, afegiu una condició més al nostre esdeveniment i seleccioneu "Conducta de la plataforma > Opcions > Està caient" ("Platform benaviour > Options > Is falling"). Seleccioneu "Player".

Si ara fem una previsualització, el nostre enemic s'hauria d'eliminar només quan el jugador hi salta a sobre.

Encara no és perfecte, ja que el jugador cau a sobre de l'enemic, l'enemic desapareix però el jugador no rebota.

Per fer-ho, afegiu una acció més a l'esdeveniment. Trieu aquesta vegada l’acció anomenada "Comportament de la plataforma > Permet tornar a saltar" ("Platform behaviour > Options > Allow again jumping") i seleccioneu l'objecte "Player". A continuació, afegiu una altra acció triant "Comportament de la plataforma > Controls > Simula l'acció de la tecla de saltar" ("Platform behavious > Controls > Simulate jump key press") per fer-lo saltar (semblarà que el jugador està rebotant).

En aquest moment, l'esdeveniment hauria de ser així:

Ara, si s'executa la vista prèvia i se salta a la part superior de l'enemic, el jugador hauria de rebotar suaument i l'enemic hauria de desaparèixer.

Fer que l’enemic mati el jugador

Anem a fer ara la lògica inversa: matar el jugador si l'enemic el toca.

Afegiu un esdeveniment en blanc i afegeix la condició per comprovar la col·lisió entre el jugador i l'enemic. A continuació, afegiu una acció per eliminar l'objecte "Player".

Això no funcionarà, ja que podríem eliminar el "Player" abans que puguem suprimir l'enemic o podríem eliminar l'enemic abans de poder eliminar el "Player".

Per evitar-ho, afegiu una condició més al nostre esdeveniment, la qual comprovi si el jugador està a terra. Seleccioneu "Comportament de la plataforma > Opcions > Està a terra" ("Platform behaviour > Options > Is on floor")

Ara, si fem la vista prèvia, hauríem de poder matar l'enemic saltant a sobre i l'enemic hauria de poder matar el jugador si el jugador està a terra en el moment de la col·lisió.

Ocultar els delimitadors de la plataforma

L’últim que hem de fer ara és ocultar aquells objectes de fletxa “esquerra” i “dreta”. Per fer-ho, afegiu un esdeveniment amb la condició "Al començament de l'escena"  i l'acció per "ocultar l'objecte a l'esquerra" i "ocultar l'objecte a la dreta" .

Els esdeveniments d'aquest tutorial fins ara haurien de ser així:

Ara feu una previsualització, els objectes fletxa esquerra i dreta haurien d'estar amagats, l'enemic s’hauria de moure a l’esquerra i a la dreta constantment. Hauríem de ser capaços de matar l'enemic saltant-li a sobre i l'enemic hauria de ser capaç de matar el jugador quan es xoca amb ell mentre el jugador està a terra.

Vídeo-tutorial

Anem a afegir punts de control al joc. Aquí teniu un vídeo que mostra els passos a seguir:

---

Codi

---

Pas a pas

Hem acabat el tutorial anterior eliminant el jugador quan xoca amb l’enemic. No és la manera de funcionar a la majoria de jocs. Generalment, en lloc d’eliminar el jugador, un joc té un “punt de control”. El "punt de control" desa l'estat del joc i l'estat del jugador en variables. Aleshores, si el jugador mor, el joc i/o el jugador es reinicia des del punt de control.

Per a aquest tutorial, guardar l'estat de tot el joc i l'estat del jugador pot ser una mica massa avançat. En lloc d'això, quan un jugador xoca amb un objecte "checkpoint", guardarem la posició de l'objecte "checkpoint" a les variables. Així, en comptes d'eliminar el "Player", tornarem a restablir-lo al mateix lloc i amb les mateixes.

Crear un objecte de punt de control

Comencem per crear un nou objecte sprite al nostre joc. Anomenem-lo "checkpoint". Pot ser qualsevol .jpg o .png imatge sprite que tingueu. Anem a utilitzar un sprite de "cactus".

A continuació, arrossegueu l’objecte sprite a l’escena. La vostra imatge de sprite pot ser massa gran o massa petita. Utilitzeu el quadradets que apareixen al voltant de l'sprite per canviar la mida de la imatge. Situeu-lo a l'escena on vulgueu tenir un "punt de control". Podeu afegir el vostre objecte sprite a diversos llocs de la vostra escena. D’aquesta manera, podeu configurar diversos “punts de control”.

Afegir esdeveniments

Ara que tenim els objectes “checkpoint” a la nostra escena, afegim els esdeveniments. Comencem amb la condició de comprovar si hi ha una col·lisió entre el “Player” i el “checkpoint”. Si es produeix la col·lisió, emmagatzemem la posició X i Y de l’objecte “checkpoint” sprite en una variable d’escena anomenada "checkpointX" i "checkpointY".

A la part superior, utilitzem expressions per obtenir la posició X i Y del sprite d'objecte "checkpoint". Això es fa de manera semblant a com hem actualitzat el text de la puntuació (veure apartat "Afegir puntuació" d'aquest tutorial). Podeu trobar més expressions a l'editor d'expressions fent clic a la icona blava que hi ha al costat dels camps de valor:

Quan feu clic a la icona blava, podeu cercar totes les expressions disponibles ordenades per categories.

 

La condició ara emmagatzema la posició X i Y de l'objecte "checkpoint" amb el qual ha col·lissionat el nostre objecte "Player". Així, en comptes d'eliminar l’objecte sprite “Player”, establim les seves posicions X i Y mitjançant les variables.

A l'exemple anterior, utilitzem un altre conjunt d'expressions per obtenir el valor de les variables emmagatzemades i passar-les a la posició de "Player".