►Speel celestara

Opdracht

Nee niet het project X feest dat uit de hand is gelopen door Facebook...

Voor Project X was er geen vaste opdracht, wat mij de vrijheid gaf om zelf een idee te bedenken en een project op te zetten dat mijn leeruitkomsten kon aantonen. Voordat ik aan het daadwerkelijke project begon, heb ik eerst een Proof of Concept document opgesteld. Dit document had als doel om mijn ideeën te structureren en een duidelijk plan te creëren voordat ik aan de ontwikkeling begon. Het POC-document bevatte een beschrijving van mijn projectidee, inclusief de gameplaymechanismen, een voorlopige verhaallijn, en features die ik wilde toevoegen. Het hielp mij om doelen te stellen waarop ik altijd terug kon vallen tijdens het process, dit PoC heeft mij geholpen als referentiepunt voor het controleren of de functies waren toegevoegd. Het PoC-document was ook nuttig bij het iteratieve proces. Wanneer ik feedback kreeg van gebruikers of testers, kon ik deze terugkoppelen naar mijn oorspronkelijke plannen en bepalen hoe ik verbeteringen kon doorvoeren zonder af te wijken van mijn doelstellingen. Door een POC-document te maken, heb ik niet alleen een duidelijk startpunt voor mijn project gecreëerd, maar ook een hulpmiddel dat me door het hele proces heen heeft geholpen. Het gaf me structuur, richtlijnen, en een middel om mijn ideeën te ontwerpen en brainstormen voordat ik begon met de uitvoer.

Inleiding

Het project Celestara begon met als doel een ambitieuze RPG-game te ontwikkelen waarin spelers een ruimteschip beheren, missies voltooien, en minigames spelen. Dit project is ontstaan uit mijn doelstelling om mijn kennis van JavaScript te verdiepen en nieuwe technieken in de praktijk te brengen. Ondanks de omvang van het project, ben ik erin geslaagd om een speelbare demo te realiseren die belangrijke onderdelen van het oorspronkelijke concept implementeert. Dit projectverslag beschrijft mijn voortgang de gebruikte technieken, en hoe ik mijn leerdoelen heb behaald.

De naam 'Celestara'

De naam is verzonnen door AI gebruiken, een groot inspiratie voor naamgeving en ideation was Subnautica dit is een van mijn favoriete spellen dus ik heb aan chatGPT gevraagd "bedenk een lijst voor een space-game naam die op de naam van Subnautica lijkt" hieruit zijn enkele namen gegenereerd en Celestara sprak mij het meest aan.

Ontwerp

Voordat ik begon met coderen, heb ik tijd besteed aan het ontwerpen van verschillende elementen van de game in Figma. Het doel hiervan was om een duidelijk beeld te creëren van hoe de gebruikersinterface (UI) en verschillende gameplay-elementen eruit zouden zien. Dit omvatte ontwerpen van de HUD, het navigatiesysteem binnen het ruimteschip, en visuele mockups van de minigames.

Iteraties

Nadat ik deze eerste versies van deze ontwerpen had afgerond, besloot ik peer-feedback te verzamelen van medestudenten. De feedback was dat het niet duidelijk was hoe minigames geactiveerd konden worden. Om dit probleem op te lossen, creëerde ik een interactief object waarmee spelers toegang kregen tot de minigames. Daarnaast werd opgemerkt dat het schip er kaal uitzag en dat er geen duidelijke manier was om nieuwe gebieden te ontgrendelen. Om dit te veranderen, voegde ik betere graphics toe om het schip levendiger te maken en ontwierp ik een unlock-minigame die ervoor zorgde dat spelers nieuwe gebieden kunnen unlocken.
De verbeteringen uit de eerste iteratie werden opnieuw getest, en hier heb ik nieuwe feedback op gevraagd. Er werd gezegd dat het interessant zou zijn als spelers hun schip konden upgraden en gevechten konden aangaan met andere spelers. Om deze ideeën te verwerken, ontwierp ik een eerste versie van een combat-systeem in Figma. Ook kwam er een functie waarmee spelers upgrades konden toepassen. Verder werd opgemerkt dat de algemene look and feel van de game kaal aanvoelde en leek op het spel Among Us. Om dit te verbeteren, voegde ik meer gedetailleerde graphics toe, zoals texturen en visuele accenten die het spel uniek maakten.
Elke iteratie maakte het ontwerp nog vollediger en uitgebreid. De feedback die ik ontving, was essentieel om problemen te identificeren die ik zelf niet had opgemerkt, en door deze stap voor stap aan te pakken. Deze iteratieve aanpak heeft laten zien hoe belangrijk het is om feedback serieus te nemen en telkens verbeteringen door te voeren op basis van gebruikerservaringen.

POC onderdelen

Uit het PoC-geïmplementeerde functionaliteiten Het PoC-document schetste een gedetailleerd plan voor Celestara, inclusief gameplay-mechanismen, een verhaallijn, en minigames. De volgende onderdelen zijn inmiddels gerealiseerd:

• Ruimteschipbeheer: Spelers kunnen brandstof en scrap verzamelen, deze middelen gebruiken om hun ruimteschip te upgraden en schade te repareren.
• Minigames: De eerste minigame, een Snake-game, is volledig geïntegreerd. Spelers verdienen punten door deze minigame succesvol te voltooien.
• Brandstof systeem: Een text toont brandstof, scrap en andere essentiële statistieken.

Hoewel sommige elementen, zoals een volledig trading systeem en AI voice-over, nog in ontwikkeling zijn, biedt de huidige versie een solide basis voor verdere uitbreiding.

Implementatie & user tests

De volledige implementatie code staat in Git. Om aan te tonen welke technieken ik heb gebruikt voor het maken van de game heb ik een development verslag aangemaakt. Hierin staat uitgebreid beschreven wat ik heb gedaan en hoe dit is gedaan. Tijdens deze implementatie is ook user testing gedaan waarbij voortdurende gebruikersfeedback zorgde voor verbeteringen in zowel functionaliteit als stabiliteit dit is gedocumenteerd binnen een dashboard.
Hier zijn een paar van de belangrijkste oplossingen:

Tijdens het testen van de Snake-minigame merkte mijn vriendin op dat het spel te snel begon, waardoor het moeilijk was voor beginners om de besturing onder de knie te krijgen. Ze gaf aan dat er nauwelijks tijd was om te wennen aan de controles, wat resulteerde in een frustrerende eerste ervaring. Om dit probleem op te lossen, heb ik een aparte canvas opgezet voor de Snake-minigame. Hierdoor kon ik de frame rate van de game aanpassen en een lagere snelheid implementeren bij de start van het spel dit zorgde voor een betere gebruikerservaring.

Bij verder testen door mijn broertje werd een probleem ontdekt met de collisiedetectie. Hij zag dat als hij bleef bewegen, het (soms) leek alsof hij door de muren heen kon gaan, hoewel dit niet altijd gebeurde. Dit inconsistente gedrag maakte de gameplay onvoorspelbaar en beïnvloedde de betrouwbaarheid van de game. Om dit te verhelpen, heb ik de logica van de collisiedetectie herschreven. Ik optimaliseerde de hitboxes van de muren, zodat botsingen nauwkeuriger werden geregistreerd. De nieuwe logica controleert nu expliciet op contact tussen de speler en de exacte coördinaten van de muren. Na deze herziening heeft mijn broertje de game opnieuw getest en bevestigd dat het probleem was opgelost. Hij gaf aan dat het nu onmogelijk was om door de muren te glitchen, wat de gameplay een stuk consistenter maakte.

Technieken

Om mijn leerdoelen te behalen, heb ik verschillende technieken en tools toegepast:

• Figma: Gebruikt voor het maken van het ontwerp.
• Canvas API: Gebruikt voor het renderen van de minigames en het ontwerpen van de interactieve HUD.
• Key handler events: voor beweging in het spel.
• Event Listeners: Toegepast voor gebruikersinteracties, zoals movement en het activeren van minigames.
• Methods: heel veel methods die verschillende functies doen die met elkaar communiceren.
• OOP: Classes zoals Ship, ShipMap SnakeGame, en gameObject structureren de logica van de game en maken deze efficiënter.
• Iteratief werken: Regelmatig feedback ontvangen en verwerken om gameplay en visuals te verbeteren.
• Git: Voor versiebeheer, wat goed hielp om wijzigingen bij te houden en problemen op te lossen.

Aseprite

Tijdens het maken van het project heb ik gebruik gemaakt van Aseprite, Dit programma maakte het eenvoudig om pixel-art te creëren en nauwkeurig aan te passen. Vooral de mogelijkheid om precies te werken met de coördinaten van de sprites was enorm handig. Hierdoor kon ik ze zonder problemen in mijn code verwerken, wat het ontwikkelproces een stuk soepeler maakte. Dankzij Aseprite kon ik veranderingen snel testen en implementeren, waardoor de kwaliteit van de game in elke fase van het project groeide.

Reflectie

Dit project heeft mij geholpen mijn vaardigheden in JavaScript en game design aanzienlijk te verbeteren. Door complexe methods en veel variabele te gebruiken maar ook door concepten zoals botsingdetectie en event handling te implementeren, heb ik een solide basis gelegd voor toekomstige projecten. Het iteratieve proces heeft aangetoond hoe belangrijk feedback is om een product te verfijnen. Hoewel sommige onderdelen nog onvolledig zijn, ben ik trots op de voortgang van de demo die ik heb geboekt. Celestara bewijst dat zelfs ambitieuze projecten deels-haalbaar zijn met een gestructureerde aanpak en een sterke motivatie. In de toekomst zou ik dit project verder uit te breiden en mijn vaardigheden nog verder te ontwikkelen.