Gör ditt eget iPhone-spel

Sedan Apple lanserade programbutiken Appstore så har Ios, operativsystemet som bland annat körs på Iphone och Ipad, blivit en mycket stark spelplattform bland både de etablerade speltillverkarna och nya uppstickare. Till exempel har succéspelet Angry Birds köpts och laddats ner över 50 miljoner gånger enligt den finska tillverkaren Rovio.

Det är fritt fram för vem som helst att producera spel som publiceras på Appstore. Vill du låta dina spel vara gratis kostar det dig ingenting utöver årsavgiften på $99 för att ansluta dig till Apples Ios Developer Program. Tar du betalt för spelet så får du behålla 70 % av inkomsterna, i utbyte för de övriga 30 % står Apple för distributionen och betalningslösningen via Appstore.

Till skillnad från de flesta andra mobila plattformer finns det inget annat sätt att installera program och spel på en Iphone än via Appstore. Innan spelet publiceras på Appstore måste det också godkännas av Apple. Detta för att kontrollera att det inte innehåller skadlig kod, att det verkligen gör det som utvecklaren angivit att det ska göra, samt att det följer Apples övriga villkor och direktiv. De allra flesta program godkänns av Apple, men för att vara på den säkra sidan är det bra att läsa igenom de riktlinjer som publicerats av Apple innan du gör verklighet av din idé (http://developer.apple.com/appstore/guidelines.html).

Precis som i Mac OS X är program och spel som utvecklas för Ios baserade på Apples egna programeringsmiljö Cocoa. Cocoa-baserade program skrivs oftast i programmeringsspråket Objective-C, så vill du satsa ordentligt på att utveckla program och spel för plattformen är det alltså objektorienterad programmering du ska fördjupa dig i. Genom att registrera dig som utvecklare på Apples hemsida (developer.apple.com) får du till gång till Xcode och Ios SDK som förutom alla utvecklarverktyg som behövs även innehåller en Ios-simulator som gör att du kan provköra dina Iphone-program och -spel direkt på datorn utan kostnad. Utvecklarverktygen finns endast tillgänliga för Mac OS X, så ska du utveckla för Ios krävs det alltså att du har en Mac.

För dig som vill börja skapa spel utan att lära dig programmera finns dock en genväg. Gratisprogrammet Gamesalad låter dig bygga spel utan att skriva en enda rad kod. Självklart blir du begränsad av vilka funktioner som finns i programmet, men det finns faktiskt gott om möjligheter med Gamesalad.

Du börjar med att rita upp de scener som spelet ska innehålla, sedan skapar du och drar in de objekt som ska finnas i respektive scen. Du lägger till vilka beteenden ett visst objekt ska ha, och hur det ska agera vid interaktion med andra objekt, knapptryckningar eller rörelser i telefonens accelerometer. Det finns dessutom gott om färdiga mallar att utgå från för en mängd olika genrer som t ex plattform, shot-em-up, äventyr och bilspel.

För att skapa ditt eget spel i Gamesalad behöver du dock behärska något form av grafikprogram som t ex Photoshop eller Illustrator för att kunna ta fram den grafik som spelet ska bestå av. Självklart kan du hitta både bilder, musik och ljud att utgå från på Internet, men då måste du verkligen se upp med vilka rättigheter som finns för att använda det i kommersiella sammanhang innan du publicerar spelet på Appstore.

När det väl är dags att publicera ditt spel på Appstore så krävs det att du förutom att registrera dig som utvecklare även betalar årsavgiften för Ios Developer Program. När du har gjort detta kan du även provköra spelet manuellt på ett begränsat antal Ios-enheter utan att publicera det på Appstore först.

När du väl har laddat upp ditt spel för godkännande är det normalt att det tar allt från ett par dagar till två veckor innan det publiceras eller du får besked om avslag.

Är du nyfiken på vad som går att prestera med Gamesalad finns det gott om exempel på spel som publicerats på Appstore på http://gamesalad.com/games/ios

Så gör du ett spel i GameSalad
Följ nedanstående guide för att göra en uppfräschad Iphone-version av det gamla klassiska spelet Pong med hjälp av programmet GameSalad.

1. Börja med att ladda ner och installera GameSalad från www.gamesalad.com (Systemkrav: Mac med Intel-processor och Mac OS X 10.6 eller senare).
   
   
   
   
    
2. När du öppnar GameSalad väljer du sedan "+ New" i vänstermenyn. Där kan du välja att börja skapa ett spel helt från noll, eller utgå från någon av de mallar som finns. Det finns färdiga mallar för flera kategorier av spel, t ex plattform, shot-em-up och bilspel. Eftersom vi ska bygga en variant av Pong i den här guiden så väljer du "Basic Table Tennis Template".
   
   
   
   
    
3. När du har markerat mallen ser du en kort beskrivning i högerkolumnen. Längst ned i den kolumnen finns även två knappar; "Open Tutorial" och "Edit in GameSalad Creator". Det första valet tar dig till en genomgång av hur mallen är uppbygd. Där hittar du mycket matnyttigt att utgå från när du bygger vidare på mallen. Men för att börja bygga själva spelet väljer du istället "Edit in GameSalad Creator". 
   
   
   
   
    
4. Nu öppnas projektfönstret och du får möjlighet att fylla i en mängd information om spelet som titel, beskrivning och instruktioner. Dessa uppgifter används senare om du publicerar spelet på AppStore och GameSalad.com.
   
   
   
   
    
5. Tryck på knappen "Preview" högst upp i mitten av fönstret för att starta spelet så att du kan provköra det. När du testat spelet backar du sedan tillbaka till projektfönstret med hjälp av "Back"-knappen högst upp till vänster.
    
6. Klicka "File" och "Save", ange ett filnamn och välj var du ska spara spelprojeket. Kom ihåg att spara ofta under tiden.
    
7. I den nedre delet av projektfönstret ser du de "scener" som spelet består av. Eftersom Pong utspelar sig på en enda scen, finns det också bara en i fönstret. Väljer du istället fliken "Actors" får du se de komponenter som är med i spelet. Här får du en bra översikt över vilka grafiska element spelet består av. Utifrån dessa kan du ta fram din egen grafik i Photoshop eller det grafiska program du föredrar. Den grafik du tar fram är lämplig att spara i formatet PNG eftersom det stödjer transparens.
   
   
   
   
    
8. Dubbelklicka nu på komponenten "Player 1 Paddle" för att öppna egenskapsfönstret för den. Egenskaperna är uppdelade i ett antal sektioner; högst upp till vänster ser du grafiken, under den hittar du attributen där du bland annat anger namn, färg, storlek, taggar och mycket mer. Ännu längre ned hittar du beteenden, bilder och ljud. Till höger hittar du regler, och det är där du bestämmer all funktionalitet för komponenten.
    
9. I regelsektionen för "Player 1 Paddle" kan du t ex se att alla andra komponenter som har värdet "Collidable Object" i attributet "Tags" ska studsa när de nuddar "Player 1 Paddle". I det här fallet har "bollen", de båda "racketerna" och väggarna det värdet. Du kan också se regeln "Move up Rule" som anger att "Player 1 Paddle" röra sig i riktningen 90 grader med farten 300 när knappen "w" trycks ned på tangentbordet. Det är i regelsektioner för respektive komponent som du bygger upp all funktionalitet i spelet. Var därför inte rädd för att experimentera med olika funktioner och värden här. Du lägger till fler "beteenden" i regelsektionen genom att dra in dem från vänsterspalten.
   
   
   
   
    
10. För att ersätta grafiken på komponenten drar du in din nya bildfil över den aktuella grafiken uppe till vänster. I det här fallet så ligger det även ett färgfilter på bilden som gör att den kommer att vara rödtonad, oavsett vilken färg du skapat den i. Därför måste du i attributen under "Color" se till att "red", "green" och "blue" alla har värdet "1" för att få bort den röda färgen. Gå nu tillbaka till projektfönstret och "actors" och ersätt grafiken på alla komponenter du vill ändra.
    
    
    
    
     
11. Nu ska du lägga till en ny komponent som ska vara bakgrund på spelplanen i ditt Pong-spel. Gå till "actors" i projektfönstret och klicka på det lilla plustecknet i listen i botten av fönstret. Dubbelklicka sedan på den nya komponenten "Actor 1" för att öppna egenskaperna. Döp om den till "Background" genom att dubbelklicka på namnet i attribut-sektionen.
    
    
    
    
     
12. Klicka sedan på den lilla gråa pilen intill "Size" och ange 480 för bredd och 320 för höjd (storleken i den här mallen är anpassad för upplösningen i Iphone 3GS och dess föregångare). Dra sedan din bakgrundsbild till "Drag Image Here". Eftersom den här komponenten endast ska fungera som bakgrundsbild behöver du inte lägga till några regler eller funktioner till den.
    
    
    
    
     
13. Backa sedan till "scenes" och dubbelklicka på scenen "Table Tennis Scene" för att redigera scenen. Till vänster ser du nu alla komponenter. Dra komponenten "Background" som du just har skapat till scenen på höger och placera den så den täcker hela planen. Bakgrunden hamnar nu överst och döljer alla andra komponenter på scenen. För att placera den underst högerklickar du på den och väljer "Send to back".
     
14. Nu är den nya grafiken på plats. Spelet styrs dock fortfarande med knappar på tangentbordet, så nu måste du anpassa det för Iphonens touch-skärm. Gå tillbaka till projektfönstret och "actors" skapa sedan en ny komponent igen med hjälp av plustecknet. Dubbelklicka på den nya komponenten döp den sedan till "Button" och sätt storleken till ungefär 50 bred och 50 hög.
    
    
    
    
     
15. Öppna egenskaperna för scenen "Table Tennis Scene" igen genom att dubbelklicka på den. Dra sedan den nya komponenten "Button" till vänster övre hörn på spelplanen. Sedan ytterligare tre kopior av samma knapp till de övriga hörnen.
     
16. Om du ändrar på egenskaperna för en komponent genom att dubbelklicka på den i "actor"-fönstret så ändras egenskaperna på alla ställen där komponenten förekommer. Nu ska du istället dubbelklicka på komponenten "Button" som du precis placerat högst upp till vänster på spelplanen. Då påverkas endast den kopian. 
     
17. Dra in den grafik som ska illustrera knappen som ska styra första spelarens "racket" uppåt till "Drag Image Here".
    
    
    
    
     
18. Klicka sedan på det stora hänglåset i regelsektionen för att låsa upp möjligheten att lägga till regler för knappen. Skapa sedan en ny regel genom att klicka "Create rule" högst upp höger i regel-sektionen. Regeln får per automatik namnet "Rule", men det är viktigt att döpa om reglerna till något beskrivande för att få en bra överblick när de blir många. Dubbelklicka därför på regelns titel och döp den istället till "Move up".
    
    
    
    
     
19. Regeln du just skapat hänvisar till att något ska hända om du klickar på en musknapp eftersom villkoret "Actor recieves event" är satt till "mouse button". Detta ska du ändra till "touch" för att få reaktionen när du trycker på skärmen på din Iphone istället.
    
    
    
    
     
20. Nu har du definierat att något ska hända när man trycker på knappen. För att definiera vad som ska hända drar du helt enkelt in beteenden från listan till vänster. Tyvärr klarar inte beteendet "Move" (används för att styra med hjälp av tangentbordet i punkt 8) av just den här situationen vilket gör att du själv får ange vad som ska hända genom att ändra positionsattributet "Y" för det racket ska flyttas när knappen trycks ned. Dra därför "Constrain Attribute" från beteendesektionen till "Drag your behaviors here" i din regel.
    
    
    
    
     
21. Klicka sedan på de tre punkterna (...) efter det tomma fältet för "Constrain Attribute". Där bläddrar du dig fram till attributet på det objekt som du vill ska påverkas av regeln. I det här fallet "Current Scene", "Layers", "Background", "Player 1 Paddle", "Position" och dubbelklicka sedan på "Y" eftersom det är första spelarens rackets position i höjdled knappen ska justera.
    
    
    
    
     
22. I fältet "To:" ska du sedan ange det nya värdet för attributet du just valt. Eftersom vi i det här fallet vill att racketet ska flyttas uppåt ska det nya värdet vara lite högre än vad det var innan knappen trycktes ned. Klicka på "e" efter fältet, och sedan på nedåtpilen till vänster om "insert function" i rutan som dyker upp. Där bläddrar du dig ytterligare en gång fram till attributet "Y" för samma racket och dubbelklickar. Skriv sedan "+6" efter "scene.Background.Player 1 Paddle.Position.Y". Klicka sedan på den gröna bocken när du är klar. Detta innebär att varje gång knappen trycks ned så ska racketen flyttas 6 pixlar uppåt. Provkör gärna med "Preview" och använd musen för att klicka på knappen du precis skapat för att se att racketet går att röra uppåt.
     
23. Nu upprepar du steg 15-21 för de övriga tre knapparna. Men istället för att skriva "+6" anger du "-6" när racketet ska röra sig nedåt, och istället för "Player 1 Paddle" anger du "Player 2 Paddle" när det är det andra racket som ska röra sig.
    
    
    
    
     
24. Nu har du ett fullt fungerande spel som är redo att publiceras på AppStore. För att göra detta eller för att provköra det på en riktig Iphone så krävs att du ansluter dig till Apples iOS Developer Center mot en årskostnad som vi nämnt tidigare i artikeln. När du har gjort det kan du via knappen "Publish" i GameSalad publicera ditt spel både på AppStore och få en reklamsida för det på GameSalad.com. Se till att ha en ikon (512x512 pixlar i PNG-format), skärmdumpar från spelet och en beskrivande text redo inför publiceringen.
    
    Lycka till med spelskapandet!