Share
În această serie de tutori, ne vom concentra pe dezvoltarea jocurilor pe platforme pentru tabletele iPad și Android, utilizând cadrul de dezvoltare a jocului ShiVa3D Suite. Deși în principal pentru jocuri 3D, ShiVa3D Suite poate fi folosit pentru a dezvolta și jocuri 2D. Jocul "Puzzle", descris în această serie, este un exemplu de joc relativ simplu 2D care poate fi creat rapid cu ShiVa3D.
Scopul principal al Puzzle-ului este foarte simplu. Când începe jocul, bucăți de imagine sunt poziționate aleator pe ecran. Pentru a rezolva puzzle-ul, utilizatorul trebuie să plaseze piesele în locațiile lor corecte. Un cronometru arată timpul scurs de la începutul jocului. Timerul poate fi oprit în cazul în care utilizatorul are nevoie de timp liber de joc. Prin apăsarea unui buton "Rezolvați", jocul poate fi rezolvat automat, o funcție care vine la îndemână dacă utilizatorul are nevoie de ajutor pentru rezolvarea jocului.
Această serie de tutori este formată din trei părți. Partea 1 începe cu următoarea secțiune, denumită "Descrierea jocului", unde vom oferi mai multe detalii despre Puzzle, descriind comportamentul său folosind capturi de ecran. În secțiunea următoare, "Imagini ecran în Android Tablet și iPad 2", oferim imagini de ecran ale produsului final într-o tabletă Android cu Android OS 4.0.3 (Ice Cream Sandwich) și iPad 2 cu iOS 4.3. Acesta este urmat de "Procesul de Dezvoltare Via Shiva3D Suite", în care introducem principalele componente ale ShiVa3D Suite, ShiVa Editor și ShiVa Authoring Tool și apoi oferim o prezentare generală a procesului de dezvoltare a Puzzle-ului într-un mod independent de platformă cu acele componente.
Următoarele secțiuni se referă la implementare. Partea 2 începe cu "Game Geometry", care se concentrează asupra aspectelor geometrice ale jocului și pune bazele dezvoltării codului. În "Dezvoltarea puzzle-ului în editorul ShiVa", introducem principalele constructe ale bazei de cod care implementează funcționalitatea jocului, inclusiv variabilele, funcțiile și manipulatorii de evenimente. Această secțiune oferă, de asemenea, instrucțiuni pas cu pas despre modul de dezvoltare a jocului cu Editorul ShiVa. Aici, descriem crearea proiectului și jocurile și importurile de texturi, modelul AI și banca de sunet din arhiva de descărcare care însoțește tutorialul. Aceasta concluzionează partea 2 a seriei.
Partea 3 a seriei continuă discuția din "Dezvoltarea puzzle-ului în editorul ShiVa". Descriim importul componentelor HUD și efectuarea ajustărilor finale ale jocului dezvoltat până acum. Apoi, încheiem "Dezvoltarea puzzle-ului în Editorul ShiVa" prin intermediul unui test de unitate. În secțiunea "Instrumentul de creație", vom arăta cum să folosiți ShiVa Authoring Tool pentru a transforma puzzle-ul în două aplicații diferite, unul pentru sistemul de operare Android și unul pentru iPad. Încheiem articolul cu "Concluzii", în care sunt prezentate mai multe concluzii.
Unele dintre materialele de referință din acest articol au fost împrumutate de pe site-ul oficial al produsului ShiVa3D.
Fișierele audio utilizate în aplicație au fost preluate din setul de mostre care se instalează cu editorul ShiVa (directorul Stonetrip \ ShiVa Editor PLE \ Data \ Samples \ Resources \ Sounds).
Baza de coduri pentru rotirea ferestrei de vizualizare, astfel încât bara de instrumente să rămână în vârf când dispozitivul este rotit de către utilizator, se bazează pe un alt tutorial ShiVa 3D
(Http://www.stonetrip.com/developer/1704-rotate-the-viewport-according-to-the-device-rotation).
Baza de coduri pentru gestionarea multi-touch ia idei de la un alt tutorial ShiVa 3D (http://www.stonetrip.com/developer/1046-multitouch-management).
Autorul a beneficiat foarte mult de o carte despre ShiVa3D, intitulată Introducere în programarea 3D cu ShiVa.
În cele din urmă, videoclipurile din acest tutorial au fost realizate cu ajutorul instrumentelor FreeStudio Video Free to Flash Converter și CamStudio.
În această secțiune, vom descrie jocul Puzzle. Aplicația începe cu următorul ecran de pornire.
După afișarea ecranului de pornire, jocul intră în starea "inițializat". Această stare începe cu piesele de puzzle provenind din colțul din stânga jos al afișajului, care se deplasează în locații aleatorii în zona de joc. Pe măsură ce se mișcă, jumătate din piesă se rotește în sensul acelor de ceasornic, iar cealaltă jumătate se rotește în sens invers acelor de ceasornic (se oferă un instantaneu mai jos).
Videoclipul de mai jos arată jocul în timp ce se inițiază.
Odată ce toate piesele și-au luat pozițiile aleatoare, butoanele Start și Solve sunt activate în bara de instrumente în partea superioară, după cum se arată în figura de mai jos. Există un total de 54 de piese de puzzle plasate în 9 rânduri și 6 coloane. După cum vom vedea mai târziu, codul aplicației poate fi extins cu ușurință pentru a acoperi orice număr de rânduri și coloane. Scopul jocului este de a poziționa piesele pentru a construi corect imaginea de puzzle în cel mai scurt timp posibil. Dacă o piesă este poziționată în poziția corectă, marginile acesteia sunt evidențiate în verde. De exemplu, vedeți a treia piesă din ultimul rând de mai jos.
Jocul începe când apăsați butonul Start. Acest lucru aduce jocul în starea "Început".
În această stare, butonul Start se transformă într-un buton Pauză, iar butoanele Noi și Rezolvare sunt dezactivate. Cronometrul începe să numere. Când utilizatorul mișcă o piesă în altă poziție, să spunem că piesa A, piesa înlocuită se mișcă automat în poziția inițială a piesei A. Acest lucru este prezentat în figura de mai jos. Utilizatorul a mutat piesa în colțul din stânga sus în colțul din dreapta jos (mișcarea indicată de linia verde). Piesa de puzzle pe care o înlocuiește se mișcă în colțul din stânga sus pentru a umple locația goală (piesa indicată de săgeata roșie). Mișcarea automată a piesei durează aproximativ 3 secunde până la finalizare. Deși nu este prezentat în fotografiile de mai sus, piesa care se mișcă automat se rotește în sensul acelor de ceasornic sau în sens contrar acelor de ceasornic în timp ce se deplasează. Decizia în sensul acelor de ceasornic sau în sens contrar acelor de ceasornic depinde de coloana și indicele rândului piesei.
Videoclipul de mai jos afișează utilizatorul apăsând butonul Start și apoi mutarea unei bucăți dintr-o locație în alta, înlocuind o altă piesă.
După cum am menționat anterior, există 54 de piese de puzzle. Acestea sunt plasate în poziții fixe constând din 9 rânduri și 6 coloane așa cum se arată în figura de mai jos. Centrele pieselor de puzzle coincid cu pozițiile fixe.
Pentru a muta o bucată, utilizatorul apasă piesa cu degetul și o deplasează după cum doriți. Când se atinge poziția țintă, utilizatorul își eliberează degetul. Dacă distanța dintre cea mai apropiată poziție fixă și centrul piesei puzzle-ului este mai mică decât o toleranță pre-specificată (un parametru în codul aplicației), piesa se fixează automat în poziția fixă. În caz contrar, piesa se mișcă automat în poziția inițială.
Atunci când piesa mutată de către utilizator se fixează într-o poziție, piesa pe care o înlocuiește se deplasează în poziția inițială a piesei mutată de către utilizator. Dacă piesa mutată de către utilizator nu se fixează într-o poziție nouă, aceasta se întoarce în poziția inițială. În ambele cazuri, mișcarea este efectuată automat de aplicație. Când această mișcare începe, jocul intră într-o stare nouă numită "Înlocuit".
Aceasta este o stare în care o piesă de puzzle se mișcă automat, rotindu-se în sensul acelor de ceasornic sau în sens invers acelor de ceasornic în timpul deplasării și ajunge în final la o locație țintă. Propunerea piesei puzzle este controlată de aplicație. Când mișcarea este terminată, cu alte cuvinte atunci când piesa atinge poziția sa, jocul revine în starea "Început".
Dacă o piesă de puzzle este plasată în poziția corectă, granițele acesteia vor fi evidențiate în verde. În imaginea ecranului de probă de mai jos, piesele care au margini verzi sunt în poziția corectă. Cei care nu au frontiere verzi nu se află în pozițiile corecte.
Dacă un utilizator apasă butonul Pauză, jocul va intra în starea "Întreruptă".
În starea Întreruptă, temporizatorul este suspendat. Butonul Pauză se va transforma în butonul Start, iar butoanele Noi și Rezolvare vor fi activate, după cum se arată mai jos.
În starea întreruptă, piesele de puzzle nu pot fi mutate.
În starea Întreruptă, dacă utilizatorul apasă pe butonul Nou, acest lucru va încheia jocul și aplicația va reporni. Jocul va intra în starea "inițializat" (vezi mai sus). Piesele de puzzle vor proveni din colțul din stânga jos al afișajului și se vor muta în locații aleatorii din zona de joc.
De asemenea, în starea Întreruptă, dacă utilizatorul apasă butonul Start, jocul se va întoarce în starea Start.
În starea Întreruptă, dacă utilizatorul apasă pe butonul Rezolvare, acest lucru va încheia jocul rezolvând-l automat. Rezolvarea jocului în acest fel este utilă dacă utilizatorul renunță la rezolvarea jocului pe cont propriu. Piesele se vor muta din locațiile lor curente în locațiile corecte pentru a construi imaginea de puzzle (a se vedea figura de mai jos). Jocul va intra în starea "rezolvat".
Videoclipul de mai jos afișează jocul când utilizatorul apasă butonul Solve.
În starea rezolvată, imaginea puzzle-ului a fost construită. În imaginea cea mai dreaptă din Figura 9 de mai sus, observați că toate piesele de puzzle au frontiere verzi, deoarece sunt toate în poziții corecte.
În starea Rezolvată, este activat numai butonul Nou. Utilizatorul poate apăsa butonul Nou pentru a reporni jocul. Acest lucru va aduce jocul în starea inițializată. După cum sa descris anterior, piesele de puzzle vor proveni din colțul din stânga jos al ecranului și vor începe să se deplaseze în locații aleatorii.
Următoarea diagramă prezintă tranzițiile de stat care rezumă discuția de mai sus.
Următoarele imagini prezintă jocul de puzzle pe o tabletă Android OS 4.0.3 în starea inițializată. Un nou joc începe, pe stânga, și imediat după ce toate piesele de puzzle au ajuns la locațiile lor aleatoare, pe dreapta.
Următoarele imagini arată jocul de puzzle pe o tabletă Android OS 4.0.3, imediat după ce utilizatorul a apăsat butonul Solve, din stânga și după ce jocul este rezolvat, în partea dreaptă.
Următoarea imagine prezintă pictograma de lansare a jocului de puzzle pe o tabletă Android OS 4.0.3.
Următoarele imagini arată jocul de puzzle pe iPad 2 în timpul stadiului inițializat. Un nou joc începe, în stânga, și apoi după ce toate piesele de puzzle au ajuns la locațiile lor aleatoare, pe dreapta.
Următoarele imagini afișează jocul de puzzle pe iPad 2, imediat după ce utilizatorul a apăsat butonul Solve (Rezolvare), în stânga și apoi după ce jocul este rezolvat de fapt, în partea dreaptă.
Următoarea imagine prezintă pictograma de lansare a jocului de puzzle pe iPad 2.
În această secțiune, vom discuta mai multe concepte de dezvoltare a jocului cu ShiVa3D. Majoritatea discuțiilor de aici sunt împrumutate din documentația originală ShiVa3D. Pentru mai multe informații, consultați http://www.stonetrip.com/developer/doc/ și manualul de utilizare livrat împreună cu editorul ShiVa.
Rețineți că ShiVa3D este în principal un cadru de dezvoltare a jocului 3D. Jocul nostru nu are însă caracteristici 3D și este un exemplu în care ar putea fi folosit ShiVa3D pentru a dezvolta și jocuri 2D.
Joc reprezintă un joc, entitatea principală a aplicației. Acesta încapsulează tot ceea ce este în aplicație, cum ar fi camerele, scenele etc. Un joc este o unitate de desfășurare independentă.
AIModel implică "inteligență artificială" și reprezintă comportament. Un AIModel poate avea funcții, manipulatoare, stări și variabile. În Puzzle, vom folosi un singur AIModel pentru a defini funcționalitatea jocului.
scenariu conține codul într-un AIModel, de exemplu, codul pentru o funcție sau un manipulator. Limba de scripting în ShiVa3D este Lua.
HUD înseamnă "Head Up Display" și reprezintă un termen pentru a reprezenta diferite widget-uri de interfață cu utilizatorul, cum ar fi butonul, eticheta, lista, cursorul etc. care permite utilizatorului să interacționeze cu jocul.
Pentru a dezvolta jocul Puzzle, vom folosi versiunea gratuită a ShiVa3D Suite (http://www.stonetrip.com/download.html), care include ShiVa Editor PLE (ediția de învățare personală) și ShiVa Authoring Tool. Diagrama de mai jos oferă o prezentare generală a procesului de dezvoltare pe care l-am folosit cu aceste instrumente.
Să discutăm pașii individuali ai acestui proces.
Editorul ShiVa are diferite module pentru a dezvolta și testa o aplicație 2D sau 3D, de obicei un joc, de la bază. O caracteristică importantă a Editorului ShiVa este că o aplicație dezvoltată cu acel instrument poate fi implementată (după ce a fost creată în ShiVa Authoring Tool) pe diferite dispozitive cu sisteme de operare diferite, de ex. un PC care rulează Windows OS, un telefon mobil cu sistem de operare Android, iPhone / iPod Touch, iPad etc. Unele dintre acțiunile de bază pe care le puteți efectua cu Editorul ShiVa sunt după cum urmează.
Dezvolta:
Test: Puteți efectua un test inițial al aplicației 2D sau 3D în mediul de dezvoltare înainte de ao implementa într-un dispozitiv țintă. Testarea este efectuată prin caracteristica Animare sau Previzualizare a editorului ShiVa. În timpul testării, puteți schimba setările pentru dimensiunea ecranului pentru a vedea cum va fi afișată aplicația în dispozitivul țintă real. În Puzzle, pentru a testa butoanele de evenimente, am folosit clicurile de mouse. Pentru a testa evenimentele touch, am folosit drag-and-drop prin mouse.
Export: După terminarea testării, exportați aplicația. Acest lucru va genera un fișier cu o extensie stk. Aplicația exportată va fi utilizată de instrumentul ShiVa Authoring, care este discutat în continuare.
Scopul principal al instrumentului ShiVa Authoring este de a converti o aplicație creată prin Editorul ShiVa într-o aplicație specifică platformei care poate fi implementată într-un anumit dispozitiv, de ex. tableta iPad sau Android. Anumite restricții se aplică în ceea ce privește sistemul de operare al mașinii care rulează instrumentul ShiVa Authoring și dispozitivul țintă pentru conversie. De exemplu, instrumentul ShiVa Authoring care rulează pe o mașină Windows nu poate genera o aplicație iPad sau iPhone. În timp ce dezvoltam Puzzle, am folosit o mașină Windows pentru Editorul ShiVa. Pentru a crea aplicația Puzzle Android, am folosit și o mașină Windows pentru a rula instrumentul de creație ShiVa. Pe de altă parte, pentru a crea aplicația iOS Puzzle pentru iPad, am folosit o mașină Mac OS pentru a rula ShiVa Authoring Tool.
Unele dintre acțiunile de bază pe care le puteți efectua cu instrumentul ShiVa Authoring sunt următoarele.
Selectați platforma de autorizare: În scopul acestei serii, opțiunile de platformă de care suntem interesați sunt iPad și Android. Rețineți că pentru iPad trebuie să aveți ShiVa Authoring Tool rulând pe o mașină Mac OS.
Import: Importați aplicația (un fișier cu extensia stk) care a fost exportată prin Editorul ShiVa.
Construi: Când creați pentru Android, vom configura Instrumentul de creație ShiVa pentru a genera un fișier Android apk care poate fi implementat direct într-un dispozitiv Android compatibil. Când creați iPad, vom configura ShiVa Authoring Tool pentru a genera un proiect Xcode pentru dezvoltarea iPad-ului. Apoi, se poate construi proiectul în Xcode și se poate implementa executabilul pe un dispozitiv conectat (construirea proiectului în Xcode și implementarea executabilului rezultat într-un dispozitiv conectat nu este acoperit în această serie).
Pentru fiecare platformă, ShiVa Authoring Tool oferă opțiuni ușor diferite pentru a genera produsul final. De exemplu, atunci când creați un fișier Android, puteți genera un proiect Eclipse în locul unui executabil Android. Așa cum am menționat mai sus, am ales să generăm un executabil Android în această serie.
În mod similar, pentru iPad, s-ar putea genera un executabil pentru distribuție în locul generării unui proiect Xcode. Așa cum am menționat anterior, am ales să generăm un proiect Xcode în această serie. Consultați manualul de utilizare ShiVa Authoring Tool pentru mai multe detalii.
Următoarea este o listă de configurații pe care le-am folosit în timpul dezvoltării jocului Puzzle. Pentru cerințe și cerințe suplimentare, consultați documentația Shiva3D descrisă în http://www.stonetrip.com/developer/doc/editor/information/hardware și http://www.stonetrip.com/developer/doc/authoringtool/installation.
OS de dezvoltare mașină: Windows 7
În Partea 1 a acestui tutorial, am introdus jocul și i-am descris detaliile. De asemenea, am rezumat procesul de dezvoltare a jocului prin intermediul platformei Shiva3D Suite. arta 2 va incepe cu "Game Geometry", care se concentreaza pe aspectele geometrice de baza ale jocului si pune bazele dezvoltarii codului. În "Dezvoltarea puzzle-ului în editorul ShiVa", vom introduce principalele constructe ale bazei de cod care implementează funcționalitatea jocului, inclusiv variabilele, funcțiile și gestionarea evenimentelor. Această secțiune va oferi, de asemenea, instrucțiuni pas cu pas despre cum să dezvolți jocul în Editorul ShiVa. Aici vom descrie crearea proiectului și a jocului și importul de texturi, modele AI și banca de sunet din arhiva de descărcare care însoțește tutorialul.
Accentsconagua