Share
In questa serie di tutorial, ci concentreremo sullo sviluppo di giochi multipiattaforma per iPad e tablet Android utilizzando il framework di sviluppo del gioco ShiVa3D Suite. Anche se principalmente per i giochi 3D, ShiVa3D Suite può essere utilizzato anche per sviluppare giochi 2D. "Puzzle", il gioco descritto in questa serie, è un esempio di un gioco 2D relativamente semplice che può essere rapidamente creato con ShiVa3D.
L'obiettivo principale del Puzzle è molto semplice. All'inizio del gioco, le parti di un'immagine vengono posizionate casualmente sullo schermo. Per risolvere il puzzle, l'utente deve posizionare quei pezzi nelle loro posizioni corrette. Un timer mostra il tempo trascorso dall'inizio del gioco. Il timer può essere messo in pausa se l'utente ha bisogno di una pausa dal gioco. Premendo il pulsante "Risolvi", il gioco può essere risolto automaticamente, una funzionalità che è utile se l'utente ha bisogno di aiuto per risolvere il gioco.
Questa serie di tutorial è composta da tre parti. Parte 1 inizia con la sezione successiva, chiamata "Descrizione del gioco", in cui forniamo maggiori dettagli del Puzzle, descrivendo il suo comportamento utilizzando schermate. Nella sezione successiva, "Screen Images in Android Tablet e iPad 2", forniamo immagini dello schermo del prodotto finale in un tablet Android con sistema operativo Android 4.0.3 (Ice Cream Sandwich) e iPad 2 con iOS 4.3. Segue "Processo di sviluppo Via Shiva3D Suite", in cui vengono introdotti i componenti principali di ShiVa3D Suite, l'Editor di ShiVa e lo Strumento di authoring di ShiVa, per poi fornire una panoramica del processo di sviluppo del Puzzle in una piattaforma indipendente con quei componenti.
Le seguenti sezioni riguardano l'implementazione. La seconda parte inizia con "Game Geometry", che si concentra sugli aspetti geometrici sottostanti del gioco e pone le basi per lo sviluppo del codice. In "Sviluppare il puzzle nell'editor ShiVa", introduciamo i principali costrutti del codice base che implementano le funzionalità del gioco, incluse le variabili, le funzioni e i gestori di eventi. Questa sezione fornisce anche istruzioni dettagliate su come sviluppare il gioco con l'Editor di ShiVa. Qui, descriviamo la creazione del progetto e del gioco e l'importazione di trame, il modello di intelligenza artificiale e la banca del suono dall'archivio di download che accompagna il tutorial. Questo conclude la parte 2 della serie.
La terza parte della serie continua la discussione in "Sviluppare il puzzle nell'editor ShiVa". Descriviamo l'importazione dei componenti HUD e apportiamo le modifiche finali al gioco sviluppato finora. Quindi, concludiamo "Sviluppare il puzzle in ShiVa Editor" tramite un test unitario. Nella sezione "Strumento di authoring", mostriamo come utilizzare lo Strumento di authoring di ShiVa per convertire il Puzzle in due diverse applicazioni, una per il sistema operativo Android e una per l'iPad. Concludiamo l'articolo con "Conclusioni", in cui vengono fornite numerose osservazioni conclusive.
Parte del materiale di riferimento in questo articolo è stato preso in prestito dal sito web ufficiale del prodotto ShiVa3D.
I file audio utilizzati nell'applicazione sono stati presi dal set di esempio che installa con ShiVa Editor (cartella Stonetrip \ ShiVa Editor PLE \ Data \ Samples \ Resources \ Sounds).
Il codice base per ruotare la finestra, in modo che la barra degli strumenti rimanga in cima mentre il dispositivo viene ruotato dall'utente, si basa su un altro tutorial di ShiVa 3D
(Http://www.stonetrip.com/developer/1704-rotate-the-viewport-according-to-the-device-rotation).
Il codebase per la gestione multi-touch prende le idee da un altro tutorial di ShiVa 3D (http://www.stonetrip.com/developer/1046-multitouch-management).
L'autore ha tratto grande beneficio da un libro su ShiVa3D, intitolato Introduzione alla programmazione 3D con ShiVa.
Infine, i video di questo tutorial sono stati prodotti utilizzando gli strumenti open source FreeStudio Video to Flash Converter e CamStudio.
In questa sezione, descriveremo il gioco Puzzle. L'applicazione inizia con la seguente schermata iniziale.
Dopo che è stata visualizzata la schermata iniziale, il gioco entra nello stato "Inizializzato". Questo stato inizia con i pezzi del puzzle provenienti dall'angolo inferiore sinistro del display che si spostano in posizioni casuali nell'area di gioco. Mentre si muovono, metà dei pezzi ruota in senso orario e l'altra metà ruota in senso antiorario (di seguito viene fornita un'istantanea).
Il breve video qui sotto mostra il gioco mentre si sta inizializzando.
Una volta che tutti i pezzi hanno preso le loro posizioni casuali, i pulsanti Avvia e Risolvi diventano abilitati nella barra degli strumenti in alto, come mostrato nella figura sotto. Ci sono un totale di 54 pezzi di puzzle disposti in 9 righe e 6 colonne. Come vedremo più avanti, il codice dell'applicazione può essere facilmente esteso per contenere qualsiasi numero di righe e colonne. Lo scopo del gioco è posizionare i pezzi per costruire correttamente l'immagine del puzzle nel minor tempo possibile. Se un pezzo è posizionato nella posizione corretta, i suoi bordi sono evidenziati in verde. Ad esempio, guarda il terzo pezzo nell'ultima riga qui sotto.
Il gioco inizia quando viene premuto il pulsante Start. Questo porta il gioco nello stato "Iniziato".
In questo stato, il pulsante Start si trasforma in un pulsante Pause e i pulsanti New e Solve sono disabilitati. Il timer inizia a contare. Quando l'utente sposta un pezzo in un'altra posizione, diciamo il pezzo A, il pezzo che ha sostituito si sposta automaticamente nella posizione originale del pezzo A. Questo è mostrato nella figura seguente. L'utente ha spostato il pezzo nell'angolo in alto a sinistra nell'angolo in basso a destra (movimento indicato dalla linea verde). Il pezzo del puzzle che ha sostituito si sposta nell'angolo in alto a sinistra per riempire la posizione vuota (pezzo indicato dalla freccia rossa). Il movimento automatico del pezzo richiede circa 3 secondi per essere completato. Sebbene non sia mostrato nelle istantanee sopra, il pezzo in movimento automaticamente ruota in senso orario o antiorario mentre viaggia. La decisione in senso orario o antiorario dipende dall'indice della colonna e della riga del pezzo.
Il video qui sotto mostra all'utente che preme il pulsante Start e quindi sposta un pezzo da una posizione a un'altra, sostituendo un altro pezzo.
Come accennato in precedenza, ci sono 54 pezzi del puzzle. Questi sono posti in posizioni fisse composte da 9 righe e 6 colonne come mostrato nella figura sottostante. I centri dei pezzi del puzzle coincidono con le posizioni fisse.
Per spostare un pezzo, l'utente preme sul pezzo con un dito e lo sposta come desiderato. Quando viene raggiunta la posizione di destinazione, l'utente rilascia il suo dito. Se la distanza tra la posizione fissa più vicina e il centro del pezzo del puzzle è inferiore a una tolleranza prestabilita (un parametro nel codice dell'applicazione), il pezzo scatta automaticamente nella posizione fissa. Altrimenti, il pezzo torna automaticamente alla sua posizione originale.
Quando il pezzo spostato dall'utente scatta in una posizione, il pezzo che ha sostituito si sposta nella posizione originale del pezzo spostato dall'utente. Se il pezzo spostato dall'utente non scatta in una nuova posizione, torna alla sua posizione originale. In entrambi i casi, il movimento viene eseguito automaticamente dall'applicazione. Quando inizia il movimento, il gioco entra in un nuovo stato chiamato "Sostituito".
Questo è uno stato in cui un pezzo del puzzle si muove automaticamente, ruotando in senso orario o antiorario durante il viaggio, e infine raggiunge una posizione bersaglio. Il movimento del pezzo del puzzle è controllato dall'applicazione. Quando il movimento è completato, in altre parole quando il pezzo raggiunge la sua posizione, il gioco ritorna nello stato "Iniziato".
Se un pezzo del puzzle è posto nella sua posizione corretta, i suoi bordi saranno evidenziati in verde. Nell'immagine della schermata di esempio qui sotto, i pezzi che hanno i bordi verdi sono nelle posizioni corrette. Quelli che non hanno i bordi verdi non sono nelle posizioni corrette.
Se un utente preme il pulsante Pausa, il gioco passerà nello stato "In pausa".
Nello stato di pausa, il timer è sospeso. Il pulsante Pausa si trasformerà nel pulsante Start e i pulsanti New e Solve saranno abilitati, come mostrato di seguito.
Nello stato di pausa, i pezzi del puzzle non possono essere spostati.
Nello stato di pausa, se l'utente preme il pulsante Nuovo, questo finirà il gioco e l'applicazione si riavvierà. Il gioco andrà nello stato "Inizializzato" (vedi sopra). I pezzi del puzzle provengono dall'angolo in basso a sinistra del display spostandosi in posizioni casuali nell'area di gioco.
Anche nello stato di pausa, se l'utente preme il pulsante Start, il gioco tornerà nello stato di avvio.
In pausa, se l'utente preme il pulsante Risolvi, questo finirà il gioco risolvendolo automaticamente. Risolvere il gioco in questo modo è utile se l'utente ha rinunciato a risolvere il gioco da solo. I pezzi si sposteranno dalle loro posizioni attuali nelle posizioni corrette per costruire l'immagine del puzzle (vedere la figura seguente). Il gioco entrerà nello stato "Risolto".
Il video qui sotto mostra il gioco quando l'utente preme il pulsante Risolvi.
Nello stato risolto, l'immagine del puzzle è stata costruita. Nell'immagine più a destra nella Figura 9 sopra, osserva che i pezzi del puzzle hanno tutti i bordi verdi perché sono tutti in posizione corretta.
Nello stato risolto, solo il pulsante Nuovo è abilitato. L'utente può premere il pulsante Nuovo per riavviare il gioco. Questo porterà il gioco nello stato Inizializzato. Come descritto in precedenza, i pezzi del puzzle provengono dall'angolo in basso a sinistra dello schermo e iniziano a spostarsi in posizioni casuali.
Il seguente diagramma mostra le transizioni di stato che riassumono la discussione sopra.
Le seguenti immagini mostrano il puzzle game su un tablet Android OS 4.0.3 durante lo stato Inizializzato. Un nuovo gioco sta iniziando, a sinistra, e subito dopo tutti i pezzi del puzzle hanno raggiunto le loro posizioni casuali, sulla destra.
Le seguenti immagini mostrano il puzzle game su un tablet Android OS 4.0.3, subito dopo che l'utente ha premuto il pulsante Risolvi, a sinistra, e dopo che il gioco è stato risolto, a destra.
L'immagine seguente mostra l'icona di avvio del puzzle game su un tablet Android OS 4.0.3.
Le seguenti immagini mostrano il puzzle game su iPad 2 durante lo stato Inizializzato. Un nuovo gioco sta iniziando, a sinistra, e poi subito dopo che tutti i pezzi del puzzle hanno raggiunto le loro posizioni casuali, sulla destra.
Le seguenti immagini mostrano il puzzle game su iPad 2, subito dopo che l'utente ha premuto il pulsante Risolvi, a sinistra, e dopo che il gioco è stato effettivamente risolto, a destra.
L'immagine seguente mostra l'icona di avvio del puzzle game su iPad 2.
In questa sezione, discuteremo diversi concetti di sviluppo del gioco con ShiVa3D. La maggior parte della discussione qui è presa in prestito dalla documentazione originale di ShiVa3D. Per ulteriori informazioni, consultare http://www.stonetrip.com/developer/doc/ e il manuale dell'utente fornito con l'editor ShiVa.
Si noti che ShiVa3D è principalmente un framework di sviluppo di giochi 3D. Il nostro gioco non ha funzionalità 3D, tuttavia, ed è un esempio di come ShiVa3D potrebbe essere usato anche per sviluppare giochi 2D.
Gioco rappresenta un gioco, l'entità principale dell'applicazione. Incapsula tutto il resto nell'applicazione come telecamere, scene, ecc. Un gioco è un'unità di schieramento indipendente.
AIModel implica 'intelligenza artificiale' e rappresenta il comportamento. Un AIModel può avere funzioni, gestori, stati e variabili. Nel Puzzle, useremo un singolo AIModel per definire la funzionalità del gioco.
copione contiene il codice in un AIModel, ad esempio codice per una funzione o gestore. Il linguaggio di scripting in ShiVa3D è Lua.
HUD sta per "Head Up Display" ed è un termine che rappresenta vari widget dell'interfaccia utente come pulsante, etichetta, elenco, cursore, ecc. che consente all'utente di interagire con il gioco.
Per sviluppare il gioco Puzzle, utilizzeremo la versione gratuita di ShiVa3D Suite (http://www.stonetrip.com/download.html), che include ShiVa Editor PLE (personal learning edition) e ShiVa Authoring Tool. Lo schema seguente offre una panoramica del processo di sviluppo che abbiamo utilizzato con questi strumenti.
Discutiamo i singoli passaggi di quel processo.
L'Editor ShiVa ha vari moduli per sviluppare e testare un'applicazione 2D o 3D, tipicamente un gioco, da zero. Una caratteristica importante di ShiVa Editor è che un'applicazione sviluppata con tale strumento può essere implementata (dopo l'authoring in ShiVa Authoring Tool) in diversi dispositivi con diversi sistemi operativi, ad es. un PC con sistema operativo Windows, un telefono cellulare con sistema operativo Android, iPhone / iPod Touch, iPad ecc. Alcune delle azioni di base che è possibile eseguire con l'Editor ShiVa sono le seguenti.
Sviluppare:
Test: È possibile eseguire un test iniziale dell'applicazione 2D o 3D nell'ambiente di sviluppo prima di distribuirlo in un dispositivo di destinazione. Il test viene eseguito tramite la funzione Anima o Anteprima di ShiVa Editor. Durante il test, è possibile modificare le impostazioni per le dimensioni dello schermo per vedere come verrà visualizzata l'applicazione nell'attuale dispositivo di destinazione. Nel Puzzle, per testare gli eventi dei pulsanti, abbiamo utilizzato i clic del mouse. Per testare gli eventi tattili, abbiamo utilizzato il trascinamento della selezione tramite il mouse.
Esportare: Al termine del test, esportare l'applicazione. Questo genererà un file con un'estensione stk. L'applicazione esportata verrà utilizzata dallo strumento di authoring ShiVa, che verrà discusso di seguito.
Lo scopo principale dello strumento Authoring di ShiVa è convertire un'applicazione, creata tramite l'Editor ShiVa, in un'applicazione specifica della piattaforma che può essere implementata in un particolare dispositivo, ad es. iPad o tablet Android. Alcune restrizioni si applicano al sistema operativo della macchina che esegue lo strumento Authoring di ShiVa e al dispositivo di destinazione per la conversione. Ad esempio, lo strumento di authoring ShiVa in esecuzione su una macchina Windows non può generare un'applicazione per iPad o iPhone. Durante lo sviluppo del puzzle, abbiamo utilizzato una macchina Windows per l'editor ShiVa. Per creare l'applicazione per Android Puzzle, abbiamo anche utilizzato una macchina Windows per eseguire lo strumento di authoring ShiVa. D'altra parte, per creare l'applicazione iOS Puzzle per iPad, abbiamo utilizzato una macchina Mac OS per eseguire lo Strumento di authoring ShiVa.
Alcune delle azioni di base che si possono eseguire con lo strumento di authoring ShiVa sono le seguenti.
Seleziona piattaforma di authoring: Per gli scopi di questa serie, le opzioni di piattaforma che ci interessano sono iPad e Android. Nota che per iPad è necessario avere lo Strumento di authoring ShiVa in esecuzione su un computer Mac OS.
Importare: Importa l'applicazione (un file con estensione stk) che è stata esportata tramite l'editor ShiVa.
Costruire: Quando crei per Android, configureremo lo Strumento di authoring ShiVa per generare un file apk Android che possa essere distribuito direttamente su un dispositivo Android compatibile. Quando crei per iPad, configureremo lo Strumento di authoring ShiVa per generare un progetto Xcode per lo sviluppo di iPad. Quindi, è possibile creare il progetto in Xcode e distribuire l'eseguibile su un dispositivo connesso (la creazione del progetto in Xcode e la distribuzione dell'eseguibile risultante su un dispositivo connesso non sono coperti in questa serie).
Per ciascuna piattaforma, lo strumento di authoring di ShiVa offre opzioni leggermente diverse per generare il suo prodotto finale. Ad esempio, durante la creazione di Android, è possibile generare un progetto Eclipse anziché un eseguibile Android. Come accennato in precedenza, abbiamo scelto di generare un eseguibile Android in questa serie.
Allo stesso modo, per iPad, si potrebbe generare un eseguibile per la distribuzione invece di generare un progetto Xcode. Come accennato in precedenza, abbiamo scelto di generare un progetto Xcode in questa serie. Per ulteriori dettagli, consultare il manuale utente dello strumento di creazione ShiVa.
Quello che segue è un elenco di configurazioni che abbiamo usato durante lo sviluppo del gioco Puzzle. Per ulteriori requisiti e prerequisiti, consultare la documentazione di Shiva3D descritta in http://www.stonetrip.com/developer/doc/editor/information/hardware e http://www.stonetrip.com/developer/doc/authoringtool/installation.
Sistema operativo della macchina di sviluppo: Windows 7
Nella parte 1 di questo tutorial, abbiamo introdotto il nostro gioco e descritto i suoi dettagli. Abbiamo anche riassunto il processo di sviluppo del gioco multipiattaforma tramite Shiva3D Suite. l'art 2 inizierà con "Game Geometry", che si concentra sugli aspetti geometrici sottostanti del gioco e pone le basi per lo sviluppo del codice. In "Sviluppare il puzzle in ShiVa Editor", introdurremo i principali costrutti del codice base che implementano le funzionalità del gioco, incluse le variabili, le funzioni e i gestori di eventi. Questa sezione fornirà anche istruzioni dettagliate su come sviluppare il gioco nell'Editor di ShiVa. Qui, descriveremo la creazione del progetto e del gioco e l'importazione di trame, modelli di intelligenza artificiale e banca del suono dall'archivio di download che accompagna il tutorial.
Accentsconagua