Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Sviluppare un gioco tipo Monkey Ball con Unity

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Chip (you can also view the original English article)

Final product image
What You'll Be Creating

Introduzione

In questo tutorial impareremo come creare un gioco 3D mobile usando C# e Unity L'obbiettivo del gioco è quello di usare l'accellerometro per muovere la palla fino a raggiungere la porta.

In questo tutorial impareremo alcuni aspetti dello sviluppo dei videogiochi con Unity

  • Primitive 3D
  • Controlli accellerometro
  • Movimenti della camera
  • Fisica
  • GUI con textures

1. Creare un Nuovo Progetto Unity

Aprite Unity e selezionate New Project dal menù File per aprire il dialogo dei nuovi progetti. Dite a Unity dove volete salvare il progetto ed impostate il default (Set up default for) nel menù a 3D.


2. Creare le impostazioni

Nella fase successiva facciamo conoscenza dell'interfaccia utente Unity. Impostate il progetto per lo sviluppo mobile scegliendo Build Settings dal menu File e selezionate la piattaforma che vi interessa.


3. Dispositivi

La prima cosa che dobbiamo fare dopo aver selezionato la piattaforma è scegliere il formato della grafica che useremo nel gioco. Questo ci aiuterà a scegliere la dimensione adeguata per tutte le texture 3D e la grafica 2D, evitando effetti di sfocatura o l'utilizzo di texture troppo grandi per il dispositivo scelto. Ad esempio, la grafica dovrà avere una risoluzione più elevata se ci si rivolge ad un iPad con un display retina rispetto ad un Lumia 520.

iOS

  • iPad senza Retina: 1024px x 768px
  • iPad con Retina: 2048px x 1536px
  • 3.5" iPhone/iPod Touch senza Retina: 320px x 480px
  • 3.5" iPhone/iPod con Retina: 960px x 640px
  • 4" iPhone/iPod Touch: 1136px x 640px

Android

Poiché Android è una piattaforma open, si cono una vasta gamma di dispositivi, risoluzioni dello schermo e densità di pixel. Alcuni dei più comuni sono elencati di seguito.

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

Windows Phone & BlackBerry

  • Blackberry Z10: 720px x 1280px, 355 ppi
  • Nokia Lumia 520: 400px x 800px, 233 ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367 ppi

Notate che il codice che scriveremo in questo tutorial potrà essere usato per una qualsiasi piattaforma.


4. Esportare la grafica

A seconda del dispositivo a cui ci si rivolge, può essere necessario convertire la grafica alla dimensione e alla densità di pixel consigliata. È possibile farlo con qualsiasi editor di immagini, quello che preferite. Ho usato la funzione Adjust Size... nel menu Tools nella Preview di OS X.


5. Interfaccia Utente di Unity

Possiamo modificare la risoluzione dal pannello Game.


6. Interfaccia di Gioco

L'interfaccia del nostro gioco sarà semplice. La schermata sopra vi dà un'idea della grafica che useremo e come apparirà l'interfaccia del gioco finito. È possibile trovare le risorse grafiche e i sorgenti del tutorial su GitHub.


7. Linguaggio di Programmazione

Quando si usa Unity è possibile sceglie tra tre linguaggi di programmazione, C #, UnityScript, una variazione di JavaScript e Boo (n.d.t. Boo non è più presente dalla versione 5 di Unity). Ogni linguaggio di programmazione ha i suoi pro e contro, e sta a voi decidere quale preferite. La mia preferenza personale va al linguaggio di programmazione C # e sarà il linguaggio usato in questo tutorial.

Se deciderete di utilizzare un altro linguaggio di programmazione, assicuratevi di dare un'occhiata allo Unity's Script Reference per gli esempi.


8. Effetti Sonori

Userò una serie di suoni per migliorare l'esperienza audio del gioco. Gli effetti sonori utilizzati in questo tutorial sono stati ottenuti da playonloop.com e Freesound.


9. Modelli 3D

Per creare il nostro gioco prima di tutto abbiamo bisogno dei nostri modelli 3D. Vi consiglio 3docean per i modelli di alta qualità, texture e molto altro ma per provare o imparare un paio di modelli gratuiti vanno bene. I modelli di questa esercitazione sono stati scaricati da SketchUp 3D Warehouse dove è possibile trovare una buona varietà di modelli di tutti i tipi.

Ora, dal momento che Unity non riconosce il formato di file SketchUp dobbiamo convertirlo in qualcosa che Unity possa importare. In primo luogo abbiamo bisogno di scaricare la versione gratuita di SketchUp, che si chiama SketchUp Make.

Aprite il vostro modello 3D in SketchUp Make, selezionate Export> 3D Model dal menu File e scegliete Collada (* .dae).

Scegliere un nome ed una posizione, quindi fare clic sul pulsante Save. Questo creerà un file ed una cartella per il modello 3D. Il file contiene i dati per l'oggetto 3D, mentre la cartella contiene le texture del modello. Quindi, come spiegato nel passaggio successivo, è possibile importare il modello in Unity.


10. Importare gli Assets

Prima di iniziare a scrivere codice, abbiamo bisogno di aggiungere le risorse al progetto Unity. Lo possiamo fare in diversi modi:

  • selezionare Import New Asset dal menu Assets
  • aggiungete gli elementi nella cartella delle risorse nel progetto
  • trascinate e rilasciate gli assets nella finestra di progetto

Dopo aver completato questo passaggio, dovremmo vedere gli assets nella cartella Assets del progetto dal pannello Projects.


11. Creare Scene

Siamo pronti a creare la scena del nostro gioco trascinando gli oggetti nel pannello Hierarchy o Scene. Per creare il livello useremo anche le primitive native di Unity 3D, come mostrato nei passaggi successivi.

12. Setup della Camera

Prima di tutto posizione la Camera Principale un pò più alta per avere la vista che vogliamo. Selezionate il pannello Hierarchy e regolate i valori Transform nella finestra Inspector e riportate i valori mostrati sotto.

Non preoccuparti se non vedi alcuna modifica. Non è ancora stato creato nulla che la camera possa vedere. Successivamente, utilizzate l'Inspector per impostare il Background (colore di sfondo) RGB: 0, 139, 252.

13. Background (sfondo)

La piattaforma del nostro livello galleggerà sopra uno sfondo, rappresentato da un mare. Lo creeremo usando le primitive di Unity, un semplice Plane (piano) con una texture applicata su di esso.

Sebbene Unity possa lavorare con qualsiasi oggetto 3D di qualsiasi tipo creato da altri programmi, a volte è più facile e/o più conveniente usare le primitive per i prototipi.

Per creare il mare, ad esempio, selezionare Create Other > Plane dal menu GameObject e regolare i valori Transform nella finestra dell'Inspector inserendo quelle riportate di seguito.

Si dovrebbe vedere un quadrato nel pannello Scene. Lo useremo per rilevare quando il giocatore cade dalla piattaforma, così da finire il gioco.

Vale la pena ricordare che questi oggetti primitivi hanno già un Mesh Collider connesso, il che significa che rilevano automaticamente le collisioni o attivano eventi quando entrano in contatto con un RigidBody (corpo rigido).

14. Texture Material

Per applicare una texture al piano che rappresenta il mare abbiamo bisogno di creare un Material (materiale). Un Material viene utilizzato per definire come un GameObject appare ed è essenziale per aggiungere una texture ad un GameObject.

Selezionate Create> Material dal menu Assets per crearne uno, trovatelo nel pannello Assets, e utilizzate l'Inspector per selezionare la texture che volete usare come mare. Questi sono i settaggi che ho usato:

