Cum faci un joc dintr-un șablon: un drum pentru începători în 7 pași

Cel mai rapid mod de a face un joc ca începător este să pornești de la unul gata. Alegi un șablon de joc, îi joci demo-ul, citești manualul, apoi schimbi textele, grafica și nivelurile câte un fișier pe rând, testând după fiecare schimbare, până când jocul devine al tău. După aceea găzduiești folderul jocului pe un site sau îl împachetezi ca aplicație. Nu trebuie să înveți mai întâi un motor și nu ai pagină goală.

Acest ghid urmează drumul acesta în șapte pași, cu nume reale de fișiere din paginile de articol și manualele șabloanelor noastre, ca să vezi cum arată „schimbă nivelurile” înainte să cumperi ceva. Este scris pentru oameni care n-au publicat niciodată un joc: un profesor, un specialist în marketing, un dezvoltator web care încearcă jocuri pentru prima dată. Acolo unde un pas cere Node.js sau un editor de cod, o spunem.

Cum faci un joc dintr-un șablon: cei șapte pași

1. Alege un șablon apropiat de jocul pe care îl vrei.
2. Joacă demo-ul până cunoști fiecare ecran.
3. Citește manualul și găsește fișierele pe care le numește.
4. Schimbă textele și limbile.
5. Schimbă grafica și brandul.
6. Schimbă nivelurile, cuvintele sau regulile.
7. Testează, apoi găzduiește jocul sau împachetează-l ca aplicație.

Ordinea contează. Textele sunt cea mai sigură schimbare, deci începi cu ele și înveți cum funcționează fișierele. Regulile vin ultimele, pentru că pot strica un joc în moduri care durează până le observi.

Răsfoiește șabloanele de jocuri de la care poți porni

Pasul 1: alege un șablon apropiat de ideea ta

Un șablon economisește timp doar dacă păstrezi cea mai mare parte din el. Dacă vrei un joc cu cuvinte, pornește de la un joc cu cuvinte; transformarea unui joc de fotbal într-un chestionar este o rescriere, nu o treabă de șablon. Trei întrebări îngustează alegerea.

• Ce face jucătorul? Atinge perechi, trasează cuvinte, ține la țintă, sortează piese. Alege șablonul a cărui acțiune principală se potrivește.
• Cum vei schimba jocul? Unele ediții primesc majoritatea schimbărilor într-un singur fișier de setări; altele sunt proiecte TypeScript pe care le reconstruiești. Pagina articolului spune care.
• Unde va rula? Fiecare ediție de-a noastră rulează de pe un site static. Aplicațiile native și publicarea în magazine nu sunt incluse în nicio ediție.

Prețurile din magazinul nostru merg de la 5 USD la 59 USD la prețul de listă, iar fiecare pagină de articol are un demo live și o listă intitulată „Not included in this edition” (neinclus în această ediție). Citește lista aceasta la fel de atent ca funcțiile.

Pasul 2: joacă demo-ul ca un tester

Joacă demo-ul o jumătate de oră, nu două minute. Deschide fiecare meniu, termină un nivel, pierde unul, schimbă limba, reîncarcă pagina și verifică dacă progresul tău este încă acolo. Fă o listă cu fiecare ecran și fiecare text pe care îl vezi. Lista aceasta este harta ta pentru pașii următori: fiecare element de pe ea trăiește undeva în fișiere.

Joacă-l și pe telefon. Dacă jucătorii tăi vor folosi telefoane, demo-ul pe telefon este testul real al șablonului, nu demo-ul de pe laptop.

Încearcă demo-ul Tenguin, un puzzle cu perechi de numere

Pasul 3: deschide pachetul și citește manualul

Un șablon este un folder, nu un program pe care îl instalezi. În pachetele noastre găsești aceleași părți, descrise pe fiecare pagină de articol:

• game/: jocul gata de găzduit, cu index.html, grafică, audio și fonturi. Asta se urcă online.
• Sursa: codul citibil pe care îl editezi. În unele ediții, cum ar fi Ricopop, fișierele din game/ sunt chiar sursa, fără pas de construire. În altele, cum ar fi Gridspark, există un folder de sursă separat pe care îl reconstruiești în game/.
• Documentația: un manual ilustrat. Manualul lui Gridspark acoperă instalarea, personalizarea, 20 de întrebări frecvente și depanarea; Ricopop și Zabum includ și un START-HERE.txt.
• THIRD-PARTY-LICENSES: notificările pentru fonturi și biblioteci. Termenii noștri cer să le păstrezi împreună cu produsul tău.

