Hur man gör onlinespel (med bilder)

Innehållsförteckning:

Hur man gör onlinespel (med bilder)
Hur man gör onlinespel (med bilder)

Video: Hur man gör onlinespel (med bilder)

Video: Hur man gör onlinespel (med bilder)
Video: Обнаружение скрытого UAP? | Выжить в черной дыре с Ави Лоэбом Obnaruzheniye skrytogo UAP? Avi Loebom 2024, Maj
Anonim

Har du någonsin spelat ett onlinespel och tänkt, "Jag önskar att jag kunde göra ett av dessa, jag har några bra idéer"? Tidigare var det nödvändigt att ha lärt sig hur man kodar i ActionScript 3, språket som driver Flash. Tack vare några spelbyggande program är dock kodningserfarenhet ett krav från det förflutna. Du kan skapa roliga, djupa spel genom att manipulera objekt och logik, utan att någonsin röra en kodrad.

Steg

Del 1 av 4: Designing the Game

Gör onlinespel Steg 1
Gör onlinespel Steg 1

Steg 1. Skriv ut en grundläggande beskrivning

Inkludera funktioner och vad du vill att spelaren ska åstadkomma. Det är bra att ha en grundläggande översikt över vad du vill göra med ditt spel skrivet ut så att du kan hänvisa till det medan du arbetar med det.

Se den här guiden för mer information om hur du skriver ett speldesigndokument

Gör onlinespel Steg 2
Gör onlinespel Steg 2

Steg 2. Rita några skisser

Rita en grundläggande layout för hur du vill att skärmarna ska se ut. Dessa behöver inte vara särskilt detaljerade, men du bör åtminstone ha en uppfattning om var de olika elementen ska placeras på skärmen. Dessa kommer att vara otroligt användbara senare när du börjar bygga gränssnittet för ditt spel.

Gör onlinespel Steg 3
Gör onlinespel Steg 3

Steg 3. Välj en metod för att skapa ditt spel

Traditionellt måste du lära dig att koda i ActionScript 3 för att skapa Flash -spel. Även om du fortfarande kan göra det finns det program som kan göra spelskapande mycket lättare att lära sig och som inte kräver någon kodningsupplevelse. Några av de mest populära alternativen för att göra spel inkluderar:

  • Stencyl - Detta är ett nyare verktyg som låter dig bygga spel med objekt och logiska skript. Dessa spel kan sedan konverteras till Flash -projekt och laddas upp till alla webbplatser som stöder Flash -spel.
  • Konstruktion 2 - När Flash blir äldre har det börjat ersättas med andra sätt att skapa spel. Ett av de nyaste sätten att skapa ett onlinespel är att använda HTML5. Normalt kräver detta mycket kodningskunskap, men Construct 2 låter dig skapa spel med objekt och skript, ungefär som Stencyl.
  • Flash Builder - Detta är den traditionella metoden för att skapa Flash -spel. Detta kräver en hel del ActionScript -kunskap, men det är ett av de enklare språken att lära sig grunderna i. Flash Builder kostar pengar, men du kan använda FlashDevelop-programmet med öppen källkod för att få det mesta av samma funktionalitet.

Del 2 av 4: Använda Stencyl

Gör onlinespel Steg 4
Gör onlinespel Steg 4

Steg 1. Ladda ner och installera Stencyl

Stencyl är ett spelskapande program som inte kräver någon kodningskunskap. Istället kan du använda en mängd olika logiska verktyg för att manipulera objekt i spelet.

Stencyl kan användas gratis om du bara vill publicera ditt spel online. Den fria versionen kommer att ha en Stencyl -logotyp i början. Om du får den betalda versionen kan du publicera på andra plattformar

Gör onlinespel Steg 5
Gör onlinespel Steg 5

Steg 2. Skapa ditt nya spel

När du startar Stencyl visas en lista över dina spel. Det kommer att finnas flera exempel på spel på listan som du kan titta på för att se hur de fungerar. För att börja arbeta med ditt eget spel, klicka på rutan med den streckade raden märkt "Klicka här för att skapa nytt spel".

Gör onlinespel Steg 6
Gör onlinespel Steg 6

Steg 3. Välj ett kit

Det finns flera kit som innehåller färdiga tillgångar och föremål som kan hjälpa dig att få igång ditt spel snabbt. Välj ett kit om du vill, eller välj "Tomt spel" om du planerar att göra ditt eget.

Du kan ladda ner kit som andra användare har gjort online

Gör onlinespel Steg 7
Gör onlinespel Steg 7

Steg 4. Ange din spelinformation

Innan du börjar skapa ditt spel måste du ange några uppgifter.

  • Namn - Detta är namnet på ditt spel. Du kan ändra detta senare till vad du vill.
  • Skärmstorlek - Detta är storleken på din spelskärm, och är mycket viktig eftersom det kommer att påverka den konst du använder. Eftersom människor med största sannolikhet kommer att spela ditt spel i sin webbläsare behöver inte skärmstorleken vara särskilt stor. Prova Bredd: 640 px Höjd: 480 px. Det här är en bra storlek att komma igång med.
Gör onlinespel Steg 8
Gör onlinespel Steg 8

Steg 5. Bekanta dig med layouten

När du först laddar ditt nya spel kommer du till instrumentpanelen. Det är här du kan se alla scener för ditt spel och få tillgång till alla resurser. Du kan också ändra dina spelinställningar härifrån. Du kommer att spendera större delen av din tid på att arbeta i instrumentpanelen.

  • Scener - Detta är huvudfönstret i instrumentpanelen och visar det faktiska spelet och alla tillgångar. Ditt spel kommer att vara en samling scener.
  • Resurser - Detta är listan över alla objekt och tillgångar i ditt spel. den innehåller skådespelare, bakgrunder, teckensnitt, scener, logik, ljud och brickor. Resurserna är organiserade i ett träd på vänster sida av skärmen.
  • Inställningar - Spel- och inställningsalternativen låter dig justera hur spelets mekanik fungerar, inklusive kontroller, gravitation, kollisioner, laddningsskärmar och mer.
Gör onlinespel Steg 9
Gör onlinespel Steg 9

Steg 6. Anpassa en skådespelare

En skådespelare är alla föremål som rör sig eller kan interageras med i spelet (spelare, fiende, dörrar, etc.). Du måste skapa en skådespelare för varje objekt i ditt spel. För att skapa en skådespelare, klicka på alternativet "Skådespelartyper" i menyn Resurser. Välj den aktör du vill ha från listan (listan bestäms av det kit du valt).

  • Tilldela skådespelaren till en grupp (spelare, fiende). Detta hjälper till att bestämma skådespelarens kollisionsegenskaper. Välj din skådespelare för att öppna Actor Editor. Klicka på fliken Egenskaper och välj sedan lämplig grupp på rullgardinsmenyn.
  • Lägg till beteenden (hoppa, stampa, gå). Beteenden är det som gör att din skådespelare kan utföra handlingar. Klicka på fliken Beteenden och klicka sedan på knappen "+ Lägg till beteende" i det nedre vänstra hörnet. Välj ett beteende (t.ex. "Walking") från listan och klicka sedan på "Välj".
  • Ställ in kontrollerna. Om du skapar en spelarkaraktär vill du förmodligen låta spelaren flytta den. När du lägger till Walking -beteendet kommer du till skärmen Walking attributes. Du kan använda rullgardinsmenyerna för att välja vilka tangenter som ska flytta skådespelaren åt vänster och höger. Du kan också tilldela animationer om det kit du använder innehåller någon.
  • Du kan lägga till flera beteenden för att anpassa vad en aktör kan göra.
Gör onlinespel Steg 10
Gör onlinespel Steg 10

Steg 7. Skapa en scen

Scenen är vad spelaren ser när han spelar spelet. Det är bakgrunden, liksom alla föremål och aktörer som är synliga. Om du vill skapa en ny scen klickar du på alternativet Scener i resursträdet och klickar sedan på den streckade rutan. Ge din nya scen ett namn för att fortsätta.

  • Bakgrund - Din scen kommer att dimensioneras automatiskt, så du behöver inte oroa dig för det för tillfället. Du kan välja att använda en färg som bakgrund, som kommer att ha brickor placerade över den. Du kan välja mellan en fast färg eller en lutning. Klicka på "Skapa" när du är klar. Detta öppnar Scen Designer.
  • Placera brickor - brickorna som ingår i ditt kit kommer att laddas på höger sida av fönstret. Klicka på pennverktyget i den vänstra menyn och klicka sedan på den kakel som du vill använda. Du kan sedan placera brickan på din scen. Klicka och dra med musen för att placera flera brickor.
  • Placera skådespelare - Klicka på fliken Skådespelare ovanför din kakel för att växla till dina tillgängliga skådespelare. Du måste ha skapat dem tidigare för att de ska visas i den här listan. Klicka på skådespelaren du vill placera och klicka sedan på var på scenen du vill att den ska visas. Om du håller ned ⇧ Skift, kommer skådespelaren att knäppa till rutnätet.
  • Lägga till gravitation - Klicka på fliken "Fysik" högst upp i fönstret och ange sedan ett värde i fältet "Gravity (vertikal)". Att komma in i 85 kommer att simulera verklig gravitation.
Gör onlinespel Steg 11
Gör onlinespel Steg 11

Steg 8. Testa spelet

När du har skapat en scen och placerat några skådespelare kan du testa spelet. Klicka på "Test Game" -knappen högst upp på skärmen för att spela det du har hittills. Du kan använda de tangenter du ställde in när du skapar dina skådespelare för att styra din spelarkaraktär.

Hitta alla aspekter som inte fungerar och försök att åtgärda dem. Till exempel, beter sig fienderna korrekt? Kan du besegra dina fiender? Finns det några plattformar som är oåtkomliga eller chasms som inte går att korsa? Återgå till det relevanta området i din spelredigerare för att åtgärda de problem du hittar. Detta kan ta lite tid, men slutresultatet blir ett mycket roligare och mer spelbart spel

Gör onlinespel Steg 12
Gör onlinespel Steg 12

Steg 9. Lägg till mer

Nu när du har en fungerande och spelbar första scen är det dags att börja bygga hela spelet. Lägg till fler nivåer och utmaningar, och fortsätt testa dina tillägg för att se till att de är roliga och fungerar korrekt.

Gör onlinespel Steg 13
Gör onlinespel Steg 13

Steg 10. Site Lock ditt spel

Om du ska ladda upp spelet till en webbplats som är värd för Flash -spel eller ladda upp till din egen webbplats, kommer du förmodligen att aktivera "Site Locking". Detta förhindrar att ditt spel spelas om det inte finns på den tillåtna listan över webbplatser.

  • Öppna "Spelinställningar" från ditt "Resurser" -träd. Välj avsnittet "Loader". Ange de webbplatser som du vill tillåta i fältet "Site Lock", åtskilda med ett komma utan utrymme. Till exempel newgrounds.com, kongregate.com.
  • På den här skärmen anger du din hemsida i fältet "Din hemsida", om du har en. Detta låter spelare som spelar ditt spel länkas till din webbplats.
Gör onlinespel Steg 14
Gör onlinespel Steg 14

Steg 11. Exportera spelet som Flash

När du är nöjd med ditt spel kan du exportera det till Flash -format. Detta låter dig ladda upp spelet till en webbplats som är värd för Flash -spel eller till din egen webbplats. Klick Publicera välj Web och klicka sedan på Flash. Spara filen på en plats som är lätt att hitta på din dator.

Gör onlinespel Steg 15
Gör onlinespel Steg 15

Steg 12. Publicera spelet

När du har din Flash (. SWF) -fil kan du ladda upp den till den valda värden. Det finns en mängd olika webbplatser online som är värd för Flash -spel, och vissa kan till och med låta dig tjäna pengar på annonsintäkter med ditt spel. Du kan också ladda upp ditt spel till din egen webbplats, men du vill se till att du har bandbredden för att tillgodose spelare om spelet blir populärt.

  • Se den här guiden för att ladda upp ditt spel till din egen webbplats.
  • Om du vill ladda upp ditt spel till en webbplats som Newgrounds eller Kongregate måste du skapa ett konto och sedan gå igenom överföringsprocessen för webbplatsen. Villkoren varierar från webbplats till webbplats.
  • Om du vill publicera ditt spel till Stencyl Arcade kan du göra det från Stencyl -programmet. Klick Publicera välj Stencyl och klicka sedan på Arkad. Spelet laddas upp automatiskt, så se till att du är nöjd med namnet innan du gör detta. Stencyl Arcade har en gräns på 8 MB filstorlek.

Del 3 av 4: Använda Construct 2

Gör onlinespel Steg 16
Gör onlinespel Steg 16

Steg 1. Ladda ner och installera Construct 2

Detta program låter dig skapa HTML5 -spel med mycket lite kodning. Du måste tilldela några variabler, men allt detta görs genom menyer utan att någon egentlig kodning krävs.

Construct 2 är gratis, men vissa funktioner är begränsade om du inte uppgraderar. Den fria versionen kan inte publiceras på andra plattformar än HTML5

Gör onlinespel Steg 17
Gör onlinespel Steg 17

Steg 2. Skapa ett nytt projekt

När du först startar Construct 2 kommer du att hälsas välkommen med en välkomstmeny. Klicka på "Nytt projekt" -länken för att börja ett nytt spel. Det finns också ett par inkluderade exempel som du kan använda för att se hur grundläggande spel skapas.

När du skapar ett nytt projekt får du en lista med mallar. För ditt första projekt vill du förmodligen börja med ett tomt projekt. Detta gör att du kan få koll på grunderna utan att mallar kommer i vägen

Gör onlinespel Steg 18
Gör onlinespel Steg 18

Steg 3. Justera dina projektinställningar

I den vänstra ramen i projektfönstret ser du en serie objekt i ramen Egenskaper. Du kan använda detta för att ställa in din skärmstorlek och ange ditt spel och företagsinformation.

Gör onlinespel Steg 19
Gör onlinespel Steg 19

Steg 4. Infoga en bakgrund

Dubbelklicka på layouten. Välj "Kaklad bakgrund" från avsnittet Allmänt. Klicka på din layout för att placera bakgrunden. Detta öppnar bakgrundsredigeraren. Du måste skapa din egen med bildredigeringsprogram eller ladda ner texturer från en mängd olika platser online.

  • Ställ in bakgrunden på layoutens storlek. Gör detta genom att markera bakgrundsobjektet och ändra storleken i ramen Egenskaper.
  • Ändra lagernamn och lås det. Du vill låsa lagret för att förhindra att det flyttas av misstag medan du placerar andra objekt. Klicka på fliken "Lager" till höger på skärmen. Markera lagret och klicka på pennikonen. Namnge lagret "Bakgrund" och klicka sedan på "Hänglås" -knappen för att låsa bakgrunden.
Gör onlinespel Steg 20
Gör onlinespel Steg 20

Steg 5. Skapa ett nytt lager

På fliken Lager klickar du på knappen "+" för att skapa ett nytt lager. Byt namn till "Main". Detta kommer att vara det lager som de flesta av dina spelobjekt finns på. Se till att huvudlagret är valt innan du fortsätter.

Gör onlinespel Steg 21
Gör onlinespel Steg 21

Steg 6. Lägg till ingångar för ditt spel

I Construct 2 måste dina ingångar läggas till som objekt i ditt spel. De är osynliga och möjliggör användning av tangentbord och mus under hela projektet.

Dubbelklicka på din layout och välj "Mus" från avsnittet Inmatning. Gör samma sak för att infoga objektet "Tangentbord"

Gör onlinespel Steg 22
Gör onlinespel Steg 22

Steg 7. Lägg till objekt

Det är dags att börja lägga till några spelobjekt i din layout. Dubbelklicka på layouten och välj "Sprite" från avsnittet Allmänt. Använd hårkorset för att välja var du vill placera spriten. Bildredigeraren öppnas, så att du antingen kan ladda en befintlig sprite eller skapa en ny.

När du väljer sprites i din layout laddas sprites egenskaper i den vänstra ramen. Ändra sprites namn så att du lättare kan identifiera och hänvisa till det

Gör onlinespel Steg 23
Gör onlinespel Steg 23

Steg 8. Lägg till beteenden till dina objekt

För att lägga till ett beteende, klicka på objektet du vill lägga till ett beteende fullt för att markera det. Klicka på länken "Lägg till/redigera" i avsnittet Beteenden i ramen Egenskaper. En lista med tillgängliga beteenden visas.

Beteenden är förkonfigurerade delar av logik som gör att du snabbt kan lägga till funktioner i dina objekt. Du kan välja mellan en mängd olika färdiga beteenden som kan utföra ett brett spektrum av funktioner. Till exempel, för att göra golvet solidt, ge det "Solid" beteende. För att flytta spelarens karaktär i åtta riktningar, ge den beteendet "8 riktning rörelse"

Gör onlinespel Steg 24
Gör onlinespel Steg 24

Steg 9. Ändra beteendeegenskaper

Du kan redigera befintliga beteenden för att anpassa hur dina objekt fungerar. Du kan ändra värdena för att ändra hastighet, riktning och andra egenskaper.

Gör onlinespel Steg 25
Gör onlinespel Steg 25

Steg 10. Förstå hur händelser fungerar

Händelser är en lista med villkor, och det är det som driver spelet. Om villkoren är uppfyllda inträffar händelse. Om villkoren inte är uppfyllda inträffar inte händelsen. Händelsebladet körs vanligtvis cirka 60 gånger per sekund. Varje gång den körs kallas en "fästing".

Gör onlinespel Steg 26
Gör onlinespel Steg 26

Steg 11. Skapa en händelse

Dubbelklicka i det tomma evenemangsarket. En lista med tillgängliga objekt visas. Välj objektet du vill skapa en händelse för, eller så kan du skapa en systemhändelse.

  • Välj när åtgärden sker. När du har valt objektet kommer du att bli ombedd att välja när händelsen ska inträffa. Detta kan baseras på andra händelser eller vid vissa tidpunkter. "Varje fästing" är alltid.
  • Lägg till en åtgärd. Du kommer att bli ombedd att välja ett av dina objekt. Välj från en lista med åtgärder. Till exempel, om du gör en skjutare uppifrån och ner och vill att spelarens karaktär alltid tittar på musen, skulle du skapa en "Ställ in vinkel mot position" -åtgärd på varje tick som sätts till Spelarobjektet. När du blir ombedd att ange koordinaterna anger du "Mouse. X" för X och "Mouse. Y" för Y. Detta kommer att hålla spelarens skepp alltid riktat mot markören.
Gör onlinespel Steg 27
Gör onlinespel Steg 27

Steg 12. Lägg till fler händelser och beteenden

Dessa är ryggraden i ditt spel. Att lägga till och justera beteenden och händelser hjälper dig att skapa ett unikt och roligt spel som människor kommer att kräva att spela. Experimentera med olika händelser för att försöka få det exakta spelet du vill ha.

Gör onlinespel Steg 28
Gör onlinespel Steg 28

Steg 13. Lägg till några variabler