Noterete un messaggio nel selezionare il materiale che vi consiglia di utilizzare Mobile/Diffuse come shader, perché il colore bianco di default non fa nulla. Modificarla a Mobile/Diffuse aiuterà le prestazioni.


15. Aggiungere la luce

Avrete notato che il mare è un pò più scuro di quanto dovrebbe essere. Per risolvere questo problema, abbiamo bisogno di aggiungere una Light (luce) alla nostra scena. Selezionate Create Other dal menu GameObject e selezionate Directional Light (luce direzionale). Questo creerà un oggetto che emette un fascio di luce. Cambiate i suoi valori di Transform come mostrato nella seguente schermata per fargli illuminare il mare.

Così sembra molto meglio.

16. Creazione delle Piattaforme

Le piattaforme sono parte del nostro livello e sono utilizzate dal giocatore per spostare la palla fino al portale sull'altro lato del mare.

Create un Plane come avete fatto per il mare e regolate i valori di Transform nella finestra dell'Inspector come illustrato di seguito. Questo creerà e metterà al suo posto la prima piattaforma.

Ora possiamo usare gli strumenti di Unity Move e Rotation per creare le altre piattaforme. Sono tutti della stessa dimensione così da usarli in verticale o in orizzontale duplicandoli con Command+D su OS X e Ctrl+D su Windows.


17. Texture delle piattaforme

Create un nuovo Material come abbiamo fatto al passo 14 e applicateci la texture. Il mio assomiglia a questo:

Regolate la x e y piastrellando (tiling) finché non si è soddisfatti del risultato.


18. Cilindri ai bordi

Abbiamo bisogno di creare un bordo per evitare che il giocatore cada troppo facilmente. Per fare questo, useremo un nuovo tipo di primitiva, un Cylinder (cilindro).

Selezionate Create Other > Cylinder dal menu GameObject e regolate i valori Transform nella finestra dell'Inspector come illustrato di seguito.

Questo aggiungerà un piccolo cordolo al bordo della prima piattaforma. Create un nuovo Material e cambiate il colore nell'Inspector a RGB: 255, 69, 0.

Il risultato dovrebbe apparire così:

Utilizzate Comand+D (Ctrl+D su Windows) per duplicare il bordo e lo strumento Scale per cambiare la sua dimensione. Posizionate i duplicati ai bordi dei limiti della piattaforma usando gli strumenti di Unity.


19. Portali

Il portale è la meta del gioco. Il giocatore userà l'accelerometro per controllare la palla e raccogliendo oggetti ed evitando di cadere dalla piattaforma, la porterà in quel punto. Il portale è un modello 3D, che abbiamo importato al passo 10.

Trascinatelo sulla Scene (scena) o sul pannello Hierarchy (gerarchia) e cambiate il suo Transform con i seguenti valori:

Questo lo posizionerà alla fine della piattaforma.


20. Portal Collider (collisore)

Poiché i modelli 3D importati non hanno un collisore di default, abbiamo bisogno di collegarne uno. Dal momento che abbiamo solo bisogno di verificare se la palla colpisce la zona blu del portale, ci attaccheremo il collider.

Date un'occhiata al modello del portale nella vista Hierarchy e noterete un piccolo triangolo a sinistra del suo nome. Fate clic sul triangolino per espandere il gruppo del portale e selezionate il primo elemento. Ho aggiunto il suffisso -Collider per chiarezza.

Fate clic sul pulsante Add Component nell'Inspector e scegliete Physics > Mesh Collider. Questo aggiungerà un collisore (collider) utilizzando la forma dell'area selezionata del modello.


21. Sorgete audio del Portale

Per fornire un feedback al giocatore, lanceremo un effetto sonoro quando la palla tocca il collisore del portale. Poiché facciamo scattare l'evento utilizzando il collider creato in precedenza, dobbiamo aggiungere la sorgente audio a quello stesso oggetto.

Selezionare dal pannello Hierarchy, fare clic sul pulsante Add Component nella finestra Inspector e selezionare Audio Source dalla sezione Audio.

Deselezionare Play on Awake e fare clic sul piccolo punto sulla destra, sotto l'icona a forma di ingranaggio, per selezionare il suono che si desidera riprodurre.

22. Aggiunta delle isole

Le isole non sono altro che elementi decorativi per rendere il livello meno vuoto. Ho usato un modello 3D importato ed un Cylinder per farli. Non entrerò nei dettagli della creazione delle isole dal momento che non sono essenziali per il gioco. Con quello che avete imparato fino ad ora, dovreste essere in grado di crearle da soli.


23. Aggiungere le Banane

Come in Monkey Ball, il giocatore sarà in grado di raccogliere delle banane nel corso del gioco. Inizia trascinando il modello dal pannello Assets nello Scene. Non preoccuparti ancora per la sua posizione, perché dovremo convertirlo in un Prefab in seguito visto che verrà utilizzata più volte.

24. Mesh Collider Banana

Come ho detto prima, i modelli importati non hanno un collisore di default, quindi abbiamo bisogno di collegarne uno alla banana. Fare clic sul pulsante Add Component nell'Inspector e scegli Physics > Mesh Collider. Questo aggiungerà un collisore che utilizza la forma del modello stesso. Assicurati di controllare la casella di controllo Trigger, perché vogliamo che rilevi le collisioni, ma non vogliamo che la palla reagisca con la banana (NdA nel senso fisico).


24. Aggiunta del Player

È il momento di creare il tuo personaggio del gioco, che sarà una semplice primitiva Sphere. Selezionare Create Other> Sphere dal menu GameObject per creare la primitiva e modificare i suoi valori di Transform nella finestra Inspector come illustrato di seguito.

Questo crea la sfera e la posiziona all'inizio del nostro livello.

Per rendere la sfera semitrasparente, abbiamo bisogno di cambiare le sue opzioni Shader. Aprite l'Inspector e cambiate lo shader in Transparent/Diffuse.


25. RigidBody del Player

Per rilevare una collisione con il giocatore, abbiamo bisogno di collegare un RigidBody (corpo rigido) ad esso. Per aggiungere uno, selezionate Add Component dal pannello Inspector, e poi Physics > RigidBody. È possibile lasciare le impostazioni con i valori predefiniti.


26. GUI Textures

Per visualizzare l'interfaccia utente del gioco, useremo la Textures GUI di Unity. La documentazione di Unity fornisce una chiara spiegazione della GUI Textures:

Le GUI texture sono visualizzate come immagini piatte in 2D. Sono realizzate appositamente per gli elementi dell'interfaccia utente, pulsanti o decorazioni. Il loro posizionamento e ridimensionamento viene eseguito lungo solo l'asse x ed y, e sono misurate in coordinate dello schermo, piuttosto che nelle Coordinate Mondo.

Per impostazione predefinita, le immagini importate nella cartella Assets vengono convertite in Textures che possono essere applicate a oggetti 3D. Abbiamo bisogno di cambiare questa GUI Textures per le immagini che vogliamo usare nell'interfaccia utente del gioco.

Selezionare le immagini che desideriamo convertire nel pannello Assets ed aprite l'Inspector, fate clic sul menu Texture Type e selezionate GUI.

Ora è possibile trascinare e rilasciare le immagini nella Scene. Le immagini appariranno sempre di fronte a ogni oggetto sulla scena e saranno trattate come elementi 2D.

27. GUI Text

All'interno di ogni elemento della GUI, verranno visualizzati un numero che indica il numero di banane che il giocatore ha raccolto ed il tempo che il giocatore ha a disposizione.

Selezionare Create Other > GUI Text dal menu GameObject per creare un oggetto di testo, posizionatelo al centro dell'elemento GUI e modificate il testo nel pannello Hierarchy a 0. Fare lo stesso per il tempo sulla destra. Ho impostato il tempo predefinito a 30 secondi.

