Een spel met een Conversational interface in Javascript.

Inleiding

Door websites te bouwen ben ik geïnteresseerd geraakt door ‘Coding’.  Ik heb mijn interesse voor code samengevoegd met mijn thuis situatie namelijk een boerderij om een tof spel te gaan maken. Ik vind het leuk om mensen meer te leren over mijn thuissituatie.

Mijn project is interessant voor iedereen die meer wil weten over code en Conversational interfaces. Conversational interfaces zijn een nieuwe trend en volgens verschillende mensen uit het werkveld wordt deze interface de toekomst van de ingewikkelde menu’s die we nu kennen.

ik ben bezig met een Conversational interface in een zelf gemaakt spel.  Ik heb mij vooral verdiept in Conversational Interfaces & Javascript.

Voor het project zijn er verschillende kaders aangegeven. Ik heb gekozen voor Big Data en Digital Craft Lions. De opdracht past bij mij omdat ik hiermee nieuwe dingen kan leren om mij als professional te ontwikkelen, en omdat ik het een interessant domein vind om mee bezig te zijn.

Hoe kan je een Conversational Interface verwerken in een game?

Deelvragen:

  1.       Wat is een Conversational Interface?
  2.       Hoe werken Bots/ hoe kan ik ze laten werken?

Context, Scope en definitie

1. Wat zijn Conversational Interfaces?

Conversational Interfaces zijn Interfaces die worden bestuurd door menselijke taal in de vorm van spreken of typen. Bots kunnen uit deze zinnen woorden aan elkaar koppelen om resultaten te maken voor de gebruiker. Er zijn een aantal voorbeelden van een spraakassistent zoals Siri, Google en Microsoft. (van der Meer, 2016)

2. Hoe werken Bots/ hoe kan ik ze laten werken?

Er zijn verschillende soorten Chatbots.

  1. Rule-Based Chatbots (geprogrammeerd om bepaalde uitvoer te generen)
  2. Artificial Intelligence Based Chatbots kun je opdelen in:
    1. Text-based
    2. Voice-controlled Chatbots.

Voorbeeld Rule-Based Chatbot

(Bron: Landbot , 2017)

Het voelt niet natuurlijk aan om alleen maar keuzes aan te hoeven klikken zonder dat ik zelf een vraag kan stellen. (landbot, 2017)

Voorbeeld Text-Based Chatbot

(Bron: Weatherbot, 2017)

Het geeft een enorm leuke ervaring als het werkt, echter begrijpt hij moeilijke plaatsen niet waardoor de beleving minder wordt. Text Based interfaces zijn moeilijker om te maken maar kunnen wel goed werken. (Weatherbot, 2017)

Voorbeeld Voice Based Chatbot

(Bron: Conversation, 2017)

Ik vind het concept dat je een auto kan besturen met je stem erg gaaf. De Chatbot komt realistisch over een praat echt tegen je. De stembeheersing is beter dan normaal. (Conversation, 2017)

Ik moet onderzoek doen naar Conversational Interfaces, praten met professionals, peers om een mening te kunnen vormen. Ik neem de feedback mee die ik krijg, maar ik maak hier zelf keuzes over, die ik kan onderbouwen.

Er zijn verschillende manieren om simpele Chatbots te maken. (Webdesignerdepot, 2017)

API.ai – Dit is het platform van Google wat tegenwoordig ook wel Dialogflow wordt genoemd. Het platform kan je helpen om makkelijke en moeilijke Chatbots te bouwen. (Webdesignerdepot, 2017)

De expert zei dat ik moest kijken naar een Cloud oplossing of een eigen systeem oplossing. De Cloud oplossingen hebben namelijk veel vertraging, volgens de expert. Hij denkt dat je dit met Javascript en Html ook kan bereiken. (Webdesignerdepot, 2017)

Inspiratie 

Wit.ai

Is een chatbot waarmee je het hele huis kan besturen d.m.v. je stem. Dit heeft mij geïnspireerd om een interactief spel te gaan maken met de chatbot. (wit.ai, 2017)

(Bron: wit.ai, 2017)

Cleverbot Evie

Cleverbot is een mooi voorbeeld van een lerende Bot. Deze Bot leert door met mensen te praten. Hier maken mensen veel misbruik van en nu staat ze bekend om de rare antwoorden die ze geeft. (Eviebot, 2017)

(Bron: Eviebot, 2017)

Akinator

Akinator is een Bot die voorspelt welk bekend persoon je zoekt. Door verschillende vragen te stellen weet Akinator wie je zoekt. Ik vind het heel knap hoe ze de bot zo kunnen instellen dat hij binnen 20 vragen weet wie je bedoelt. (Akinator, 2017)

(Bron: Akinator, 2017)

Candy Crush

Candy Crush was een voorbeeld voor mij omdat ik hier inspiratie van heb opgedaan. Ik kwam erachter dat ze hier een Canvas element hebben gebruikt. Dit heb ik uiteindelijk ook gedaan. (Facebook,  2017)

(Bron: Facebook, 2017)

Clash of clans

Dit spel heeft mij geïnspireerd op de manier hoe de ontwerpen eruit zien. Ik speel dit spel ook zelf dagelijks op mijn telefoon, en heb verschillende dingen zoals de Topbar laten inspireren door dit spel. (Supercell, 2017)

(Bron: Suppercell, 2017)

Simcity

Dit spel heeft mij geïnspireerd omdat hun realisme redelijk hoog ligt. De graphics zijn getekend maar lijken op echte personen. Dit heeft mij geïnspireerd om meer realistische elementen te bedenken die later in het spel kunnen worden gemaakt. Dit spel heeft bijgedragen aan het verhaal om het spel heen. (Electronic Arts , 2017)

(Bron: Electronic Arts, 2017)

Hay Day

Dit spel heeft mij geïnspireerd om veel dingen anders te doen. Ik heb dit spel ook gespeeld maar kwam er snel achter dat ik het niet fijn vond dat je opslag vol zit, en dan items moet verzamelen om een grotere ruimte te krijgen. In mijn spel kun je altijd met geld meer ruimte kopen, of dingen verkopen. (Supercell, 2017)

(Bron: Suppercell, 2017)

Methode en Aanpak

Ik ga onderzoeken wat Conversational interfaces (CI) inhouden, wat de verschillen zijn en hoe ik dit ook zou kunnen toepassen. ik wil dit spel d.m.v. Javascript maken. Javascript wil ik leren door dingen uit te proberen.

Ik ga eerst brainstormen over het onderwerp. Hierna ga ik mij richten op het onderzoek doen naar Conversational Interfaces. Ik ga verschillende onderzoeksmethoden gebruiken voor mijn onderzoek namelijk: Deskresearch, Literature study & Expert review. Wanneer het onderzoek is afgerond ga ik experimenteren met Javascript.

Ik heb gekozen voor Conversation Interfaces omdat dit onderwerp mij interesseert. De keuze om Javascript Canvas te gebruiken komt omdat ik met een expert heb gepraat (Ronald van Essen). In dit gesprek kwam naar voren dat er verschillende mogelijkheden zijn maar dat Flash niet meer wordt gebruikt.

Uitvoering en Experimenten

Het proces voor/tijdens het spel:

Het verhaal:

Het proces van het spel:

Het eindresultaat:

Conclusie

Conversational Interfaces zijn volgens mij de toekomst, en designers moeten hiervoor kunnen ontwerpen. Ik vind ook dat de techniek nog verder moet worden ontwikkeld om nog makkelijker slimmere Bots te kunnen maken. Ik heb bijvoorbeeld de Api getest van Google, en merkte hierbij dat je automatisch Bots kon toevoegen, die maar 1 ding konden. Diverse spellen heb ik onder de loep genomen, waarbij mijn conclusie was dat de wachttijd in mijn spel minder moest zijn.

Mijn conclusie is dat je met Html en Javascript een Conversational Interface kan bouwen voor een game. De Conversational Interface kan Javascript variabelen lezen waardoor de Chatbot interactie heeft met het spel. Een Conversational Interface is een mooi beeld hoe wij in de toekomst kunnen ontwerpen.

De toekomst van…

Voor iedereen die ook met een Conversational Interface wil gaan werken raad ik aan om goed te kijken naar Artificial Intelligence. Wat voor soort Chatbot wil je maken, en wat moet deze bot allemaal kunnen. Voor het programmeren zou ik aanraden Typescript te gaan gebruiken voor Javascript te schrijven omdat dit veel makkelijker is om fouten op te lossen. Door goed onderzoek te doen en fouten te maken, leer jij hoe het werkt. Door deze aanpak heb ik verschillende keren problemen zelf kunnen oplossen. Mijn proces zou goed passen in het les onderwijs omdat deze techniek de toekomst is, en iedereen hier later te maken mee krijgt. Dit komt omdat de gebruikers makkelijker geholpen willen worden.

Bronnen:

Akinator (2017). index. index. Geraadpleegd op 27 november 2017 via: http://nl.akinator.com/.

Electronic Arts (2017). Simcity (1.20.3.67722) [Mobile application software]. Retrieved from http://itunes.apple.com.

Facebook (2017). Candycrush. Candycrush. Geraadpleegd op 27 november via: https://apps.facebook.com/candycrush/?ref=br_rs.

Converstation. (2017) index. index. Geraadpleegd op 30 november 2017 via: https://conversation-demo.ng.bluemix.net/.

Cleverbot (2017). index. index. Geraadpleegd op 27 december 2017 via: https://www.eviebot.com/en/.

Landbot. (2017) index. index. Geraadpleegd op  30 november 2017 via: https://landbot.io/.

Supercell (2017). Clash of clans (9.434.6) [Mobile application software]. Retrieved from http://itunes.apple.com.

Supercell (2017). Hay day (1.37.104) [Mobile application software]. Retrieved from http://itunes.apple.com.

wit.ai (2017). index. index. Geraadpleegd op: 21 december 2017 via: https://labs.wit.ai/demo/index.html.

van der Meer, L. (2016) hoe-de-conversational-interface-het-internet-op-zijn-kop-gaat-zetten. Hoe de conversational interface het internet op zijn kop gaat zetten geraadpleegd op 28 november 2017 via: https://www.frankwatching.com/archive/2016/09/06/hoe-de-conversational-interface-het-internet-op-zijn-kop-gaat-zetten/.

Webdesignerdepot. (2017). a-beginners-guide-to-designing-conversational-interfaces. A beginners guide to designing conversational interfaces. Geraadpleegd op 29 november 2017 via: https://www.webdesignerdepot.com/2017/03/a-beginners-guide-to-designing-conversational-interfaces/

Weatherbot. (2017) index. index Geraadpleegd op 30 november 2017 via: https://text-bot.mybluemix.net/.

English Summary:

My project consists of research into Conversational Interfaces and Javascript, Chatbots. I made a game about the farm with dairy cows. The game takes place in a storyline about the past on how the company has grown. The goal is to be able to continue the game without long waiting times, and inform people about farm life. A Conversational Interface has been processed in the game because it is the future. I learned a lot from this project by researching the operation of Javascript myself. My project is informative because a few people know about the topics of my project. (Farm & Conversational Interfaces)

Reflectie

Tijdens dit project heb ik gebruik gemaakt van het Johari venster en samen met mijn studenten heb ik een beter beeld over mezelf gekregen. In het begin was het lastig om een goed onderwerp te vinden. Later toen ik dit onderwerp heb gevonden ben ik er keihard voor gegaan. Dit zie ik terug in het Johari venster. Ik zie ook dat medestudenten mij ambiteus vinden en ook merken dat ik soms teveel wil. Ik heb vooral geleerd dat ik mezelf goed moet afsluiten bij mijn werkplek om meters te kunnen maken. Dit deed ik niet altijd waardoor ik minder productiviteit had. Ik vind het lastig om tijdens dit project veel mensen het te laten testen omdat ik pas in een laat stadium een werkend spel had. Tijdens een verjaardag heb ik met een Javascript programmeur gesproken over mijn project en hij zei dat hij vooral in ‘typescript’ javascript schrijft omdat dit makkelijker debuggen is. Dit was helaas te laat om ook nog in mijn project te verwerken.

Dankwoord (optioneel)

Ik wil graag de expert Ronald van Essen bedanken die mij hebben geholpen met dit project. Ook wil ik mijn docenten Madris Duric en Derk Reneman bedanken voor de feedback die ik heb mogen ontvangen. Hiernaast wil ik Enya Schuitemaker bedanken voor haar feedback tijdens dit project.

Keywords (tags):

Studio Seminar, 2018, Periode B, CMD studio, Conversational interfaces, Javascript, Javascript canvas, Digital craft lions, game

Geef een reactie

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