Citește capitolele despre instalare și personalizare din manual înainte să atingi ceva. Ele numesc fișierele, iar fiecare schimbare de mai jos începe cu unul dintre aceste nume.

Pasul 4: schimbă întâi textele și limbile

Textele te învață structura fișierelor cu puțin risc. Exemple reale din paginile noastre de articol:

• Gridspark: textul interfeței trăiește în src/locales.js.
• Pinloop, Trimora și Twirldrop: textul interfeței este în i18n.ts, iar brand.ts ține numele jocului.
• Bodoku: textul se află în dicționarele din src/i18n, iar pagina te avertizează să păstrezi neatinși substituenții de interpolare.
• Golazo: textele sunt în dicționarele de limbă, iar echipele în teams.js.

Substituenții sunt capcana. O linie precum „Level {n} complete” cere ca {n} să rămână exact așa cum este, în fiecare limbă. Schimbă cuvintele din jurul lui, niciodată parantezele.

Limbile fac parte din alegere. Majoritatea ediților noastre au 14 limbi de interfață; Letter River, Plop și Zabum au 3. Eliminarea unei limbi este mai ușoară decât adăugarea uneia, iar adăugarea înseamnă să traduci fiecare rând, nu doar meniul.

Pasul 5: schimbă grafica și brandul

Licența permite white label: poți înlocui numele și logo-ul Polar Games cu ale tale și poți schimba codul, grafica și audio-ul din produsul tău. Cum faci asta depinde de ediție.

• Tenguin: majoritatea setărilor trăiesc într-un singur fișier, tenguin.config.js, lângă index.html: titlu, calea logo-ului, culoarea accent, limba implicită, recompensele și prețurile. Modifici o valoare, încarci fișierul, reîncarci. Fără reconstruire.
• Bodoku și Frogdoku: grafica este declarată în src/art/manifest.ts.
• Pinloop: brand.ts ține titlul, culorile, cele 30 de ținte și cele 12 fundaluri; sunetul și muzica stau în public/audio.
• Ricopop: muzica și efectele sunt fișiere MP3 pe care le poți înlocui, iar ricopop.config.js controlează ecranul de pornire la atingere și butonul de ecran complet.

Păstrează aceeași dimensiune și același format de imagine ca fișierul pe care îl înlocuiești. Un logo de două ori mai lat decât originalul va împinge meniul în moduri la care codul nu se aștepta.

Vezi Pinloop și fișierul lui brand.ts

Pasul 6: schimbă nivelurile, cuvintele sau regulile

Aici jocul tău încetează să mai arate ca fotocopia altora. Tot aici uneltele de testare ajută cel mai mult.

• Ricopop: cele 50 de niveluri sunt hărți de text în src/levels.js. Unealta opțională node tools/validate.mjs verifică dacă fiecare nivel poate fi încă câștigat după ce editezi o hartă.
• Letter River: cuvintele și indiciile sunt în source/words/en.js, pt.js și es.js, iar generarea puzzle-urilor este în source/js/levels.js. node test/check.js validează listele de cuvinte și cele 80 de niveluri pe limbă.
• Deepforge: camerele, alegerile, echilibrarea și textul sunt în source/src/data/chambers.ts.
• Gridspark: constantele regulilor și paleta de culori sunt în src/config.js, iar regulile puzzle-ului în game.js, board.js, generator.js și shapes.js.

Regulile sunt cea mai riscantă schimbare. Mută câte un număr pe rând, joacă trei runde, apoi treci la următorul. Dacă jocul pare greșit, întoarce-te la copia „original” și compară.

Vezi Letter River, un puzzle de cuvinte cu liste de cuvinte editabile

Pasul 7: testează, apoi găzduiește sau împachetează

Testează pe un server local, nu dând dublu clic

Mai multe pagini ale articolelor noastre spun limpede că jocul nu rulează din file://, adresa pe care o obții dând dublu clic pe index.html. Testează printr-un server web local: multe editoare de cod au unul, iar uneltele opționale pentru dezvoltatori ale lui Ricopop includ unul. Edițiile scrise în TypeScript au nevoie de Node.js pentru reconstruire: Gridspark, de exemplu, rulează npm test și npm run build ca să copieze fișierele jucabile în game/; Pinloop construiește în dist/, pe care îl copiezi în game/.

Găzduiește-l

Încarcă conținutul folderului game/ pe orice host static HTTP(S). Edițiile noastre nu au nevoie de PHP și nici de bază de date ca să se joace; Zabum și Ricopop au clasamente PHP opționale, dezactivate implicit. Păstrează fiecare folder lângă index.html, cum spun manualele.

Sau împachetează-l ca aplicație

Unelte precum Capacitor pun un joc web într-un proiect Android sau iOS. Pagina de start a Capacitor cere un folder cu resurse web construite și cu un index.html în rădăcină, adaugă platformele cu npx cap add android și npx cap add ios și copiază fișierele cu npx cap sync. Asta este un pas peste prima săptămână a unui începător, iar niciuna dintre edițiile noastre nu include versiuni native sau publicarea în magazine; cotăm această lucrare separat.

1. Fiecare ecran de pe lista ta de la pasul 2 arată textele și grafica ta.
2. Progresul supraviețuiește unei reîncărcări.
3. Jocul funcționează pe telefon, în orientarea pe care o aștepți.
4. Notificările THIRD-PARTY-LICENSES sunt încă alături de fișiere.
5. Poți explica ce ai schimbat, fișier cu fișier.

Ce îți permite licența să faci cu jocul tău

Fiecare achiziție oferă o licență perpetuă, nonexclusivă, pentru un produs final, al tău sau al unui client. Jucătorii îl pot accesa gratuit sau prin monetizare cu publicitate. Poți modifica codul, grafica și audio-ul și poți înlocui numele și logo-ul nostru. Nu poți revinde sau distribui șablonul, codul lui sau activele sale de sine stătătoare, ca șablon, kit sau pachet de active. Suportul durează 6 luni, sau 12 cu extensia, și acoperă instalarea și utilizarea fișierelor livrate și defectele reproductibile. Personalizarea și funcțiile noi sunt servicii separate, cotate înainte de orice lucrare.

Citește termenii complet ai licenței

Întrebări frecvente

Pot face un joc fără să știu să programez?

Poți schimba foarte multe fără cod: textele, culorile, imaginile și unele setări trăiesc în fișiere simple. Tenguin păstrează majoritatea setărilor într-un singur fișier de configurare. Schimbarea regulilor sau a nivelurilor într-o ediție TypeScript cere citirea de cod la nivel de bază și Node.js pentru reconstruire.

Ce trebuie să am instalat?

Un editor de cod și un browser sunt suficiente pentru ediții fără pas de construire, cum ar fi Ricopop și Golazo. Edițiile în TypeScript au nevoie de Node.js și npm pentru reconstruire; fiecare pagină de articol numește versiunea.

Pot vinde sau publica jocul pe care l-am făcut dintr-un șablon?

Îl poți publica ca un produs final, pentru tine sau un client, gratuit sau cu reclame. Nu poți revinde șablonul sau codul lui de sine stătător. Pentru aplicații cu plată sau achiziții în aplicație, întreabă-ne mai întâi.

De ce apare o pagină goală când deschid index.html?

De obicei pentru că a fost deschis din file://. Rulează-l de pe un server web local sau încarcă-l pe un host, cum descriu manualele.

Cât durează?

Depinde cât schimbi. Textele și un logo pot dura o zi; nivelurile noi, grafica și regulile durează mai mult. Începe cu texte, publică o versiune de test și adaugă restul în runde.

Începe cu un singur joc

Alege un șablon, joacă-i demo-ul o jumătate de oră și citește capitolul de personalizare din manual. Dacă fișierele pe care le numește par ceva ce poți schimba, ai găsit punctul de plecare. Dacă preferi să facem noi schimbările, trimite șablonul și lista ta, iar îți răspundem cu o ofertă.

Vezi toate șabloanele de jocuri

Cere o ofertă pentru schimbări