Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

24a2 är en mycket enkel, men fullt fungerande, spelmotor för JavaScript-programmerare. Den har ett ovanligt utseende och känsla, men du kan använda den för att lära dig grunderna i spelprogrammering.

Med stöd för en spelloop, färgglad grafik och enkel inmatning har 24a2 allt du behöver för att skapa små spel med minimal ansträngning.

Kolla in 24a2 och börja din resa mot full spelutveckling idag.

Vad är 24a2?

24a2 är en liten motor med öppen källkod som hjälper dig att bygga grundläggande spel. Det är väldigt lätt att lära sig och allt du behöver för att börja bygga dina spel är en webbläsare och en textredigerare.

24a2 har fått sitt namn från sin upplösning: 24 x 24. Även jämfört med andra minimalistiska motorer som PICO-8, med sin upplösning på 128 x 128 är den här liten! 24a2 använder cirkulära "pixlar", med stora mellanrum mellan dem, så det ser ganska distinkt ut.

instagram viewer

Du kommer förmodligen inte att använda 24a2 för att komma på nästa succéspel, men det är inte riktigt meningen. 24a2 är perfekt för nybörjare, och du kan använda den för att lära dig några av de grundläggande koncepten bakom spelutveckling.

Det är också bra för prototyper av ett kärnkoncept. Om du märker att du blir distraherad av komplex spelfysik eller sprite-animationer bör det hjälpa dig att fokusera om du tar bort allt detta.

Dessutom är 24a2-källkoden en enda TypeScript-fil. Du kan använda den som inspiration, eller till och med modifiera den, för att skapa din egen, mer avancerade spelmotor.

Hur använder du 24a2?

Börja med en grundläggande mall för ditt spel:

<html>
<huvud>
<manus
src=" https://cdn.jsdelivr.net/gh/jamesroutley/24a2/build/engine.js">
manus>
<manussrc="game.js">manus>
huvud>
<kropp>kropp>
html>

Lägg märke till hur detta använder ett innehållsleveransnätverk (cdn.jsdelivr.net) för att hämta engine.js fil, så du behöver inte ens ladda ner eller installera någonting.

Det andra manuset, game.js, är för din egen spelkod. Börja med den absoluta minsta arbetskoden, för att kontrollera att allt fungerar korrekt:

nytt spel({}).run();

Detta lilla program kommer att visa standard 24a2-rutnätet i din webbläsare:

Därefter vill du bekanta dig med 24a2:s callback-funktioner som utgör kärnan i motorn. Dessa koncept är överförbara mellan spelmotorer, så att lära dig hur de fungerar kommer att gynna dig utöver din användning av 24a2.

Det finns en handfull viktiga funktioner som du kan definiera och skicka till Game()-konstruktorn via en config objekt.

låta config = {
skapa: skapa,
uppdatering: uppdatering,
onKeyPress: onKeyPress,
onDotClicked: onDotClicked
};

låta spel = ny Spel (config);
game.run();

24a2 anropar funktionen du anger i config.create när den startar. Du kan använda detta för att initiera ditt spels egen konfiguration, ställa in datastrukturer, etc.

fungeraskapa(spel) {}

Uppdateringsfunktionen körs med jämna mellanrum under hela ditt spel. Detta är huvudspelslingan som i andra motorer vanligtvis består av separata steg för att uppdatera spelstatus och rita om skärmen. Med 24a2 kommer du att hantera båda operationerna i den här funktionen.

fungerauppdatering(spel) {}

Slutligen, för att fånga indata, vill du hantera piltangenttryckningar, musklick eller båda. 24a2 skickar en riktning till din onKeyPress-funktion när spelaren trycker på en piltangent. Den skickar x- och y-koordinater till onDotClicked om de klickar på en punkt med musen.

fungeraonKeyPress(riktning) {}
fungeraonDotClicked(x, y) {}

Vilka typer av spel kan du skapa med 24a2?

De 24a2 webbplats innehåller tre exempelspel inklusive en handledning. De andra som den visar upp är ett enkelt Snake-spel och en skidåkningsutmaning.

De GitHub-förråd innehåller länkar till några andra spel inklusive Space Invaders, Tic-Tac-Toe och ett minimalt Paint-program. You Killed a Bear är mer avancerat och Maze Craze är en bra demonstration av hur man lägger ytterligare grafik ovanpå standardrutnätet.

24MadRush är en Tetris "klon" som använder färgpaletten mycket bra. Det börjar också med en innovativ spelbar handledning som visar dess funktioner.

De tekniska specifikationerna för 24a2-spel

24a2 är mycket begränsad, genom design. Men detta ger en utmärkt möjlighet till kreativitet. En av bästa tipsen för att vara mer kreativ är att omfatta begränsningar.

Förutom sin begränsade upplösning, begränsar 24a2 dig till:

  • En färgpalett med bara nio färger: de i regnbågen plus svart och grått.
  • Mycket grundläggande inmatning: piltangenttryckningar och musklick på punktrutnätet.
  • Tystnad: det finns inget stöd för musik eller ljudeffekter överhuvudtaget.

Du kan dock alltid skriva kompletterande JavaScript-kod för att utöka ditt spel utöver dessa begränsningar. Och eftersom motorn är öppen källkod, är du fri att utveckla den på vilket sätt du vill.

Spora dig själv till bättre saker med 24a2

Testa dig själv med 24a2. Återskapa ett klassiskt spel eller uppfinn ett eget. Turbaserade spel, som brädspel, kommer att fungera mycket bra med motorn.

Om 24a2 tänder din passion för spelutveckling finns det gott om möjligheter att fortsätta resan. PICO-8, Godot, Unity och GameMaker är alla populära val.