È possibile utilizzare un font personalizzato per il testo aggiungendo il font stesso nella cartella Assets e quindi modificando la proprietà Font del testo nella finestra Inspector.

28. Aggiungere gli Scripts

E' tempo di scrivere un pò di codice. Con l'interfaccia utente a posto, possiamo iniziare a scrivere il codice necessario per aggiungere funzionalità al gioco. Faremo questo per mezzo degli script. Gli script sono collegati a diversi oggetti del gioco. Seguire i passi successivi per imparare come aggiungere interazione al livello che abbiamo appena creato.


29. Movimento nello Scene

Cominceremo facendo uso del dispositivo accelerometer. Muovere il player utilizzando l'accelerometro è abbastanza semplice in Unity. Non c'è niente da installare ed è facile da capire.

Selezionate lo stage, fate clic sul pulsante Add Component nella finestra Inspector e selezionate New Script. Chiamate lo script MoveScene e non dimenticate di cambiare il linguaggio a C#. Aprite il file appena creato e aggiungete il seguente pezzo di codice.

Usiamo il metodo Update per richiedere dati dall'accelerometro ad ogni frame utilizzando la proprietà Input.acceleration che misura il movimento del dispositivo in uno spazio tridimensionale. Questo ci permette di ottenere i valori x, y, z, e di usarli per controllare la posizione del giocatore.

Poi applichiamo i valori ottenuti alla proprietà transform.rotation del livello invocando Quaternion.Euler, che restituisce i valori di rotazione. Si noti che dividiamo i valori dell'accelerometro per evitare che il giocatore si muova troppo velocemente, rendendo difficile il gameplay.

Modifichiamo solo il valore x e y del livello, perché abbiamo solo bisogno di inclinare e non di avvicinarsi o di allontanarci dalla fotocamera.

30. Seguimento della Camera

Lo script seguente è associato alla Main Camera. Calcoliamo lo spazio tra la telecamera ed il giocatore e lo manteniamo mentre la palla si muove.


Lo script utilizza due variabili che vale la pena spiegare:

  • player: Questo è un riferimento al giocatore nello Scene. Possiamo impostarlo nella finestra Inspector.
  • playerOffset: Questa è la distanza tra la fotocamera e il giocatore. Poiché manteniamo la stessa distanza tra la telecamera ed il giocatore, la telecamera segue il giocatore ad ogni suo movimento. L'offset viene calcolato nel metodo Start.

Direzioniamo la telecamera verso il giocatore ed impostiamo la sua posizione con la posizione del giocatore più il valore di playerOffset. Poiché facciamo questo nel metodo Update, la posizione della telecamera viene calcolata e aggiornato di ogni fotogramma. Il risultato è che la telecamera segue il giocatore. Questa è una strategia semplice ma efficace per creare una telecamera che segue il giocatore.

31. Catturiamo le Banane

Lo script seguente è associato alla banana e gestisce le interazioni con essa. Iniziamo ottenendo i riferimenti al suono corrispondente e a il testo che visualizza il numero di banane raccolte, poiché abbiamo bisogno di riprodurre il suono e dobbiamo aumentare il contatore in alto a sinistra quando il giocatore si scontra con una banana. Dopo aver dichiarato le variabili nello script, è necessario impostare questi riferimenti nell'Inspector.

Dopo chiamiamo un metodo che rileva quando la palla si scontra con una banana. Quando questo accade, suoniamo il suono ed aumentiamo il contatore.

Per modificare il contatore, creiamo una variabile utilizzando il valore della GUI Text e utilizzimao il metodo int.Parse per convertire la stringa in un numero ed incrementare il numero stesso di 1. Quindi impostiamo il valore della GUI Text, convertendo prima il numero in una stringa invocando il metodo toString. Infine, invochiamo Destroy per rimuovere il game object banana.

32. Cadere dalla Piattaforma

La classe seguente viene utilizzata per rilevare quando il giocatore cade dalla piattaforma in mare. Agganciate lo script al game object mare.

Questa semplice classe utilizza il metodo OnCollisionEnter per rilevare quando la palla si scontra con il mare, il che significa che il giocatore è caduto dalla piattaforma. Quando questo accade, suoniamo il suono associato al mare e utilizziamo il metodo Invoke per chiamare il metodo Reload, che fa ripartire il gioco ricaricando la scena corrente.

Il secondo parametro del metodo Invoke definisce il ritardo con cui viene richiamato il metodo Reload. Questo è necessario perché vogliamo che il suono termini prima di iniziare una nuova partita.

33. Controllare il Tempo

La classe successiva, Timer, è attaccata alla GUI in alto a destra. Riduciamo il tempo e terminiamo il gioco quando il contatore raggiunge lo 0.


Manteniamo un riferimento al testo nella variabile timeText per modificare l'interfaccia utente più facilmente. Nel metodo Start, si richiama il metodo InvokeRepeating, che richiama ripetutamente il metodo ReduceTime.

Per aggiornare il testo nell'interfaccia utente, creiamo una variabile per convertire il testo in un numero, proprio come abbiamo fatto in precedenza, sottraiamo un secondo e aggiorniamo l'interfaccia utente con il risultato.

Quando il contatore raggiunge lo 0, il suono appropriato viene riprodotto e distruggiamo il testo del contatore. Invochiamo il metodo Reload con un ritardo per riavviare il gioco quando il suono ha finito.

34. Livello Completato

L'ultima classe, EndLevel, viene utilizzata per rilevare quando il giocatore raggiunge il portale. Quando il giocatore passa attraverso il portale, visualizziamo un messaggio sullo schermo e distruggiamo la palla. Lo facciamo per evitare che la palla cada in mare.

Il metodo Instantiate viene utilizzato per creare un'istanza del messaggio che viene visualizzato al giocatore. Questo ci consente di utilizzare l'elemento GUI dagli Assets del progetto, invece di averlo sulla scena. Infine, facciamo ripartire il gioco con un ritardo di due secondi.

35. Testing

E' tempo di testare il gioco. Premere Comand+P per giocare al gioco dentro a Unity. Se tutto funziona come previsto, siamo pronti per le fasi finali.


36. Settaggi del Player

Quando sei convinto del gioco, è il momento di selezionare Build Settings e dal menu File e fare clic sul pulsante Player Settings. Questo dovrebbe far apparire il Player Settings nella finestra dell'Inspector in cui è possibile impostare i parametri per l'applicazione.

Queste impostazioni sono dati specifici della applicazioni che includono l'autore o la società, la risoluzione grafica della app, la modalità di visualizzazione, la modalità di rendering (CPU, GPU), compatibilità del sistema operativo, ecc Configurate le impostazioni in base alle periferiche per cui stiamo lavorando e lo store o mercato in cui si prevede di pubblicare l'applicazione.


37. Le icone e le Immagini Splash

Utilizzando la grafica creata in precedenza, è ora possibile creare un'immagine splash ed una bella icona per il vostro gioco. Unity vi propone le dimensioni richieste, che dipendono dalla piattaforma per cui si sta costruendo.

38. Build and Play


Una volta che il progetto è configurato correttamente, è il momento di rivedere le Build Settings cliccare sul pulsante Build. Questo è tutto quello che serve per costruire il vostro gioco per il test e/o la distribuzione.

Conclusioni

In questo tutorial, abbiamo imparato come utilizzare l'accelerometro per controllare il movimento del giocatore, la GUI Texture, le Primitive e altri aspetti dello sviluppo del gioco in Unity. Vi incoraggio a sperimentare con il risultato ottenuto e a personalizzare il gioco per renderlo davvero unico. Spero che questo tutorial vi sia piaciuto e che lo giudichiate utile.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.