În această serie de tutoriale, vă voi arăta cum să faceți un shooter twin-stick inspirat de Geometry Wars, cu grafică neon, efecte particulare nebune și muzică minunată, pentru iOS folosind C ++ și OpenGL ES 2.0.
Mai degrabă decât să ne bazăm pe un cadru de joc existent sau pe o bibliotecă sprite, vom încerca să programăm cât mai aproape posibil hardware-ul (sau "metalul gol"). Deoarece dispozitivele care rulează iOS rulează pe un hardware de dimensiuni mai mici, comparativ cu un PC desktop sau o consolă de jocuri, acest lucru ne va permite să obținem cât mai multă bătaie pentru banii noștri.
postări asemănatoare Aceste tutoriale se bazează pe seria originală XNA a lui Michael Hoffman, care a fost tradusă pe alte platforme:
Faceți un Shooter Vector Neon în XNA
Faceți un shooter vector neon în jMonkeyEngine
Scopul acestor tutoriale este de a trece peste elementele necesare care vă vor permite să vă creați propriul joc mobil de înaltă calitate pentru iOS, fie de la zero, fie pe baza unui joc desktop existent. Vă încurajez să descărcați și să vă jucați cu codul, sau chiar să îl utilizați ca bază pentru proiectele proprii.
Vom acoperi următoarele subiecte în această serie:
Primii pași, introducerea bibliotecii Utilitare, configurarea gameplay-ului de bază, crearea navei, sunetului și muzicii jucătorului.
Finalizați punerea în aplicare a mecanismelor de gameplay prin adăugarea de dușmani, gestionarea detectării coliziunilor și urmărirea scorului și a vieții jucătorului.
Adăugați un gamepad virtual pe ecran, pentru a putea controla jocul utilizând intrarea multi-touch.
Adăugați efecte particulare nebune, deasupra vârfului.
Adăugați grila de fond de bază.
Iată ce vom avea până la sfârșitul seriei:
Avertizare: Tare!
Iată ce vom avea până la sfârșitul acestei prime părți:
Avertizare: Tare!
Efectele muzicale și sonore pe care le puteți auzi în aceste videoclipuri au fost create de RetroModular și puteți citi despre modul în care a făcut acest lucru la secțiunea noastră audio.
Spritele sunt de Jacob Zinman-Jeanes, designerul nostru rezident Tuts +.
Fontul pe care îl vom folosi este un font bitmap (cu alte cuvinte, nu un "font" real, ci un fișier imagine), ceea ce am creat pentru acest tutorial.
Toate lucrările pot fi găsite în fișierele sursă.
Să începem.
Prezentare generală
Înainte de a se arunca cu capul în specificul jocului, hai să vorbim despre codul de bibliotecă utilitar și aplicația Bootstrap pe care l-am furnizat pentru a susține dezvoltarea jocului.
Biblioteca de utilități
Deși vom folosi în primul rând C ++ și OpenGL pentru a codifica jocul nostru, vom avea nevoie de câteva clase de utilitate suplimentare. Acestea sunt toate clase pe care le-am scris pentru a ajuta la dezvoltarea în alte proiecte, astfel încât acestea sunt testate în timp și pot fi utilizate pentru proiecte noi, cum ar fi acesta.
package.h: Un antet de utilizare folosit pentru a include toate anteturile relevante din biblioteca utilitar. O vom include prin afirmare #include "Utilitate / pachet.h" fără a fi nevoie să includeți altceva.
Modele de
Vom utiliza câteva modele de programare existente, încercate și reale, folosite în C ++ și în alte limbi.
tSingleton: Implementează o clasă singleton folosind un model "Meyers Singleton". Este bazat pe șabloane și extensibil, astfel încât să putem abroga toate codul singleton la o singură clasă.
tOptional: Aceasta este o caracteristică din C ++ 14 (numită std :: opțional) care nu este destul de disponibil în versiunile curente ale C ++ (încă suntem la C ++ 11). Este, de asemenea, o caracteristică disponibilă în XNA și C # (unde se numește poate fi nulă.) Aceasta ne permite să avem parametri "opționali" pentru metode. Este folosit în tSpriteBatch clasă.
Vector Math
Deoarece nu folosim un cadru de joc existent, vom avea nevoie de câteva clase pentru a face față matematicii din spatele scenei.
tMath: O clasă statică oferă anumite metode dincolo de ceea ce este disponibil în C ++, cum ar fi conversia de la grade la radiani sau rotunjirea numerelor la puterile a două.
tVector: Un set de bază de clase Vector, care oferă variante cu 2 elemente, 3 elemente și 4 elemente. De asemenea, am prezentat această structură pentru puncte și culori.
tMatrix: Două definiții de matrice, o variantă 2x2 (pentru operațiile de rotație) și o opțiune 4x4 (pentru matricea de proiecție necesară pentru a obține lucrurile pe ecran),
tRect: O clasă de dreptunghi care furnizează locația, dimensiunea și o metodă pentru a determina dacă punctele se află în interiorul dreptunghiurilor sau nu.
OpenGL Wrapper Classes
Deși OpenGL este un API puternic, este bazat pe C, iar gestionarea obiectelor poate fi oarecum dificil de realizat în practică. Deci, vom avea o mână de ore pentru a gestiona obiectele OpenGL pentru noi.
tSurface: Oferă o modalitate de a crea un bitmap bazat pe o imagine încărcată din pachetul aplicației.
tTexture: Împachetează interfața cu comenzile de textură OpenGL și încărcările tSurfaces în texturi.
tShader: Împachetează interfața cu compilatorul de shader OpenGL, facilitând compilarea shaderelor.
tProgram: Împachetează interfața cu interfața programelor OpenGL Shader, care este, în esență, combinația a două tShader clase.
Clasele de suport pentru jocuri
Aceste clase reprezintă cel mai apropiat posibilitate de a avea un "cadru de joc"; acestea oferă câteva concepte de nivel înalt care nu sunt tipice pentru OpenGL, dar care sunt utile pentru dezvoltarea jocurilor.
tViewport: Conține starea portului de vizualizare. Utilizăm acest lucru în primul rând pentru a face față modificărilor orientării dispozitivului.
tAutosizeViewport: O clasă care gestionează modificările în fereastra de vizualizare. Mă ocupă direct de modificările orientării dispozitivului și mărește portul de vizualizare pentru a se potrivi ecranului dispozitivului, astfel încât raportul de aspect să rămână același - ceea ce înseamnă că lucrurile nu se întind sau se răsucesc.
tSpriteFont: Permite încărcarea unui "font bitmap" din pachetul de aplicații și utilizarea acestuia pentru a scrie text pe ecran.
tSpriteBatch: Inspirat de XNA SpriteBatch am scris această clasă pentru a încapsula cele mai bune lucruri necesare jocului nostru. Ne permite să sortăm sprite atunci când desenăm așa încât să obținem cele mai bune câștiguri de viteză pe hardware-ul pe care-l avem. De asemenea, o vom folosi direct pentru a scrie text pe ecran.
Diverse Clase
Un set minim de clase pentru a înlătura lucrurile.
tTimer: Un cronometru de sistem, utilizat în principal pentru animații.
tInputEvent: Definiții de clasă de bază pentru a oferi schimbări de orientare (înclinarea dispozitivului), atingeți evenimente și un eveniment "tastatură virtuală" pentru a emula un gamepad mai discret.
tSound: O clasă dedicată încărcării și redării efectelor de sunet și muzicii.
Bootstrap de aplicație
De asemenea, vom avea nevoie de ceea ce numesc codul "Boostrap" - adică un cod care abstractează modul în care începe o aplicație sau "cizme în sus".
Iată ce se află bootstrap:
AppDelegate: Această clasă se ocupă de lansarea aplicației, precum și suspendarea și reluarea evenimentelor atunci când utilizatorul apasă butonul Pagina principală.
ViewController: Această clasă gestionează evenimentele de orientare a dispozitivului și creează vizualizarea OpenGL
OpenGLView: Această clasă inițializează OpenGL, îi spune dispozitivului să se reîmprospăteze la 60 de cadre pe secundă și să gestioneze evenimentele touch.
Privire de ansamblu a jocului
În acest tutorial vom crea un shooter cu două gemuri; jucătorul va controla nava folosind comenzi multi-touch pe ecran.
Vom folosi o serie de clase pentru a realiza acest lucru:
Entitate: Clasa de bază pentru dușmani, gloanțe și nava jucătorului. Entitățile se pot deplasa și pot fi trase.
Glonţ și PlayerShip.
EntityManager: Ține evidența tuturor entităților din joc și efectuează detectarea coliziunilor.
Intrare: Ajută la gestionarea intrărilor de pe ecranul tactil.
Artă: Încarcă și deține referințe la texturile necesare jocului.
Sunet: Încarcă și deține referințe la sunete și muzică.
MathUtil și Extensii: Conține câteva metode statice utile și metode de extindere.
GameRoot: Controlează bucla principală a jocului. Aceasta este clasa noastră principală.
Codul din acest tutorial își propune să fie simplu și ușor de înțeles. Nu va avea toate caracteristicile concepute pentru a suporta toate nevoile posibile; mai degrabă, va face doar ceea ce trebuie să facă. Ținând-o simplu, vă va fi mai ușor să înțelegeți conceptele și apoi să le modificați și să le extindeți în propriul joc unic.
Entitățile și nava jucătorului
Deschideți proiectul Xcode existent. GameRoot este clasa principală a aplicației noastre.
Vom începe prin crearea unei clase de bază pentru entitățile noastre de joc. Uitați-vă la Clasa de entități:
Toate entitățile noastre (dușmani, gloanțe și nava jucătorului) au câteva proprietăți de bază, cum ar fi o imagine și o poziție. mIsExpired va fi folosit pentru a indica faptul că entitatea a fost distrusă și ar trebui eliminată din orice listă care deține o referință la ea.
Apoi vom crea un EntityManager pentru a urmări entitățile noastre și pentru a le actualiza și trage:
clasa EntityManager: public tSingleton protected: std :: lista mEntities; std :: Lista mAddedEntities; std :: Lista mBullets; bool mIsUpdating; protejate: EntityManager (); public: int getCount () const; void add (Entitatea * entitate); void addEntity (Entitatea * entitate); void update (); redactarea void (tSpriteBatch * spriteBatch); bool isColliding (Entitatea * a, Entitatea * b); clasa prietenului tSingleton; ; void EntityManager :: adăuga (entitate Entity *) if (! mIsUpdating) addEntity (entitate); altceva mAddedEntities.push_back (entitate); void EntityManager :: actualizare () mIsUpdating = true; pentru (std :: lista:: iterator iter = mEntities.begin (); iter! = mEntities.end (); iter ++) (* iter) -> actualizare (); dacă ((iter) -> esteExpirată ()) * iter = NULL; mIsUpdating = false; pentru (std :: lista:: iterator iter = mAddedEntities.begin (); iter! = mAddedEntities.end (); iter + +) addEntity (* iter); mAddedEntities.clear (); mEntities.remove (NULL); pentru (std :: lista:: iterator iter = mBullets.begin (); iter! = mBullets.end (); iter ++) dacă ((* iter) -> esteExpirată ()) delete * iter; * iter = NULL; mBullets.remove (NULL); void EntityManager :: trage (tSpriteBatch * spriteBatch) pentru (std :: lista:: iterator iter = mEntities.begin (); iter! = mEntities.end (); iter ++) (* iter) -> remiză (spriteBatch);
Rețineți că, dacă modificați o listă în timp ce iterați peste ea, veți primi o excepție de rulare. Codul de mai sus se ocupă de acest lucru prin așteptarea oricăror entități adăugate în timpul actualizării într-o listă separată și adăugarea acestora după finalizarea actualizării entităților existente.
Făcându-le vizibile
Va trebui să încărcăm niște texturi dacă vrem să tragem ceva, așa că vom face o clasă statică care să dețină referințe la texturile noastre:
Încărcăm arta prin chemare Art :: getInstance () în GameRoot :: onInitView (). Acest lucru cauzează Artă singleton pentru a construi și pentru a apela constructorul, Art :: Art ().
De asemenea, un număr de clase va trebui să cunoască dimensiunile ecranului, deci avem următorii membri GameRoot:
Rezoluția de 800x600px este cea folosită de formatul inițial XNA Shape Blaster. Am putea folosi orice rezoluție dorim (ca una mai apropiată de rezoluția specifică iPhone sau iPad), dar vom respecta rezoluția originală doar pentru a ne asigura că jocul se potrivește cu aspectul original.
Noi îi atragem spritele amestecarea aditivilor, care face parte din ceea ce le va da aspectul lor "neon". De asemenea, nu vrem să se amestece sau să se amestece, așa că folosim GL_NEAREST pentru filtrele noastre. Nu avem nevoie sau ne pasa de testarea adâncimii sau de cedarea de pe spate (totuși adaugă oricum cheltuieli inutile), așa că o oprim.
Dacă executați jocul în acest moment, ar trebui să vă vedeți nava în centrul ecranului. Cu toate acestea, nu răspunde la intrare. Să adăugăm câteva intrări în jocul următor.
Intrare
Pentru mișcare, vom folosi o interfață multi-touch. Înainte de a ajunge la forță cu gamepad-urile de pe ecran, vom primi doar o interfață touch touch de bază și de funcționare.
În blasterul original Shape Blaster pentru Windows, mișcarea jucătorului ar putea fi efectuată cu tastele WASD de pe tastatură. Pentru direcționare, ei ar putea folosi tastele săgeată sau mouse-ul. Acest lucru este menit să emuleze controalele Geometry Wars twin-stick: un stick analog pentru mișcare, unul pentru țintire.
Deoarece Shape Blaster utilizează deja conceptul de mișcare a tastaturii și a mouse-ului, cel mai simplu mod de a adăuga intrare ar fi emularea comenzilor tastaturii și mouse-ului prin atingere. Vom începe cu mișcarea mouse-ului, deoarece atât mouse-ul, cât și mouse-ul împart o componentă similară: un punct care conține coordonatele X și Y.
Vom face o clasă statică pentru a urmări diferitele dispozitive de intrare și pentru a avea grijă să comutați între diferitele tipuri de direcționare:
Acest cod creează două gloanțe care călătoresc paralele între ele. Se adaugă o mică cantitate de aleatorie în direcție, ceea ce face ca focurile să se împrăștie puțin ca un mitralieră. Adăugăm două numere aleatorii împreună, deoarece acest lucru face probabil ca suma lor să fie centrat (în jurul valorii de zero) și este mai puțin probabil să trimită gloanțe la distanță. Utilizăm o matrice bidimensională pentru a roti poziția inițială a gloanțelor în direcția în care călătoresc.
De asemenea, am folosit două noi metode de ajutor:
Extensiile :: NextFloat (): Returnează un flotant aleator între valoarea minimă și cea maximă.
MathUtil :: FromPolar (): Creează o tVector2f dintr-un unghi și amploare.
Deci, sa vedem cum arata:
// în extensii float Extensions :: nextFloat (float minValue, float maxValue) return (float) tMath :: random () * (maxValue - minValue) + minValue; // În MathUtil tVector2f MathUtil :: de la Polar (unghi de flotare, magnitudine flotantă) întoarcere magnitudine * tVector2f (float) cosf (unghi), (float) sinf (unghi));
Cursor personalizat
Mai avem încă un lucru pe care ar trebui să-l facem acum că avem initalul Intrare clasa: să trasăm un cursor personalizat al mouse-ului pentru a face mai ușor să vedem unde se îndreaptă vasul. În GameRoot.Draw, pur și simplu trageți lui Art mPointer la poziția "mouse-ului".
Share
Accentsconagua
