In questa serie di tutorial, ti mostrerò come creare uno sparatutto twin-stick ispirato a Geometry Wars, con grafica al neon, effetti pazzeschi e musica fantastica, per iOS che utilizza C ++ e OpenGL ES 2.0.
Piuttosto che fare affidamento su una struttura di gioco esistente o su una libreria di sprite, tenteremo di programmare il più vicino possibile all'hardware (o "bare metal"). Poiché i dispositivi che eseguono iOS funzionano su hardware di dimensioni più ridotte rispetto a un PC desktop o una console di gioco, questo ci consentirà di ottenere il massimo per il nostro buck possibile.
Post correlati Questi tutorial sono basati sulla serie originale XNA di Michael Hoffman, che è stata tradotta su altre piattaforme:
Fai uno sparatutto al neon in XNA
Fai uno sparatutto al neon in jMonkeyEngine
L'obiettivo di queste esercitazioni è quello di andare oltre gli elementi necessari che ti permetteranno di creare il tuo gioco mobile di alta qualità per iOS, da zero o basato su un gioco desktop esistente. Ti incoraggio a scaricare e giocare con il codice, o anche a usarlo come base per i tuoi progetti.
Tratteremo i seguenti argomenti durante questa serie:
Primi passi, introducendo la libreria Utility, impostando il gameplay di base, creando la nave, il suono e la musica del giocatore.
Completa l'implementazione delle meccaniche di gioco aggiungendo nemici, gestendo il rilevamento delle collisioni e monitorando il punteggio e le vite del giocatore.
Aggiungi un gamepad virtuale sullo schermo, così possiamo controllare il gioco usando l'input multi-touch.
Aggiungi effetti di particelle folli e esagerati.
Aggiungi la griglia dello sfondo di deformazione.
Ecco cosa avremo alla fine della serie:
Avvertenza: forte!
Ed ecco cosa avremo alla fine di questa prima parte:
Avvertenza: forte!
La musica e gli effetti sonori che puoi sentire in questi video sono stati creati da RetroModular e puoi leggere come l'ha fatto nella nostra sezione audio.
Gli sprite sono di Jacob Zinman-Jeanes, il nostro tutor + designer residente.
Il font che useremo è un font bitmap (in altre parole, non un vero "font", ma un file immagine), che è qualcosa che ho creato per questo tutorial.
Tutto il materiale illustrativo può essere trovato nei file sorgente.
Iniziamo.
Panoramica
Prima di approfondire le specificità del gioco, parliamo del codice Bootstrap della libreria di utilità e dell'applicazione che ho fornito per supportare lo sviluppo del nostro gioco.
La biblioteca delle utilità
Anche se utilizzeremo principalmente C ++ e OpenGL per codificare il nostro gioco, avremo bisogno di alcune classi di utilità aggiuntive. Queste sono tutte le classi che ho scritto per aiutare lo sviluppo in altri progetti, quindi sono testate nel tempo e utilizzabili per nuovi progetti come questo.
package.h: Un'intestazione pratica utilizzata per includere tutti gli header rilevanti dalla libreria Utility. Lo includeremo affermando #include "Utility / package.h" senza dover includere altro.
Patterns
Sfrutteremo alcuni schemi di programmazione già sperimentati e veri usati in C ++ e in altri linguaggi.
tSingleton: Implementa una classe singleton utilizzando un pattern "Meyers Singleton". È basato su modelli ed estensibile, quindi è possibile astrarre tutti i codici singleton in una singola classe.
tOptional: Questa è una funzionalità di C ++ 14 (chiamata std :: opzionale) che non è ancora disponibile nelle attuali versioni di C ++ (siamo ancora al C ++ 11). È anche una funzionalità disponibile in XNA e C # (dove è chiamata nullable.) Ci consente di avere parametri "opzionali" per i metodi. È usato nel tSpriteBatch classe.
Matematica vettoriale
Dato che non stiamo usando un framework di gioco esistente, avremo bisogno di alcune classi per affrontare la matematica dietro le quinte.
tMath: Una classe statica fornisce alcuni metodi oltre a quelli disponibili in C ++, come la conversione da gradi a radianti o numeri di arrotondamento a potenze di due.
tVector: Un set base di classi Vector, che fornisce varianti a 2 elementi, 3 elementi e 4 elementi. Digitiamo anche questa struttura per Punti e Colori.
tMatrix: Due definizioni di matrice, una variante 2x2 (per le operazioni di rotazione) e un'opzione 4x4 (per la matrice di proiezione necessaria per ottenere le cose sullo schermo),
tRect: Una classe rettangolo che fornisce posizione, dimensioni e un metodo per determinare se i punti si trovano all'interno o meno di rettangoli.
Classi wrapper OpenGL
Sebbene OpenGL sia una potente API, è basata su C e la gestione degli oggetti può essere piuttosto difficile da fare in pratica. Quindi, avremo un piccolo numero di classi per gestire gli oggetti OpenGL per noi.
tSurface: Offre un modo per creare una bitmap basata su un'immagine caricata dal pacchetto dell'applicazione.
tTexture: Avvolge l'interfaccia per i comandi di trama di OpenGL e carica tSurfaces in trame.
tShader: Avvolge l'interfaccia del compilatore shader di OpenGL, semplificando la compilazione degli shader.
tProgram: Avvolge l'interfaccia nell'interfaccia del programma shader di OpenGL, che è essenzialmente la combinazione di due tShader classi.
Classi di supporto del gioco
Queste classi rappresentano la cosa più vicina alla quale avremo un "framework di gioco"; forniscono alcuni concetti di alto livello che non sono tipici di OpenGL, ma che sono utili per scopi di sviluppo del gioco.
tViewport: Contiene lo stato del viewport. Lo usiamo principalmente per gestire le modifiche all'orientamento del dispositivo.
tAutosizeViewport: Una classe che gestisce le modifiche alla vista. Gestisce direttamente le modifiche all'orientamento del dispositivo e ridimensiona il viewport per adattarlo allo schermo del dispositivo in modo che le proporzioni rimangano invariate, ovvero che le cose non vengano allungate o schiacciate.
tSpriteFont: Ci consente di caricare un "font bitmap" dal pacchetto di applicazioni e usarlo per scrivere del testo sullo schermo.
tSpriteBatch: Ispirato da XNA SpriteBatch classe, ho scritto questa lezione per incapsulare il meglio di ciò che serve al nostro gioco. Ci consente di ordinare gli sprite quando si disegna in modo tale da ottenere i migliori guadagni di velocità possibili sull'hardware che abbiamo. Lo useremo anche direttamente per scrivere del testo sullo schermo.
Classi varie
Un insieme minimo di classi per risolvere le cose.
TTimer: Un timer di sistema, utilizzato principalmente per le animazioni.
tInputEvent: Definizioni di classi base per fornire modifiche all'orientamento (inclinazione del dispositivo), eventi tocco e un evento "tastiera virtuale" per emulare un gamepad in modo più discreto.
tSound: Una classe dedicata al caricamento e alla riproduzione di effetti sonori e musica.
Bootstrap dell'applicazione
Avremo anche bisogno di quello che chiamo codice "Boostrap", cioè codice che astrae il modo in cui un'applicazione inizia o "avvia".
Ecco cosa c'è dentro bootstrap:
AppDelegate: Questa classe gestisce l'avvio dell'applicazione, nonché la sospensione e la ripresa degli eventi per quando l'utente preme il pulsante Home.
ViewController: Questa classe gestisce gli eventi di orientamento del dispositivo e crea la nostra vista OpenGL
OpenGLView: Questa classe inizializza OpenGL, indica al dispositivo di effettuare l'aggiornamento a 60 fotogrammi al secondo e gestisce gli eventi di tocco.
Panoramica del gioco
In questo tutorial creeremo uno sparatutto twin-stick; il giocatore controllerà la nave usando i controlli multi-touch sullo schermo.
Useremo un certo numero di classi per realizzare questo:
Entità: La classe base per nemici, proiettili e la nave del giocatore. Le entità possono muoversi e essere disegnate.
proiettile e PlayerShip.
EntityManager: Tiene traccia di tutte le entità nel gioco ed esegue il rilevamento delle collisioni.
Ingresso: Aiuta a gestire gli input dal touch screen.
Arte: Carica e mantiene i riferimenti alle trame necessarie per il gioco.
Suono: Carica e mantiene i riferimenti ai suoni e alla musica.
MathUtil e estensioni: Contiene alcuni metodi statici utili e metodi di estensione.
GameRoot: Controlla il ciclo principale del gioco. Questa è la nostra classe principale.
Il codice in questo tutorial si propone di essere semplice e facile da capire. Non avrà tutte le funzionalità progettate per supportare ogni possibile esigenza; piuttosto, farà solo ciò che deve fare. Mantenerlo semplice renderà più facile la comprensione dei concetti, quindi modificarli ed espanderli nel tuo gioco unico.
Entità e la nave del giocatore
Apri il progetto Xcode esistente. GameRoot è la classe principale della nostra applicazione.
Inizieremo creando una classe base per le nostre entità di gioco. Dai un'occhiata al Classe di entità:
Tutte le nostre entità (nemici, proiettili e la nave del giocatore) hanno alcune proprietà di base, come un'immagine e una posizione. mIsExpired sarà usato per indicare che l'entità è stata distrutta e dovrebbe essere rimossa da qualsiasi lista che abbia un riferimento ad essa.
Quindi creiamo un EntityManager per monitorare le nostre entità e per aggiornarle e disegnarle:
class EntityManager: tSingleton pubblico protected: std :: list mEntities; std :: list mAddedEntities; std :: list mBullets; bool mIsUpdating; protetto: EntityManager (); public: int getCount () const; void add (Entità * entità); void addEntity (Entity * entity); void update (); void draw (tSpriteBatch * spriteBatch); bool isColliding (Entity * a, Entity * b); classe di amici tSingleton; ; void EntityManager :: add (Entità * entità) if (! mIsUpdating) addEntity (entity); else mAddedEntities.push_back (entity); void EntityManager :: update () mIsUpdating = true; per (std :: list:: iterator iter = mEntities.begin (); iter! = mEntities.end (); iter ++) (* iter) -> update (); if ((* iter) -> isExpired ()) * iter = NULL; mIsUpdating = false; per (std :: list:: iterator iter = mAddedEntities.begin (); iter! = mAddedEntities.end (); iter ++) addEntity (* iter); mAddedEntities.clear (); mEntities.remove (NULL); per (std :: list:: iterator iter = mBullets.begin (); iter! = mBullets.end (); iter ++) if ((* iter) -> isExpired ()) delete * iter; * iter = NULL; mBullets.remove (NULL); void EntityManager :: draw (tSpriteBatch * spriteBatch) for (std :: list:: iterator iter = mEntities.begin (); iter! = mEntities.end (); iter ++) (* iter) -> draw (spriteBatch);
Ricorda che se si modifica un elenco mentre si esegue l'iterazione su di esso, si otterrà un'eccezione di runtime. Il codice sopra si occupa di questo accodando le entità aggiunte durante l'aggiornamento in un elenco separato e aggiungendole dopo aver completato l'aggiornamento delle entità esistenti.
Rendili visibili
Dovremo caricare alcune trame se vogliamo disegnare qualcosa, quindi faremo una classe statica per contenere i riferimenti a tutte le nostre trame:
classe Arte: pubblico tSingleton protected: tTexture * mPlayer; tTexture * mSeeker; tTexture * mWanderer; tTexture * mBullet; tTexture * mPointer; protetto: Art (); public: tTexture * getPlayer () const; tTexture * getSeeker () const; tTexture * getWanderer () const; tTexture * getBullet () const; tTexture * getPointer () const; classe di amici tSingleton; ; Art :: Art () mPlayer = new tTexture (tSurface ("player.png")); mSeeker = new tTexture (tSurface ("seeker.png")); mWanderer = new tTexture (tSurface ("wanderer.png")); mBullet = new tTexture (tSurface ("bullet.png")); mPointer = new tTexture (tSurface ("pointer.png"));
Carichiamo l'arte chiamando Arte :: getInstance () nel GameRoot :: onInitView (). Questo causa il Arte singleton per essere costruito e chiamare il costruttore, Arte :: Art ().
Inoltre, un certo numero di classi dovrà conoscere le dimensioni dello schermo, quindi abbiamo i seguenti membri in GameRoot:
La risoluzione 800x600px è ciò che utilizzava lo Shape Blaster basato su XNA originale. Potremmo usare qualsiasi risoluzione che desideriamo (ad esempio una più vicina all'iPhone o alla risoluzione specifica dell'iPad), ma ci atteniamo alla risoluzione originale solo per assicurarci che il nostro gioco corrisponda all'aspetto e all'originale dell'originale.
Ora andremo oltre il PlayerShip classe:
classe PlayerShip: entità pubblica, tSingleton pubblico protected: static const int kCooldownFrames; int mCooldowmRemaining; int mFramesUntilRespawn; protected: PlayerShip (); pubblico: void update (); void draw (tSpriteBatch * spriteBatch); bool getIsDead (); void kill (); classe di amici tSingleton; ; PlayerShip :: PlayerShip (): mCooldowmRemaining (0), mFramesUntilRespawn (0) mImage = Art :: getInstance () -> getPlayer (); mPosition = tPoint2f (GameRoot :: getInstance () -> getViewportSize (). x / 2, GameRoot :: getInstance () -> getViewportSize (). y / 2); mRadius = 10;
Abbiamo fatto PlayerShip un singleton, imposta la sua immagine e la posiziona al centro dello schermo.
Infine, aggiungiamo la nave giocatore al EntityManager. Il codice in GameRoot :: onInitView Somiglia a questo:
Stiamo disegnando gli sprite con miscelazione additiva, che è parte di ciò che darà loro il loro aspetto "neon". Inoltre, non vogliamo alcuna sfocatura o fusione, quindi usiamo GL_NEAREST per i nostri filtri. Non abbiamo bisogno di cure approfondite o di abbattimento del backface (non aggiungiamo comunque inutili spese generali), quindi lo disattiviamo.
Il codice in GameRoot :: onRedrawView Somiglia a questo:
Se esegui il gioco a questo punto, dovresti vedere la tua nave al centro dello schermo. Tuttavia, non risponde all'input. Aggiungiamo un po 'di input al gioco successivo.
Ingresso
Per il movimento, useremo un'interfaccia multi-touch. Prima di andare a pieno regime con i gamepad su schermo, avremo solo un'interfaccia touch di base attiva e funzionante.
Nell'originale Shape Blaster per Windows, il movimento del giocatore può essere eseguito con i tasti WASD della tastiera. Per mirare, potevano usare i tasti freccia o il mouse. Questo ha lo scopo di emulare i controlli a doppio bastone di Geometry Wars: uno stick analogico per il movimento, uno per il puntamento.
Poiché Shape Blaster utilizza già il concetto di movimento della tastiera e del mouse, il modo più semplice per aggiungere input è quello di emulare i comandi della tastiera e del mouse tramite il tocco. Inizieremo con il movimento del mouse, poiché sia il touch che il mouse condividono un componente simile: un punto contenente le coordinate X e Y..
Creeremo una classe statica per tenere traccia dei vari dispositivi di input e per occuparci del passaggio tra i diversi tipi di mira:
Questo codice crea due punti elenco che viaggiano paralleli l'uno all'altro. Aggiunge una piccola quantità di casualità alla direzione, il che rende gli scatti un po 'come una mitragliatrice. Aggiungiamo insieme due numeri casuali perché questo rende più probabile che la somma sia centrata (intorno allo zero) e meno probabilità di inviare proiettili lontano. Usiamo una matrice bidimensionale per ruotare la posizione iniziale dei proiettili nella direzione in cui viaggiano.
Abbiamo anche utilizzato due nuovi metodi di supporto:
Estensioni :: NextFloat (): Restituisce un float casuale tra un valore minimo e massimo.
MathUtil :: FromPolar (): Crea a tVector2f da un angolo e grandezza.
C'è un'altra cosa che dovremmo fare ora che abbiamo il inital Ingresso classe: disegniamo un cursore del mouse personalizzato per rendere più facile vedere dove punta la nave. Nel GameRoot.Draw, semplicemente disegnare Art's mPointer nella posizione "del mouse".
Share
Accentsconagua
