Artikel top billede

(Foto: Computerworld)

Guide: Skab hurtigt 2D-spil med GDevelop

GDevelops velkomstskærm praler med, at denne 2D-spilgenerator er “en brugervenlig generator uden behov for at lære programmeringssprog.” Da den er baseret på Java, kan den køre på både Linux, Windows og MacOS, eller du kan prøve den online. Du kan endda udgive dine spil.

Af Mette Eklund, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Licensen angiver, at du kan publicere, sælge eller gøre præcis, hvad du vil med dine spil. Og du kan eksportere dem til Linux, Windows, Mac, Android, HTML5 og endda Facebook Messenger (der kommer snart fuld iOS-understøttelse). Men hvad med påstanden om, at man ikke behøver at lære et programmeringssprog? Lad os se på sagerne.

Hvis du vil køre den på Linux, kan installationen være lidt besværlig. Du er formodentlig nødt til at snuppe en tarball fra https://gdevelop-app.com. Den behøver dog ikke at blive kompileret, og den kræver kun libgconf-2-4. Download den rette tarball, pak den ud, og du burde være i stand til at køre filen i hovedfolderen blot ved at klikke på den, eller ved at åbne en terminal i folderen og taste $ ./gdevelop.

Hvis det lyder svært, kan du overveje at installere den ved at bruge Itch, som har en version, der er klar til brug - og den er anbefalet af udviklerne. http://itch.io har også en bunke af Linux-spil (hvoraf nogle er lavet i GDevelop). Den mest spændende måde at udforske GDevelop er ved at gå i krig med nogle guides og prøve sig frem, så lad os starte der.

1 Få et overblik

GDevelop [Billede A] åbner med en velkomstskærm, hvor du kan vælge at åbne et projekt, skabe et nyt projekt eller lede efter dokumentation. Vælg “Open Project”, og hvis du kigger i din installations-folder, bør du have spil-tutorials og skabeloner installeret, disse bør ligge under “resources/examples” [Billede B] i hovedfolderen i GDevelop.

Billede A

>> Skærmen er opdelt i tre faner: “Start Page”, “Scene” og “Scene (Events)”. Når du åbner eller starter et projekt, åbner GDevelop “Scene”-fanen, så lad os starte der.

>> Til venstre er “Properties”, et udfoldeligt panel, der viser egenskaberne for ethvert objekt, du klikker på i en scene. I midten er selve scenen, og du kan zoome ind og ud med dit scroll-hjul på musen. Til højre side er “Objects”-panel, hvor du kan skabe dine spil-objekter og trække dem hen til scenen i midten.

>> Hvis du åbner fanen “New Scene (Events)” tab, kan du se de forprogrammerede begivenheder, der bestemmer, hvordan dit spil virker. Dette er den sværeste del af GDevelop, men det prøver vi af senere.

>> Til sidst er der hovedmenubarren øverst til højre. Disse knapper ændrer sig, når du skifter mellem “New Scene” og “New Scene (Events)”-fanerne, men en knap forbliver den samme nemlig “Play”-knappen til venstre, som gør dig i stand til at afprøve spillet.

Billede B

2 Prøv dig frem

Du kan nu vælge en skabelon (template) og prøve dig frem. Et godt sted at starte er selve spil-objekterne. Højreklik på et objekt i “Objects”-panelet og vælg “Edit Object”. Det nye vindue bliver delt i to faner: “Properties” og “Behaviors”. Normalt bliver vinduet åbnet i fanen “Properties” , men lad os først se på fanen “Behaviors”.

>> I“Behaviors”-fanen kan du tilføje opførsler for enkle ting såsom at slette et objekt, der har forladt skærmen eller mere komplekse ting såsom at ændre et objekts fysik. Bare klik på knappen “Add” for at introducere en opførsel og tryk på skralde-ikonet for at slette det igen. Husk at scrolle ned, for selvom nogle opførsler ikke har nogle valgmuligheder, er der andre, der har masser af vælge fra.

>> Tilbage i “Properties”-fanen kan du se navnet på dit objekt, såvel som enhver anden objekt-animation. Når du har loadet nogle animationer, kan du finindstille dem med looping-muligheden og den smarte preview-funktion. Hvis du starter med et tomt objekt, så klik på “+”-tegnet til højre for at tilføje en animation. Du kan have masser af animationer med individuelle navne, hastigheder og loops.

>> Hvis du allerede har nogle billedfiler at arbejde med, så klik på “+”-tegnet til venstre for at åbne en filsøger og vælg, hvad du ønsker. Ellers kan du begynde at tegne dine egne ved at vælge “Edit with Piskel”, hvilket åbner GDevelops eget redigeringsprogram.

>> To vigtige punkter, når du vil lave spil, er “Edit Hitboxes” og “Edit Points”. Hitboxes er usynlige zoner, der definerer kollitionspunkterne for dine objekter. Hvis du fravælger de to skydere, der deler kasser på tværs af alle animationer, så kan du have selvstændige hotboxes for hver billede. Dette muliggør en mere raffineret kollitions-detektion, hvilket er vigtigt for Street Fighter-agtige spil, hvor hvert billede (frame) har et andet kollitionsområde.

>> Klik “Use a Custom Collision Mask” for at redigere din hitbox, hvor du kan indsætte røde punkter for at definere din form. Tilføj flere punkter ved at klikke på “+” i den sorte cirkel. Jo flere punkter, jo mere kompelsk form kan du skabe.

>> “Edit Points” gør dig i stand til at skabe særlige positioner på et objekt såsom enden af tårn, eller positionen hvorfra et objekt roterer. Du kan have flere punkter for hver karakter, og det gør det muligt at have detaljerede objekter med flere våben eller egenskaber.

>> Kontrolknapperne minder om dem i “Edit Hitboxes”, da du også her kan vælge at have selvstændige punkter på tværs af billeder (frames), eller om de skal deles på tværs af alle animationer. Standard-mulighederne er blot “Origin” og “Center”, men hvis du klikker på “+”, kan du tilføje dine egne punkter, og kalde dem, hvad du ønsker.

Udforsk brugergrænsefladen i GDevelop

1. Hovedmenubarren

Det er her, hvor de vigtige knapper er, selvom de skifter alt efter, hvilken fane du har åben. Heldigvis er “Play”-knappen der altid.

2. Scenen

Det er her, du designer og konstruerer dine levels. Du kan zoome ind og ud med dit scroll-hjul på musen.

3. Object-panelet

Her kan du skabe objekter til dit spil, og derefter klikke og trække dem ind på scenen i midten.

4. Egenskabs-panelet

Dette panel kan indimellem godt være i vejen, men husk på at det er der, når du har brug for at ændre opførslen på et af dine objekter.

5. Funktions-fanen

Disse faner skifter mellem den primære del af programmet og ændrer, hvilke knapper der er på skærmen.

6. Event-redering

Åben denne fane for at lave alt det kedelige og konstruere logikken bag dit spil (det afhænger naturligvis helt af, hvad du ønsker ...).

3 Parat, klar ...

Det er fristende at arbejde ud fra en skabelon, men det er bedre at vise dig, hvordan GDevelop virker ved at starte fra bunden. Fra åbningsmenuen, vælger du “Create a New Project”. Der dukker en ny menu op med et udvalg af skabeloner, du kan vælge fra; vælg “Empty game”. Sørg for at vælge, hvor du placerer folderen, ellers vil det blive et mareridt at skulle finde den igen.

>> Tilbage i fanen “Start Page” ligner alting næsten velkomst-skærmen, så det er nemt at overse, at den første knap har skiftet navn fra “Open a Project” til “Open Project Manager”. Dette gør dig i stand til at ændre spillets overordnede indstillinger såsom rækkefølgen på dine levels. Det meste af dette er udenfor omfanget af denne artikel, men husk at den er der, når dit spil engang har vokset sig stort.

>> Nu går du ind i “Project”-panelet i venstre side, og under “Scenes” klikker du på “+” -tegnet for at tilføje en ny scene. Klik der, hvor der står “New Scene”, - dette åbner i fanen “New Scene” i hovedvinduet. “Project”-panel er bare i vejen lige nu, så du kan roligt lukke det, hvis det generer dig.

>> Lige nu vil vi bare lave det lette forarbejde og skabe en række af objekter og animationer, som vi vil programmere senere. Vi forlader os på det faktum, at du sikkert har tutorial-filerne installeret (sammen med al grafikken), men hvis du ikke har de filer, vi nævner, så kan du bare tegne dine egne.

4 Din platform

Tilføj et nyt objekt via “Objects”-panelet. Du er nødt til at adskille din platform fra en regulær karakter, så i det nye vindue skal du vælge “Tiled Sprite”. “Properties”-vinduet vil poppe op med det kedelige navn “NewObject”. Du kan ændre det til “Grass-Platform”.

>> For at give platformen noget grafik, så klik på “Select an image”-feltet og en menu vil åbne sig med titlen “Choose a new image”. Hvis du kan finde GDevelop’s installationsfolder, så vil dine prøvebilleder være under “resources/examples/platformer.” Vælg “Grass.png”, og tilbage i vinduet “Properties” klikker du “Apply”.

>> Nu kan du placere din platform et sted på scenen. Klik og træk den ind og placer den, hvor du mener, den skal være. Nu har du en platform med noget græs, men det er ikke særligt brugbart, så lad os nu demonstrere programmets sejeste funktioner.

>> Når du klikker på en platform, dukker der små hvide bokse op - dem kan du justere størrelsen med. Klik og træk dem, og GDevelop genererer flere platforme baseret på mønstret på det originale. Hvad der er endnu sejere er, at rotations-knapperne i toppen af boksen giver mulighed for at justere platformene i enhver vinkel.
>> Desværre er vi stadig nødt til at fortælle GDevelop, at dette er en platform, ellers vil din karakter falde igennem den. Gå til “Objects”-panelet, højreklik på “GrassPlatform”, og vælg “Edit object”. I det nye vindue åbner du fanen “Behaviors” og klikker på “+”-tegnet til højre for at tilføje en opførsel. I det nye vindue klikker du “Platform”, og derefter “Apply” i det efterfølgende vindue. Nu har du en platform at gå på, så lad os putte noget på den.

5 Giv den karakter

Vi vil forberede hovedpersonen ved at tilegne styring og derefter bruge billeder fra en tutorial for at gøre karakteren i stand til at løbe og stå stille. For at skabe en ny karakter, så tilføj et objekt fra panelet “Objects”. I det nye vindue klikker du “Sprite”, hvilket åbner ”Properties” for den nye karkater, og omdøber det til “Player”.

>> For at tilegne styring til “Player”, så klik på fanen “Behaviors”, og på højre side er der et “+”-tegn for at tilføje opførsler. I den nye menu vælger du “Platform character”, hvilket frembringer en ny skærm med indstillinger. Vi bruger bare standard-indstillinger, så klik “Apply”.

>> Nu vil vi give “Player” lidt animation. I “Objects”-panelet højreklikker vi på “Player”, og vælger “Edit object”, hvilket åbner fanen “Properties”. Vi har brug for to linjers animation, så klik på “+”-tegnet i højre side to gange. Du har nu to unavngivne animationslinjer ved navn Animation #0 “Idle” og Animation #2 “Running”.

>> For at vælge animationsbillederne, så klik på den hvide firkant til venstre med et “+”-tegn. Dette åbner en filbrowser og åbner samme platformsfolder som tidligere. For den stillestående “Idle”-animation skal du loade “p1_stand.png”.
Den løbende “Running”-animation er skabt af fem billeder, så lav fem billeder (frames) og load billederne fra “p1_walk03.png”
til “p1_walk07.png”.

>> Der er kun en ting mere, vi skal gøre, før vi kan fortsætte. Ved “Running”-animationen skal du klikke på “Don’t Loop”, så det ændrer indstilling til “Loop”, og i timer-ikonet skal du slette 1-tallet og ændre det til “0.05”, hvilket vil få animationen til at gå hurtigere.

Piskel: Animations Editor

Indimellem kan GDevelop godt være lidt besværlig, men Piskel er relativt ligetil. Det centrale område er der, hvor du tegner, og de ternede grå områder angiver gennemsigtighed. Hvis du vil skabe en række af billeder baseret på en enkelt skabelon, så tegn først dit billede og tilføj derefter en række rammer, du vil fylde. I “Transform”-kassen kan du nu klikke på “Clone”-ikonet.

For at se dit mesterværk, så se i øverste højre hjørne, hvor der er et preview-vindue, der viser alle animations-rammerne. Hvis du ser lige nedenunder, er der en skyder, der viser antallet af billeder per sekund ( FPS- frames per second). Når du er klar, så klik på “Save to GDevelop” i det øverste højre hjørne.

6 Begivenheder

Nu til den svære del. Åben fanen “New Scene (Events)” [Billede C], og du befinder dig i event-editoren. Det er her selve kontrolrummet i spillet befinder sig.

Billede C

>> Events (begivenheder) er lavet af såkaldte Conditions (til venstre) og Actions (yderst til højre). Hvis en condition f.eks. er sand, “Laser is in collision with Enemy” - igangsætter det en action (handling) såsom “Delete object Enemy.”

>> En kæde af disse begivenheder er, hvad der kaldes en algoritme, og disse algoritmer er ultimativt det design, der får videospillet til at virke. Som du vil opleve, kan de algoritmer, der kræves for at skabe et spil, hurtigt blive komplekse, selv for åbenbart basale funktioner.

>> Kan en platform for eksempel gribes? Og hvordan kan man gribe om ting? Hvilke ændringer skal der gøres på en karakter, og hvilken effekt har det på spillets fysik? Det kan være et mareridt at regne ud, men heldigvis har GDevelop et udvalg at typiske genre-specifikke opførsler, der er præprogrammeret for dig og klar til brug.

>> For at lave din første event, så klik på “Add a new empty event”-knappen. Når det nye tomme event er dukket op, så klik på “Add condition”, Vores første kodning er at tjekke, om spilleren er på gulvet (aka platformen). Der dukker en stor menu op med alle de Conditions, der er tilgængelige i GDevelop. Scroll ned til “Platform Behavior” og vælg “Is on floor”.

> Til højre kan du tilegne et objekt til denne opførsel og tilpasse ethvert parameter. Klik i “Object field” og en auto-complete-menu dukker op med alle in-game-objekterne. Vælg “Player” og klik udenfor rammen for at få den til at gå væk. Det er alt, du behøver, så klik “OK” for at komme tilbage til event editoren.

7 Et subevent

Her ville vi normalt følge den sædvanlige rækkefølge med at tilføje en action til den condition, du har valgt, men vi vil meget hellere bruge muligheden for at demonstrere subevents. Du kan bruge to normale event til at pådutte følgende logik:

• Hvis karakteren på platformen ikke løber, så skal “Idle”-animationen afspilles.
• Hvis karakteren er på platformen og løber, så skal “Running”- animationen afspilles.

>> Hvis du bruger subevents, behøver du dog kun at tjekke, om spilleren er på platformen én gang, hvilket gør koden enklere og nemmere at fejlfinde.

>> For at skabe et subevent så gå til “Player is on floor”-eventet og højreklik på den tomme plads ved siden af “Add a condition”, og vælg “Add Sub Event”. Gør dette to gange, da du skal bruge to sub-events. GUI’et virker på samme måde for disse som normale events, selvom GDevelop indrykker dem forskelligt for visuel differentiering.

>> I det første subevent tilføjer vi en condition, der tjekker om karakteren løber ved at klikke “Add condition”, “Platform Behavior”, “Is moving”, og vælg “Player” til “Object”-feltet. Det er fint for nu, så klik på “OK” for at vende tilbage til event-editoren.

>> Gentag nu processen for det andet subevent, men denne gang tjek skyderen der siger “Invert condition”. Denne meget smarte funktion gør det modsatte af det programmerede event, hvilket betyder, at det første subevent tjekker, om karakteren bevæger sig, og det andet om spilleren ikke gør.

>> Afslut demonstrationen ved at tilføje handlinger, der ændrer animationerne. Til det første subevent, vælg “Add action”, og en lignende skærm dukker op som før, men denne gang viser den alle de mulige handlinger i stedet for conditions.

>> Karakteren og alle dens animationer er det, der kaldes et “sprite object”, så vælg “Sprite”-kategorien og fra undermenuen vælg “Animations and images”, fulgt af “Change the animation (by name)” i den sidste undermenu. Vælg “Player” fra “Object”-feltet og i “Animation name” taster du “Running” inklusiv dobbelte citattegn, ellers vil du få en fejl, og du har sikkert også brug for et stort begyndelsesbogstav.

>> Desværre kan du ikke bare trykke Enter, når du er færdig, for det vil bare skabe en ny linje, så irriterende nok er du nødt til at klikke et sted i det blanke hvide område forneden for at afslutte. Klik “OK” og du vil ende tilbage i event-editoren. I det andet sub-event gentager du processen, men denne gang giver du animationen navnet “Idle” - igen inklusiv citattegn. Dermed skulle du være klar til at prøve din demo, så gem dit arbejde og tryk “Play”, når du er klar.

>> Eksportmulighederne i GDevelops er ret seje, da de gør det muligt for dig at sælge dine spil, hvor du end ønsker. De er særligt glade for Itch (https://itch.io) [Billede D].

>> Der er også sket meget på brugergrænsefladen de seneste år, og den er helt sikkert værd at overveje, hvis man hurtigt vil i gang med at lave 2D-spil. Når det er sagt, så har den stadig nogle upolerede kanter, især når det gælder den grafiske brugergrænseflade. Ting, såsom at du skal klikke udenfor et vindue på et tomt område, er måske fint for udviklerne, men det er i sidste ende en klodset måde at arbejde på og ikke just professionel. Alting ser også ud til at have flere navne - vælg nu bare et enkelt begreb.

Billede D

>> Derudover er det ikke helt sandt, at du ikke behøver at kunne kode: Event-editoren er basalt set programming med et GUI, og sommetider er der ting, du er nødt til at indtaste, selvom det faktisk blot er små bidder af programmeringsstrenge.

>> Vi skal dog ikke give dig indtrykket af, at det er et dårligt program. Selvom det er svært at anbefale til nybegynderen, så er GDevelops næsten-kodning måske præcis, hvad lidt mere erfarne brugere er ude efter. Balancen mellem en brugergrænseflade og kodning ser ud til at gøre det muligt at lave mere avancerede former for gaming, og hvis du ser på nogle af de spil, der allerede er klar, så er der nogle ret spektakulære resultater. Så det er ikke perfekt, men bestemt værd at prøve. Når der kommer lidt flere opgraderinger til det, bliver GDevelop virkelig genialt.

Seje ekstrafunktioner i GDevelop

Da GDevelop er baseret på JavaScript, kan du også tilføje din egen JavaScript-kode. Hvis du åbner event-editoren og klikker “Choose and add an event” (det største “+”-tegn til højre) og derefter “JavaScript code”.

Dette vil blive behandlet som ethvert andet event, og vil blive udløst hver gang, eventet bliver nået. Se dokumentationen for at se nogle eksempler såsom at fade ud af en sprite, når den rammer gulvet.

GDevelop understøtter ikke kun mobile platforme (lige nu Android og delvis understøttelse for iOS), men til gaming-kapitalister kan du tilføje dine egne reklamer med AdMob og styre, hvor de er placeret.

Du kan også aktivere vibrationsfunktionen på smartphones og styre, hvor længe den varer. Vi spørger ikke, hvad du vil bruge den til, men vi går ud fra, at det er til at repræsentere jordskælv og eksplosioner.

Det er værd at læse dokumentationen for publicering, da der er detaljeret information for hver platform såvel som links til delte ressourcer, som du kan bruge og derved slippe for at lave ting såsom lyd og illustrationer. Der er endda vejledning til, hvordan du kan publicere dit spil på Google Play.