Sådan laver du onlinespil (med billeder)

Indholdsfortegnelse:

Sådan laver du onlinespil (med billeder)
Sådan laver du onlinespil (med billeder)

Video: Sådan laver du onlinespil (med billeder)

Video: Sådan laver du onlinespil (med billeder)
Video: 40 советов и хитростей со словами на 2020 год 2024, Kan
Anonim

Har du nogensinde spillet et online spil og tænkt: "Jeg ville ønske, jeg kunne lave en af disse, jeg har nogle gode ideer"? Tidligere var det nødvendigt at have lært, hvordan man koder i ActionScript 3, det sprog, der driver Flash. Takket være nogle spilopbygningsprogrammer er kodningserfaring imidlertid et krav fra fortiden. Du kan oprette sjove, dybe spil ved at manipulere objekter og logik uden nogensinde at røre ved en kodelinje.

Trin

Del 1 af 4: Design af spillet

Lav online spil Trin 1
Lav online spil Trin 1

Trin 1. Skriv en grundlæggende beskrivelse

Inkluder funktioner og hvad du vil have spilleren til at opnå. Det er godt at få skrevet en grundlæggende oversigt over, hvad du vil gøre med dit spil, så du kan henvise til det, mens du arbejder på det.

Se denne vejledning for flere detaljer om at skrive et spildesigndokument

Lav online spil Trin 2
Lav online spil Trin 2

Trin 2. Tegn nogle skitser

Tegn et grundlæggende layout af, hvordan du vil have skærmene til at se ud. Disse behøver ikke at være særlig detaljerede, men du bør i det mindste have en idé om, hvor de forskellige elementer skal placeres på skærmen. Disse vil være utroligt nyttige senere, når du begynder at bygge grænsefladen til dit spil.

Lav online spil Trin 3
Lav online spil Trin 3

Trin 3. Vælg en metode til at oprette dit spil

Traditionelt skulle du lære at kode i ActionScript 3 for at oprette Flash -spil. Selvom du stadig kan gøre det, er der programmer til rådighed, der kan gøre spiloprettelse meget lettere at lære, og som ikke kræver nogen kodningserfaring. Nogle af de mest populære muligheder for at lave spil inkluderer:

  • Stencyl - Dette er et nyere værktøj, der giver dig mulighed for at bygge spil ved hjælp af objekter og logiske scripts. Disse spil kan derefter konverteres til Flash -projekter og uploades til ethvert websted, der understøtter Flash -spil.
  • Konstruktion 2 - Efterhånden som Flash bliver ældre, er det begyndt at blive erstattet af andre måder at oprette spil på. En af de nyeste måder at oprette et online spil på er at bruge HTML5. Normalt kræver dette meget kodningskendskab, men Construct 2 giver dig mulighed for at oprette spil ved hjælp af objekter og scripting, ligesom Stencyl.
  • Flash Builder - Dette er den traditionelle metode til oprettelse af Flash -spil. Dette kræver en hel del ActionScript -viden, men det er et af de lettere sprog at lære det grundlæggende om. Flash Builder koster penge, men du kan bruge open-source FlashDevelop-programmet til at få det meste af den samme funktionalitet.

Del 2 af 4: Brug af Stencyl

Lav online spil Trin 4
Lav online spil Trin 4

Trin 1. Download og installer Stencyl

Stencyl er et spiloprettelsesprogram, der ikke kræver nogen kodningskendskab. I stedet kan du bruge en række forskellige logiske værktøjer til at manipulere objekter i spillet.

Stencyl kan bruges gratis, hvis du kun vil udgive dit spil online. Den gratis version vil have et Stencyl -logo vist i begyndelsen. Hvis du får den betalte version, kan du udgive til andre platforme

Lav online spil Trin 5
Lav online spil Trin 5

Trin 2. Opret dit nye spil

Når du starter Stencyl, får du vist en liste over dine spil. Der vil være flere eksempler på spil på listen, som du kan se på for at se, hvordan de fungerer. For at begynde at arbejde på dit eget spil skal du klikke på boksen med den stiplede linje mærket "Klik her for at oprette nyt spil".

