MAME RUN!! Maakproces Achter de Schermen – Technische Deel

Deel 1 ging over ‘waarom we het maakten’,
Deel 2 is een verhaal over ‘hoe we het maakten’.

Persoonlijk voel ik me veel comfortabeler met backend systemen zoals Django, PostgreSQL, Redis en Docker wanneer ik webapplicaties maak.
Echter, dit project werd bijna volledig uitgevoerd met pure vanilla JS + HTML5 Canvas.
Frontend-technologieën, die ik normaal gesproken nooit diep zou onderzoeken, werden de kern van dit spel.

En tot mijn verbazing...
het was ontzettend leuk.
Dit was een technologische factor die me nog meer liet opgaan in het proces.

Gewoonlijk gebruik ik de uitdrukking dat ik "niet van frontend werk hou" meer dan "ik hou er niet van", dus het is mogelijk dat de liefde voor 豆柴の大群 zelfs dingen die ik "niet leuk vind" leuker maakte.

1. HTML5 Canvas – Een wereld zoals “Paint + Animatie”

De kern van MAME RUN!! is HTML5 Canvas.
Dit is een gebied dat functioneert als een ‘schilderij’ gemaakt bovenop de webpagina, waar je pixels rechtstreeks kunt tekenen om een spel te maken.

Gewoonlijk is webontwikkeling als volgt:

• knoppen maken (HTML)

• kleuren toepassen (CSS)

• een beetje actie geven (JS)

Dit is de gebruikelijke flow, maar Canvas is totaal anders.

Canvas is een structuur die continu opnieuw tekent met 30~60fps.
Bij elke frame:

1. de achtergrond wissen

2. opnieuw tekenen

3. het personage tekenen

4. obstakels tekenen

5. botsingen berekenen

6. de score verhogen

7. de volgende frame plannen

Dit herhaal je tientallen keren per seconde.

Moderne webbrowsers voelen echt krachtig aan, net als game-engines.

2. Springen en Zwaartekracht: “De magie van slechts 3 regels code”

De basis van het spel, ‘springen’, werd eigenlijk eenvoudig geïmplementeerd met behulp van natuurwetten.

dino.vy += gravity * dt;  // toepassen van zwaartekracht
dino.y  += dino.vy * dt;  // aanpassen van positie

if (dino.y >= ground) {
    dino.y = ground;
    dino.vy = 0;
}

Met deze eenvoudige logica
worden de bewegingen van Leona vlot springen, landen en vallen op een natuurlijke manier gecreëerd.

In een situatie zonder game engine,
was er een kleine ontroering van "Ah... zelfs met zulke basis natuurwetten blijkt het toch heel soepel te bewegen".

3. Sprite Animatie – Leona komt tot leven op het moment dat ze rent

Leona's loopanimatie is een sprite sheet van 6 frames, zoals onderstaande afbeelding.

(※ Aanbevolen om sprite-afbeeldingen in de blog te plaatsen)

In JS snijd je de sprite en teken je elke frame:

const frameWidth = sprite.width / 6;
ctx.drawImage(
  sprite,
  frameIndex * frameWidth, 0, frameWidth, sprite.height,
  dino.x, dino.y, dino.width, dino.height
);

Als je de frame-index gewoon blijft aanpassen,
rent Leona schattig.
Op dat moment voelde het alsof het spel 'leven' kreeg.

Animatie is echt belangrijk in game ontwikkeling.

4. Willekeurige Generatie van Obstakels – "De sleutel tot het wegnemen van eentonigheid"

Er zijn verschillende soorten obstakels.

• Oranje kegels

• Rode kegels

• Gegele kegels

• Motorfietsen (2 kleuren)

• Auto's (2 typen)

• Borden (drie soorten)

Als je er slechts 1 of 2 herhaalt, raak je snel verveeld,
maar door verschillende types willekeurig te mengen wordt de flow van het spel aanzienlijk verbeterd.

const key = OBSTACLE_KEYS[Math.random() * length];
const interval = 0.8 + Math.random() * 1.2;

Het is een zeer simpele willekeurigheid, maar de speelervaring verandert volledig.

5. Botsing Detectie – Het moeilijkste maar ook het leukste deel

Botsing detectie wordt vaak de manier van “AABB box botsingen” genoemd.

if (dino.x < ob.x + ob.width &&
    dino.x + dino.width > ob.x &&
    dino.y < ob.y + ob.height &&
    dino.y + dino.height > ob.y) {
    // Botsing!
}

Belangrijk hierbij is

• Als je te strikt bent, wordt het spel frustrerend

• Als het te soepel is, gaat de moeilijkheidsgraad omlaag

Daarom zijn zowel Leona als de obstakels hun hitboxen met 10~15% verkleind om een “aangename moeilijkheidsgraad” te creëren.

Deze fijne afstelling was best leuk.
Ik begon een beetje te begrijpen waarom game ontwikkelaars zoveel aandacht besteden aan het balanceren van de moeilijkheidsgraad.

6. Afstandsgebaseerd Stage Systeem – Dood in 50 seconden

Stage 1 is ontworpen om in ongeveer 50 seconden te worden voltooid.
Daarom ging ik ervan uit dat Leona 16m per seconde zou bewegen.

Doelafstand: 800m  
Snelheid: 16 m/s → ongeveer 50 seconden  

Ik stelde deze cijfers niet alleen in, maar speelde het daadwerkelijk 30~40 keer om te testen
“Is dit de lengte waarop je een spel wilt spelen en opnieuw wilt doen?”

Het was een klein maar cruciaal element dat de speelervaring beïnvloedde.

7. Serverintegratie – Score ranking en opslag van records

Als backend ontwikkelaar heb ik het servergedeelte natuurlijk samengesteld met Django + DRF.

• Indienen van scores met POST

• Validatie in de Serializer

• Niet-ingelogde gebruikers worden opgeslagen met een guest_id

• De hoogste score per gebruiker wordt beheerd in de UserScore tabel

• TOP 5 wordt als HTML-fragment geretourneerd zodat JS het kan vervangen

Dus bij game over wordt de ranking TOP5 in real-time bijgewerkt.

Het leuke is, zelfs binnen het canvas spel,
de stabiliteit van de backend en de gestructureerde datastroom zijn van enorm belang.

De backend organiseert de karakters, afbeeldingen en dialooggegevens systematisch en stuurt deze in combinatie naar de browser.

8. Mobiele Ondersteuning – Veel moeilijker dan verwacht

De meest onverwachte hindernis bij het maken van een webspel was de mobiele omgeving.

• Oplossingsaanpassing

• Touch-acties

• Canvasverhouding

• Render-prestaties

• Achtergrond scrollingssnelheidcorrectie

Op desktop draait alles heel soepel, maar
op mobiel waren er problemen zoals kleine frame drops, touch-responsiviteit en canvas grootte berekeningen.

Uiteindelijk is het allemaal opgelost, maar,
in dit proces kwam de gedachte “Ik respecteer frontend ontwikkelaars...” onverhoopt naar boven.

9. Deel 2 – Afsluiting van het Technische Deel

Als iemand die graag met backend werkt en meestal API's ontwikkelt, is het de eerste keer dat ik een spel met design als hoofdfocus in JS op het web maak. Normaal gesproken moest ik ook frontend doen, dus ik deed het een beetje uit noodzaak, en ik had nooit zo diep gewerkt met HTML5 Canvas.

Echter, via dit project leerde ik:

• Het web is krachtiger dan je denkt

• JavaScript, dat toen ik het rommelig vond, is in feite een best leuke taal en

• Gameontwikkeling is eigenlijk een ‘samenvoeging van kleine technieken’

Het was een project dat begon uit fanliefde, maar,
ook een grote leer- en groeikans voor mij als ontwikkelaar.

Volgende Deel Aankondiging (Deel 3: Verhaal Deel)

In het volgende artikel wil ik
“Waarom begint het in Shibuya?”, “Waarom Tokyo Dome?” en “Hoe hebben we karakters voor elk lid ingesteld?”
de details van het wereldverhaal/creatie proces bespreken.

• Bekijk het vorige artikel opnieuw