SpriteKit From Scratch Fondamenti

introduzione

SpriteKit, disponibile su iOS, tvOS e OS X, è un framework che consente agli sviluppatori di creare giochi 2D di alta qualità senza preoccuparsi delle complessità delle API grafiche, come OpenGL e Metal. Oltre a gestire tutta la grafica per gli sviluppatori, SpriteKit offre anche una vasta gamma di funzionalità extra, tra cui simulazione fisica, riproduzione audio / video e salvataggio / caricamento di giochi.

In questa serie, si impara tutto su SpriteKit e si acquisiscono abilità, che è possibile applicare a qualsiasi tipo di gioco 2D creato con questo eccellente framework. In questa serie, creiamo un gioco completamente funzionale in cui il giocatore controlla un'auto che deve evitare gli ostacoli che incrociano il suo percorso.

Prerequisiti

Questa serie richiede l'esecuzione di Xcode 7.3 o versioni successive, che include il supporto per Swift 2.2 e gli SDK per iOS 9.3, tvOS 9.2 e OS X 10.11.5. Devi anche scaricare il progetto iniziale da GitHub, che contiene le risorse visive da utilizzare nel gioco e alcune righe di codice per aiutarci ad iniziare.

La grafica utilizzata per il gioco di questa serie può essere trovata su GraphicRiver. GraphicRiver è un'ottima fonte per trovare grafica e grafica per i tuoi giochi.

1. Scene, nodi e viste

scene

La prima lezione di cui devi essere a conoscenza quando lavori con SpriteKit è la SKScene classe. Per qualsiasi gioco 2D creato con SpriteKit, hai diviso il contenuto del gioco in più scene, ciascuna con il proprio SKScene sottoclasse.

Mentre esamineremo la funzionalità e il funzionamento interno di SKScene classe più avanti in questa serie, quello che devi sapere per ora è che una scena è ciò a cui aggiungi il contenuto del gioco e agisce come nodo radice. Questo ci porta ai nodi.

Nodi (sprite)

Il SKNode classe, che SKScene è una sottoclasse di, è usato per rappresentare qualsiasi tipo di oggetto all'interno della scena. Mentre ci sono molti diversi tipi di nodi disponibili in SpriteKit, comunemente indicati come sprite, condividono le stesse proprietà chiave con l'essere più importante:

• posizione (CGPoint)
• xScale (CGFloat): rappresenta la scala orizzontale di un nodo
• yScale (CGFloat): simile a xScale ma agisce invece nella direzione verticale
• alfa (CGFloat): rappresenta la trasparenza del nodo
• nascosto (Bool): valore che determina se il nodo deve essere visibile o meno
• zRotation (CGFloat): rappresenta l'angolo, in radianti, che il nodo deve essere ruotato
• zPosition (CGFloat): utilizzato per determinare quali nodi devono essere visualizzati sopra altri nodi nella scena

Come puoi vedere, le proprietà sopra ti permettono di posizionare, ruotare e modificare accuratamente l'aspetto di base di ogni nodo in una scena.

Proprio come è possibile aggiungere sottoview a qualsiasi UIView oggetto in UIKit, in SpriteKit puoi aggiungere qualsiasi numero di bambino nodi a un nodo esistente. Questo è fatto usando il addChild (_ :) metodo su qualsiasi SKNode oggetto.

Anche simile a UIView oggetti, le proprietà di posizione e scala di qualsiasi nodo figlio sono relative al nodo genitore a cui è stato aggiunto. Questo è come un SKScene oggetto, essendo una sottoclasse di SKNode, può fungere da nodo principale della scena. Per tutti i nodi che vuoi nella tua scena, devi aggiungerli come figli della scena stessa usando il addChild (_ :) metodo.

Il SKNode la classe da sola non è in grado di produrre alcun contenuto visivo. Per fare ciò, è necessario utilizzare una delle tante sottoclassi disponibili in SpriteKit. Alcuni importanti SKNode le sottoclassi da prendere in considerazione sono:

• SKSpriteNode: scatta un'immagine e crea uno sprite strutturato nella scena
• SKCameraNode: controlla da dove viene visualizzata la scena
• SKLabelNode: esegue il rendering di una stringa di testo
• SKEmitterNode: utilizzato in combinazione con un sistema di particelle per il rendering di effetti particellari
• SKLightNode: crea effetti di luce e ombre nella scena

In tutta questa serie, usiamo questi tipi di nodi e anche alcuni degli altri meno comuni.

Visualizzazioni

Per visualizzare il contenuto di SpriteKit in un'applicazione funzionante, è necessario utilizzare il SKView classe. Questa è una sottoclasse di UIView (o NSView su OS X), che può essere facilmente aggiunto a qualsiasi parte della tua applicazione. Per presentare una scena SpriteKit, devi chiamare il presentScene (_ :) o presentScene (_: transizione :) metodo su un SKView esempio. Il secondo metodo è usato quando vuoi un'animazione personalizzata o una transizione nella tua nuova scena.

