Project type: Game
Date: 11-11-2024
Status: Finished
Software used: p5js, Visual Studio Code, Tiled
Language used: Typescript, SQL
Role: Developer
Team size: 2 developers
About the project
In dit project heb ik samengewerkt met een andere developer. De opdracht was om een platformer te maken met p5js.
Het doel van het spel is om zo snel mogelijk het einde van het level te halen. Onderweg naar de finish moet je wel eerst een sleutel vinden om het level te kunnen voltooien. De tijden worden opgeslagen in een database, wat het een leuke en competitieve speedrun game maakt.
In this project I worked on the parts below.
Unity Structure
Omdat ik bekend ben met Unity en dit een makkelijke manier vond om structuur aan te brengen, heb ik de Unity-structuur nagemaakt in TypeScript voor p5.js.
Hiervoor heb ik bijvoorbeeld GameObjects, een Vector2 en een SceneManager gemaakt. De SceneManager is verantwoordelijk voor het wisselen tussen scènes. De scènes zelf zijn weer verantwoordelijk voor alle GameObjects daarbinnen en de lifecycle daarvan. Om het makkelijk te maken, zitten er in een scène ook zoekfuncties die ik heb gerecreëerd, zoals FindObjectByType<T>(). Daarnaast kunnen GameObjects ook DontDestroyOnLoad zijn.
Physics System
Voor dit physics systeem heb ik een PhysicsManager en een Force class gemaakt. De PhysicsManager is verantwoordelijk voor het toepassen van alle forces op GameObjects, waaronder zwaartekracht en eigen toegevoegde forces.
Het systeem heeft bekende kenmerken uit Unity, zoals isKinematic, maar bevat ook een handige eigen uitbreiding: de ForceGraph. Hiermee kan je het verloop van een kracht via een grafiek aanpassen. Zo kan een force bijvoorbeeld zwak beginnen, sterk zijn in het midden en weer zwak eindigen. Tot slot werkt dit physics systeem naadloos samen met het collision systeem om botsingen af te handelen.
Collision System
Ik heb een collision systeem gemaakt dat ook weer kenmerken heeft van Unity, zoals een BoxCollider en Raycasts. Met dit systeem kun je checken of colliders met elkaar overlappen. Dit wordt gedaan via een intersection berekening. GameObjects kunnen hierbij ook meerdere colliders hebben. Daarnaast is er ook een isTrigger instelling. Hiermee zorg je ervoor dat forces niet stoppen bij een botsing, maar kun je de botsing wel detecteren. Dit is bijvoorbeeld handig voor een jump pad, zodat je er gewoon doorheen kan lopen als je niet wilt springen.
Tiled Map Parser
De Tiled Map Parser is bedoeld om heel makkelijk maps te kunnen maken en gebruiken. In Tiled kun je grid based werelden maken en eigenschappen instellen voor sprites. Zo geef ik bijvoorbeeld aan dat een specifieke sprite een gravity cloud is en geef ik deze direct een collider.
Uit Tiled krijg ik vervolgens een JSON-bestand dat ik inlaad. Op basis van alle coördinaten en eigenschappen in dit bestand, bouw ik het level op in p5.js. De verantwoordelijkheden hiervoor heb ik duidelijk verdeeld. De MapManager zorgt voor het inladen van alle JSON-bestanden. Daarna is de MapParser verantwoordelijk voor het omzetten van deze JSON naar GameObjects en het juist instellen van de tile-eigenschappen. Tot slot zorgt de TilesManager voor het extraheren van de rotatie, eigenschappen en het ophalen van de juiste tile sprite uit de sprite map.
Highscore
Aan het einde van een level kan een speler ervoor kiezen om zijn tijd op te slaan door een naam in te vullen. De score wordt dan opgeslagen in de database, waarna iedereen de top 10 tijden per level kan zien. Door dit element toe te voegen, wordt de game echt een competitief speedrun spel, wat een erg leuk werkt. Daarnaast laat het systeem ook andere statistieken zien, zoals de gemiddelde tijd die spelers over het level doen en hoe vaak een level in totaal is gespeeld.
Heatmap
Wanneer een speler afgaat, wordt in de database opgeslagen op welke positie in het level dit gebeurde. De heatmap is een tool om te zien waar spelers het vaakst afgaan. Dit wordt in de tool aangegeven met rode cirkels: hoe meer cirkels dicht bij elkaar staan, hoe roder het gebied wordt. Als developer is dit erg nuttige informatie. Op deze manier kan ik namelijk gemakkelijk analyseren waar spelers moeite mee hebben en wat de echt lastige gedeeltes in een level zijn.
Voor de spelers zelf wordt deze informatie op een andere manier getoond. Zodra zij afgaan, verschijnt er kort een tekstje boven de speler met hoeveel anderen in precies datzelfde gebied zijn afgegaan.