Utveckla för ios
Artikelserien om IOS-utveckling går nu in på sin tredje och sista del, och nu står riktig grafikprogrammering i fokus. Efter att ha behandlat grunderna i Xcode och hur gränssnitt enkelt kan konstrueras med Storyboard är det nu dags börja programmera gränssnitt.

När enklare gränssnitt med färdiga komponenter ska byggas behöver inte många rader kod skrivas, men när det handlar om mer skräddarsydd grafik krävs det desto mer. I den här artikeln ska vi använda Sprite Kit, ett bibliotek för att rendera och animera enklare grafik.

För programmering kan vi använda antingen Objective-C eller Swift, men här fokuserar vi på det senare. Den mycket enkla applikationen kommer att rendera och flytta runt ett antal bilder på skärmen.

Som namnet Sprite Kit antyder kommer vi att jobba med så kallade sprites, en grafisk komponent bestående av ett visst antal pixlar som kan flyttas runt oberoende av omgivningen. Vanligen utgörs en sprite av en eller flera färdiga bilder, som kommer behöva importeras till Xcode.

Scenario
I den här artikelserien om tre delar går vi från de första staplande stegen i programmeringsspråket Swift till att bygga en fullt fungerande IOS-app. Utvecklingsverktyget Xcode står i fokus och för att kunna följa med behöver du använda OS X 10.9 eller senare.

1. Projekt med Sprite Kit

Skapa ett nytt projekt i Xcode via File – New – Project. Under IOS – Application markerar du mallen Game och går till nästa steg. Spelmallen kan skapa ett projekt utifrån ett av många alternativ. Förutom Sprite Kit finns även biblioteken Scene Kit och det nyare Metal, men även OpenGL, den en öppen specifikation för grafikprogrammering.

skapa projekt
För att utveckla spel i Xcode finns färdiga mallar för Apples egna bibliotek Sprite Kit, Scene Kit och Metal, men även OpenGL.

Döp projektet till vad du vill och välj Sprite Kit vid valet Game Technology. Se även till att valt programmeringsspråk är Swift och att Iphone är markerad vid Devices. Tryck därefter på nästa för att spara ditt projekt på valfri sökväg.

När projektets skapats kan du säkerställa att allt är på plats genom att provköra appen i simulatorn. Välj Product – Run och vänta tills simulatorn har kommit igång och startat upp applikation. Du möts nu av en bild med texten ”Hello world”. Avbryt simuleringen genom att växla tillbaka till Xcode och välja Product – Stop. På så sätt fortsätter simulatorn att köras i bakgrunden och din applikation kommer hoppa igång snabbare nästa gång.

Precis som med enkla gränssnitt kan du bygga enkla spel genom att dra ut olika komponenter på applikationsytan. Om du markerar filen Game- Scene.sks får du upp ett redigeringsläge som liknar det för Storyboard.

Men för att förstå spellogik i Sprite Kit och bli mer varma i kläderna med Swift ska vi istället fokusera på GameScene.swift och programmera alltsammans. Men först behöver vi rensa upp och göra ett par inställningar.

2. Spel i landskapsläge

När Xcode skapar ditt projekt sker det med ett antal förhandsinställningar. En av dem är att spelet kan köras i flera orienteringslägen. För de flesta spel fungerar det här inget vidare, utan du behöver begränsa upplevelsen till att ske i antingen landskaps- eller porträttläge.

orienteringsläge
Genom att begränsa vilka orienteringslägen din applikation kan visas i får du mer kontroll.

Ditt projekt visas med sitt projektnamn överst i Project Navigator i vänsterspalten. Markera det, så kommer du till projektets inställningar. Under Deployment Info ska du avmarkera Portrait vid Device Orientation, så att endast Landscape Left och Landscape Right är markerade.

Om Xcode kan hitta filen GameScene.sks kommer den filen att användas som utgångspunkt för appens gränssnitt. Men eftersom vi ska programmera gränssnittet behöver vi ta bort den filen. Leta därför upp GameScene.sks i Project Navigator till vänster och ta bort filen. Välj Move to trash i dialogrutan som visas.

Om du nu provkör applikationen i simulatorn kommer den att startas i landskapsläge med samma text som tidigare. Den texten och resten av gränssnittet definieras i filen Gamescene.swift som vi strax ska stifta närmare bekantskap med. Men först ska vi skapa själva huvudvyn får applikationen.

3. Sätt upp vyn

Öppna filen GameViewController.swift och rensa den från allt innehåll. Innan vi kan börja rita grafik måste vi sätta upp själva huvudvyn.

grundvy
Grundvyn konfigureras här i klasstypen UIVIewController.

Först importerar vi UIKit och Sprite Kit:
import UIKit
import SpriteKit

Därefter skapar vi klassen GameViewController som är av typen UIViewController: 
class GameViewController: UIViewController {

UIViewController har metoden viewDidLoad som körs när applikationen startats och vyn visas. Vi ska överlagra den med egen funktionalitet. Först anropar vi ursprungsmetoden i UIViewController:
override func viewDidLoad() {
super.viewDidLoad()

Därefter skapar vi en scen för grafiken som sträcker sig över hela vyn:
let scene = GameScene(size: view.bounds.size)
scene.scaleMode = .ResizeFill

Sedan behöver vi konfigurera själva vyn. Genom att sätta egenskaperna showsNodeCount och showsFPS till sant kommer antalet sprites i vyn samt dess bilduppdateringsfrekvens att visas i ena hörnet. I läget ignoresSiblingOrder kan Sprite Kit optimera prestandan bättre:
let skView = view as SKView
skView.showsNodeCount = true
skView.showsFPS = true
skView.ignoresSiblingOrder = true

Sist i metoden ser vi till att synliggöra scenen i vyn: skView.presentScene(scene)
}

Statusbaren högst upp visas som standard i alla applikationer. I spel brukar den dock döljas, och för att åstadkomma det behöver vi överlagra ytterligare en metod innan vi avslutar klassen:
override func prefersStatusBarHidden() -> Bool {
return true
}
}

4. Lägg till grafik

Med den grundläggande konfigurationen på plats kan vi börja programmera grafik. Men först behöver vi just lite grafik i form av bilder som agerar sprites i applikationen. Nätet är fullt av gratis spelgrafik under public domain-licens, alltså sådan som kan användas helt fritt.

choose options
Du importerar grafik genom att helt enkelt dra och släppa in i Xcode. Glöm bara inte att markera valet ”Copy items if needed”.

Pac-Man är för de flesta synonymt med ett gult huvud och färgglada monster. Vi använder en illustration av dem under public domain-licens som finns på tinytw.se/pacsprites.

Öppna bildfilen i valfri bildredigerare och klipp ut den klassiska Pac-Man-figuren och ett monster av valfri färg. Skala sedan ner dem till cirka 75 pixlars bredd och spara i formatet png.

När du har dina två bildfiler behöver de importeras till Xcode för att kunna användas i applikationen. Det gör du enklast genom att klicka och dra de båda bildfilerna in i Xcode och släppa dem på ditt projekt i Project Navigator. Se till att de hamnar tillsammans med de övriga filerna i katalogen med samma namn som ditt projekt.

När du släpper filerna i Xcode visas en dialogruta med olika val för importen. Se här till att ”Copy items if needed” är markerad och att ditt projekt är valt vid ”Add to targets”. Du bör nu se dina filer i Project Navigator till vänster med filändelsen png.

5. Rendera grafik

pacman
Den importerade bilden renderas som ett spriteelement.

Nu när bilderna är importerade kan de användas som sprites i applikationen. Öppna filen GameScene.swift och ta bort allt innehåll i filen. Därefter börjar vi med att importera Sprite Kit:
import SpriteKit

Sedan skapar vi klassen GameScene som är av typen SKScene i Sprite Kit: class GameScene: SKScene {

I det här fallet har vi döpt ena bildfilen till pacman. png. Vi kan skapa en sprite av bildfilen med metoden SKSpriteNode:
let pacman = SKSpriteNode(imageNamed: ”pacman”)

Därefter överlagrar vi metoden didMoveToView med egen funktionalitet som sätter bakgrundsfärgen till vit och centrerar sprite-elementet till mitten av vyn:
override func didMoveToView(view: SKView) {
backgroundColor = SKColor.whiteColor()
pacman.position = CGPoint(x: size.width * 0.5, y: size.height * 0.5)

Sist visar vi sprite-grafiken med funktionen addChild:
addChild(pacman)
}
}

Kör igång applikationen i simulatorn och du kommer förhoppningsvis mötas av en vit skärm med Pac-Man-figuren centrerad i mitten av vyn. Svårare än så är det inte att använda egna bildelement i Sprite Kit.

6. Programmera rörlig grafik

En stillastående sprite-grafik är föga underhållande. Vi ska nu göra det lite roligare med den andra importerade bilden, som vi hör döpt till ”monster. png”. Genom att låta monstren flyga in från höger genom vyn och ut i dess vänsterkant kan vi efterlikna ett klassiskt plattformsspel.

animeringssekvenser
Med hjälp av animeringssekvenser flyttas grafik över vyn från höger till vänster i en flygliknande rörelse.

Öppna filen Game Scene.swift igen där vi ska lägga till lite mer kod under metoden didMoveToView från föregående steg, inuti klassen GameScene. Ta alltså inte bort någon kod denna gång. Först behöver vi två funktioner som kan generera slumpmässiga koordinater:
func random() -> CGFloat {
return CGFloat(Float(arc4random()) / 0xFFFFFFFF)
}
func random(#min: CGFloat, max: CGFloat) -> CGFloat {
return random() * (max - min) + min
}

Därefter skriver vi en funktion för att lägga till spritegrafik i vyn. Först använder vi som tidigare SKSpriteNode för att skapa ett spriteelement av en viss bild:
func createFlyingMonster() {
let oneMonster = SKSpriteNode(imageNamed: ”monster”)

Dessa element ska flyga in från höger men på olika höjd. Vi använder nu den nyss skapade funktionen random för att slumpa denna position:
let yPosition = random(min: oneMonster.size.height/2,
max: size.height - oneMonster.size.height/2)

Därefter utgår vi från denna position men placerar elementet lite utanför skärmen så att det kan flyga in delvis:
oneMonster.position = CGPoint(x: size.width +
oneMonster.size.width/2, y: yPosition)

Som vanligt måste vi också lägga till sprite-grafiken med funktionen addChild:
addChild(oneMonster)

Sprite-elementen ska också ha en slumpvis satt hastighet, alltså den tid det tar dem att animeras från högerkanten till vänsterkanten. Vi använder funktionen random igen för att slumpa ett flyttal mellan 1 och 5:
let monsterDuradtion = random(min: CGFloat(1.0),
max: CGFloat(5.0))

Sedan programmerar vi själva animationen, som består av två händelser av typen SKAction. De kopplas som en sekvens till sprite-elementet oneMonster genom dess metod runAction:
let startMove = SKAction.moveTo(CGPoint(x: -oneMonster.size.
width/2, y: yPosition), duration: NSTimeInterval(monsterDuradtion))
let endMove = SKAction.removeFromParent() oneMonster.runAction(SKAction.sequence([startMove, endMove]))
}

Sist behöver vi bara lägga till sekvensen längst ner i metoden didMoveToView överst i samma fil som vi skrev i steg 5:
SKAction.sequence([
SKAction.runBlock(createFlyingMonster),
SKAction.waitForDuration(1.0)
])
))

TechWorlds slutsats

I den här artikeln har vi skrivit en enkel men lärorik applikation som använder Sprite Kit. Den är också den sista delen i vår artikelserie där vi gått från att lära känna utvecklingsverktygen Xcode till att programmera 2d-grafik i Swift. Just det nya programmeringsspråket Swift har gjort utveckling på IOS och OSX betydligt smidigare än vad det tidigare var med Objective-C.

Förhoppningsvis har du nu fått mersmak och vill bygga ett riktigt spel. Din första publicerade applikation i App Store behöver inte vara långt borta!

Fakta

tinytw.se/spritekit - Apples dokumentation om Sprite Kit.

tinytw.se/spriteexe - Apples egna exempelprojekt för Sprite Kit.

Den 17 juni öppnar vi dörrarna till IDG och drar igång Code Night #2 en fullspäckad kodkväll med temat Lärdomar från spelbranschen. Kvällen kommer att bjuda på intressanta talare, programmering, nätverkande och workshops.

Kvällen är kostnadsfri och vi bjuder på enklare mat, dryck och snacks.

Läs mer och anmäl dig här: www.codenight.se