Yoohpey
EP. 19: GDevelop – Crearea jocului / Game Making (RO/EN)
-
Română
-
English
Acum că avem toate piesele din puzzle, e timpul să le punem împreună! Haideți să facem un joc!
Stai un pic, Nepoate! De când facem noi puzzle-uri?! Nu parcă făceam animații 3D?
pthlptlhpt!
Yoohpey! Petrecerea puzzle-ului animat 3D!
Stai puțin, Bunicule! Era doar o figură de stil. Ce vroiam să spun e că a sosit timpul să intrăm în programul GDevelop, unde vom pune împreună toate rezultatele de până acum.
GDevelop
Astfel, în acest program de făcut jocuri se poate face tot jocul de la început, cum am făcut eu cu Yoohpey World, sau putem folosi un Template oferit gratuit pe care îl vom schimba noi. Pentru a face asta, vom da click pe Create.
Apoi vom apăsa pe + Create new game și vom căuta Run Dino Run, template-ul pe care îl vom folosi pentru a face jocul nostru. Putem alege oricare din lista cu jocuri, însă acesta nu are nevoie de multe schimbări, iar animațiile pe care le-am făcut până acum se potrivesc cu el.
Hei, Nepoate, pe cine ai tu acolo pe ecran? Cred că îl recunosc... de unde ai tu poze cu animalul meu de companie de când eram la grădiniță?!
pthlptlhpt!
Yoohpey! Petrecerea dinozaurilor de companie!
În următoarea fereastră vei putea da un nume jocului tău, iar apoi vei alege un folder unde să îl pui după ce selectezi Your computer.
Vom apăsa pe butonul Close din fereastra în care scrie despre leaderboards pentru că nu avem nevoie de ea încă.
Vom vedea un meniu în partea stângă a ecranului, pe care îl accesăm de la cele trei liniuțe din colțul din stânga sus. În acest meniu avem butoane pentru a deschide proprietățile jocului, scenele sau alte setări, precum și meniul File care conține butoanele pentru Save și Export. Mai putem să salvăm proiectul pe care lucrăm și apăsând pe butonul de dischetă atunci când e închis meniul, sau apăsând tastele [CTRL] + [S].
Acum facem și scenete, Nepoate!? Eu credeam că facem animații, apoi ai zis de puzzle-uri și nu mai știu ce jocuri, și acum facem și teatru? Am crezut că am terminat cu teatrul. Acum chiar că ai nevoie de multe talente, Nepoate! De aia o să-mi exersez și eu talentul meu de sforăit! Măcar un pic. Ok?
pthlptlhpt!
Yoohpey! Petrecerea jocurilor talentate de teatru!
Vom da click stânga pe fiecare dintre numele scenelor înainte de a ieși din meniu, ceea ce va deschide paginile scenelor în bara de sus a ecranului. Fiecare scenă are pagina cu reprezentarea vizuală a scenei și pagina pentru Events, adică codul din culise.
pthlptlhpt!
Yoohpey! Petrecerea sforăitului în culise!
În scena vizuală, dacă dăm dublu click pe oricare dintre obiectele de pe ecran, se va deschide o fereastră cu proprietățile obiectului unde putem să schimbăm imaginile folosite de acel obiect, ceea ce ne va ajută să le înlocuim cu cele pe care le-am făcut noi.
Pentru a ne mișca în jurul scenei, putem ține apăsat de rotița de pe mouse și să tragem, iar pentru a ne apropia sau îndepărta putem învârti rotița în sus și în jos. Acum că ne-am obișnuit cu interfața din GDevelop, e timpul să terminăm ultimele resurse de care avem nevoie pentru jocul nostru. Jocul pe care l-am ales e despre săritul peste obstacole, deci putem folosi fânul pe care l-am făcut înainte pe post de obstacol și vom putea culege monezile făcute de noi pe traseu.
Cum, ce? Stai, Nepoate, că fânul nu e un obstacol! Dacă eu aș găsi o căpiță de fân, m-aș pune pe ea și imediat aș adormi!
pthlptlhpt!
Yoohpey! Petrecerea obstacolelor somnoroase!
Fundalul jocului
Asta chiar e o idee bună, Bunicule! Putem face o animație de dormit pentru atunci când personajul nostru atinge o căpiță de fân, ceea ce va încheia jocul. Însă, până atunci, vom începe cu desenarea fundalului pentru jocul nostru. Vom deschide prima dată GIMP și vom crea o imagine nouă de dimensiunile 960 x 540.
Vom începe prin desenarea cerului, așa că vom alege două culori albastre care s-ar potrivi în cele două pătrățele.
Vom folosi acele culori să umplem cerul luând unealta de Gradient, pe care o vom găsi în meniul ce se deschide atunci când apăsăm click dreapta pe unealta în formă de găleată.
Pentru a face gradientul vom apăsa click stânga în zona de desen și vom trage în jos, ținând apăsat de butonul [CTRL] pentru a face linia complet verticală. Apoi vom apăsa pe tasta [ENTER] pentru a confirma gradientul.
Următorul pas este să facem un Layer nou pentru a desena norii. Când desenăm, ar trebui să avem grijă să nu trecem peste marginile laterale ale imaginii, pentru că acest fundal va trebui să se repete în dreapta infinit, așa că dacă suntem atenți acum să nu atingem marginile vom avea mai puțin de reparat atunci când vom pregăti fundalul pentru repetare. Vom desena norii în alb, umplând cerul, apoi îi putem face să iasă în evidență dându-le și norilor un gradient. Pentru a face asta, vom avea nevoie de unealta Fuzzy Selection.
Cu unealta selectată vom da click pe un nor, și apoi putem să luăm din nou unealta de gradient, alegând niște culori frumoase pentru nori, după care putem da click și trage peste norul selectat. După ce apăsăm [ENTER], vom repeta același proces pentru fiecare nor. Pentru a de-selecta ceea ce avem selectat vom folosi combinația de taste [CTRL] + [SHIFT] + [A].
Nepoate, cerul ăla e frumos, însă mi-ar fi plăcut și mai mult dacă era și mai înnorat! Sau, și mai bine, dacă era noapte! Asta m-ar ajuta să dorm mai bine... nu că nu pot să dorm și ziua oricum.
pthlptlhpt!
Yoohpey! Petrecerea dormitului zi și noapte!
Apoi vom face un Layer pentru munți, ascunzând Layer-ul norilor prin apăsarea butonului în formă de ochi din dreptul lor pentru a fi mai ușor să vedem ce facem. Trebuie să începem cu linia orizontului, folosind metoda de a trage linii drepte prin apăsarea în afara zonei de desen cu creionul, după care vom apăsa în cealaltă parte în timp ce ținem apăsate tastele [CTRL] și [SHIFT], creând o linie dreaptă.
Putem apoi să desenăm munții, din nou având grijă să nu atingem marginile laterale ale desenului pentru a fi mai ușor să se repete. Vom face contururile munților, după care îi vom umple cu o singură culoare cu unealta Bucket Fill, pe care o vom regăsi atunci când dăm click dreapta pe cea de Gradient, după care vom reveni la unealta de Gradient pentru a colora munții.
Acum, că sunt umpluți cu o singură culoare, putem folosi unealta Fuzzy Select pentru a-i selecta, astfel încât doar munții să fie colorați cu niște culori mai închise, imitând piatra.
Pentru a pune iarbă pe acești munți, vom face un Layer nou în care să o desenăm. Vom lua unealta Paint Brush, adică pensula, pe care o vom găsi dând click dreapta pe cea de creion. Vom alege o pensulă diferită din partea dreaptă a ecranului pentru a face desenul să arate mai natural, apoi vom colora peste munți cu diferite nuanțe de verde.
Odată ce am desenat iarba, trebuie să o ștergem pe cea care iese în afara munților. Pentru a face asta, vom merge înapoi pe Layer-ul cu munții și îi vom selecta folosing unealta fuzzy select, iar apoi vom apăsa tastele [CTRL] + [I] ca să inversăm selecția. Acum, putem merge înapoi pe Layer-ul cu iarba și vom apăsa tasta [DELETE], ceea ce va șterge toată iarba desenată pe suprafața din afara munților.
Ca să îmbogățim munții, putem aduce copacii pe care i-am făcut în episodul 14. Vom face un Layer Group pentru ei, unde îi vom duplica și scala până când umplem munții cu copaci.
Hei, Nepoate, asta seamănă mult cu casa unuia dintre prietenii mei! Mă întreb ce mai face Bigfoot... nu am mai vorbit cu el de mult...
pthlptlhpt!
Yoohpey! Petrecerea reuniunilor în pădure!
Acum, că desenul e gata, trebuie să ne asigurăm că poate să fie repetat la infinit atunci când personajul va alerga în joc. Pentru a face asta, primul pas este să punem toate Layer-ele într-un Layer Group pe care îl vom trage la o parte din ecran, ținând apăsat de tasta [CTRL] pentru a-l păstra centrat pe orizontală.
Apoi vom duplica grupa și o vom muta în cealaltă parte, asigurându-ne că se întâlnesc în mijloc.
Pentru că noile margini ale imaginii erau mijlocul ei, ele se vor putea repeta cu siguranță, atât timp cât nu mai desenăm ceva în plus peste ele. Asta înseamnă că tot ce avem de făcut este să reparăm mijlocul imaginii, iar, pentru că am avut grijă cu norii și munții, tot ce avem de făcut este să retușăm iarba. Cel mai ușor e acum să selectăm unul dintre Layer Group-uri și să folosim unealta Rectangle Select pentru a alege o zonă unde e mai multă iarbă, copiind-o cu tastele [CTRL] + [C] și lipiind-o cu tastele [CTRL] + [V] peste zona unde intersecția e mai vizibilă, mișcând-o în acea poziție și apoi apăsând be butonul de New Layer pentru a pune selecția pe care am lipit-o într-un Layer.
Tot ce a mai rămas să facem pentru a elimina marginile imaginii e să folosim radiera, asigurându-ne că modul Hard Edge e oprit, astfel ștergând ușor marginile pentru a face tranziția să fie lină.
Pentru a face munții să apară mai îndepărtați și să fie mai ușor să ne dăm seama care e fundalul și care e prim-planul, putem adăuga un Layer nou pe care vom face niște ceață cu un gradient. Trebuie să alegem numai prima culoare dintre pătrățele, pentru că vom alege setarea ca a doua să fie transparentă.
Apoi vom trage de jos în sus, ținând apăsată tasta [CTRL] pentru a face gradientul complet vertical, astfel evitând crearea unei margini noi.
Acum putem da Save As... pentru a păstra fișierul în care am lucrat și Export As... pentru a obține fișierul .png de care vom avea nevoie în GDevelop.
Platforma
Acum, că am terminat fundalul jocului, vom avea nevoie de o platformă pentru personajul nostru. Vom face un fișier nou de la File - New și îl vom face de dimensiunea 64 x 64. La fel ca și cum am făcut cu cerul și cu munții, vom face un gradient vertical, ținând apăsat de [CTRL].
Apoi vom face un Layer nou pentru iarbă, urmând aceeași metodă de colorat cu Paint Brush-ul în diferite nuanțe de verde.
Iar după ce am desenat iarba vom folosi aceeași metodă de a o repeta la infinit pe orizontală, mutând Layer-ul la o parte și aliniindu-l pe cel duplicat.
Vom da click dreapta pe Layer-ul duplicat și vom apăsa Merge Down pentru a uni cele două Layer-e, iar apoi vom colora peste partea din mijloc, având grijă să nu ne apropiem de margini pentru a nu crea o nouă margine.
pthlptlhpt!
Yoohpey! Petrecerea ierbii nesfârșite!
Platforma plutitoare
În joc, mai este o platformă plutitoare pe care trebuie să sărim, care are un obstacol pe sub care ne putem apleca. Această platformă e de dimensiunea 128 x 66 și vom aduce imaginea pe care tocmai am făcut-o cu pământul.
Îl vom duplica și alinia în partea de sus a zonei de desen.
Vom apăsa click dreapta pe Layer-ul de sus și vom alege Merge Down pentru a unii cele două Layer-e.
Iar apoi vom aduce niște căpițe cu fân pentru a le aranja în partea de jos a imaginii, ceea ce vom face mergând la Layer - Transform - Rotate 90° clockwise pentru a întoarce căpița pe orizontală.
Nepoate, cum reușesc căpițele de fân să stea în partea de jos a platformei? Sau, și mai bine, cum plutește insula? Atâtea întrebări...
pthlptlhpt!
Yoohpey! Petrecerea insulelor misteriose!
Apoi vom micșora Layer-ul folosind unealta Scale și vom duplica căpița de fân de câteva ori pentru a umple partea de jos a imaginii. Putem să adăugăm și puțină varietate dacă le inversăm pe unele, lucru pe care îl putem face dacă mergem sus la Layer - Transform - Flip Horizontally și Layer - Transform - Flip Vertically.
Pentru a face platforma să arate mai bine, putem rotunji colțurile folosind unealta Rectangle Select și pornind opțiunea Rounded Corners.
Dacă selectăm apoi pătratele cu pământ și mergem pe Layer-ul lor, după care apăsăm tastele [CTRL] + [I] pentru a inversa selecția, putem apăsa pe [DELETE] și vom rămâne cu pătratele rotunjite.
Putem tăia și marginile de jos pentru a face ca fânul să iasă în evidență.
Iar apoi putem să rotunjim colțurile noi ascuțite dacă selectăm forma pe care vrem să o păstrăm.
Apoi, în timp ce ținem apăsat de [SHIFT], vom face o selecție peste restul ce nu vrem să fie șters, iar apoi vom apăsa [CTRL] + [I] și [DELETE] ca să scăpăm de colțuri, proces pe care îl vom repeta ca să scăpăm și de restul colțurilor care au rămas.
Animația de dormit
Acum, că avem obstacolele pentru joc, putem face și animația de dormit pentru personajul nostru!
În sfârșit e timpul să dormim! De abia aștept să mă joc jocul tău, Nepoate, ca să dorm și eu împreună cu personajul tău!
pthlptlhpt!
Yoohpey! Petrecerea dormitului în echipă!
Prima dată trebuie să modificăm fața personajului în GIMP pentru a-l face să doarmă.
Apoi vom deschide fișierul în Blender și vom selecta personajul, după care vom merge la Material în Editorul Properties.
Acolo vom alege materialul feței dând click pe el în listă și vom merge la Surface, unde vom deschide săgeata de la Base Color ca să vedem proprietățiile imaginii. Vom da click pe butonul cu iconița de folder și vom căuta în calculator fișierul cu desenul feței care doarme.
Mai putem să îmbunătățim animația de dormit adăugând efectul clasic de zZ. Pentru a face asta, vom merge la Add - Text și vom mișca textul cu uneltele Move și Rotate, poziționându-l deasupra personajului cu fața spre cameră.
În secțiuna Data din Editorul Properties vom găsi butonul Font unde putem să alegem font-ul făcut de noi dacă apăsăm pe butonul cu iconița de folder și alegem fișierul din episodul anterior.
Pentru a schimba ce scrie în text trebuie să ținem cursorul în zona Editorului 3D și să apăsăm tasta [TAB], ceea ce ne va lăsa să scriem cu tastatura, astfel scriind "z", după care vom apăsa din nou pe [TAB] pentru a reveni la normal.
Pentru a schimba culoarea textului, vom merge în Editorul Properties la Material și vom adăuga un material nou textului. Apoi trebuie să schimbăm valoarea din dreptul lui Surface, unde scrie Principled BSDF, și să punem Emission, ceea ce va face textul o singură culoare care nu e afectată de luminile din scenă. A mai rămas să schimbăm culoarea de la câmpul Color cu ajutorul cercului de culori.
Vom duplica obiectul apăsând tastele [SHIFT] + [D] și apoi apăsând click dreapta, după care ne vom folosi de unelte pentru a-l poziționa. Mai trebuie să schimbăm și litera mică din "z" în litera mare "Z".
Înainte de a fi gata cu animația, trebuie să limităm numărul de frame-uri la jumătate din animația inițială, adică frame 12 pentru noi. Astfel, personajul va merge doar în jos și nu va veni înapoi la poziția inițială. Acum putem da Save As... pentru a-l salva ca un alt fișier, având grijă să nu îl rescriem pe cel original pentru a-l păstra, după care vom da Render Animation.
Așa da somn, Nepoate! Pot să confirm asta, ca un expert în ale dormitului. Personajul tău ia somn instant!
pthlptlhpt!
Yoohpey! Petrecerea dormitului comfortabil instant!
Desene tutorial pentru joc
În folderul assets al jocului nostru, vom găsi niște imagini de tutorial care vor apărea în joc, iar noi trebuie să înlocuim dinozaurul din ele cu personajul nostru. Vom deschide toate imaginile în GIMP și vom șterge dinozaurul din ele folosind ori unealta de radieră ori selectându-l cu unealta Rectangle select și apăsând tasta [DELETE].
pthlptlhpt!
Yoohpey! Petrecerea ștersozaurului!
Trebuie apoi să punem personajul nostru în locul dinozaurului, aducând imagini din animațiile pe care le-am făcut pentru a arăta ce trebuie să facă personajul în joc.
Pentru a fi mai ușor să facem seturile de imagini cu degetul care apasă pe ecran, putem să o facem pe prima și să o salvăm, după care o putem trage în cea de-a doua și să ștergem partea stângă a celei originale cu dinozaurul și partea dreaptă a celei pe care am adus-o pentru a rămâne degetul diferit de sub ea.
Meniu joc
Ultimul lucru pe care trebuie să îl facem înainte de a pune toate imaginile în joc este să facem o fereastră de meniu, pentru care vom face o imagine nouă în GIMP de dimensiunea 192 x 192 și vom aduce imaginea cu platforma cu iarbă.
O vom duplica de două ori și le vom alinia în partea de sus a imaginii dintr-un capăt în altul.
Le vom uni cu Merge Down și vom crea un Layer nou pe care îl vom pune sub cel cu iarba, pe care îl vom umple cu un gradient.
Apoi vom face o selecție cu colțuri rotunjite și vom apăsa [CTRL] + [I], apoi [DELETE] pe ambele Layer-e pentru a scăpa de toate colțurile.
Putem apoi să salvăm această ultimă imagine și a venit timpul să le punem pe toate în joc!
Nepoate, ești sigur că nu mai este nimic de făcut înainte de a ajunge să facem jocul? Nu că aș avea o problemă cu asta, doar vreau să știu...
pthlptlhpt!
Yoohpey! Petrecerea jocurilor nelimitate fără jocuri!
Punerea imaginilor în joc
Primul pas în pregătirea imaginilor noastre pentru a fi folosite în joc este să le punem în folder-ul assets. Acesta e un pas pe care GDevelop l-ar face automat dacă nu îl facem noi, însă atunci când îl facem manual avem control mai mare asupra unde vor fi puse fișierele. Putem să facem niște sub-foldere în care să punem fișierele și astfel să ne fie mai ușor să le căutăm când avem nevoie de ele, lucru care este mult mai greu atunci când GDevelop le pune în folder singur. De exemplu, ar fi o idee bună să ținem animațiile personajului într-un folder numit Player cu sub-foldere separate pentru fiecare animație: Walk, Sleep, Jump și Duck.
După ce am pus toate fișierele în folderul jocului, putem să începem să le înlocuim în joc. Dacă mergem în scena Game din bara de sus și dăm dublu click pe funal, vom vedea un buton pe care scrie Replace, care ne va da opțiunea File from your device. De aici, trebuie doar să selectăm imaginea cu fundalul pe care l-am desenat în folder, apoi vom da click pe Apply în colțul din dreapta jos al ferestrei pentru a vedea schimbările.
Fundalul original era mai mare decât fereastra jocului, deci trebuie să îl micșorăm pentru a intra în cadrul care reprezintă fereastra de joc. Vom face aceasta asigurându-ne că am selectat obiectul, dând click stânga o singură dată pe el, după care vom trage de pătrățelele din jurul obiectului pentru a-l micșora.
Trebuie să facem același lucru și în scenele Intro și Leaderboard, deoarece deși imaginea e schimbată în toate locurile, ea nu e de mărimea corectă.
În scena Intro, nu vei vedea inițial pătrățelele pentru micșorare, acestea fiind ascunse din panoul din stânga. La Properties, găsim un lacăt care este pornit, pe care dacă vom apăsa o singură dată ne va opri din a putea selecta obiectul de tot, ceea ce nu vrem, iar dacă mai apăsăm încă o dată îl vom debloca, obiectul devenind albastru în loc de portocaliu, astfel lăsându-ne să tragem de pătrățele pentru a-l micșora.
Vom schimba și imaginile pentru platforma de jos folosind aceeași metodă.
Iar apoi va trebui să ajustăm poziția platformei în toate cele trei scene.
Alte obiecte care nu se repetă infinit bazat pe dimensiunea obiectului au un proces puțin diferit atunci când trebuie să schimbăm imaginea. Dacă luăm cactusul și vrem să îl schimbăm cu căpița de fân, vom vedea că nu este un buton de replace, ci doar + Add a sprite. Asta e pentru că acest tip de obiect, sprite, e capabil de a fi animat, iar cele care sunt animate au doar un singur frame dintr-o animație. Astfel, ce trebuie să facem este să dăm click pe + Add a sprite și să aducem căpița de fân.
Apoi vom da click pe căsuța imaginii cactusului, după care vom da click dreapta și vom apăsa pe Delete selection. Mai rămâne să apăsăm pe Apply pentru a confirma schimbările.
Asta-i o schimbare bună, Nepoate! Căpițele de fân sunt mult mai bune pentru dormit decât cactușii. Și din fân mai iese câte un țep, dar cactușii îs numai țepi. Ăia îs pentru trezit și noi vrem să dormim. Deci, trăiască fânul, deși fânul e iarbă moartă, dar astea sunt doar detalii.
pthlptlhpt!
Yoohpey! Petrecerea somnului nedureros!
Când facem același lucru pentru BonusObject, care îl vom înlocui cu moneda noastră, putem alege mai mult de o imagine după ce apăsăm pe + Add a sprite, ceea ce face adăugarea lor mult mai ușoară dacă le-am organizat bine în foldere. Putem apoi să facem la fel ca și la cactus pentru a șterge imaginea originală a obiectului.
În joc, moneda mai și luminează, deci înainte de a aplica schimbările vom merge la Effects în partea de sus, unde vom vedea culoarea luminii, albastru. Dacă dăm click pe dreptunghiul colorat al ei, vom putea schimba culoarea în galben ca și moneda noastră, după care vom apăsa pe Apply.
O metodă mai rapidă de a schimba imagini individuale este să mergem în folder și să le înlocuim pe cele originale, redenumind pozele noastre în locul lor. Putem face asta pentru platforma plutitoare, copiind-o și redenumind-o ca Duck_Island.png și Duck_Island2.png. În caz că vei avea nevoie de fișierele originale mai tărziu, ar fi bine să le copiezi într-un alt folder sau să le redenumești și pe cele originale în altceva, pentru a nu le pierde definitiv.
Putem folosi aceeași metodă pentru a schimba font-ul, înlocuind fișierul din folder cu cel pe care l-am făcut noi după ce îi dăm același nume, însă eu voi folosi metoda prin GDevelop pentru a vă familiariza cu diferitele interfețe. Pe pagina Intro, dacă dăm dublu click pe textul RUN DINO RUN, se va deschide fereastra cu proprietățile obiectului text. În căsuța de sub Initial text to display putem schimba titlul care apare pe ecran. Deasupra căsuței găsim fișierul font folosit, având un buton de Replace cu care putem alege font-ul nostru, selectând pe File from your device.
Deasupra mai sunt și niște setări pentru text, cum ar fi mărimea, culoarea, bold/italic și alinierea. Vom schimba culoarea cu ceva mai apropiat fundalului și vom debifa căsuța pentru italic, evitând astfel problema pe care o avea titlul vechi în care literele ieșeau în afara căsuței de text.
Ce zici, Nepoate? Vin prietenii mei italieni să mă îmboldescă cu ceva spaghete delicioase?
pthlptlhpt!
Yoohpey! Petrecerea textului spaghetă!
În pagina Game va trebui să schimbăm fontul și culoarea textului cu scorul din stânga sus al ecranului.
Dacă încerci să schimbi textul din pagina Leaderboard, vei observa că textul nu e un obiect diferit de fereastra pe care stă. Asta e pentru că trebuie să modifici grupa de obiecte din care face parte, ceea ce putem face dacă dăm click dreapta pe ea și apăsăm Edit Children.
Nepoate, nu știam că obiectele pot avea copii! Bine de știut, bine de știut...
pthlptlhpt!
Yoohpey! Petrecerea copiilor!
Se va deschide o pagină nouă care seamănă cu celelalte scene, iar aici putem schimba individual fiecare căsuță de text ale butoanelor.
Dacă schimbi aici și imaginea din fundalul ferestrei, vei vedea niște linii nedorite în ea. Asta e pentru că repetarea texturii mici cauzează marginile pe care le vedem, gradientul repetându-se de la început.
O soluție pe care o puteți încerca este să dați dublu click pe obiect și să dezactivați opțiunea Repeat borders and center textures (instead of stretching them). Astfel, gradientul va fi reparat, însă va apărea o altă problemă cu iarba din partea de sus, acum și ea fiind întinsă în loc de a fi repetată.
Soluția în cazul acesta este să păstrăm opțiunea de repetare pornită și să modificăm imaginea înapoi în GIMP.
Deci, Nepoate, stai puțin. Tu vrei să spui că ne-ai pus să-ți urmăm tutorialul ca să învățăm să facem greșeli?!
pthlptlhpt!
Yoohpey! Petrecerea tutorialelor greșite!
Păi, Bunicule, unde ar fi distracția dacă ți-aș fi spus ce se va întâmpla de la început? Aș fi putut să spun cum să faci de la început, dar nu ai fi înțeles motivul din timp. Când lucrezi la ceva, e imposibil să faci ceva la care nu va trebui să revi mai târziu, așa că vreau să arăt și cum se rezolvă aceste probleme.
pthlptlhpt!
Yoohpey! Petrecerea reparării greșelilor intenționate!
Pentru a face imaginea de dimensiunea corectă, va trebui să mergem la Image - Canvas Size... și să schimbăm înălțimea la 320. Motivul pentru care facem asta e că imaginea originală nu avea un gradient, deci, deși am făcut-o de aceeași dimensiune, partea care se va repeta va arăta greșit la noi. Așa că, trebuie să facem imaginea de dimensiunea obiectului din GDevelop, pe care o vedem în panoul Properties din partea stânga a ecranului.
Apoi trebuie să creăm un Layer nou și să selectăm zona pe care vrem să o umplem, evitând iarba din partea de sus a ecranului, apoi o vom umple cu un gradient nou.
Trebuie doar să ștergem colțurile și să salvăm imaginea, iar după ce o înlocuim în folder vom vedea că cea din joc se vede cum trebuie acum.
Animațiile personajului
Când schimbăm animațiile pentru personaj, vom aduce imaginile la fel ca și cum am făcut cu moneda, ștergând apoi imaginile cu dinozaurul prin selectarea căsuțelor și apăsarea butonului Delete din meniul click dreapta.
Pentru animația Idle, putem să folosim doar primul frame din animația de umblat al personajului, încât e o animație pe care jucătorul nu o va vedea mult timp. Pentru că am schimbat numărul de imagini, și timpul de derulare s-a schimbat, iar aici sunt unele bune pentru animațiile pe care le-am făcut: Run - 0.02, Jump - 0.02, Duck - 0.03, Dead - 0.03.
Dacă dai acum Preview pentru a testa jocul, vei vedea niște probleme cu personajul: prima și cea mai stridentă e că personajul nu e centrat corect pe platformă.
Nepoate, e ăsta încă unul din testele tale? Tu deja știai asta din timp și ne-ai fi putut spune încât să nu mai trebuiască să așteptăm după render încă odată! Dar, dacă mă gândesc mai bine, nu ar trebui să mă plâng, pentru că înseamnă că voi putea dormi mai mult în timp ce aștept!
De data asta, Bunicule, repararea imaginilor va folosi o metodă diferită decât cea pe care am folosit-o prima oară, pentru că Blender vine pregătit cu unelte speciale pentru aceste situații.
pthlptlhpt!
Yoohpey! Petrecerea reparării Blender render!
Când mergem înapoi în Blender, trebuie să selectăm Camera și să mergem în Editorul Properties la Object Data, iar sub Transform vom găsi Delta Transform.
Acest set suplimentar de valori e util pentru cazuri în care trebuie să facem schimbări ulterioare ca și acum, fără a afecta keyframe-urile originale. În cazul nostru, camera nu are keyframe-uri, dar tot e o metodă utilă pentru că putem aplica aceași valoare de la Delta Transform în toate animațiile pentru a poziționa corect personajul, după care vom salva și randa toate animațiile din nou, înlocuind fișierele din folder-ul jocului.
Știi ce, Nepoate, ai dreptate. Dacă nu ai fi făcut greșeala inteționată, nu aș fi știut de chestia asta cu Delta! Acum că știu, pot dormi liniștit.
pthlptlhpt!
Yoohpey! Petrecerea Delta-ului somnoros!
Altă problemă pe care o putem observa în joc e că particulele de praf ale dinozaurului nu se aliniază cu personajul nostru și sunt de o culoare greșită.
Pentru a schimba culoarea, trebuie să dăm dublu click pe obiectul DustParticles în dreapta și să schimbăm Particles start color și Particles end color într-o culoare mai potrivită, în cazul meu: verde.
Trebuie să facem același lucru și pentru obiectul BonusParticle, asortându-i culoarea cu cea galbenă a monedei noastre.
După ce apăsăm pe Apply, va trebui să modificăm și poziția particulelor din pagina Game (Events). Aici, va trebui să modificăm locurile unde apare ceva legat de position of DustParticles. Putem șterge acțiunea, adică propozițiile din partea dreaptă a unui event, dând click pe text și apăsând tasta [DELETE]. Prima o vom găsi sub secțiunea albastră Controls:
Cu câteva eventuri mai jos vom găsi o altă acțiune pe care trebuie să o ștergem:
Apoi, în secțiunea Dino Movements, vom da click dreapta pe primul event și vom merge la Add - New Event Below. Atunci când adăugăm un event și nu îi punem nicio condiție în partea stângă, el se va repeta la nesfârșit, adică exact ceea ce vrem: ca particulele să urmărească mereu poziția jucătorului.
Putem acum să tragem cu click stânga următoarea acțiune dintr-un event cu condiții în event-ul pe care tocmai l-am creat:
Asta a fost ca și în filme, Nepoate! Mă simt ca și unul din acei hackeri care fac chestii de hackeri, chiar dacă nici nu știu ce fac!
pthlptlhpt!
Yoohpey! Petrecerea hackerilor folositori!
Acum, că particulele urmează punctul personajului nostru, trebuie să știm cum modificăm poziția acelui punct. Astfel, vom putea recrea efectul pe care îl avea dinozaurul, lăsând particule în spatele nostru când alergăm și în fața noastră atunci când ne aplecăm. Pentru a face asta, trebuie să mergem înapoi la pagina Game și să dăm dublu click pe personaj, iar apoi vom da click pe Edit points.
Vrem să schimbăm poziția punctului doar pe perioada aplecării, adica animația Duck, așa că vom debifa opțiunea Share same points for all animations.
Apoi vom selecta Animation #3 Duck din listă și vom putea să schimbăm poziția punctului DustProjection, ori prin modificarea valorilor din dreapta, ori prin tragerea de punctul din stânga jos al personajului cu click stânga.
Pagina principală a jocului
Suntem foarte aproape de a termina cu jocul! Mai trebuie însă să acordăm niște atenție paginii principale a jocului, începând cu ștergerea obiectelor de care nu avem nevoie, adică cele care provin din template-ul original. Pentru a le șterge, putem da click pe cele vizibile în scenă și să apăsăm tasta [DELETE], însă asta le va șterge doar din scena vizibilă, dar nu și obiectele în sine. Pentru a face asta, trebuie să deschidem folderele din panoul Objects din dreapta ecranului, unde vom da click dreapta pe obiecte și vom apăsa pe Delete, confirmând această alegere în fereastra care se va deschide.
Vom păstra însă semnele, deoarece ele sunt butoanele cu care deschidem jocul. Totuși, puteți să desenați și să schimbați imaginile lor dacă vă doriți. Pentru cele două semne de jos, îl putem șterge pe cel mai mic dacă îl tragem pe cel mai mare la o parte, astfel reușind să îl selectăm pe cel mic.
Mai putem să și rotim semnul pentru a sta drept dacă îl selectăm și mergem în panoul Properties din stânga, unde vom schimba valoarea de sub Rotation la 0.
Putem decora titlul cu monezile pe care le folosim în joc, mergând în pagina Game unde vom da click dreapta pe BonusObject și vom da Copy.
Apoi putem să o aducem în scena Intro când dăm click dreapta pe orice alt obiect sau dând click pe cele trei puncte de lângă unul dintre obiectele de sub Scene Objects, iar apoi vom alege opțiunea Paste BonusObject.
Acum, că am adus obiectul în această scenă, putem trage de el din dreapta pentru a pune mai multe monezi în pagină.
Veți observa că nu puteți să aranjați obiectele cu foarte multă precizie din cauză că se tot lipsec de grila de pe ecran. Pentru a o opri, vom merge în dreapta sus și vom da click pe butonul cu iconița de grilă, iar apoi vom debifa Show grid.
Acum putem să tragem obiectele oriunde vrem, lăsându-ne să centrăm titlul și monezile, precum să poziționăm semnul cu Scores pe platformă.
pthlptlhpt!
Yoohpey! Petrecere cu monezi peste tot!
Mai este un lucru pe care trebuie să îl facem pentru a termina cu pagina principală, și adică să punem mai multe obiecte asemenea celor pe care le-am șters! Putem adăuga un obiect nou de la butonul + Add a new object din dreapta jos și alegând opținea Sprite din meniu.
Importarea imaginilor e la fel ca și la monedă și la personaj, apăsând butonul + Import images și selectând pozele din folder.
Eu am îmbogățit pagina principală cu copacii pe care i-am făcut pentru fundal, niște căpițe de fân și imaginea de la finalul animației de dormit a personajului nostru!
Mie chiar îmi place această pagină, Nepoate! Exact același lucru l-aș face și eu dacă aș avea o căpiță de fân într-un câmp cu copaci, m-aș culca pe ea și aș adormi!
pthlptlhpt!
Yoohpey! Petrecerea căpițelor naturale!
A mai rămas doar un singur lucru de făcut pentru pagina principală, adică să ștergem animația de scuturare a platformei plutitoare, pentru că avem semnul care vrem să stea pe ea și astfel vom evita erori de afișare. Trebuie să dăm dublu click pe platformă și să mergem la Behaviors, să apăsăm pe cele trei puncte de la SineMovement și să apăsăm pe Delete, apoi pe Apply.
Muzica
Și, cu asta, am ajuns la punctul în care trebuie să ne folosim muzica. Cea mai ușoară metodă este să o înlocuim direct în folder, iar acolo avem: 2 cântece și 4 efecte sonore. Cântecul DesertMusic.mp3 e cel care se aude în timpul jocului, așa că eu îl voi înlocui cu muzica fără versuri, iar cântecul LeaderboardMusic.mp3 e cel care rulează atunci când suntem pe pagina principală, deci eu îl voi înlocui cu cea cu versuri. Efectele sonore jump.mp3, skid.mp3, bonus.mp3 și death.mp3 pot fi înlocuite cu unele făcute de voi sau descărcate de pe internet, dar pentru scopul acestui episod eu le voi lăsa așa cum sunt.
Nepoate, unde e efectul sonor de sforăit? Pot să fac atâtea efecte pentru tine, îs ca un actor licențiat de sforăit!
pthlptlhtpt!
Yoohpey! Petrecerea sforăitului ca la Hollywood!
Totuși, mai avem ceva ce trebuie să facem pentru a pregăti corect muzica în GDevelop. Vom auzi o pauză atunci când piesa se va repeta în timpul jocului chiar dacă am făcut-o să se repete perfect în Audacity, dar putem să rezolvăm acest lucru. În primul rând, trebuie să schimbăm tipul de Event folosit în GDevelop pentru a rula piesa din Play Music în Play Audio: diferența dintre cele două este cum încarcă GDevelop fișierul, Play Music fiind o versiune veche care a fost înlocuită de Play Sound, așa că și noi trebuie să facem același lucru, schimbând Event-urile în toate trei scenele. Vom da dublu click pe textul acțiunii și vom alege Play a sound din coloana din stânga. Trebuie însă să luăm în considerare că sunetele nu vor merge tot timpul din prima atunci când jucăm jocul în browser, ci doar după ce jucătorul dă click în pagina de joc. Aceasta este o limitare știută a browser-elor și singura soluție e să faceți un buton care să dea drumul muzicii, punând Event-ul de Play Sound din cel cu At the beginning at the scene într-unul legat de un buton nou, copiat din cele care sunt deja în pagina de Leaderboard.
Încă nu am rezolvat complet problema, chiar dacă rezultatul s-a îmbunătățit, dar jocul continuă să încarce piesa de fiecare dată când se repetă, ceea ce crează o scurtă pauză în derulare. Ce trebuie noi să facem este să adăugăm Event-ul Preload pentru a ne asigura că piesa e încărcate înainte de a rula, garantând că nu va apărea o pauză. Toate cele trei scene au un Event în care regăsim condiția At the beginning of the scene. În dreptul lui vom apăsa pe Add action, vom alege Preload a sound file și apoi vom da click și trage de el în partea de sus a Event-ului pentru a ne asigura că va fi îndeplinit primul.
Ultima schimbare pe care ar trebui să o facem este să schimbăm volumul muzicii în toate trei scenele, aducându-l la 50 pentru toate în loc să avem valori diferite.
Așa-i mult mai bine, Nepoate! Acum piesa asta e ca un cântec de leagăn nelimitat... pot dormi fără întreruperi!
pthlptlhtpt!
Yoohpey! Petrecerea dormitului nelimitat!
Tabla de scoruri
Acest pas este opțional, pentru că necesită un cont GDevelop, însă veți avea nevoie de acest cont pentru a face exportarea jocului mai ușoară pe alte platforme decât browser, cum ar fi Windows, MacOS, Linux sau Android, fără nici un cost. Pentru a face un cont, trebuie să mergeți la pagina Home și să apăsați pe butonul Sign up, apoi să vă introduceți datele sau să apăsați pe unul dintre butoanele din stânga pentru a vă loga cu un cont mai rapid.
Nepoate, nu mi-ai cerut permisiunea să îți faci acel cont!
Bine, Bunicule, mă lași, te rog, să îmi fac un cont de GDevelop?
Da! Desigur! De ce m-ai mai întrebat?
pthlptlhpt!
Yoohpey! Petrecerea întrebărilor neîntrebătoare!
Vom avea apoi o listă cu proiectele unde vom vedea jocul nostru, dar dacă apăsăm pe butonul Manage și apare o eroare ca aceasta, vom avea niște pași pe care trebuie să îi urmăm:
Înainte de a continua, ar fi o idee bună să salvăm progresul pe care l-am făcut, dacă nu ați făcut deja asta, lucru care ar fi trebuit...
pthlptlhpt!
Yoohpey! Petrecerea salvatului în fiecare zi!
Acum, că suntem logați în cont, trebuie să creăm un joc nou, gol, apăsând pe butonul + Create new game și apoi pe + Empty project. Singurul lucru care contează aici e să vă alegeți numele final al jocului, deși veți mai avea ocazia să îl schimbați înainte de a publica jocul.
Motivul pentru care facem asta este că tabla cu scoruri, adică Leaderboard-ul, folosește serverele de la GDevelop pentru care avem nevoie de cont. Acum am creat un joc nou pentru a genera un ID de joc nou, ceea ce ne va ajuta să eliminăm eroarea. Pentru a vedea acest nou ID, trebuie întâi să închidem GDevelop și să mergem în folder-ul noului proiect unde vom da click dreapta pe fișierul care se termină cu .json. Vom merge la Open with și vom alege Notepad din listă (dacă nu este în listă, trebuie să apăsăm pe Choose another app pentru a vedea o listă mai lungă), iar apoi vom căuta "projectUuid": în fișier și vom copia codul lung din dreptul lui, găsit între ghilimele.
Trebuie apoi să mergem în folder-ul cu jocul pe care am lucrat și să deschidem fișierul .json, înlocuind codul de la projectUuid cu cel pe care l-am copiat.
Acum vom merge la File - Save sau vom apăsa tastele [CTRL] + [S] și vom închide fișierul. Putem chiar să ștergem folder-ul cu proiectul gol, pentru că nu mai avem nevoie de el acum.
Vom merge înapoi în GDevelop și vom deschide proiectul nostru de la File - Open, iar acum când mergem în pagina Home vom vedea proiectul nou și vom putea da click pe butonul Manage, de data asta fără erori. Se va deshchide o pagină în care vom avea niște setări, iar în partea de jos a paginii dacă găsim două nume sub titlul Projects vom ști că reparația a reușit.
Știi tu, Nepoate, de fiecare dată când îmi spui că trebuie să schimbăm ceva ce deja am făcut o dată, mă simt... ca și cum aș fi doar un personaj într-o poveste...
pthlptlhpt!
Yoohpey! Petrecerea actoriei tutorialelor!
Acum că jocul este înregistrat corect, putem să începem să ne facem Leaderboard-ul. Pentru a face asta, vom merge la secțiunea Game leaderboards și vom apăsa pe See more ->.
În această nouă pagină, vom da click pe + Create a leaderboard.
Pentru a-i schimba numele, vom da click pe butonul cu iconița de creion din dreapta textului New leaderboard.
Ar mai trebui să schimbăm ordinea de sortare la Higher is better, astfel având cel mai mare scor pe locul întâi.
Apoi vom da click pe butonul Set as default.
Cu asta, setările pentru Leaderboard sunt gata, dar mai trebuie să îl implementăm în joc. Va trebui să copiem ID-ul Leaderboard-ului, adică al doilea din lista de setări, apăsând pe semnul de Copy din dreapta lui.
După ce l-am copiat, trebuie să mergem în pagina Intro (Events) unde vom lipi codul între ghilimelele acțiunii Display leaderboard. Am putea și să îl selectăm dintr-o listă dacă dăm pe săgeata în jos și alegem Select the leaderboard from a list.
Următorul pas este să mergem în pagina Leaderboard și să dăm dublu click pe fereastră, iar apoi vom lipi codul în câmpul de text Leaderboard, înlocuindu-l pe cel original, și apoi vom apăsa Apply.
Dacă ai verifica acum ce se întâmplă în joc, vei vedea că poți să îți trimiți scorurile la Leaderboard și să le verifici de pe prima pagină, însă butonul de pe pagina de la final pentru a deschide Leaderboard-ul nu face nimic, și asta pentru că nu are cod pentru a fi conectat la vreun Leaderboard, așa că va trebui să îl facem noi. Trebuie să dăm click pe cele trei linii din stânga sus și să dăm click pe LeaderboardDialog de sub Extensions pentru a deschide pagina.
În panoul din stânga trebuie să apăsăm pe + lângă LeaderboardDialog sub Objects.
Va apărea o fereastră care ne va întreba ce tip de funcție vrem să adăugăm, iar noi avem nevoie de condition.
Eu am numit condiția IsScoreClicked pentru a se asorta cu celelalte condiții IsRestartClicked și IsScoreSubmitted, dar voi puteți să îi puneți ce nume vreți.
În mijlocul ecranului vom vedea loc pentru event-uri și deja a fost creat unul pentru noi, așa că vom apăsa pe Add condition.
Cea de care avem nevoie este ScoresButton - Is clicked și vom apăsa pe butonul Ok după ce o alegem. Această condiție ne va lăsa să aflăm când butonul este apăsat și să folosim informația și în alte pagini cu event-uri, informație de care vom avea nevoie pentru a deschide pagina cu scoruri.
În dreapta vom vedea că avem nevoie și de un "sentence" pentru acest event, adică un enunț, care este textul ce va apărea atunci când folosim această condiție în alte locuri. Enunțul trebuie să conțină neapărat _PARAM0_ pentru că aceasta e variabila pe care o putem schimba în enunțul condiției. Enunțul nu are nevoie de altceva decât acei parametri, însă e bine să scriem o propoziție care să ne ajute să înțelegem ce face event-ul pe care l-am creat, precum Score button of _PARAM0_ is clicked (Butonul pentru scoruri al _PARAM0_ a fost apăsat).
Acum va trebui să mergem în pagina Leaderboard (Events) și să creăm un event nou, apăsând pe textul Add a new event din partea de jos a paginii.
Pentru a adăuga o condiție nouă, vom da click pe Add condition, apoi pe obiectul LeaderboardDialog în folder-ul UI și vom căuta condiția IsScoreClicked pe care tocmai am făcut-o.
După ce apăsăm pe Ok, mai trebuie să apăsăm și pe Add action, unde vom alege Display Leaderboard de sub Other actions, vom alege Yes și vom apăsa Ok.
Va trebui să alegem numele Leaderboard-ului din listă, iar acum putem în sfârșit să testăm dacă funcționează, jucându-ne jocul pe care l-am făcut de câteva ori și trimițând niște scoruri! Este demn de știut că atunci când rulezi un preview, jocul face o poză la primul ecran care se deschide pentru a-l folosi pe post de poză principală a jocului, deci ar trebui să dăm mereu preview din scena Intro pentru că ea e pagina principală a jocului.
Dacă mergem acum la pagina Home și verificăm Leaderboard-ul, ar trebui să vedem scorurile pe care le-am trimis. Ca și creator al jocului, avem posibilitatea să ștergem intrări dacă ni se par nepotrivite.
Nu mai spune, Nepoate! Tu vrei să zici că nu pot doar să dorm în jocul ăsta, ci și să concurez pentru a fi campion la dormit?! E deja jocul meu preferat, Nepoate!
pthlptlhpt!
Yoohpey! Petrecerea campionatului de somn!
Exportarea
Dacă nu ați făcut-o deja, dați click pe butonul de save din colțul din stânga sus, pentru că suntem aproape gata! E timpul să pregătim jocul pentru exportare și vom începe cu curățarea resurselor jocului. Pentru a face asta, trebuie să mergem la cele trei liniuțe din stânga sus și să dăm click stânga pe Resources, deschizând o altă pagină care ne va arăta toate fișierele pe care le accesează jocul nostru.
Dacă dăm click dreapta pe oricare din elementele din lista din dreapta, vom putea merge la Remove unused... - Resources (any kind) ceea ce va șterge din proiect orice fișiere care nu mai sunt folosite, precum fișierul original al copacului sau al cactusului. Totuși, ele nu vor fi șterse din folder, ci doar din lista de fișiere folosite de către joc, adică ele nu vor fi incluse în folder-ul creat la final atunci când exportăm jocul.
Mai trebuie să compresăm fișierele cu ajutorul lui Caesium, dar, la fel ca și cum am menționat data trecută, procesul e ireversibil, așa că ar fi o idee bună să creăm o copie a fișierelor în caz că vom avea nevoie să le modificăm altă dată. Cea mai bună cale pentru a face asta este să mergem în GDevelop la meniul File și să dăm Save as... într-un folder nou, lucru util și pentru că acest folder nou va copia doar fișierele regăsite în Resources, omițându-le pe cele de care nu avem nevoie.
Putem apoi să tragem întreg folder-ul în Caesium și el va recunoaște care fișiere sunt imagini și le va putea compresa corespunzător.
Dacă vreți să faceți orice schimbări asupra titlului jocului sau descrierii lui, acum este momentul. Vom merge la pagina Home, vom da click pe Manage și apoi pe Edit details. (Dacă nu poți apăsa pe butonul Manage, trebuie să urmărești pașii din secțiunea Tabla de Scoruri al acestui episod.)
Aici puteți alege numele pe care îl va avea jocul, puteți schimba poza principală a jocului dacă vreți să desenați una pentru el, puteți scrie o descriere și puteți să alegeți niște setări precum Device Orientation ca Lanscape, deoarece jocul nostru este orizontal.
În partea de jos a paginii, vom găsi niște stări speciale necesare după ce publicăm jocul, așa că ne vom întoarce la ele mai târziu. Acum că jocul e gata să fie exportat, trebuie să fim logați la un cont GDevelop (așa că, dacă nu ați făcut-o deja, urmați pașii din secțiunea Tabla de Scoruri al acestui episod pentru a crea un cont) și apoi vom merge la File - Export (web, IOS, Android)...
Vom fi întâmpinați cu mai multe opțiuni de exportare: gd.games publică jocul direct în lista jocurilor de la GDevelop's, ajutându-ne ca jocul să fie descoperit mai ușor de alți jucători și creatori pe platforma GDevelop. Este și cea mai ușoară opțiune, pentru că necesită doar câteva click-uri pentru a obține un link care poate fi deschis pe orice device pentru a juca jocul, cum ar fi un calculator sau un telefon.
Dacă mai faceți ceva schimbări, puteți reveni la această pagină și să apăsați pe butonul Publish new version pentru a publica schimbările pe jocul deja încărcat, folosind același link.
Odată ce jocul e publicat pe gd.games, ar trebui să mergem înapoi la pagina Home și să dăm Edit details, pentru că acum putem schimba setarea Visibility în Visible in search and your profile, astfel deschizând accesul oricui să joace jocul nostru.
Mai avem și alte opțiuni de exportare precum Browser - HTML5 (external websites) care ne va lăsa să exportăm jocul într-un folder care poate fi încărcat pe un service de hosting, cum ar fi itch.io, Game Jolt, sau propriul vostru website dacă plătiți pentru unul, subiect pe care îl vom dezbate în episodul următor.
Mai puteți exporta ca Desktop - One-click packaging, ceea ce va crea un fișier de instalare pentru calculatoare care rulează Windows, Linux sau MacOS. Vei putea crea un export de acest fel o singură dată pe zi, deci, atunci când îl exporți, bifează toate căsuțele pentru sistemele de operare, chiar dacă nu știi dacă ai nevoie de ele sau nu, pentru că e mai bine să le ai în caz că ai nevoie.
Ultimul tip de export pe care îl putem folosi este Android - One-click packaging pentru că iOS - One-click packaging are nevoie să fim abonați la GDevelop Gold, precum și să plătim un abonament anual la Apple pentru a fi lăsați să publicăm aplicații pe App Store. Opțiunile manuale pentru toate platformele sunt gratuite, dar ele necesită mult efort și cunoștință de coding care sunt în afara scopului acestui serial.
Exportul pentru Anroid ne oferă un APK și un Android App Bundle, dar acel app bundle este doar pentru încărcarea aplicației pe Google Play Store și necesită o sumă mică de bani pentru a publica aplicații pe Google Play pe viață. Fișierul APK, pe de altă parte, poate fi distribuit oricăruia are un telefon Android pe care să îl instaleze, la fel ca și cu opțiunile pentru Windows și MacOS de mai devreme.
Și, cu asta, Bunicule, jocul e terminat!
Serios, Nepoate!? Am crezut că nu mai termini! Știi tu, ca și atunci când ai un vis foarte frumos și vrei să continui să dormi... încă cinci minute...
pthlptlhpt!
Yoohpey! Petrecerea jocului somnoros nesfârșit!
Când îți exersezi talentul, chiar se simte ca un vis, o petrecere nesfârșită! În finala acestei serii vom discuta despre publicarea jocului și alte lucruri importante legate de licențe și drepturi. Până atunci, continuați să vă folosiți talentele pentru a crea povești, personaje, animații și jocuri, și continuați să fiți YOOHPEY! Știu că eu așa voi face!
pthlptlhpt!
PETRECEREA YOOHPEY!
Now that we've got all of the pieces of the puzzle, we can start assembling them! Let's make our game!
Wait a second, Nephew! Since when are we making puzzles?! Weren't we working on 3D animations?
pthlptlhpt!
Yoohpey! 3D animated puzzle party!
Hold on, Grandpa! That was just a figure of speech. What I meant to say is that the time has come to open up GDevelop, where we will be able to put together all of the results of our work along the way.
GDevelop
In this program, we can make the game from scratch, just as I have done with Yoohpey World, or we can start from one of the free Templates offered. To do so, we will click on Create.
Then we will click on + Create new game and search in the list for Run Dino Run, the template we will be using to make our game. We can pick any of the games from the list, but this one doens't need many changes and the animations we've made so far match with what the game uses.
Hey, Nephew, wait a second. Who's that guy you got there on the screen? I think I know him... where did you get those photos of my pet from when I was in kindergarten?!
pthlptlhpt!
Yoohpey! Dino pet party!
In the next window, you can name your game and then choose to store the file on Your computer, after which you need to choose the path to the folder where you will find the files to your game.
We will click on the Close button on the pop up about leaderboards as we will not be making one yet.
We can now see the menu on the left, accessible from the 3 lines in the top left, that has buttons to open the properties of our game, its scenes or other specific settings, as well as the File menu at the top, which we will use for Save and Export. We can also save the project we are working on by clicking on the floppy disk save icon after we close the side menu on the left or by pressing the keys [CTRL] + [S] on the keyboard.
Nephew, you've got scenes now as well!? And here I was thinking we were making animations, then you said something about puzzles and I don't know what games, and now we're doing acting too? I thought we were done with acting. Now you really need a lot of talents, Nephew! That's why I'll go practice my snoring talent! Just a little bit, okay?
pthlptlhpt!
Yoohpey! Talented snoring game party!
We will be clicking on all of the names of the scenes before closing out of the menu, which will open some tabs at the top of the screens, each of the scenes having one for the visual representation of the scene and one for its events, which are the logic that happens behind the scenes.
pthlptlhpt!
Yoohpey! Behind the scenes snoring party!
In the visual scene tab, if we double click on any of the objects on the screen, it will open up the properties of that object, where we will be able to change the images used by that object, which will be useful for us in replacing the game's assets with the ones we made ourselves.
To move around the scene, you can click and drag the mouse wheel to pan and scroll in using the mouse wheel to zoom in. Now that we're familiar with the GDevelop interface, it's time to make the assets we are missing for the game. The game we are making will be centered around runing and jumping over obstacles, so we can use the hay bale we made previously as an obstacle and use the coin for the collectibles along the way.
Who, what? Wait, Nephew, that's not an obstacle! If I would find a hay bale, I would immediately rest on it and fall asleep!
pthlptlhpt!
Yoohpey! Sleeping obstacle party!
Game Background
That's a very good idea, Grandpa! We can make a sleeping animation for when the character touches a hay bale and the game ends. But, until then, we will start by creating the background for our game. First, let's open GIMP and make a new canvas at 960 x 540.
We will begin by drawing the sky, so we need to pick out two nice colours for our sky with the colour squares.
After that we will create a smooth gradient between them on our canvas by using the gradient tool, found by right clicking the Bucket Fill tool and selecting it from the drop down.
To make a gradient, we need to click and drag from the top of the screen to the bottom, holding down [CTRL] to make the line completely vertical. We can then press [ENTER] to confirm the gradient.
Next, we will create a new Layer for the clouds. When drawing, we should try to not touch the left and right edges with our clouds, as the background of the game will have to tile infinitely, so not making the clouds touch the edges right now will give us less to fix when we get to the tiling. We will then draw the clouds with white, filling the sky, and we can make them stand out a bit more by giving each one of them a gradient. To do that, we need to use the Fuzzy Selection tool.
We will then click on a cloud, after which we will go back to the gradient tool, making sure that we've selected some nice colours for the cloud's gradients. We can then drag over the cloud and make a gradient over it, process that we will repeat for each of the clouds we've drawn. To deselct the cloud we currently have selected, we need to use the key combination [CTRL] + [SHIFT] + [A].
Nephew, that sky is nice, but it would have been nicer if it was all filled with clouds! Or, even better, if it was night! That would make sleeping so much easier... not like I can't sleep in the day anyway.
pthlptlhpt!
Yoohpey! Day night sleeping party!
Next, we will make a new layer for the mountains, hiding the cloud layer from the eye icon so they are out of the way. We need to start with the horizon line, using the method of clicking outside of the canvas with our pencil and then holding [CTRL] and [SHIFT] to make a straight horizontal line.
We can then draw the mountains, again avoiding them from touching the horizontal edges of screen so they can properly loop, making the silhouettes of the mountains before filling them in with the Bucket Fill tool, which we can get back by right clicking the gradient tool.
Once we fill them with a solid colour, we can use the fuzzy select tool again to select the mountains and then we can apply a darker gradient to them to make them look like they are made of stone.
To make the grass on them, we need a new layer on which we can draw it. We will take the paint brush tool, right clicking the pencil to reach it, and pick a rougher brush from the ones on the right side of the screen, painting over the mountains with different shades of green.
Once we've drawn the grass on them, we need to restrict it to the area of the mountains, which we will do by going back to the mountains layer and selecting them with the Fuzzy Select tool, pressing [CTRL] + [I] to invert the selection and going back to the grass layer to press [DELETE], removing the grass drawn outside the area of the mountains.
To make the mountains more alive, we can bring in the trees we made in episode 14, making a Layer Group for them, duplicating and scaling the layers until we've put enough trees on the mountains.
Hey, Nephew, that looks a lot like the home of one of my friends! I wonder how Bigfoot's doing... I haven't called him in a while...
pthlptlhpt!
Yoohpey! Forest reunion party!
Now that the drawing itself is done, we need to make sure it can loop sideways when we run through the map. First, we need to put all of the layers we made into a Layer Group and drag it off to the left while holding [CTRL] to keep it horizontally centered.
We will then duplicate the group and move it off to the right, making sure it touches the left group exactly.
Because the new sides of the image were previously connected, they will certainly loop if we do not draw over them, meaning that now we just have to fix the centre of the image. To easily get the grass to fit, we can select a part of one of the layer groups where it is most dense using the Rectangle Select tool, copying it with [CTRL] + [C] and pasting it over the seam with [CTRL] + [V], moving it into place and then pressing the New Layer button to make the pasted selection into a layer.
All that is left to do to make the image seamless is to use the eraser, making sure Hard Edge is turned off, to smoothly erase the sides of the new layer, making the transition even.
To make the mountains look a bit further away and distinguish the foreground from the background better in-game, we can add a layer of fog and make a gradient on it. We only have to pick the first colour of the gradient, as we will set the gradient to mix our colour with transparency.
We can then make the gradient from bottom to top, making sure to hold down [CTRL] to make it vertical and avoid making a new seam.
Now, we can go to Save As... to save the file we have been working on and Export As... to get the .png file we will need to use in GDevelop.
Floor Tile
With the background of the game finished, we will also need a floor for our character to run on, for which we will make a new file by going to File - New, giving it the dimensions 64 x 64 and making a vertical gradient background by dragging while holding down [CTRL] just like the one for the mountains.
Next, we will make a new layer for the grass, following the same method with the paint brush to colour in the grass in different shades of green.
After which we will use the same trick to make it seamless by moving the layer off to the side, duplicating it and then moving it to fill the space.
We will merge down the duplicated layer by right clicking on it and selecting Merge Down onto the lower one and paint over the middle to cover the seam, again making sure we do not touch the edges to avoid creating a seam again.
pthlptlhpt!
Yoohpey! Neverending grass party!
Floating Island
In the game, there is also a floating island we need to jump on, which has an obstacle we need to duck under. We will create a new image with the resolution 128 x 66 and bring in the ground texture.
We'll then duplicate the layer and align them from one side of the canvas to the other.
We'll merge down the layers by right clicking and pressing Merge Down.
And then we'll bring in the hay bale to add to the bottom of the image, for which we will first go up to Layer - Transform - Rotate 90° clockwise to rotate horizontally.
Nephew, how do the hay bales stay under the floating platform? Or, even better, how is the island floating? So many questions... they make me so sleepy...
pthlptlhpt!
Yoohpey! Mystery island party!
We will then scale down the layer using the Scale tool and duplicate the hay bale layer a few times to fill up the bottom area. We can even flip some of the hay bales to add some randomness by going to Layer - Transform - Flip Horizontally and Layer - Transform - Flip Vertically.
To make the platform look better, we can bevel the corners by using the Rectangle Select tool and turning on Rounded Corners.
By making a selection over the area of the grass tiles, going down to their layer and pressing [CTRL] + [I] to invert the selection, we can then press [DELETE] and make the corners smooth.
We can also cut out corners from the bottom to make the hay stick out.
And then we can round out the new sharp corners by selecting the inside of the shape we want to keep.
Then, while holding [SHIFT], we will make another selection over everything else to preserve it, then press [CTRL] + [I] and [DELETE] to get rid of just the corners, process that we will repeat for the other corners that are left.
Sleeping Animation
Now that we have our obstacles, we can also make the sleeping animation for our character!
Finally it's time to sleep! I can't wait to play your game, I mean our game, Nephew, so the character can sleep while I do the same!
pthlptlhpt!
Yoohpey! Everybody sleeping party!
First, we should edit the face of our character in GIMP to change its expression to a sleeping one.
Then, we need to open the walking animation in Blender and select the character, after which we go to the Material tab in the Properties Editor.
There, we will pick out the face material by clicking on it and, under the Surface tab, we will expand the Base Color to reveal the image properties. By clicking on the folder icon, we will change the image to the new drawing of the sleeping face by searching for it in the folder we saved it to.
We can also enhance the sleeping animation by adding the classic zZ sleeping effect. To do that we need to go to Add - Text and move it up using the move and rotate tools to bring it above our character and to face the camera.
In the Data tab of the Properties Editor we will find the Font section where we can click on the folder button to load the font created in the previous episode.
And to change the text we need to hover our mouse in the 3D Editor and press [TAB], which will allow us to type text with the keyboard like normal, so we can write "z", after which we ill press [TAB] again, returning to normal.
To change the colour of the text, we need to go to the Material tab and add a new material to the text. We then need to click on the Surface field where it says Principled BSDF and look for Emission which will make the text a solid colour, independent of the scene's lighting. From there, the Color field can be adjusted as you wish.
We can now duplicate the text object by pressing [SHIFT] + [D] and then right clicking with the mouse before positioning it with the tools and changing the letter from a lowercase "z" to a captial "Z".
Before we are finished with the animation, we need to limit the frames to half of the initial animation, which for us is frame 12. That way, the character will only go down and not come back up to the initial position. We can then proceed to Save As... to a new file, making sure we don't override the original file, then render the animation.
Now that's some good sleep, Nephew! I can confirm that as an expert sleeper. The character falls asleep instantly! I taught it well!
pthlptlhpt!
Yoohpey! Instant comfy sleep party!
Game Tutorial Drawings
In the assets folder of our game, there will be some tutorial images that appear in game, which we need to edit. First, we will open the images in GIMP and delete the dinosaur in the images by either using the eraser tool or selecting it using the Rectangle Select tool and then pressing [DELETE].
pthlptlhpt!
Yoohpey! Deletosaur party!
We need to then replace the dinosaur with our character, bringing the appropriate frames for the actions portrayed in the tutorial.
To make it easier for the drawings with the tapping finger, we can save the first one and drag into the second, deleting the left side of the original image to get rid of the dinosaur and drawing while deleting the right side of the drawing we bring in to keep only the different image of the tapping finger.
Game Menu
The last thing we need before putting all of our assets into the game is a menu window, for which we will make a new image in GIMP of the dimensions 192 x 192. We will bring in the grass tile we made before.
And then we will duplicate it two times, aligning them along the top of the image from edge to edge.
We will then merge the layers together and create a new one below it to fill with a gradient.
Then, we will make a selection with rounded corners and press [CTRL] + [I], then [DELETE] on both of the layers to get rid of all the corners.
We can now save this last asset and it is time for to put them all into our game!
Nephew, are you sure there is nothing else we need to do before getting to make the game? Not that there would be a problem with that, just making sure...
pthlptlhpt!
Yoohpey! Unlimited games party without games!
Putting Assets into the Game
The first step to making our assets usable within the game is to copy them into the assets folder. This is a step that GDevelop will do automatically if we do not do it ourselves, but doing it manually gives us the opportunity to put the files into neat folders, such that we can make more sense of them when looking through the files, which is not easily possible if GDevelop does it on its own. For example, it would be wise to keep the player animations in a folder named Player with a separate subfolder for each animation: Walk, Sleep, Jump and Duck.
With our files in the game folder, we can now start replacing the game assets. If we go into the Game scene and double click on the background we will see a Replace button which will give us the option File from your device. From here, we just need to select the image of the background we have created in the folder, then click on Apply in the bottom right of the window to see our changes.
The original background was bigger than the game window, so to make it fit the window we need to make sure it is selected by clicking on it once and then dragging down from the scaling squares around the sides of the image to fit it into the frame that represents the game window.
We also need to do this in the Intro and Leaderboard scenes as only the image updates automatically, not the size of the object.
In the Intro scene, you will not be able to see the handles for resizing the object, and that is because on the left under Properties there is a lock that is turned on. Clicking the lock once will prevent selection of the object altogether, which is not what we want, and pressing it one more time will unlock the object, turning the selection from orange to blue and showing us the handles to resize it.
We will also update the floor tiles in the same way.
And, again, we need to fix the positioning in all three scenes.
Other objects that do not tile (repeat infinitely based on the size of the object) have a slightly different process that must be followed. If we take the cactus obstacle to turn it into the hay bale, we will see there is no replace button, only + Add a sprite. That is because sprites are capable of being animated, sharing the same interface even if they are not, since they only display one frame of the animation. What we need to do is click on + Add a sprite and bring in our hay bale.
Then we will click on the check box of the cactus image and right click on it, then select Delete selection. We can then click Apply to confirm the changes.
That's a good change, Nephew! Hay bales are much better for sleeping than cacti. Even hay is sometimes prickly, but cacti are just pricks! Those are for waking up while we want to sleep. So, long live the hay, even though hay is dead grass... details.
pthlptlhpt!
Yoohpey! No hurty sleeping party!
When we do the same for the BonusObject, which is our coin, we can choose more than one image at a time in the folder after pressing on + Add a sprite, making it easier for us to select everything if we organised them properly. We can then do the same to remove the original image for the bonus object.
The coin also glows in the game, so before applying the changes, we need to go to Effects at the top where we can see the glow colour set to blue. We can click on the coloured rectangle to change it with the colour picker, setting it to yellow and then clicking on Apply.
A faster method to change individual sprite images is to go into the folder and simply swap out a file with another one of the same name. We can do that with the floating island sprite, copying and naming our drawing as both Duck_Island.png and Duck_Island2.png. Just in case you will need the original files later, it is wise to copy them to another folder outside the project folder or rename the originals to something different, so you don't permanently lose them.
We can also use the same method to change the font, simply swapping out the file in the folder with our one, but I will show you how to do it the normal way through GDevelop to get more familiar with the different interfaces. On the Intro page, if we double click the RUN DINO RUN text, it will open the text object properties, where we can see the Initial text to display box, allowing us to change the title on the screen. Above it is the font file used, once again having a Replace button available to allow us to pick our one from the folder by selecting File from your device.
Above the font field there are also some settings for the text like its size, colour, bold/italic and alignment. We can change the colour to something more fitting and turn off italic to avoid letters clipping outside of the text box.
What are you talking about, Nephew? You like my italian spaghetti? I thought you said it was too bold and it tastes like hay! Maybe they really were hay... but whatever. Details.
pthlptlhpt!
Yoohpey! Spaghetti hay party!
In the Game tab we need to change the font and colour of the score text in the top left of the screen.
And, if you try to change the text in the Leaderboard tab, you will notice that the text is not a separate object to the background behind it. That is because to edit the object group we need to right click on it and click on Edit Children.
Nephew, I didn't know objects could have children! Good to know, good to know...
pthlptlhpt!
Yoohpey! Object children party!
This will open up a new tab that behaves like the other scenes, where we can individually change each of the text boxes of the buttons.
If you replace the image for the background of this window, you will notice some lines in it. That is because the tiling repeats the small texture, making seams where the gradient starts from the beginning.
One solution you can try when this happens is to double click on the object and uncheck the Repeat borders and center textures (instead of stretching them). You will see the repeating gradient has been fixed, at the cost of distortion in the grass at the top, it too having been stretched.
The solution in this situation is to keep the repeat option enabled and edit the image we made by opening it back in GIMP.
So, Nephew, wait. You're telling me that you made us follow your tutorial to learn how to make a mistake?!
pthlptlhpt!
Yoohpey! Mistake tutorial party!
Well, Grandpa, where would the fun be if I told you what would happen from the beginning? I could've told you exactly how to do it, but you wouldn't have known the reason ahead of time. When you work on something, it is inevitable that you are going to do something and need to fix it later, which is why I want to show how to fix something as well.
pthlptlhpt!
Yoohpey! Intentionally fixing mistake party!
To make the image the right size, we need to go to Image - Canvas Size... and then change the height to 320. The reason we are doing this is because, despite making our drawing the size of the original image, it didn't have any gradient to cause this issue, so we need to make the drawing the size of the object in GDevelop, which we can see in the Properties panel on the left.
Then, we need to create a new layer and select the area we want to fill, avoiding the grass at the top, and filling it with a new gradient.
Then, we just need to remove the corners again and save the image, replacing the one in game to see that it now renders without issue.
Character Animations
When we change the animations for the player character, we will import the antimations just like we did with the coin, removing the frames of the dino by selecting the check boxes one by one and then deleting them by right clicking and selecting the option to delete them.
For the idle animation, we can just use the first frame of the walking animation, since it is not one that the player will actually see. There are also timings for the animations which we need to adjust. For the number of frames we have, some good timings would be: Run - 0.02, Jump - 0.02, Duck - 0.03, Dead - 0.03.
If you now preview the game by clicking on the Preview button, you may notice some issues with the character: the first and most obvious one may be that the character is not centered correctly.
Nephew, is this another one of your tests? You already knew this ahead of time and could've told us so we don't have to render it again! But, if I think about it, I won't complain, because it means I get to sleep some more while it renders!
This time, Grandpa, making a fix will actually use a different method than what you would normally do, because Blender has a special feature dedicated to these kinds of situations.
pthlptlhpt!
Yoohpey! Blender fix render party!
If we go back into Blender, select the Camera and then go to the Object Data tab in the Properties Editor, under Transform we will find Delta Transform.
This set of transform values is useful for making changes like this one where we want an already created animation to be changed, without having to modify the keyframes of the original transform. Our camera does not have any keyframes, but it is still useful to use the Delta Transform now so we can easily apply the same value to all of the animations, before saving and rendering them again and placing the files of the output over the ones in the game folder, overwriting them.
You know what, Nephew, you're right. If it wasn't for your intentional mistake, I wouldn't have known about this Delta thing! Now that I know about it, I can sleep peacefully.
pthlptlhpt!
Yoohpey! Sleeping Delta party!
Another issue we will notice in the game is that the dust particles of the dino don't match properly, as the ground is now a different colour and our character moves differently.
To change the colour, we need to double click on the DustParticles object on the right and then change the Particles start color and Particles end color to one that is more suitable, in my case: green.
We also need to do this for the BonusParticle object, matching the colour to that of our yellow coins.
After hitting Apply, we will now also fix their location by first going to the Game (Events) tab, where we need to change any events relating to the position of DustParticles. We can remove the action, found on the right side of an event, under the blue Controls section by clicking on it and pressing the [DELETE] key:
A few events lower there is another action we will remove:
Then, under the Dino Movements section, we will right click on the first event and go to Add - New Event Below. Adding a new event without any conditions on the left will make the actions on the right repeat indefinitely, which is what we want: make the dust particle always follow the player's particle point.
We can then hold left click to drag the following action from the event with conditions into the new event we created:
That was just like in the movies, Nephew! I feel like one of those hackers that are doing hacking things, even though I don't know what I'm doing!
pthlptlhpt!
Yoohpey! Helpful hacking party!
Now that the particles follow the point on our character, we need to know how to adjust the point. That way, we can create the same effect as with the dino, to emit particles behind the character when it is running and in front of it when we are ducking. To do that, we will go back to the Game tab and double click the character, then click on Edit points.
We only want to change the point for the ducking animation, so we will uncheck the Share same points for all animations option.
Then, we will select Animation #3 Duck, after which we can change the position of the DustProjection point, either by modifying the values or moving the point visible at the bottom left of the character.
Game Front Page
We're very close to finishing up our game! We still need to polish the front page of the game, starting by removing unnecessary assets that belong to the original template. To remove them, we can click on the ones visible in the scene and press the [DELETE] key, but that will only remove the instances of the objects and not the objects themselves. Removing the objects themselves can be done from the Objects panel on the right, where the objects we want to delete may be found in the folders. We need to right click on the objects and press Delete, confirming the choice in the window that opens up.
We will keep the signs, as they are the buttons used to start the game. You can, however, draw and change the images out for them too if you would like. For the two start signs at the bottom, you can remove the smaller one by first moving the bigger one out of the way, allowing you to select it.
You can also rotate the sign to be upright by selecting it and changing the value under Rotation in the left Properties panel to 0.
We can decorate the title by using the coins from the game, which we can copy from the Game scene. We can do that by right clicking BonusObject or pressing the three dots next to it and selecting Copy.
Then, we can paste it into the Intro scene by right clicking on another object or clicking on any three dots under the Scene Objects and selecting Paste BonusObject.
With the object copied into the scene, we can now instance it by dragging it in from the side into the scene.
You will notice that we cannot really align them with much precision, and that is because of the grid snapping. To turn off the grid snapping, we need to go to the top right and click on the grid icon, then uncheck Show grid.
Now, we can drag the objects wherever we want, allowing us to center the title with the coins and properly put the scores button on the platform.
pthlptlhpt!
Yoohpey! Coins everywhere party!
There is one more thing we can do to make the title screen, and that is to add more objects like the ones we initially removed! We can create a new object by pressing the + Add a new object button in the bottom right and choosing a Sprite from the menu.
Importing images is the same as for the coin and character, pressing the + Import images button and selecting them from the game folder.
I've populated my title screen with the trees made for the background, some hay bales, and the ending frame of our character's sleeping animation!
I really like this title screen, Nephew! That is exactly what I would do if I had a hay bale in a nice field with trees, lay down and sleep on it!
pthlptlhpt!
Yoohpey! Natural hay bales party!
There is one thing left to do for the front page, and that is remove a shaking animation for the platform to avoid the sign on top of it from displaying weirdly. We need to double click on the platform and go to Behaviors, left click on the three dots of SineMovement and press Delete, then Apply.
Music
And, with that, we've reached the point where we need to use our music. The easiest way to do this is by replacing the files directly in the folder, of which there are six: 2 songs and 4 sound effects. The song DesertMusic.mp3 is the one that plays during the game, so I will be using the song without lyrics for it, and the song LeaderboardMusic.mp3 is the title screen music, so I will use the song with lyrics to replace it. The sound effects jump.mp3, skid.mp3, bonus.mp3 and death.mp3 can be switched out for ones you recorded or downloaded, but for this episode I will leave them as they are.
Nephew, where is the snoring sound effect? I can make so many sound effects for you, I'm like a licensed snoring actor!
pthlptlhtpt!
Yoohpey! Hollywood snoring party!
Still, there's a bit more to do when it comes to properly setting up the music in GDevelop. Even if we made it loop perfectly in Audacity, when we'll play the game we'll still hear a gap due to the way GDevelop plays our audio, but we can fix it. First, we'll be changing the event that play music to play sounds instead: the difference is between the way GDevelop loads audio into the game, the Play Music event being an old version that has been functionally replaced by the Play Sound event, so we should do the same, changing the events in all three scenes by double clicking on the action's text and choosing Play a sound on the left. It is worth noting that sound events don't always trigger when you run the game in a browser unless the player clicks into the window first, which could make the start screen music not play as expected. It is a known limitation because of browsers and the only thing that you can do is make a button to play the music by copying it from the Leaderboard, changing the event from At the beginning at the scene to a button press so that the player knows they have to click something to get the music playing.
This alone does not fix the entire issue, though it makes things better, but the game still loads the song every time it starts, causing a short delay at the end of the song. What we need to do is add a Preload event to make sure the audio is already loaded by the time it is played, ensuring that there is no break. All three of the scenes have an event with an At the beginning of the scene event where we will click Add action, choose Preload a sound file and then drag it to the top of the event to ensure it happens first.
The last thing we can do is to change the volume of the music in all three of the scenes, setting it to 50 instead of having different values.
That's much better, Nephew! Now your song is like a neverending lullaby... I can sleep without interruptions!
pthlptlhtpt!
Yoohpey! Unlimited sleeping party!
Leaderboard
This step is optional, as it requires a GDevelop account, but you will also need this account to easily export your game to any platform other than a browser, like Windows, MacOS, Linux or Android for free. To make an account, you need to go to the Home tab and press on Sign up, then enter your details on the right or use on of the quick sign in methods on the left.
Nephew, you didn't ask me for permission to make that account!
Fine, Grandpa, will you please let me make a GDevelop account?
Yes! Of course! Why did you even ask me?
pthlptlhpt!
Yoohpey! Unquestioning question party!
We will then have our list of projects where our game is displayed, but if you click on Manage and get an error like this one then there are some steps you need to follow:
Before continuing, it would be a good idea to save your project, if you haven't already been doing so, which you should...
pthlptlhpt!
Yoohpey! Saving party every day!
Now that you are logged in, you need to create a new, empty game by clicking on + Create new game and then on + Empty project. The only thing that matters is that you name the final name you want it to be called, even though you can still change it later before publishing.
The reason we are doing this is because the leaderboard uses GDevelop's servers and are related to the projects linked to your account. We created a new game so that we can generate a new ID for the game which will help us get rid of the error. To see this new ID, first close GDevelop, then go into the new project folder and right click the file that ends in .json, then go to Open with and choose Notepad (if you can't see it in the list, you'll need to click on Choose another app to see a longer list), where we'll look for "projectUuid": and copy the long code in the quotes.
You then need to go into the folder of your actual game and open the .json, where you will be replacing the projectUuid with the one you copied.
You then need to go to File - Save or press [CTRL] + [S] and close the file. You can even delete the empty project folder, as we do not need it anymore.
We will then go back into GDevelop and open your project from File - Open and the new project will be in the Home tab. By pressing Manage it will actually open up a page instead of giving an error. If at the bottom of the page, under the Projects heading you have two of them, then it means you have done the fix correctly.
You know, Nephew, every time you tell me that we need to change something we've already done, you make me feel... like I'm just a character in a story...
pthlptlhpt!
Yoohpey! Tutorial acting party!
Now that the game is registered correctly, we can start actually making our leaderboard. To do so, we will first press on the See more -> button next to the text Game leaderboards.
In this new page, we will click on + Create a leaderboard.
To change the name, click on the pencil icon next to the New leaderboard name.
You should also change the sort order to Higher is better.
Then, click on the Set as default button.
With that, the settings for the leaderboard are finished, but we still need to implement it into the game. We need to copy the ID of the leaderboard, that is the second item in the list of settings, by clicking on the copy button to the right of it.
With it copied, we will go to the Intro (Events) tab and paste the code inside the quotes of the Display leaderboard action. We could also select it from a drop down list by pressing on the down arrow and choosing Select the leaderboard from a list.
Next, we will go to the Leaderboard tab, double click on the dialog box and paste the code into the Leaderboard field, then press Apply.
If you were to check the game now, you could actually submit your scores to the leaderboard and open it up from the front page of the game. However, the button to open up the leaderboard on the submission screen isn't linked up, so we will have to do it ourselves. We need to click on the three lines in the top left and then click on the LeaderboardDialog under Extensions to open up its tab.
On the left, you need to click on the + next to LeaderboardDialog under Objects.
Which will prompt you to choose what type of function you would like to add. We will need a condition.
I named it IsScoreClicked to match the other conditions IsRestartClicked and IsScoreSubmitted, but you can name it whatever you want.
In the middle of the screen is an event sheet, which already has an event created for which we need to Add condition.
The one we need is ScoresButton - Is clicked and then we will press on Ok. This condition allows us to take an action outside of the event sheet of the dialog box, which is what we will need to do to open up the leaderboard when the button is pressed.
On the right, we also need to create a "sentence" for the event, which is the text that will appear when we use the condition in other places. It needs to include _PARAM0_ because that is the variable we get to change in the sentence when it gets used in an event. The sentence doesn't require anything other than parameters, but it is good to type out something that makes it easy to understand what it does, like Score button of _PARAM0_ is clicked.
Now we need to go to the Leaderboard (Events) scene and create a new event by pressing Add a new event at the bottom of the sheet.
To add the new condition, we will click on Add condition, then on the LeaderboardDialog object inside the UI folder and look for the IsScoreClicked condition that we just made.
After pressing Ok, we also need to Add action, where we will pick Display Leaderboard under Other actions, pick Yes and then press Ok.
We will need to choose the name of the leaderboard from the drop down list, and now we can finally test if the leaderboard works properly by playing our game a few times and submitting a few scores! It is important to note that when you run a preview, the game takes a screenshot of the first frame of the game to use as a thumbnail for the game, so you should start your preview from the Intro scene as that is the title screen of the game.
If you go back to the Home tab and check back on the leaderboard, you should see the scores you submitted. As the creator of the game, you are also capable of deleting any entries if they are inappropriate.
That's amazing, Nephew! You're telling me I don't just sleep in this game, but I can compete and be the best at sleeping ever?! This is already my favourite game, Nephew!
pthlptlhpt!
Yoohpey! Sleeping championship party!
Exporting
If you haven't done so already, click the save button in the top left, because we're just about done! It's time to prepare the game for exporting and we will start by cleaning up the resources of the game. To do that, we need to go to the three lines in the top left and click on Resources, which will open a new tab to show us all the files our game is using.
By right clicking on any of the items from the list on the right, we will be able to go to Remove unused... - Resources (any kind) which will remove images from the project that are no longer used, like the original file for the cactus or tree. Note that this will not remove the files from the folder, it only removes them from the game's asset list, which means that they will not be in the final folder that we will create when exporting.
We also need to compress the files in the folder with Caesium, but, just like we mentioned before, the process is irreversible, so it is best to create a copy of your files in case you will need to edit them again. The best way to do this is by going to the File menu in the top left and choosing to Save as... into a new folder, which is also handy because the new folder will not contain any of the files that aren't also specified in the game's Resources.
We can then simply drag the entire game folder into Caesium and it will be able to recognise which files are images and compresses them accordingly.
If you want to make any changes to the title or description of the game before you publish it, now is the time. Go to the Home tab, click on Manage and then Edit details. (If you cannot press on the Manage button, you need to follow the steps in the Leaderboard section of this episode.)
Here, you can choose the name your game will display with, change the thumbnail if you have drawn one yourself, write a description and choose settings like the Device Orientation as Lanscape for a horizontal game like ours.
Towards the bottom of the page, there are some settings specifically for after we publish the game, so we will come back to those later. Now that the game is ready to be exported, we need to be logged in to a GDevelop account (so, if you haven't already, follow the steps in the Leaderboard section to create one) and then go to File - Export (web, IOS, Android)...
We will be met with several export options: gd.games exports your game directly to GDevelop's own game library, allowing your game to easily be discovered by other GDevelop enjoyers. It is also the easiest option as it only requires a few clicks before you receive a link that can be opened on any device to play it, like a computer or a phone.
If you make any changes, you can come back to this page and use the button to Publish new version, updating the game already published on the same link.
Once the game is published on gd.games, we should go back to the previous page in the Home tab and Edit details, so we can set the game's Visibility to Visible in search and your profile, unlocking the game so anyone can reach and play it.
There are other export options like Browser - HTML5 (external websites) which allow us to export the game to a folder on our computer that can then be uploaded to a hosting service like itch.io, Game Jolt, or one of your own if you pay for a website, which we will talk about more in the next episode.
You can export to Desktop - One-click packaging to create installation files for computers like Windows, Linux or MacOS. You can only create these exports for free once per day, so when you do export it you should check all of the boxes for the operating systems even if you're not sure that you need them, because it is better to have them in case you do.
The last export type we can do is Android - One-click packaging as iOS - One-click packaging requires you to be a GDevelop Gold subscriber as well as pay a yearly subscription to Apple to allow you to publish on the App Store. The manual options for all platforms are free, but they require a lot of effort and coding knowledge which is beyond the purpose of this series.
The Android export offers an APK and an Android App Bundle, but the app bundle is only for uploading your app to the Google Play Store and costs a small lifetime fee to be able to publish games on there. The APK, on the other hand, can be distributed to anyone with an Android phone to install on, just like the Windows and MacOS options before.
And, with that, Grandpa, the game is finished!
Really, Nephew!? I thought you would never finish! You know, like when you have a really nice dream and you want to keep on sleeping... just five more minutes...
pthlptlhpt!
Yoohpey! Neverending game sleep party!
When you excercise your talent, it really feels like a dream, a neverending party! In the finale of the series, we will discuss about the publishing of the game and other important things to note related to assets and licensing. Until then, keep enjoying using your talents to create stories, characters, animations and games, and keep on being YOOHPEY! I know I will!
pthlptlhpt!
YOOHPEY PARTY!
Introducerea accizelor pe vin, o mare problemă. Semnal de alarmă
SCANDAL – Bătaie în Baia Mare. O tânără a ajuns la spital
SKANDENBERG – Olimpiu Făt, locul 1 la un concurs în Luxemburg
CIFRE: 97 de unități școlare din județ nu au sisteme de securitate
CONCURS – ISU Maramureș, la Competiția Națională de Descarcerare și de Acordare a Primului Ajutor Calificat
Vezi ce efecte negative au antibioticele si paracetamolul
Destinatii de vacanta: Creta – Cele mai frumoase locuri de pe Insula lui Zeus
SPITALUL MUNICIPAL SIGHETU MARMAȚIEI – Programări online pentru consultații
Telefonul de 200 lei preferat de interlopi şi urât de poliţişti. Şi Cherecheș îl avea la el când a fugit
Apa structurata, apa energizata, apa vie: Invata acum pasii necesari ca sa te simti mai sanatos si mai energic in 30 de zile!
ÎNOT MASTERS – Băimăreanul Ioan Ștefan Gherghel, campion european la 100 m fluture
CM ÎNOT – David Popovici, nou record mondial de juniori la 200 m liber
SCHIMBĂRI ÎN EDUCAȚIE – Fără teze obligatorii și medii semestriale
VIDEO – Băimăreanul Lucas Tohătan (BC CSU Sibiu), decisiv în victoria cu „U” BT Cluj
R. STAUDER (prefect Maramureș) – „Împreună cu structurile MAI monitorizăm activitățile care implică siguranța cetățenilor veniți din țara vecină” (VIDEO)
- Fără categorie14 ani in urma
Vezi ce efecte negative au antibioticele si paracetamolul
- Uncategorized12 ani in urma
Destinatii de vacanta: Creta – Cele mai frumoase locuri de pe Insula lui Zeus
SANATATE3 ani in urmaSPITALUL MUNICIPAL SIGHETU MARMAȚIEI – Programări online pentru consultații
ACTUALITATE2 ani in urmaTelefonul de 200 lei preferat de interlopi şi urât de poliţişti. Şi Cherecheș îl avea la el când a fugit
- Fără categorie15 ani in urma
Apa structurata, apa energizata, apa vie: Invata acum pasii necesari ca sa te simti mai sanatos si mai energic in 30 de zile!
SPORT3 ani in urmaÎNOT MASTERS – Băimăreanul Ioan Ștefan Gherghel, campion european la 100 m fluture
ACTUALITATE3 ani in urmaSCHIMBĂRI ÎN EDUCAȚIE – Fără teze obligatorii și medii semestriale
SPORT3 ani in urmaCM ÎNOT – David Popovici, nou record mondial de juniori la 200 m liber
