Share
In questa serie, stiamo imparando a utilizzare SpriteKit per creare giochi 2D per iOS. In questo post, continueremo la nostra esplorazione dei nodi SpriteKit e impareremo a conoscere un tipo speciale di nodo chiamato "sprite", SKSpriteNode.
Per seguire questo tutorial, basta scaricare il repository GitHub allegato. Ha una cartella chiamata EsempioProject Starter. Apri il progetto in quella cartella in Xcode e sei pronto per partire!
Un SKSpriteNode è disegnato come un rettangolo con una trama mappata su di esso, o come un rettangolo non strutturato colorato. Creare a SKSpriteNode con una texture mappata su di esso è il più comune, in quanto è così che si dà vita alle opere d'arte del tuo gioco.
Aggiungi il seguente al didMove (a :) metodo all'interno GameScene.swift.
override func didMove (per visualizzare: SKView) let startGameLabel = SKLabelNode (testo: "Inizia partita") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) lascia redSprite = SKSpriteNode (color: .red, dimensione: CGSize (larghezza: 200, altezza: 200)) addChild (redSprite)
Qui stiamo usando la convenienza intiailizer init (colore: dimensioni :) che disegnerà uno sprite rettangolare con il colore e le dimensioni che passi come parametri. Se verifichi il progetto ora, vedrai la metà del quadrato rosso.
Forse ti starai chiedendo perché solo metà dello sprite sta mostrando da quando lo abbiamo già determinato SKNodeLe origini di0,0). Questo perché il SKSpriteNodela cornice e quindi la sua trama è centrata sulla sua posizione. Per cambiare questo comportamento, puoi cambiare lo sprite punto di ancoraggio proprietà, che determina il punto in cui viene posizionata la cornice. Lo schema seguente mostra come punto di ancoraggio lavori.
Il punto di ancoraggio è specificato nel sistema di coordinate dell'unità, che posiziona (0,0) in basso a sinistra e (1,1) nell'angolo in alto a destra del fotogramma. L'impostazione predefinita per SKSpriteNodes è (0.5,0.5).
Vai avanti e cambia il punto di ancoraggio proprietà a (0,0) e notare la differenza che fa.
override func didMove (per visualizzare: SKView) let startGameLabel = SKLabelNode (testo: "Inizia partita") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) lasciare redSprite = SKSpriteNode (color: .red, dimensione: CGSize (larghezza: 200, altezza: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) addChild (redSprite)
Ora, se provi, vedrai che lo sprite è allineato perfettamente con la parte inferiore sinistra della scena.
Ora spostiamolo in alto al centro della scena cambiando la sua proprietà di posizione. Sostituisci il tuo didMove (a :) funzione con il seguente:
override func didMove (per visualizzare: SKView) let startGameLabel = SKLabelNode (testo: "Inizia partita") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) lascia redSprite = SKSpriteNode (color: .red, dimensione: CGSize (larghezza: 200, altezza: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) redSprite.position = CGPoint (x: size.width / 2 - 100, y: size.height - 210) addChild (redSprite)
Nota come abbiamo dovuto sottrarre entrambi X e y valori per centrare lo sprite. Se avessimo lasciato il punto di ancoraggio al suo valore predefinito sarebbe già stato centrato sul X asse. È importante ricordare che quando si modifica il punto di ancoraggio, potrebbe essere necessario apportare alcune modifiche al posizionamento.
Quella casella rossa è utile per esercitarti con il posizionamento, ma di solito vuoi strutturare il tuo sprite con l'artwork per il tuo gioco.
Creiamo una trama SKSpriteNode. Aggiungi il seguente codice nella parte inferiore del didMove (a :) metodo.
override func didMove (per visualizzare: SKView) ... let player = SKSpriteNode (imageNamed: "player") player.position = CGPoint (x: size.width / 2, y: 300) addChild (player)
Qui usiamo l'inizializzatore di convenienza init (imageNamed :), che prende come parametro il nome di un'immagine senza estensione. Questo è il modo più semplice per creare uno sprite strutturato mentre crea la texture per te dall'immagine che passi.
L'altro modo per creare una trama SKSpriteNode è quello di creare un SKTexture in anticipo, e utilizzare uno degli intializzatori che accettano una trama come parametro.
Creiamo un altro paio SKSpriteNodes e modificare alcune delle loro proprietà. Ancora una volta, aggiungi questi alla parte inferiore del tuo didMove (a :) funzione.
override func didMove (per visualizzare: SKView) ... let enemy1 = SKSpriteNode (imageNamed: "enemy1") enemy1.position = CGPoint (x: 100, y: 300) enemy1.xScale = 2 addChild (enemy1) let enemy2 = SKSpriteNode ( imageNamed: "enemy2") enemy2.position = CGPoint (x: size.width - 100, y: 300) enemy2.zRotation = 3.14 * 90/180 addChild (enemy2)
Qui ne creiamo due SKSpriteNodeS, enemy1 e enemy2. Abbiamo impostato il xScale sopra enemy1 a 2 e cambia il zRotation sopra enemy2 per ruotare di 90 gradi. (Il zRotation la proprietà prende i valori in radianti e un valore positivo indica una rotazione in senso antiorario.)
Abbiamo sperimentato con la modifica di alcune proprietà su uno sprite. Dai un'occhiata alla documentazione di SKNodes e SKSpriteNodes e prova a cambiare alcune delle altre proprietà per vedere gli effetti che hanno.
I nodi Sprite vanno bene per i rettangoli e le trame di base, ma a volte sarà necessaria una forma più complessa. Il SKShapeNode hai coperto in questi casi. Daremo un'occhiata ai nodi di forma dopo.
Un altro nodo utile è il SKShapeNode. Questo nodo esegue il rendering di una forma definita da un percorso di grafica principale. SKShapeNodes sono utili per contenuti che non possono essere facilmente realizzati con un SKSpriteNode. Questa classe richiede più memoria e ha prestazioni inferiori rispetto all'utilizzo di un SKSpriteNode, quindi dovresti provare a usarlo con parsimonia.
Per assegnare una forma a SKShapeNode, puoi impostare a CGPath al nodo sentiero proprietà. Tuttavia, esistono alcuni inizializzatori che offrono forme predefinite come rettangoli, cerchi ed ellissi. Creiamo un cerchio usando l'inizializzatore conveniente init (circleOfRadius :).
Quindi, aggiungi quanto segue alla fine del didMove (a :) metodo.
override func didMove (per visualizzare: SKView) ... let circle = SKShapeNode (circleOfRadius: 50) circle.strokeColor = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 circle.position = CGPoint (x: size.width / 2, y: 400) addChild (cerchia)
Modifichiamo alcune proprietà sul nodo della forma, lo posizioniamo e lo aggiungiamo alla scena. È molto facile utilizzare gli inizializzatori di forma predefiniti. Tuttavia, creando un complesso CGPath manualmente richiede una notevole quantità di tempo e non è per i deboli di cuore in quanto di solito comporta una matematica complessa.
Per fortuna, c'è uno strumento che ti consente di disegnare visivamente le forme ed esportarle CGPath come codice Swift. Controlla PaintCode se vuoi saperne di più.
Sprite Nodes e Shape Node copriranno la maggior parte dei casi, ma a volte potresti voler visualizzare video nelle tue app. Il SKVideoNode, di cui daremo un'occhiata dopo, hai coperto.
L'ultimo nodo che daremo un'occhiata è il SKVideoNode. Come suggerisce il nome, questo nodo ti consente di riprodurre video all'interno dei tuoi giochi.
Esistono diversi modi per creare un SKVideoNode. Uno usa un'istanza di un AVPlayer, un altro usa semplicemente il nome di un file video che è memorizzato nel pacchetto di app, e il terzo modo è di usare a URL.
Una cosa da tenere a mente è che il video è taglia la proprietà inizialmente sarà uguale alla dimensione del video di destinazione. Puoi cambiare questo taglia proprietà, tuttavia, e il video verrà esteso alle nuove dimensioni.
Un'altra cosa di cui essere a conoscenza è che il SKVideoNode offerte giocare() e pausa() solo metodi. Se volessi un maggiore controllo sui tuoi video, inizializzeresti un SKVideoNode con un esistente AVPlayer e usalo per controllare i tuoi video.
Usiamo il metodo più semplice per creare un SKVideoNode. Aggiungi il seguente alla fine del didMove (a :) metodo.
override func didMove (per visualizzare: SKView) ... let video = SKVideoNode (fileNamed: "video.mov") video.position = CGPoint (x: size.width / 2, y: 600) addChild (video) video.play ( )
Qui abbiamo usato l'intiailizer init (fileNamed :) per creare un video. Passi nel nome del video insieme all'estensione. Non ho incluso un video insieme al codice sorgente del progetto, ma se vuoi vedere questo lavoro, puoi aggiungere un video chiamato "video.mov"al tuo progetto.
Questo completa il nostro studio sui nodi. Dopo aver letto questo post e il precedente, dovresti avere una buona comprensione di SKNodes e le loro sottoclassi. Nella prossima parte di questa serie, daremo un'occhiata a SKActions e usare la fisica nei nostri giochi. Grazie per la lettura, e ci vedremo lì!
Nel frattempo, dai un'occhiata ad altri nostri fantastici corsi ed esercitazioni sulla creazione di app iOS con Swift e SpriteKit.
Inoltre, dai un'occhiata ai nostri corsi SpriteKit! Questi ti guideranno attraverso tutti i passaggi per creare il tuo primo gioco SpriteKit per iOS, anche se non hai mai codificato con SpriteKit prima.
Accentsconagua