Lav online spil Trin 6
Lav online spil Trin 6

Trin 3. Vælg et kit

Der er flere kits, der indeholder præfabrikerede aktiver og objekter, der kan hjælpe dig med at få dit spil hurtigt i gang. Vælg et kit, hvis du vil, eller vælg "Blank spil", hvis du planlægger at lave dit eget.

Du kan downloade kits, som andre brugere har lavet online

Lav online spil Trin 7
Lav online spil Trin 7

Trin 4. Indtast dine spiloplysninger

Inden du begynder at oprette dit spil, skal du indtaste et par oplysninger.

  • Navn - Dette er navnet på dit spil. Du kan ændre dette senere til hvad du vil.
  • Skærmstørrelse - Dette er størrelsen på din spilskærm, og er meget vigtig, da det vil påvirke den kunst, du bruger. Da folk sandsynligvis vil spille dit spil i deres webbrowser, behøver skærmstørrelsen ikke at være særlig stor. Prøv bredde: 640 px Højde: 480 px. Dette er en god størrelse at komme i gang med.
Lav online spil Trin 8
Lav online spil Trin 8

Trin 5. Lær layoutet at kende

Når du først indlæser dit nye spil, bliver du taget til dashboardet. Det er her, du kan se alle scenerne i dit spil og få adgang til alle ressourcer. Du kan også ændre dine spilindstillinger herfra. Du vil bruge det meste af din tid på at arbejde i instrumentbrættet.

  • Scener - Dette er hovedvinduet i instrumentbrættet, og viser det faktiske spil og alle aktiverne. Dit spil vil være en samling scener.
  • Ressourcer - Dette er listen over alle objekter og aktiver i dit spil. det inkluderer skuespillere, baggrunde, skrifttyper, scener, logik, lyde og fliser. Ressourcerne er organiseret i et træ på venstre side af skærmen.
  • Indstillinger - Indstillingerne for spil og indstillinger giver dig mulighed for at justere, hvordan dit spil fungerer, herunder kontroller, tyngdekraft, kollisioner, indlæsning af skærme og mere.
Lav online spil Trin 9
Lav online spil Trin 9

Trin 6. Tilpas en skuespiller

En skuespiller er ethvert objekt, der bevæger sig eller kan interageres med i spillet (spiller, fjende, døre osv.). Du skal oprette en skuespiller for hvert objekt i dit spil. For at oprette en skuespiller skal du klikke på "Aktortyper" i menuen Ressourcer. Vælg den ønskede aktør på listen (listen bestemmes af det kit, du valgte).

  • Tildel skuespilleren til en gruppe (spiller, fjende). Dette vil hjælpe med at bestemme skuespillerens kollisionsegenskaber. Vælg din skuespiller for at åbne Actor Editor. Klik på fanen Egenskaber, og vælg derefter den relevante gruppe i rullemenuen.
  • Tilføj adfærd (hoppe, stampe, gå). Adfærd er det, der giver din skuespiller mulighed for at udføre handlinger. Klik på fanen Adfærd, og klik derefter på knappen "+ Tilføj adfærd" i nederste venstre hjørne. Vælg en adfærd (f.eks. "Walking") fra listen, og klik derefter på "Vælg".
  • Indstil kontrollerne. Hvis du opretter en spillerkarakter, vil du sandsynligvis tillade spilleren at flytte den. Når du tilføjer Walking -adfærden, føres du til skærmen Walking attributes. Du kan bruge rullemenuerne til at vælge, hvilke taster der skal flytte skuespilleren til venstre og højre. Du kan også tildele animationer, hvis det kit, du bruger, indeholder nogen.
  • Du kan tilføje flere adfærdsmuligheder for at tilpasse, hvad en skuespiller kan gøre.
Lav online spil Trin 10
Lav online spil Trin 10

Trin 7. Opret en scene

Scenen er, hvad spilleren ser, når han spiller spillet. Det er baggrunden, samt alle objekter og aktører, der er synlige. For at oprette en ny scene skal du klikke på indstillingen Scener i ressourcetræet og derefter klikke på den stiplede boks. Giv din nye scene et navn for at fortsætte.

  • Baggrund - Din scene bliver automatisk dimensioneret, så du behøver ikke bekymre dig om det i øjeblikket. Du kan vælge at bruge en farve som baggrund, som vil have fliser placeret over den. Du kan vælge mellem en ensfarvet farve eller en gradient. Klik på "Opret", når du er færdig. Dette åbner Scene Designer.
  • Placer fliser - Flisesættet, der følger med i dit kit, indlæses i højre side af vinduet. Klik på blyantværktøjet i menuen til venstre, og klik derefter på den flise, du vil bruge. Du kan derefter placere flisen på din scene. Klik og træk med musen for at placere flere fliser.
  • Placering af skuespillere - Klik på fanen Skuespillere over dit flisesæt for at skifte til dine tilgængelige skuespillere. Du skal have oprettet dem tidligere for at de kan vises på denne liste. Klik på den skuespiller, du vil placere, og klik derefter på, hvor på scenen du vil have den vist. Hvis du holder nede ⇧ Shift, klikker skuespilleren på gitteret.
  • Tilføjelse af tyngdekraft - Klik på fanen "Fysik" øverst i vinduet, og indtast derefter en værdi i feltet "Tyngdekraft (lodret)". Indtastning af 85 vil simulere den virkelige tyngdekraft.
Lav online spil Trin 11
Lav online spil Trin 11

Trin 8. Test spillet

Når du har oprettet en scene og placeret nogle skuespillere, kan du teste spillet. Klik på knappen "Test spil" øverst på skærmen for at afspille det, du har hidtil. Du kan bruge de taster, du angav, når du opretter dine skuespillere, til at styre din afspillerskarakter.

Find eventuelle aspekter, der ikke virker, og prøv at rette dem. For eksempel opfører fjenderne sig korrekt? Kan du besejre dine fjender? Er der nogen platforme, der er utilgængelige eller chasms, der ikke kan krydses? Vend tilbage til det relevante område af din spilredaktør for at løse alle de problemer, du finder. Dette kan tage lidt tid, men slutresultatet bliver et meget sjovere og spilbart spil

Lav online spil Trin 12
Lav online spil Trin 12

Trin 9. Tilføj mere

Nu hvor du har en fungerende første scene, er det tid til at begynde at bygge hele spillet. Tilføj flere niveauer og udfordringer, og bliv ved med at teste dine tilføjelser for at sikre, at de er sjove og fungerer korrekt.

Lav online spil Trin 13
Lav online spil Trin 13

Trin 10. Site Lås dit spil

Hvis du vil uploade spillet til et websted, der er vært for Flash -spil, eller uploade til dit eget websted, vil du sandsynligvis aktivere "Site Locking". Dette forhindrer dit spil i at blive spillet, hvis det ikke er på den tilladte liste over websteder.

  • Åbn "Spilindstillinger" fra dit "Ressourcer" -træ. Vælg sektionen "Loader". Indtast de websteder, du vil tillade, i feltet "Site Lock", adskilt af et komma uden mellemrum. For eksempel newgrounds.com, kongregate.com.
  • Mens du er på denne skærm, skal du indtaste din hjemmeside i feltet "Din startside", hvis du har en. Dette vil give spillere, der spiller dit spil, link til dit websted.
Lav online spil Trin 14
Lav online spil Trin 14

Trin 11. Eksporter spillet som Flash

Når du er tilfreds med dit spil, kan du eksportere det til Flash -format. Dette giver dig mulighed for at uploade spillet til et websted, der er vært for Flash -spil eller til dit eget websted. Klik på Offentliggøre vælg Web, og klik derefter på Flash. Gem filen på et sted, der er let at finde på din computer.

Lav online spil Trin 15
Lav online spil Trin 15

Trin 12. Udgiv spillet

Når du har din Flash (. SWF) -fil, kan du uploade den til den valgte vært. Der er en række forskellige steder online, der er vært for Flash -spil, og nogle kan endda lade dig tjene penge på annonceindtægter med dit spil. Du kan også uploade dit spil til dit eget websted, men du vil sikre, at du har båndbredden til at tage højde for spillere, hvis spillet bliver populært.

  • Se denne vejledning for at uploade dit spil til dit eget websted.
  • Hvis du vil uploade dit spil til et websted som Newgrounds eller Kongregate, skal du oprette en konto og derefter gennemgå uploadprocessen for webstedet. Vilkårene og betingelserne vil variere fra sted til sted.
  • Hvis du vil udgive dit spil til Stencyl Arcade, kan du gøre det inden for Stencyl -programmet. Klik på Offentliggøre vælg Stencyl, og klik derefter på Arcade. Spillet uploades automatisk, så sørg for at være tilfreds med navnet, før du gør dette. Stencyl Arcade har en grænse på 8 MB filstørrelse.

Del 3 af 4: Brug af Construct 2

Lav online spil Trin 16
Lav online spil Trin 16

Trin 1. Download og installer Construct 2

Dette program giver dig mulighed for at oprette HTML5 -spil med meget lidt kodning. Du bliver nødt til at tildele nogle variabler, men alt dette sker gennem menuer uden egentlig kodning nødvendig.

Construct 2 er gratis, selvom nogle funktioner er begrænsede, medmindre du opgraderer. Den gratis version kan ikke udgives til andre platforme end HTML5

Lav online spil Trin 17
Lav online spil Trin 17

Trin 2. Opret et nyt projekt

Når du først starter Construct 2, bliver du mødt med en velkomstmenu. Klik på "Nyt projekt" -linket for at starte et nyt spil. Der er også et par inkluderede eksempler, som du kan bruge til at se, hvordan grundlæggende spil oprettes.

Når du opretter et nyt projekt, får du en liste over skabeloner. For dit første projekt vil du sandsynligvis starte med et tomt projekt. Dette giver dig mulighed for at få styr på det grundlæggende, uden at skabeloner kommer i vejen

Lav online spil Trin 18
Lav online spil Trin 18

Trin 3. Juster dine projektindstillinger

I den venstre ramme i projektvinduet vil du se en række elementer i rammen Egenskaber. Du kan bruge dette til at indstille din skærmstørrelse og indtaste dine spil- og virksomhedsoplysninger.

Lav online spil Trin 19
Lav online spil Trin 19

Trin 4. Indsæt en baggrund

Dobbeltklik på layoutet. Vælg "Flisebelagt baggrund" fra sektionen Generelt. Klik på dit layout for at placere baggrunden. Dette åbner baggrundsredaktøren. Du bliver nødt til at oprette din egen ved hjælp af billedredigeringssoftware eller downloade teksturer fra forskellige steder online.

  • Indstil baggrunden til layoutets størrelse. Gør dette ved at vælge baggrundsobjektet og ændre størrelsen i rammen Egenskaber.
  • Skift lagnavn og lås det. Du vil låse laget for at forhindre utilsigtet at flytte det, mens du placerer andre objekter. Klik på fanen "Lag" i højre side af skærmen. Vælg laget, og klik på blyantikonet. Navngiv laget "Baggrund", og klik derefter på knappen "Hængelås" for at låse baggrunden.
Lav online spil Trin 20
Lav online spil Trin 20

Trin 5. Opret et nyt lag

I fanen Lag skal du klikke på knappen "+" for at oprette et nyt lag. Omdøb det til "Main". Dette vil være det lag, som de fleste af dine spilobjekter ligger på. Sørg for, at hovedlaget er valgt, før du fortsætter.

Lav online spil Trin 21
Lav online spil Trin 21

Trin 6. Tilføj input til dit spil

I Construct 2 skal dine input tilføjes som objekter til dit spil. De er usynlige og gør det muligt at bruge tastatur og mus i hele projektet.

Dobbeltklik på dit layout, og vælg "Mus" fra Input-sektionen. Gør det samme for at indsætte objektet "Tastatur"

Lav online spil Trin 22
Lav online spil Trin 22

Trin 7. Tilføj objekter

Det er tid til at begynde at tilføje nogle spilobjekter til dit layout. Dobbeltklik på layoutet, og vælg "Sprite" fra sektionen Generelt. Brug trådkorset til at vælge, hvor du vil placere sprite. Billededitoren åbnes, så du enten kan indlæse en eksisterende sprite eller oprette en ny.

Når du vælger sprites på dit layout, indlæses spriteens egenskaber i den venstre ramme. Skift sprite -navnet, så du lettere kan identificere og henvise til det

Lav online spil Trin 23
Lav online spil Trin 23

Trin 8. Tilføj adfærd til dine objekter

Hvis du vil tilføje en adfærd, skal du klikke på det objekt, du vil tilføje en adfærd fuld for at markere det. Klik på linket "Tilføj/rediger" i afsnittet Adfærd i rammen Egenskaber. En liste med tilgængelig adfærd vises.

Adfærd er forudkonfigurerede stykker logik, der giver dig mulighed for hurtigt at tilføje funktionalitet til dine objekter. Du kan vælge mellem en lang række forudindstillede adfærd, der kan udføre en lang række funktioner. For eksempel, for at gøre gulvet solidt, skal du give det "Solid" adfærd. Hvis du vil flytte spillerens karakter i otte retninger, skal du give den "8 retnings bevægelses" adfærd

Lav online spil Trin 24
Lav online spil Trin 24

Trin 9. Ændre adfærdsegenskaber

Du kan redigere eksisterende adfærd for at tilpasse den måde, dine objekter fungerer på. Du kan ændre værdierne for at ændre hastighed, retning og andre egenskaber.

Lav online spil Trin 25
Lav online spil Trin 25

Trin 10. Forstå, hvordan begivenheder fungerer

Begivenheder er en liste over betingelser, og det er det, der driver spillet. Hvis betingelserne er opfyldt, sker der en begivenhed. Hvis betingelserne ikke er opfyldt, sker der ingen begivenhed. Hændelsesarket køres typisk omkring 60 gange i sekundet. Hver gang det kører kaldes et "kryds".

Lav online spil Trin 26
Lav online spil Trin 26

Trin 11. Opret en begivenhed

Dobbeltklik på det tomme hændelsesark. En liste over tilgængelige objekter vises. Vælg det objekt, du vil oprette en begivenhed for, eller du kan oprette en systemhændelse.

  • Vælg, når handlingen udføres. Når du har valgt objektet, bliver du bedt om at vælge, hvornår hændelsen skal forekomme. Dette kan være baseret på andre begivenheder eller på bestemte tidspunkter. "Hver flåt" er altid.
  • Tilføj en handling. Du bliver bedt om at vælge et af dine objekter. Vælg fra en liste over handlinger. For eksempel, hvis du laver en top-down shooter og ønsker, at spillerens karakter altid skal se på musen, ville du oprette en "Angiv vinkel mod position" -aktion på hvert sæt, der er sat til Player-objektet. Når du bliver bedt om koordinaterne, skal du indtaste "Mus. X" for X og "Mus. Y" for Y. Dette vil holde spillerens skib altid peget mod markøren.
Lav online spil Trin 27
Lav online spil Trin 27

Trin 12. Tilføj flere begivenheder og adfærd

Disse er rygraden i dit spil. Tilføjelse og justering af adfærd og begivenheder hjælper dig med at lave et unikt og sjovt spil, som folk vil klage til at spille. Eksperimenter med forskellige begivenheder for at prøve at få det nøjagtige spil, du ønsker.

Lav online spil Trin 28
Lav online spil Trin 28

Trin 13. Tilføj nogle variabler

Der er to typer variabler i Construct 2: instansvariabler og globale variabler. Disse giver dig mulighed for at angive brugerdefinerede værdier for dine objekter og spil, såsom sundhed, tidsbegrænsninger, scoringer og mere.

  • Instansvariabler - Instansvariabler er variabler, der er tildelt enkelte objekter. De bruges til ting som fjende og spilleres sundhed. Du kan tilføje instansvariabler efter at have valgt et objekt ved at klikke på linket "Tilføj / rediger" i afsnittet Variabler i rammen Egenskaber. Giv variablen et navn, der kan refereres til i en begivenhed, samt en startværdi.
  • Globale variabler - Globale variabler er variabler, der er tildelt hele spillet. De bruges til ting som spillerens score. For at oprette en global variabel skal du åbne begivenhedsarket og højreklikke på et tomt mellemrum. Klik på "Tilføj global variabel", giv den et navn, der kan refereres til i en begivenhed, og indtast derefter en startværdi.
Lav online spil Trin 29
Lav online spil Trin 29

Trin 14. Opret en grænseflade

Når du opretter en grænseflade, er det normalt bedst at gøre det på et nyt lag. Dette skyldes, at grænsefladen sjældent bevæger sig eller ændres, så det er godt at have det på et låst lag. I egenskabsrammen for det nye lag skal du indstille "Parallax" til 0. Dette forhindrer, at laget ruller, når skærmen gør det.

Brug tekstfelter og variabler til at oprette din grænseflade. Du kan indstille dine tekstbokse til at vise resterende sundhed, score, ammunition eller andet, som spilleren regelmæssigt skal se

Lav online spil Trin 30
Lav online spil Trin 30

Trin 15. Test og revider dit spil

Nu hvor du har nogle objekter på skærmen med begivenheder og adfærd, kan du begynde at teste og tilføje indhold. Klik på knappen "Afspil" øverst på skærmen for at bygge og teste spillet. Noter alt, der ikke fungerede, og prøv at rette det, så dit spil bliver spilbart og sjovt.

Lav online spil Trin 31
Lav online spil Trin 31

Trin 16. Eksporter spillet

Hvis du er tilfreds med dit spil, kan du eksportere det, så det kan uploades til et websted og afspilles af alle. For at eksportere spillet skal du klikke på Fil i menuen, og vælg Eksporter. Gem projektet på et sted, som du let kan finde.

Lav online spil Trin 32
Lav online spil Trin 32

Trin 17. Udgiv spillet

Der er flere websteder, der giver dig mulighed for at uploade HTML5 -spil, så andre kan spille. Du kan også tilføje spillet til dit eget websted. Se denne vejledning for detaljer om upload af spillet til dit eget websted.

Del 4 af 4: Kodning fra bunden

Trin 1. Download en programmerings -IDE (Integrated Development Environment), der understøtter HTML, f.eks. Game Maker Studio

Nogle er gratis tilgængelige, selvom mange af de bedste IDE'er koster hundredvis af dollars.

Trin 2. Lær at bruge IDE

At lære at programmere i dit miljø er utrolig vigtigt. At huske det meste af den fælles kode og lære at implementere tingene korrekt kan tage uger eller endda måneder. Vær tålmodig, og det vil betale sig!

Trin 3. Opret dit spil, når du tror, du er klar

At lave et designdokument eller notere nogle ideer er en god start. Programmering af et spil kan tage måneder, eller hvis du virkelig er seriøs om at lave et hit, endda et år eller to.

Trin 4. Test spillet

Sørg for at prøve at lave vanvittige eller uventede ting og squash så mange fejl ud som du kan. Prøv også at afgøre, om gameplayet er, som du ville have det, eller om du skal gå tilbage og foretage ændringer.

Trin 5. Udgiv det

Udgiv dit spil online på et websted, f.eks. Kongregate. Du bør være forberedt på konstruktiv kritik, og du vil måske opdatere dit spil for at imødekomme din spillerbases ønsker.

Tips

  • Hvis du er mere interesseret i at lære koden bag Flash -spil, kan du bruge Flash Builder og ActionScript 3 -kode til at oprette brugerdefinerede spil. Dette vil tage længere tid, men kan resultere i en mere unik oplevelse. Se denne vejledning for detaljer om programmering i Actions Script 3.
  • Giv æren til alle kilder, hvorfra du tog ideer eller indhold, og til alle andre, der hjalp med at skabe spillet.

Anbefalede: