3d tekenen in SketchUp: De basisprincipes

3d tekenen met SketchUp is makkelijk. Door de volgende stappen te volgen kun je al snel je eigen 3d tekening maken. Download en installeer eerst SketchUp vanaf http://www.sketchup.com/. Er zijn twee versies waaruit je kunt kiezen: Sketchup Make is gratis om te gebruiken terwijl voor Sketchup Pro betaald moet worden.

Navigeren

Als je SketchUp vervolgens opent zie je een 3d tekening verschijnen zoals in de onderstaande afbeelding. Er zijn 3 assen in de 3d tekening, voor elke dimensie één. De plek waar de assen elkaar kruisen is het middelpunt van de 3d tekening. Je kunt door deze tekening bewegen met je muis.

Klik en sleep met het muiswieltje om rond een punt in de tekening te draaien. Shift + klik en sleep met het muiswieltje om naar links, rechts, naar onderen of naar boven te bewegen. Door te scrollen met het muiswieltje kun je in of uitzoomen op een bepaald punt in de tekening.

01

Tekenen

Tekenen kan met de verschillende gereedschappen waarover SketchUp beschikt. Één zo’n gereedschap is de shaper-tool:

shapes

Klik op een punt in de tekening en beweeg je muis vervolgens in een richting. Klik vervolgens opnieuw om je vorm definitief te maken. Pro tip: Je kunt terwijl je je muis beweegt ook de afmetingen van je vorm intypen en vervolgens op enter drukken. Zo heb je meer controle over de grootte van je vormen.

02

Een tweede gereedschap waarmee je kunt tekenen in Sketchup is de line-tool:

potlood

Klik op een punt in de tekening en beweeg je muis vervolgens in een richting. Klik vervolgens opnieuw om je lijn definitief te maken. Pro tip: Als je je muis over een bestaande lijn of vorm beweegt worden de begin- of middelpunten gemarkeerd. Klik erop om een lijn vanaf of naar deze punten te trekken.

03

Behalve vierkanten kun je ook cirkels tekenen met de shaper-tool:

shapes

Klik op het pijltje in het menu en selecteer de cirkelKlik op een punt in de tekening en beweeg je muis vervolgens in een richting. Het punt waar je hebt geklikt is altijd het middelpunt van de cirkel. Klik vervolgens opnieuw om je cirkel definitief te maken. Pro tip: rechtsonder in beeld zie je de straal van de cirkel.

04

Als je in plaats van een cirkel liever een halve of een kwart van een cirkel tekent gebruik je de arc-tool:

arcs

Klik op een punt in de tekening om het beginpunt van de boog aan te geven en beweeg je muis vervolgens in een richting. Klik vervolgens opnieuw om het eindpunt van de boog aan te geven. Beweeg je muis nog een keer om de hoek van de boog te bepalen. Klik tenslotte nog één keer om de boog definitief te maken.

05

Als je tekening overbodige lijnen bevat kun je die weghalen met de eraser-tool:

gum

Klik op een lijn om die te wissen. Pro tip: Klik en sleep als je meerdere lijnen tegelijk wilt verwijderen.

06

3-dimensionaal tekenen

Tot nu toe heb je alleen nog platte vormen getekend. Je kunt aan deze platte vormen een dimensie toevoegen met de push/pull-tool:

push-pull

Klik op een vlak in je tekening. Beweeg je muis vervolgens omhoog of omlaag om het vlak volume te geven. Klik opnieuw om het volume definitief te maken.

07

3-dimensionaal tekenen kan ook met de line-tool:

potlood

Klik op een punt in je tekening en beweeg je muis in een richting. Klik vervolgens opnieuw om de lijn definitief te maken. Beweeg je muis vervolgens in een andere richting en klik opnieuw om een opvolgende lijn te tekenen.  Sluit de lijnen en SketchUp zal automatisch een vorm maken. Pro tip: Als je lijnen diagonaal aan de assen van je tekening trekt verschijnen er hulplijnen waarmee je rechte lijnen kunt maken.

08

Een bijzonder gereedschap is de follow-me-tool. Dit gereedschap werkt ongeveer hetzelfde als de de push/pull-tool maar geeft je de mogelijkheid om kromme lijnen of hoeken te volgen.

Klik op een vlak dat haaks staat op een lijn. Beweeg je muis en volg de lijn. Klik opnieuw om de vorm definitief te maken.

09

Als je om de vorm heen draait zul je zien dat je een deurlijst hebt gemaakt! Pro tip: Als je tekening af is kun je deze exporteren als een afbeelding via het menu File > Export > 2d Graphic.

10

Extra

Uitdaging: Maak een bol zoals in de onderstaande tekening met behulp van de gereedschappen die je nu kent.

11

DesignThis! Het eerste level is af!

Het eerste level van mijn game is nu helemaal af! Vorige week koos ik ervoor om één level helemaal uit te werken in plaats van dat ik meer levels bouwde. Daarom heb ik gekeken naar dingen die nog ik nog miste. Behalve de muziek was dat ook een goed uiterlijk voor de inventaris, een plaatje voordat het level begint en een goed einde van het level. Die heb ik uitgetekend en in de game geprogrammeerd, en ook heb ik nog extra muziek en geluiden toegevoegd voor de intro, het level, de inventaris en het einde van het level.

Nadat ik het alle aanpassingen af had heb ik het spel weer aan Arend Kamp laten zien. Hij herkende het geluid bij de inventaris direct als zijn eigen suggestie, dus dat was mooi. Ook de rest van de game vond hij goed.

Later heb ik de game ook nog door Lars Haasnoot laten spelen. Lars valt goed binnen mijn doelgroep omdat hij strips leest en verzamelt en omdat hij veel games speelt. Het viel mij ook op dat Lars het level ontzettend snel had uitgespeeld. Andere mensen hadden nog moeite met het vinden van een toepassing voor de bril of het vinden van de juiste plek om een selfie te maken, maar Lars had alles meteen door. Voor de doelgroep zou ik het spel dus best nog wat moeilijker kunnen maken. Lars merkte tenslotte nog op dat de plek waar hij naartoe moest voor hem een gok was. Hij had liever een duidelijke omcirkeling of iets dergelijks gezien voor die plek. Blijkbaar willen mensen uit de doelgroep toch een duidelijk doel (letterlijk) hebben in het spel. Maar voor nu ga ik daar niets mee doen omdat het spel zo een beetje moeilijk blijft. Wat mij betreft is het level daarom helemaal af!

boek

boek-level-1

inventaris

panel5

DesignThis! Muziek en geluiden

Vandaag heb ik aan mijn klasgenoten twee richtingen voor mijn project voorgelegd. Ik kon extra levels gaan bouwen of het level dat ik nu af heb verder uitwerken. Mijn eigen voorkeur ging uit naar de tweede optie en mijn klasgenoten waren het met mij eens. Iemand merkte op dat er tijdens de expo ook geen tijd is om meerdere levels te spelen.

Daarom ben ik in de les begonnen met het toevoegen van geluiden aan mijn spel. Ik heb achtergrondmuziek toegevoegd en het geluid van voetstappen wanneer iemand loopt in het spel. Op die manier kon ik in mijn code experimenteren met loops en conditionele geluiden. Ook heb ik verschil aangebracht in het volume zodat  de voetstappen boven de achtergrondmuziek te horen zijn.

De geluiden heb ik uitgezocht op freesound.org. Ik heb verschillende geluiden beluisterd  om een keuze te kunnen maken. Zo kwam ik tussen de geluiden van voetstappen ook geluiden tegen van voetstappen in het water of in de sneeuw. Die geluiden zijn misschien interessant om te gebruiken bij verschillende omgevingen in het spel.

Na de les heb ik met Arend Kamp gebrainstormd over andere geluiden die ik in het spel kan gebruiken. Ik wilde zelf nog een geluid toevoegen bij het uitspelen van het level en een verschil in achtergrondmuziek tussen het stripverhaal en het spel. Arend merkte daarbij op dat hij het geluid dat ik nu heb gebruikt goed vond passen bij het spel, maar minder goed bij het stripverhaal. Ook zou hij nog geluid willen horen bij het vinden van een object zoals de bril. Tenslotte dacht hij geluid te horen bij het openen van de inventaris terwijl ik daar geen geluid onder had gezet. Hij beschreef daarbij zelf een schuivend geluid dat ik er nu zeker aan wil toevoegen.

DareThis! #3

In de eerste ronde heb ik mijn prototype door Marissa laten testen. Zij begreep niet wat de opdracht was omdat de uitleg boven in beeld haar niet was opgevallen.

In de tweede ronde heb ik mijn prototype door Tim laten testen. In deze ronde heb ik de uitleg duidelijker gemaakt door er een wit vlak achter te plaatsen en de game pas te laten starten als de uitleg gelezen is. Voor Tim was de opdracht wel meteen duidelijk.

De oplossing van het level konden de deelnemers niet meteen vinden. Door hints te geven zoals ‘Waar zou die bril vandaan komen’ konden de deelnemers wel op het antwoord komen. Ze vonden het dan ook nog steeds leuk om te spelen.

Na de DareThis! heb ik ook nog aanpassingen gemaakt in de plaatsing van de obstakels in het spel en de controller. Tijdens het testen viel me op dat mensen moeite hadden met de besturing omdat de controller te gevoelig was. Ook werkte de knop op de linkerhand van de controller niet helemaal goed. Ik heb de controller daarom minder gevoelig gemaakt en de werking van de knop verbeterd.

DesignThis! Gameplay

Voor mij was nog niet helemaal duidelijk hoe ik mijn levels ging bouwen. Ik wist dat er een speler op het scherm kon stond die kon rondlopen maar wat er moest gebeuren om een level uit te spelen wist ik nog niet. Daarom ben ik levels gaan schetsen met objecten en personages die zich in de levels bevonden. Daarna heb ik heel simpel uitgeschreven wat er moest gebeuren om het level uit te spelen zoals bijvoorbeeld: “Bram zit opgesloten – Open de celdeur”. Natuurlijk kan een level niet zo simpel zijn, en daarom ben ik extra stappen gaan toevoegen zoals “Bram zit opgesloten – Zoek de sleutel – Open de celdeur”. Dit bleek een hele fijne manier te zijn om het level uit te denken omdat ik makkelijk stappen kon toevoegen en schrappen en zo de moeilijkheidsgraad van het level kon beïnvloeden.

IMG_20160616_140821

IMG_20160616_140828

IMG_20160616_140838

IMG_20160616_140844

DesignThis! experiment tekenen

De afgelopen tijd ben ik druk bezig geweest met het tekenen van het verhaal bij mijn game. Vandaag heb ik mijn tekeningen mee naar school genomen en aan mijn klasgenoten laten zien. Ze waren nog niet allemaal af maar idee was duidelijk. Bij één tekening kreeg ik de volgende opmerkelijke feedback:

“Het ziet er verkeerd uit dat de jongen op die manier achter het meisje staat…”

Ook dachten mijn klasgenoten dat het meisje de moeder van de jongen was omdat die er zo jong uit zag, en het leek voor hen alsof het meisje over een tafel gebogen lag.

Op basis van deze feedback heb ik de tekening zo aangepast dat het meisje nu achter de jongen staat. Op deze manier kunnen er geen verkeerde ideeën meer ontstaan. Ook heb ik de achtergrond van het gat in de muur zwart gemaakt, zodat het duidelijk een gat is waar de jongen en het meisje uit komen.

 

panel021

panel021b

Daarnaast hebben we tijdens de les een oefening gedaan waarbij het hoofd, de hand en het hart duidelijk wordt.

Hart (gevoel): Identificeren met het personage.
Hand (praktisch): spelen met de controller op een immersive manier.
Hoofd (logisch): Oplossen van het mysterie.

Sterke punten: Het is immersive, spannend en je kunt je inleven in het personage.

Zwakke punten: Niet iedereen zal het concept aanspreken en sommige mensen zullen het ronduit verkeerd vinden dat het een game is met een voodoo achtige controller.

DesignThis! Het spel

Na het maken van de game controller heb ik niet stil gezeten. Ik heb eerst een tutorial gemaakt voor het besturen van een game met de controller. Daarna ben ik aan de slag gegaan met de echte game. Om een goede combinatie tussen strip en spel te maken heb ik besloten om levels af te wisselen met delen van een stripverhaal. Om een idee te krijgen over hoe dat er uit gaat zien heb ik game art gemaakt.

panel 001

panel 002

panel 003

panel 004

gameplay

Daarna ben ik aan de slag gegaan met het laten lopen van Bram Vuurvlam in het spel. Daarvoor heb ik eerst een sprite gemaakt. Dat is een afbeelding waarin verschillende frames uit een animatie naast elkaar staan. In het spel kunnen die frames achter elkaar afgespeeld worden. Als experiment heb ik daar een gif van gemaakt.

game-sprite

Dit zag er echter nog niet erg vloeiend uit. Daarom heb ik tijdens het programmeren van het spel geprobeerd om tussen de frames waarin Bram loopt steeds een frame te laten zien waarin Bram stil staat. Dat zag er al een heel stuk vloeiender uit.

 

Game controller prototype #2

Deze week heb ik mijn eerste prototype (http://daniel-dewit.nl/2016/03/designthis-mentaal-model-en-prototype-joystick/) verder getest en een tweede iteratie gemaakt. Ik heb de joystick meegenomen naar de les en die uit laten proberen door klasgenoten.

Mijn klasgenoten vonden de controller fijn om vast te houden maar hadden ook allemaal wel moeite met het vinden van de voor en achterkant van de controller. In tegenstelling tot mijn vorige proefpersoon wilden zij de controller wel met twee handen vasthouden, maar toch vonden ook zij dat de knoppen alleen op de stick moesten zitten. De knoppen verwachten ze dan op de borst en rug van de action figure. Toen ik hen echter een schets liet zien van de uiteindelijke vorm die ik de controller wil geven (tweede foto) gaven ze aan dat ze de controller in dat geval anders vast zouden houden. Waar de knoppen zich dan moesten bevinden konden ze zo niet zeggen.

Uit mijn onderzoek bleek dus dat ik eerst een nieuw prototype moest maken op basis van mijn schets, voordat ik goede inzichten kon verkrijgen. Daarom ben ik aan de slag gegaan en heb ik uit karton de vorm gesneden die de controller moest krijgen. Met tape heb ik de losse stukken goed vastgeplakt. Daarnaast heb ik een joystick sensor besteld zodat ik de controller goed kan laten bewegen. Toen ik de vorm van de controller klaar had heb ik meteen gekeken op welke plekken de knoppen voor mijn gevoel het beste konden komen. Ik had naast de joystick controller ook een roterende schakelaar en twee verschillende drukknoppen besteld die ik voor de controller kon gebruiken. Maar uiteindelijk heb ik ervoor gekozen om twee kleine drukknoppen die ik al had bovenop de armen te monteren (derde foto).

Toen de knoppen en de joystick gemonteerd waren op het prototype was het natuurlijk een kleine moeite om die aan te sluiten op de Arduino. Daarna heb ik meteen maar een script geschreven dat de input vanuit de joystick en de knoppen naar de computer stuurt. De volgende stap is nu om met de game controller een game element te laten besturen. Dit wil ik doen voordat ik de controller opnieuw ga laten testen door gebruikers zodat die ook meteen feedback krijgen op wat ze met de controller doen. Zo hoop ik betere inzichten te krijgen.

IMG_20160403_185222

IMG_20160403_185248

IMG-20160403-WA0004

IMG_20160403_174526

IMG_20160403_174547

DesignThis! Design Manifest

Een design manifest? Die had ik al! Ik heb hem een beetje opgepoetst maar je vindt hem natuurlijk op mijn voorpagina: http://daniel-dewit.nl/

Na een feedbackronde op school heb ik echter toch besloten mijn design manifest te scheiden van mijn portfolio-intro. De teksten bleken niet krachtig genoeg voor een manifest en de combinatie met het portfolio was voor sommige mensen verwarrend. Daarom heb ik de teksten volledig opnieuw geschreven en het manifest verplaatst naar een andere plek. Je kunt hem bekijken op http://daniel-dewit.nl/cmd/designthis/manifesto/. De tekst staat ook hieronder.

Diversiteit

Van een duizendpoot
Een diverse ontwerper heeft kennis ver buiten zijn eigen vakgebied. Altijd nieuwe dingen willen ontdekken zit in zijn bloed. Om relevant werk te blijven maken moet een ontwerper constant oog houden voor de veranderende wereld om hem heen.

Flexibiliteit

Van een kameleon
Een flexibele ontwerper kan ontwerpen voor koningen en zwervers. Daarvoor maakt hij zijn eigen signatuur ondergeschikt aan de belangen van de doelgroep. Om de onderste steen boven te krijgen doet hij bovendien uitvoerig onderzoek.

Leervaardigheid

Van vallen en opstaan
Een leergierige ontwerper is nooit klaar, is niet bang om fouten te maken, leert van zijn eigen fouten en verbeterd zichzelf. Alleen zo kan hij zich voorbereiden op de dag van morgen en zijn ontwerpen naar een hoger niveau tillen.

DesignThis! Mentaal model en prototype joystick

Vandaag heb ik het eerste prototype van mijn gamecontroller gemaakt! Eerder deze week kwam ik op het idee om een live action figure als joystick te gebruiken. Voor mijn game controller wilde ik een voorwerp inzetten dat veel door mensen gebruikt wordt en toch ook met striptekeningen te maken had. En wat gebruikt een mens nou vaker dan zijn eigen lichaam? Vandaar dus de live action figure die als een soort voodoo pop gebruikt kan worden om een figuur in de game te besturen.

Voor mijn prototype heb ik uit hout een voetstuk en een joystick gezaagd. In het voetstuk heb ik een pin gezet waaraan de stick bevestigd werd. De stick zat er wel los op, maar dat was voor een eerste prototype niet erg. Vervolgens heb ik op de stick een figuurtje getekend met een cape: De held. Het geheel was behoorlijk low fidelity, maar prima om het uit te proberen door mijn jongere broer Balte.

In een eerder experiment gaf Balte al aan niet graag games te spelen. De ideale kandidaat voor mijn volgende experiment dus, want als hij met joystick kan spelen moet iedereen dat kunnen. Eerst heb ik aan Balte uitgelegd hoe ik van plan was om van de joystick een figuur te maken. Dat vond Balte een leuk idee om voor één speciaal spel te gebruiken. Daarna probeerde ik door vragen te stellen achter zijn mentale model te komen: Wat was zijn verwachting van de werking van de controller.

Ik vroeg hem hoe hij de controller zou gebruiken en hoe hij die vast zou houden (zie foto). Balte zette de controller op zijn knie en hield de joystick met één hand vast. Toen ik hem vroeg of hij de joystick gemakkelijk op zijn andere hand zou zetten zei hij nee. Ook viel me op dat hij de kant van de joystick met het figuur naar zich toe hield. Als hij de joystick naar voren bewoog zou het figuur dus naar achter bewegen in de game. Dit was voor hem een bewuste keuze omdat hij er bij vertelde dat hij knoppen op de rug en op de borst van het figuur zou verwachten. Verder wilde hij geen bewegende onderdelen zoals de armen van het figuur omdat dit te ingewikkeld zou worden om te gebruiken tijdens het spelen. Wel zou hij het figuur omhoog trekken om te kunnen springen.

Door dit experiment heb ik dus ontdekt dat de joystick met één hand gebruikt wordt, en dat alle knoppen op de stick bevestigd moeten zijn. Knoppen op het voetstuk zijn namelijk lastig te bereiken als er maar één hand gebruikt wordt. Verder moet ik nadenken over de oriëntatie van het figuur en moet ik ervoor zorgen dat er niet teveel bewegende onderdelen zijn. Hoe ik de stick omhoog kan laten trekken terwijl die los op een bureau staat vraag ik me nog wel af, maar misschien is daar wel iets op te bedenken. In ieder geval wil ik het prototype ook door een aantal andere mensen laten gebruiken omdat ik merk dat ik heel veel informatie kan verzamelen met deze test.