Utan att programmera

Gör ditt eget iPhone-spel

Är du sugen på att göra egna spel till Iphone och Ipad men inte på att gå den tunga vägen och lära dig programmera först? Med verktyget Gamesalad kan du som har Mac ta fram spel som platsar på AppStore utan en enda rad med programmeringskod.

Publicerad:

5 maj 2011 - 18:50

Uppdaterad:

27 nov 2013 - 11:03

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!

Tillverkare

Operativsystem

Produkttyp

 

Aktuellt just nu

  • Tips och tricks

    Offlinekartor i Apple Maps, låna böcker i mobilen, hur du fixar biljetterna till Passbook och lite batterispartips är vad vi har att lära dig som Ios-användare idag.

    11 jul 2014 - 11:46
  • Tips & tricks

    Eftersom Apple själva har kontrollen över telefoner och datorer och då både programmen och hårdvaran har de stora möjligheter att få prylarna att fungera bra ihop. Säger de själva i alla fall. Vi kollar in vad din Iphone och din Mac kan göra tillsammans.

    9 jul 2014 - 11:00
  • 20 Tips och tricks

    Ios 7 innebär en hel del nytt på många olika plan. Med en helt ny design kommer också en del skojiga funktioner som kanske inte är helt uppenbara från start. Här lär vi dig hemligheterna.

    6 dec 2013 - 15:21
  • Vi visar hur du gör

    Vi har redan gått igenom några verktyg för att skapa appar. Idag visar vi hur du går tillväga med hjälp av verktyget Appmachine.

    10 sep 2013 - 06:00
  • Bygg en app enkelt

    Appbyggarverktyg, det vill säga plattformar som låter både privatpersoner och företag ta fram och publicera mobila appar billigt utan att skriva en enda rad kod, blir alltmer populära. Deras löfte: att vara för apputveckling vad Wordpress varit för webben – något som demokratiserar publicering. Mobil har tittat närmare på fyra sådana plattformar: Appmachine, Appspotr, Conduit, och Appy Pie.

    9 sep 2013 - 06:00
  • Innanför skalet på prestandalurarna

    Avancerade system med processorer optimerade för olika uppgifter – allt på ett enda kiselchip. Mobil kartlägger tekniken och företagen som ger kraft åt prestandamobilerna.

    2 aug 2013 - 19:17
  • Problemlösning för Ios

    Ta del av redaktionens smarta tips och kom runt problem med både Ipad och Iphone. Kanske hittar du någon ny funktion du inte visste om.

    30 jul 2013 - 18:02
  • Kom igång med din lur

    Har du precis köpt och aktiverat din Iphone? Här är den ultimata guiden till hur du lär dig grunderna och alla smarta tips som gör ditt liv med din Iphone smidigare och roligare.

    29 jul 2013 - 17:23
  • Lär känna din Windows Phone

    Microsofts operativsystem ser annorlunda ut än de flesta andra telefoner, men det bety- der inte att det är särskilt svårt att lära sig eller att använda. Vi hjälper dig igång och går igenom grunderna i alla de viktigaste funktionerna.

    15 jul 2013 - 10:28
  • Med Facebook inbakad

    När Apple integrerade Twitter i Ios 5 var det många som undrade varför Facebook inte fick vara med. I och med lanseringen av Ios 6 har Apple lyssnat till önskemålen och bakat in Facebook i systemet (som i skrivande stund är uppe i version 6.1.2). Vi går igenom vad det innebär för dig som användare och hur du får ut det mesta av symbiosen.

    2 apr 2013 - 11:22
  • Mobilskolan:

    När du fyller din telefon med både bilder och film är Apples teknik för att visa det på större skärm smart. Vi visar hur du får tekniken att fungera med din Androidenhet.

    5 mar 2013 - 14:52
  • Tips och tricks till Ios:

    Vi hjälper dig att få till det så att alla dina kontakter synkas automatiskt mellan Iphone, surfplatta och dator.

    23 jan 2013 - 11:44
  • Guide för Iphone

    Så får du kontroll över vad som syns för e-postadress eller telefonnummer som syns hos mottagaren Imessage.

    6 jan 2013 - 08:00
  • Få tillgång till dina filer överallt

    Med Skydrive kan du lagra och komma åt dina viktigaste filer överallt i världen. Det enda du behöver är uppkoppling till internet.

    2 jan 2013 - 16:52
  • Skola: Flash i Android

    Html 5 tycks vara på god väg att vinna kriget mot Adobes flash för multimediainnehåll på nätet. I slutet av sommaren försvann möjlig­heten att tanka hem flash-pluginen från Google Play för Android, men än så länge är flash för tidigt att räkna ut helt – vi visar hur du får in flash i din Android idag.

    30 nov 2012 - 16:07
  • Skola: Airdroid och Reach Beta

    Två simpla appar låter dig såväl skicka sms och se inkommande samtal i mobilen, som kolla på mobilbilder och massor av annat direkt via datorns webbläsare. Här går vi igenom hur du sköter din telefon från datorn.

    22 nov 2012 - 07:30
  • Lösensordsappar till Ios

    Facebook-kontot, Blocket, idrottsklubben och mataffären. Koder och lösenord behövs till nästan allt i dator och mobil. Men det finns appar som gör att du slipper hålla allt i ­huvudet. Det är de apparna som vi har testat här och visar hur de fungerar.

    4 sep 2012 - 07:30
  • Semesterappar

    Din mobiltelefon kan vara både din bästa och din sämsta vän under resan. Vi hjälper dig att avväpna den så att du inte åker på en ekonomisk smäll, och förklarar samtidigt hur du gör den till en ultimat reseguide.

    11 jun 2012 - 14:48
  • Så funkar GPS/Glonass

    På bara några år har positionsbestämning med hög precision blivit vardagsmat i våra ­mobiler. Men fortfarande fungerar det inte överallt. Vi tar en titt på tekniken som håller koll på var du befinner dig.

    23 maj 2012 - 07:54
  • Skola: Mobilen som bildskärm

    Vill man ha mer skärmutrymme att arbeta med på sin dator så behöver man inte lägga slantar på att köpa en ny skärm. Har man en surfplatta går det nämligen att använda den som en extra skärm till datorn.

    7 maj 2012 - 11:18
  • Håll kontakten med Windows Phone

    Vad vore livet utan vänner? Rätt så jäkla tråkigt. Därför har Mobil sammanställt en praktisk liten guide med de bästa sociala nätverksapparna till Windows Phone.

    13 apr 2012 - 08:00
  • Windows Phone

    Nu följer vi upp Kom i form med mobilen-artikeln genom att tipsa om några av de bästa apparna för Windows Phone inom området träning och hälsa.

    12 apr 2012 - 07:52

Missa inte

Hetaste apparna

Senaste nytt på mobil.se

Tipsa Mobil

Vi vill ha en kontinuerlig dialog med dig som besöker mobil.se.

Skicka gärna ett mail om du har ett hett tips eller nåt spännande att berätta.

Mobils nyhetsbrev

Vårt dagliga nyhetsbrev håller dig uppdaterad om vad som händer i mobilbranschen.

Registrera dig här!

Om Mobil

Mobil är Sveriges ledande tidning och sajt inom området mobil kommunikation. 

Tidningen och sajten riktar sig till dig som skall köpa nya mobila prylar eller tjänster och dig som vill hålla koll på vad som händer i den mobila världen eller som jobbar inom mobilbranschen.

Mer om Mobil här.

Vi är Mobil

Kontakta Mobils redaktion.

Du hittar vår kontaktinformation här.