Oltre a rendere solo il tuo contenuto SpriteKit, il SKView la classe offre anche alcune funzionalità extra e molto utili. Questo include a Bool proprietà chiamato in pausa, che può essere facilmente utilizzato per mettere in pausa o riprendere una scena.

Ci sono anche diverse proprietà che sono utili durante il debug del gioco e possono mostrare informazioni, come il FPS (frame per secondo) corrente, il numero dei nodi e i campi fisici all'interno della scena. Se vuoi dare un'occhiata a tutte le proprietà disponibili, controlla il SKView riferimento di classe.

2. Editor di scene

Ora che abbiamo esaminato le classi di base usate nei giochi SpriteKit, è tempo di creare la nostra prima scena. Mentre le scene possono essere create interamente a livello di codice, Xcode fornisce un eccellente strumento di editing delle scene, che ti consente di trascinare e rilasciare facilmente i nodi nella scena mentre modifichi la loro posizione, aspetto e altre proprietà.

Aprire il progetto iniziale e creare un nuovo file premendo Comando + N o selezionando Nuovo> File ...  da Xcode's File menu. Scegli il iOS> Risorse> SpriteKit Scene tipo di file e clic Il prossimo.

Nominare il file MainScene e salvalo. Ora dovresti vedere il tuo nuovo file di scena nel Project Navigator.

Selezionare MainScene.sks per aprire l'editor di scene di Xcode. Al momento, la tua scena è vuota e ha uno sfondo grigio. Non ci sono ancora nodi. Prima di aggiungere alcuni sprite alla tua scena, dobbiamo prima modificarne le dimensioni.

Nel Ispettore degli attributi a destra, cambia le dimensioni della tua scena per avere una larghezza (W) di 320 punti e un'altezza (H) di 480 punti.

Questa dimensione della scena è correlata alla dimensione dello schermo più piccola che stiamo prendendo di mira (schermo da 3,5 "su iPhone 4s) in modo da poter dimensionare correttamente i nostri nodi. Modificheremo la dimensione della scena per adattarla alle dimensioni dello schermo del dispositivo corrente in un tutorial successivo.

Per aggiungere nodi alla scena, apri il Libreria di oggetti sulla destra. Potrebbe essere necessario fare clic sull'icona evidenziata in blu se il Libreria di oggetti non è visibile.

Dal Libreria di oggetti, trascinare a Sprite di colore al centro della scena.

Apri il Ispettore degli attributi a destra e cambia il Struttura, Posizione, e Taglia attribuisce ai seguenti valori:

La tua scena dovrebbe ora avere un'auto nel mezzo, come mostrato di seguito.

Prendi nota che, a differenza del sistema di coordinate UIKit, in SpriteKit, il posizione di un nodo si riferisce sempre al suo centro dal punto di origine dell'angolo in basso a sinistra della scena (0, 0). Questo è il motivo per cui si imposta la posizione dell'auto (160, 120) pone il centro dell'auto 160 punti in da sinistra e 120 punti in alto dal fondo.

3. Visualizzazione di una scena

Con la tua scena completata per ora, apri ViewController.swift e aggiungi una dichiarazione di importazione per il framework SpriteKit in alto. Questo ci consente di utilizzare le classi e le API di SpriteKit in ViewController.swift.

import UIKit import SpriteKit

Successivamente, aggiorna l'implementazione di viewDidLoad () metodo del ViewController classe come segue:

override func viewDidLoad () super.viewDidLoad () lascia skView = SKView (frame: self.view.frame) lascia scena = SKScene (fileNamed: "MainScene") skView.presentScene (scena) view.addSubview (skView)

Con questo codice, per prima cosa creiamo un SKView istanza, che ha le stesse dimensioni della vista del controller della vista. Successivamente, carichiamo la nostra scena dal file che abbiamo creato usando il SKScene (fileNamed :) initializer. Facciamo il SKView istanza presenta questa scena e quindi aggiungila come sottoview alla vista principale.

Seleziona il iPhone 4s simulatore (in modo che la nostra scena sia correttamente dimensionata per lo schermo) e creare ed eseguire l'applicazione. Dovresti vedere una schermata simile alla seguente:

Conclusione

In questo primo tutorial di SpriteKit From Scratch, hai imparato le basi di viste, scene e nodi in SpriteKit. Hai creato una scena base con uno sprite usando l'editor di scene integrato in Xcode, il che rende la creazione di scene molto più semplice rispetto a quando si esegue tutto in modo programmatico.

Nel prossimo tutorial, aggiungeremo ulteriori funzionalità al nostro gioco utilizzando le azioni di SpriteKit per spostare l'auto nella scena. Ti verrà anche introdotta la simulazione fisica in SpriteKit rilevando quando l'auto si scontra con un altro nodo.

Come sempre, lascia i tuoi commenti e feedback nella sezione commenti qui sotto.