Det finns två typer av variabler i Construct 2: instansvariabler och globala variabler. Dessa låter dig ställa in anpassade värden för dina objekt och spel, till exempel hälsa, tidsgränser, poäng och mer.

  • Instansvariabler - Instansvariabler är variabler som tilldelas enskilda objekt. De används för saker som fiendens och spelarens hälsa. Du kan lägga till instansvariabler efter att du valt ett objekt genom att klicka på länken "Lägg till / redigera" i avsnittet Variabler i egenskapsramen. Ge variabeln ett namn som kan hänvisas till i en händelse, samt ett initialvärde.
  • Globala variabler - Globala variabler är variabler som tilldelas hela spelet. De används för saker som spelarens poäng. För att skapa en global variabel, öppna händelsebladet och högerklicka på ett tomt utrymme. Klicka på "Lägg till global variabel", ge den ett namn som kan hänvisas till i en händelse och ange sedan ett initialvärde.
Gör onlinespel Steg 29
Gör onlinespel Steg 29

Steg 14. Skapa ett gränssnitt

När du skapar ett gränssnitt är det oftast bäst att göra det på ett nytt lager. Detta beror på att gränssnittet sällan rör sig eller ändras, så det är bra att ha det på ett låst lager. I egenskapsramen för det nya lagret, ställ in "Parallax" på 0. Detta hindrar lagret från att rulla när skärmen gör det.

Använd textrutor och variabler för att skapa ditt gränssnitt. Du kan ställa in dina textrutor för att visa återstående hälsa, poäng, ammunition eller något annat som spelaren skulle behöva se regelbundet

Gör onlinespel Steg 30
Gör onlinespel Steg 30

Steg 15. Testa och revidera ditt spel

Nu när du har några objekt på skärmen med händelser och beteenden kan du börja testa och lägga till innehåll. Klicka på "Spela" -knappen högst upp på skärmen för att bygga och testa spelet. Anteckna allt som inte fungerade och försök att fixa det så att ditt spel blir spelbart och roligt.

Gör onlinespel Steg 31
Gör onlinespel Steg 31

Steg 16. Exportera spelet

Om du är nöjd med ditt spel kan du exportera det så att det kan laddas upp till en webbplats och spelas av vem som helst. Om du vill exportera spelet klickar du på Fil -menyn och välj Exportera. Spara projektet på en plats som du enkelt kan hitta.

Gör onlinespel Steg 32
Gör onlinespel Steg 32

Steg 17. Publicera spelet

Det finns flera webbplatser som låter dig ladda upp HTML5 -spel för andra att spela. Du kan också lägga till spelet på din egen webbplats. Se den här guiden för mer information om hur du laddar upp spelet till din egen webbplats.

Del 4 av 4: Kodning från Scratch

Steg 1. Ladda ner en programmerings -IDE (Integrated Development Environment) som stöder HTML, till exempel Game Maker Studio

Vissa är gratis, men många av de bästa IDE: erna kostar hundratals dollar.

Steg 2. Lär dig att använda IDE

Att lära sig programmera i sin miljö är otroligt viktigt. Att memorera det mesta av den gemensamma koden och lära sig att implementera saker på rätt sätt kan ta veckor eller till och med månader. Ha tålamod så lönar det sig!

Steg 3. Skapa ditt spel när du tror att du är redo

Att göra ett designdokument eller notera några idéer är en bra början. Att programmera ett spel kan ta månader eller om du verkligen menar allvar med att göra en hit, till och med ett eller två år.

Steg 4. Testa spelet

Var noga med att göra galna eller oväntade saker och krossa så många buggar du kan. Försök också att avgöra om spelet är som du ville ha det, eller om du behöver gå tillbaka och göra ändringar.

Steg 5. Publicera det

Publicera ditt spel online på en webbplats som Kongregate. Du bör vara beredd på konstruktiv kritik och du kanske vill uppdatera ditt spel för att möta din spelarbas önskemål.

Tips

  • Om du är mer intresserad av att lära dig koden bakom Flash -spel kan du använda Flash Builder och ActionScript 3 -kod för att skapa anpassade spel. Detta kommer att ta längre tid men kan resultera i en mer unik upplevelse. Se den här guiden för mer information om programmering i Actions Script 3.
  • Ge kredit till alla källor från vilka du tog idéer eller innehåll, och till alla andra som hjälpte till att skapa spelet.

Rekommenderad: