De kleren maken de game

Ik speel al heel lang dress-up games. Ooit begonnen op algemene spelletjeswebsites zoals spele.nl  Later vond ik websites die helemaal gericht zijn op dress-up games, zoals Azalea’s Dolls (Azalea, 2020) en Stardoll (Stardoll AB, 2020). Tegenwoordig speel ik vooral op mijn telefoon, namelijk Love Nikki Dress-Up Queen (Elex, 2020). Deze games verschillen allemaal behoorlijk van elkaar, hoewel bij allemaal het aankleden van een figuur een (grote) rol speelt. Tijdens dit project wil ik deze interesse combineren met een andere langlopende interesse, namelijk programmeren. Ik wil al een tijdje me hier verder in ontwikkelen, maar zonder concreet doel is het moeilijk om te kiezen waar te beginnen. Dit project combineert deze dingen: ik wil zelf een game maken door te programmeren.

Context, Scope en Definitie

Oorspronkelijke hoofdvraag:

‘Hoe maak je een dress-up game zonder enige game-development ervaring?’

Een van de belangrijkste elementen voor mij in dit project is dat ik zelf wil programmeren. Tijdens mijn vooronderzoek heb ik onderzoek gedaan naar manieren om een game te maken die geschikt zijn voor een beginner. Een veel genoemde suggestie is het gebruiken van software waarin je zonder code iets kan maken, zoals GameMaker Studio (Widder, 2017). Hier heb ik naar gekeken maar ik kwam al snel tot de conclusie dat dit niet is wat ik wil. Ik vind het belangrijker dat ik zelf de code schrijf dan dat ik een mooie, afgeronde en helemaal speelbare game aflever aan het einde. Dat gaat waarschijnlijk ook niet lukken, zoals de maker van de Extra Credits video’s (Portnow, 2015) zegt: ‘Als je denkt één maand nodig te hebben, ga er vanuit dat het minstens drie maanden duurt.’

screenshot van Gamemaker studio 2 website
Screenshot van de website van GameMaker Studio 2 (YoYoGames, z.d.)

Methode en Aanpak

Voor het daadwerkelijk maken van de game zijn er twee aspecten belangrijk: Het ontwerp van de game en het programmeren (BitDegree, 2020, p. intro).

Op het gebied van programmeren heb ik al een beetje ervaring met html/css en met Processing. Op aanraden van Ronald van Essen (Essen, 2020) heb ik daarom gekozen om te werken met JavaScript en de p5.js library (Processing Foundation, 2020). Deze is ontwikkeld door dezelfde mensen als Processing en lijkt daar redelijk op. YouTubekanaal The Coding Train (The Coding Train, 2020) heeft heel veel tutorials, die ik gebruikt heb. Daarnaast heb ik gekeken naar blogs en forumberichten, om te ontdekken hoe anderen het aangepakt hebben.  De code van slow_izzm op het Processing forum heeft me erg geholpen.  (slow_izzm, 2020).

screenshot van Gamemaker studio 2 website
Voorbeeld van een dress-up game op CodePen (Kristen, 2016)
screenshot van dress-up game
Dress-up game, gezien op de blog Stashable (Stashable, 2018)

Uitvoering en Experimenten

Ik begonnen met het doen van de tutorials van The Coding Train (The Coding Train, 2019).  36 video’s met een totale lengte van bijna 7 uur aan content die de basis van JavaScript en p5.js duidelijk uitleggen. Omdat ik nog niks van JavaScript wist, wilde ik eerst een goed idee hebben van hoe het werkte. Door steeds mee te doen met de tutorials leerde ik vrij snel hoe het werkte en probeerde ik steeds als ik iets leerde te bedenken hoe ik dat toe kon passen in de context van een dress-up game. Bijvoorbeeld een knop, waardoor de kleur in een cirkel verandert. Later gebruikte ik dit als basis voor de allereerste versie van de game, waarbij op je met een druk op de knop Beer een jurk aantrekt.

test 1
De eerste poging om iets te making wat relevant is voor een game (Eigen werk, 2020)
beer v1.5 gif
Beer v1.5, waarbij ik succesvol één kledingstuk aan en uit kon doen (Eigen werk, 2020)

Toen de eerste reeks tutorials af was had ik het gevoel dat ik een redelijke basiskennis opgebouwd had en begon ik daadwerkelijk met de game. De eerste stappen gingen voorspoedig en het lukte redelijk makkelijk om te bereiken wat ik voor ogen had. Voor de afbeeldingen heb ik geen nieuwe tekeningen gebruikt, maar een project wat ik een jaar geleden voor mijn studentenvereniging heb gemaakt: een papieren aankleedpop in de vorm van een beer.

Aankleedbeer in een tijdschrift
De originele aankleedbeer in het Basjus Magazine van het USKO (Groot, 2019)

Maar toen ik de beer twee kledingstukken tegelijk wilde aandoen liep ik tegen een probleem aan. Toen ik alleen een broek aandeed kon ik de achtergrond en de beer gewoon opnieuw tekenen met elke nieuwe broek, maar dat werkte niet meer als ik ook een top aan wilde doen. Door meer tutorials te volgen en het forum van p5.js te gebruiken vond ik manieren om het op te lossen. Ik heb geëxperimenteerd met afbeeldingen als DOM elementen maken en de uiteindelijke versie maakt gebruik van arrays voor elke categorie.

beer v2
Beer v2, waarbij ik probeerde om twee kledingstukken aan te doen. Dit was in eerste instantie geen succes

Aan het begin van het project was ik vooral bezig met zo snel mogelijk javascript/p5.js leren. Naar mate ik meer dingen ging proberen daarmee ging ik ook steeds meer nadenken over hoe je hiermee kan blunderen, in het algemeen en op het gebied van diversiteit specifiek. Rond deze tijd heb ik nog extra items getekend voor de beer, om de mogelijkheden wat meer te laten zien, maar ook om problemen beter uit te kunnen lichten.

beer v7
Beer v7 – Ondertussen werkt het dragen van meerdere kledingstukken prima, en heb ik extra dingen getekend.

In eerste instantie deed ik vooral theoretisch onderzoek, naar de stand van diversiteit in games (spoiler: het kan een stuk beter). Maar toen ik daar een tijdje mee bezig was realiseerde ik me dat ik het belangrijk vond dat dit thema niet een los onderdeel van mijn onderzoek was, maar geïntegreerd werd in het praktische stuk. Mijn uitgangspunt was ten slotte om een game te maken, niet om een oplossing te bedenken voor een probleem in de game-industrie.

screenshot van foto uit Medium artikel
Voorbeeld van slechte belichting van een donkere huid in een character creator (Rousseau, 2019)
screenshot van r/LoveNikki Reddit
Problemen met kledingitems en huidskleur in Love Nikki – Dress Up Queen (Elex, 2020)

Om te zorgen dat ik beter in de gaten had als ik weer een kant op ging die ik eigenlijk niet wilde, heb ik op dit moment een aantal guiding principles bepaald.

  1. Alleen dingen die ik daadwerkelijk kan maken, geen mockups/mooie plaatjes
  2. Één integraal eindwerk, geen losse onderdelen
  3. Alles is zelfgemaakt, geen tijdelijke afbeeldingen van internet
  4. Show, don’t tell

Mijn focus is verschoven naar hoe ik kan laten zien wat voor moeilijkheden er zijn bij het maken van een diverse game. Met feedback van klasgenoten en docenten ben ik uitgekomen bij het gebruiken van foutmeldingen, die letterlijk en figuurlijk staan voor iets dat mis is.

Beer 7 is de eerste versie waarbij ik dit geprobeerd heb.  Deze versie heb ik naar een game designer gestuurd die ik ontmoet heb bij een evenement van Dutch Game Garden, vlak voor de lockdown. Uit zijn feedback bleek dat uit de game op zichzelf nog helemaal niet duidelijk was wat het idee erachter was (Mazurel, 2020). Ik heb verschillende ideeën overwogen om dit duidelijker te kunnen maken. Bijvoorbeeld om toch een aantal mockups te maken die laten zien wat ik in gedachten heb maar (nog) niet kan programmeren , om een inleiding erbij te schrijven of om meer tekst in de game te stoppen. Met behulp van de guiding principles heb ik deze ideeën beoordeeld en ben ik uiteindelijk uitgekomen op optie drie. Het guiding principle show, don’t tell was toch het minst belangrijk, en de tekst wordt een aanvulling op het beeld, niet een vervanging.

schets van game
Schets van de game, met een pop-up error (Eigen werk, 2020)
eerste poging foutmelding
Eerste poging om een pop-up met een foutmelding te maken (Eigen werk, 2020)

In de komende week voor de expo hoop ik dit nog verder uit te kunnen werken, zodat het uiteindelijke resultaat duidelijk is.

iteraties van aankleedbeer
Verschillende iteraties van aankleedbeer. Niet alles werkte even goed (Eigen werk, 2020)

Versie 8 is hier te spelen. Ik wilde graag deze versie hier embedden, maar volgens mij heb ik daar niet de goede permissies voor.

Tot slot

Aan het begin van het project wist ik nog niet zo goed wat ik precies wilde bereiken, behalve leren hoe ik een game kon maken. Gaandeweg kwam ik er steeds meer achter hoe ingewikkeld dit proces is, en vooral: hoe veel invloed de keuzes hebben die al gemaakt zijn voordat je begint met maken. Door ervoor te kiezen al bestaande tekeningen te gebruiken, illustreerde ik perfect een van de problemen waar ik het over heb: Beer heeft een hoed, waarbij de oren getekend zijn. Toen ik later verschillende kleuren beren maakte veranderden de oren op de hoed niet mee van kleur!

Wat ik echt gemist heb is de mogelijkheid om met mensen in de game-industrie te praten over hoe ze hier mee omgaan en over na denken. Oorspronkelijk wilde ik een aantal keer naar evenementen van Dutch Game Garden gaan, maar door het coronavirus is dit maar één keer gelukt. Ik heb wel geprobeerd via internet met mensen in contact te komen, maar dat bleek veel lastiger en is niet echt gelukt.

Bronnenlijst

Azalea. (2020). Azalea’s Dolls – Home. Opgeroepen op februari 11, 2020, van Azalea’s Dolls: https://azaleasdolls.com/index.php

BitDegree. (2020, januari 8). Learn How To Make A Video Game From Scratch. Opgeroepen op februari 26, 2020, van BitDegree: https://www.bitdegree.org/tutorials/how-to-make-a-video-game/

Elex. (2020). Love Nikki – Dress UP Queen. (5.6.1). Opgeroepen op februari 11, 2020, van https://play.google.com/store/apps/details?id=com.elex.nikkigp

Groot, V. d. (2019, april). BasjusBouwpakket – Aankleedbeer. Basjus Magazine, p. 27.

Kristen. (2016, september 20). dress-up game. Opgeroepen op juni 1, 2020, van CodePen: https://codepen.io/kristenmay/pen/kkkdBr

Portnow, J. (2015, januari 21). Making Your First Game: Practical Rules – Setting (and Keeping) Goals – Extra Credits. Opgeroepen op februari 11, 2020, van YouTube: https://www.youtube.com/watch?v=dHMNeNapL1E&list=PLhyKYa0YJ_5C6QC36h5eApOyXtx98ehGi&index=3&t=0s

Processing Foundation. (2020). Homepage. Opgeroepen op februari 15, 2020, van p5.js: https://p5js.org/

Rousseau, J. (2019, september 11). Dear Video Game Character Creators: You Still Need Work. Opgeroepen op maart 08, 2020, van Medium: https://medium.com/@jrous001/dear-video-games-character-creators-you-still-need-work-1ac27ffa2820

slow_izzm. (2020, april 3). I need help making the pictures stay until next is pressed. Opgeroepen op juni 1, 2020, van Processing Foundation Forum: https://discourse.processing.org/t/i-need-help-making-the-pictures-stay-until-next-is-pressed/19273

Stardoll AB. (2020). Stardoll. Opgeroepen op maart 10, 2020, van Stardoll: https://www.stardoll.com/en/

Stashable. (2018, december 30). Make a Dress-up game using Javascript, HTML and CSS. Opgeroepen op juni 1, 2020, van Stashable: https://stashable.blog/2018/12/30/make-a-dress-up-game-using-javascript-html-and-css/

The Coding Train. (2019, april 12). Code! Programming with p5.js. Opgeroepen op maart 19, 2020, van YouTube: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

The Coding Train. (2020). The Coding Train. Opgeroepen op februari 17, 2020, van YouTube: https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

Widder, B. (2017, mei 08). How to make a video game (experience not required). Opgeroepen op maart 05, 2020, van Digital Trends: https://www.digitaltrends.com/gaming/how-to-make-a-video-game/

YoYoGames. (z.d.). Gamemaker Features. Opgeroepen op juni 1, 2020, van YoYogames: https://www.yoyogames.com/gamemaker/features

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *