It’s a serious game!

„The sustainable development goals“ sind 17 Ziele der UN-Mitgliedsstaaten für die nachhaltige Entwicklung. Unser Auftrag war es, eines der Ziele auszuwählen und dazu ein Spiel zu entwickeln. Ich habe mir die Nummer 15 ausgewählt, in dem es darum geht, Landökosysteme zu schützen, wiederherzustellen und ihre nachhaltige Nutzung zu fördern, Wälder bewirtschaften, Wüstenbildung und Bodendegrationen zu verhindern. (Quelle)

Mein daraus entwickeltes Game heisst „Plant it“ und ist ein einfaches, digitales Spiel. Die Aufgabe des Spielers ist es, Elemente einzusammeln, die für die Bäume gut sind. So kann man Bäume im Spiel pflanzen und erhalten. Man lernt dabei, was genau für Bäume gut und was schlecht für sie ist. Der kreative Prozess von der Idee bis hin zum fertigen Spiel lief folgendermassen ab:

Woche 1

Montag:
Nach der Vorlesung informierte ich mich genauer über die Sustainable Development Goals. Danach wählte ich eines aus, das mich persönlich interessierte: die Nummer 15. Auf die Idee für ein Spiel kam ich bereits am ersten Tag. Zuerst wollte ich ein Brettspiel machen, doch mir kam dafür nur eine Idee in den Sinn. Ich hatte mehr Vorstellungen für ein digitales Spiel. Daraufhin schrieb ich alle meine Gedanken dazu stichwortartig auf.

Dienstag:
Ich skizzierte die gesammelten Ideen und zeigte sowohl die digitalen wie auch die physische Idee den Dozenten. Sie empfohlen mir, an einer digitalen weiterzuarbeiten, da die meisten Studenten ein Brettspiel machen. So entschied ich mich für ein Spiel und überlegte mir genau den Ablauf und schrieb das Konzept dazu. Mein Ziel war es, ein möglichst einfaches Spiel zu machen, da ich mich mit der Programmierung nicht gut auskenne. Dann begann ich, einen Prototyp zu erstellen und testete mit meinen Mitstudenten die Funktionalität des Spiels. Glücklicherweise funktionierte alles einwandfrei!

cof
erste Ideen zum digitalen Spiel
cof
genauere Skizze zum jetzigen Spiel
Prototyp um die Funktionalität zu testen
Prototyp um die Funktionalität zu testen

Mittwoch:
Im Illustrator erstellte ich erste einfache Objekte und Elemente für das Game, welches ich im Game Maker programmieren wollte. Dabei setzte ich noch nicht grossen Wert auf das Aussehen. Denn ich wollte zuerst das Game fertig programmiert haben und mich dann nochmals an die Gestaltung setzen.

cof

Donnerstag:
Am Donnerstag begann ich mit der Programmierung und schaute mir dafür Tutorials an. Was ich nicht selbst heraus fand, schrieb ich auf und fragte Reto Spörri und Nils Solanki. Das war beispielsweise das Einbinden von einem Countdown sowie das Erscheinen eines Baumes nach 100 Punkten.

IMG_20171019_074916

Freitag:
Weiterentwickeln im Game Maker mithilfe von Tutorials.

sdr
Programmier Drag & Drop System von Game Maker

Woche 2

Montag:
Nach der ersten Blockwoche habe ich in der Zwischenzeit Zuhause noch weitergearbeitet. Da ich leider kein Programmiergenie bin, konnte ich das Spiel noch nicht fertigstellen und benötigte wieder Hilfe von Reto Spörri. Er half mir, die Programmierfehler zu beheben. Die Schwierigkeit mit Game Maker ist, dass man entweder mit einem Drag und Drop System programmieren kann, oder mit Code. Drag und Drop war mir sympathischer, jedoch waren kaum Tutorials mit Drag und Drop zu finden, die mir weiterhelfen konnten.
In der Zwischenzeit holte ich mir Feedback von Andreas Mädler zu meinem Spiel. Er schlug mir vor allem gestalterische Verbesserungen vor sowie ein klarerer Effekt der guten und schlechten Objekte, die eingesammelt werden müssen. Seine Vorschläge setzte ich ab Mittwoch um.

sdr
Version mit der ersten Gestaltung.

Dienstag:
Schlussspurt im Game Maker. Gewinnsituation und Game Over mussten noch programmiert werden. Leider kam ich mit der Testversion von Game Maker etwas an die Grenzen und konnte nicht noch mehr Elemente einbauen, die der Spieler einfangen kann.

sdr
erste gestalterische Fassung des Game Over Screens

Mittwoch:
Das Spiel ist soweit fertig programmiert. Ich holte mir ein letztes Feedback von Reto Spörri und machte mich an die Verbesserung der Gestaltung. Dabei wollte ich vor allem die Elemente einheitlicher machen. Dafür skizzierte ich nochmals ein paar Ideen. Einige habe ich behalten, andere habe ich anders gestaltet.

cof
Nochmals Skizzen um die Gestaltung zu verbessern
cof
die einzelnen Elemente
cof
die Spielfigur

 

Donnerstag:
Weiterarbeit an der Verbesserung der Gestaltung. Ich baute mehr Details und Schattierungen ein. So gefiel es mir viel besser. Als letztes baute ich noch Soundeffekte ein, schrieb die Spielanleitung und den Blogbeitrag. Nun freue ich mich, dass das Spiel endlich präsentiert werden kann!

Printscreen

Freitag:
Nun konnten wir endlich unser Spiel präsentieren. Das Feedback von den Mitstudenten war sehr gut. Ich bin ebenfalls sehr zufrieden mit dem Ergebnis. Denn ich konnte mich mit dem Illustrator beschäftigen und habe sehr vieles gelernt, weil ich alles selber erstellt habe. Auch die Arbeit mit dem Game Maker machte Spass. Ich bereue es nicht, ein digitales Spiel gemacht zu haben.

Infografik und Datenvisualisierung

Recherche zum Thema: Stau am Gotthard

Vor dem Beginn des Kurses „Infografik und Datenvisualisierung“ mussten wir uns ein Thema suchen, dass sich für eine spannende Informationsgrafik eignet und uns persönlich interessiert. Als erstes ging ich auf verschiedene Newsportale, um mir einen Überblick über die aktuellsten Themen zu verschaffen. Das war in der Osterzeit und da war natürlich der Stau am Gotthard aktuell. Daraufhin fand ich meinen Leitartikel. Da ich selbst gerne in den Süden fahre interessierte mich dieses Thema besonders. Ich begann auf statista.com und dem Bundesamt für Statistik verschiedene Daten zu suchen und wurde auch fündig. Mich persönlich interessierte vor allem, was genau die Ursachen für Stau am Gotthard sind. Ist es überwiegend die Überlastung vom Urlaubsverkehr oder sind Baustellen das Hindernis? Auf statista.com gab es einige spezifische Tabellen und Infografiken zum Gotthard. Hier bekam ich auch eine Antwort auf meine Frage: Überlastung ist die Hauptursache für Stau am Gotthard.

Stau Gotthard

Quelle: Statista

Im Bundesamt für Statistik fand ich vor allem zusammenfassende Informationen von allen alpenquerenden Übergänge der Schweiz. Hier ein Überblick über die Art Verkehr.

Verkehrsart

Interessant war auch zu sehen, dass durch den Gotthard mit 39% die meisten Fahrzeuge durchfahren.

Verkehrsvolumen

Meine Grundidee war es, die Ursachen des Staus am Gotthard anhand einer Infografik aufzuzeigen. Ergänzend dazu wollte ich untersuchen, an welchen Tagen es besonders viel Stau gibt und welche Art Verkehr am meisten durch den Gotthard fliesst. Spannend wäre auch gewesen, die Entwicklung aufzuzeigen. Denn ich habe festgestellt, dass die Stau-Ursache Überlastung sich in den letzten Jahren erhöht hat. Somit ist eine Art Trend, an den Feiertagen in den Süden zu fahren, festzustellen. Wie sich aber auf der allgemeinen Staubelastung auf dem Strassennetz zeigt, ist die Überlastung überall gestiegen.

gr-d-11_03_03-stau-computed_thumbnail

 

Hier noch eine Skizze, wie ich mir die Infografik ungefähr vorstellte:

 

Animation

In diesem Semester beschäftigten wir uns mit der Animation. Nach einigen Übungen galt es, selbst eine Figur zu erfinden und diese zu animieren. Und dabei ist Ralf entstanden. Da mein gestalterisches Talent zu wünschen übrig lässt, ist Ralf ganz einfach gezeichnet als eine Schachtel.

Eigene Figur

Ralf-Schachtel

Ralf-springtRalf-laufen

Übungen

Die Übungen waren eine gute Grundlage um die wichtigsten Bewegungsabläufe kennenzulernen. Es war interessant zu sehen, wie viel Arbeit auch hinter den ganzen Animationsfilmen steckt. Ich nutzte die Übungen zudem auch, um mich etwas aufzuwärmen, bevor ich mich an meine eigene Figur setzte.
01_Anticipation_Kopf

01_Headturn1

01_Pendel

01_Pose2Pose_Gesicht

02_Anticipation_Aufstehen

02_FallendesBlatt

02_InteressantereMittelposition_Vogelkopf

03_Pendel_Perspektivisch

04_Maus

02_FollowThrough_Figurdrehen

03_Trampolin

03_Anticipation_Jump

01_Breakdance

05_Anticipation_Schlag

 

Rijksmuseum

Der letzte Tag der Projektwoche fand im Rijksmuseum statt. Wir liefen durch die Gänge mit zahlreichen wunderschönen Gemälden. Und diese galt es abzuzeichnen. Für eine eher untalentierte Zeichnerin/Skizziererin wie mich, keine leichte Aufgabe. Aber ich probierte es selbstverständlich trotzdem!

 

R2 Mann1

 

Rijks2Schiff 1

 

 

 

 

 

 

 

Das wären noch die übrigen Bilder. Das eine ist die Sicht von mir in eine Ecke mit Gemälden. Und das andere ist eine Skizze eines der Gemälde.

Rijks1    Rijks3

Projekt „Healthy City“ von IABR.nl

In unserer Projektwoche machten wir einen Ausflug nach Rotterdam. Dort fand die Ausstellung IABR statt. Unter dem Motto „THE NEXT ECONOMY“ stellen sie verschiedene Projekte in verschiedenen Ländern vor. Die Projekte handeln von der zukünftigen Stadt: gesund und sozial integrativ, produktiv, nachhaltig grün, und eine Stadt, wo öffentliche Orte wieder wichtig werden.

Jeder von uns kriegte eine Nummer mit einem Thema der Ausstellung zugeteilt. In meinem Projekt geht es um die steigende Population der niederländischen Stadt Utrecht. Die Stadt ist eine der gesündesten des Landes und sie ist stets darum bemüht, es auch zu bleiben. Ihr Ziel ist eine gesunde Urbanisation. Denn steigende Population bedeutet mehr verdichtete Stadtgebiete.

Das IABR-Utrecht Atelier arbeitet zusammen mit dem „Dutch Government’s Regional and Local Design Dialogue Programm“. Ihre Aufgabe ist es langfristige Ideen und Designs für die Stadt zu gestalten. Einige Ergebnisse (siehe Bilder unten) haben sie in der Ausstellung „THE NEXT ECONOMY“ vorgestellt. Sie erhoffen sich dadurch auch eine tatsächliche Umsetzung in der Politik.
Das IABR-Utrecht Atelier hat folgende Entwicklungsprinzipien, erkannt:

– Verdichtung
– Platz für soziale Begegnungen
– Raum für neue Experimente
– neue Zusammenkünfte
– Platz für Bewegung/Sport

Bild 3Bild 2

 

Hier sind 3 Skizzen, welche ich vom Projekt gemacht habe. Da ich das Thema Urban Gardening hatte, habe ich hier noch ein wenig mehr grün reinskizziert.

Skizze 1Skizze 2Skizze 3

Sketch City Part 2

Und schon ist unsere Woche in Amsterdam vorbei! Es war eine sehr spannende Erfahrung. Besonders grossen Eindruck verschaffte uns der Zeichner Mattias Adolfsson aus Schweden. Er half uns, mit dem skizzieren so richtig in Fahrt zu kommen und bringte uns bei, wie in Games 3D zu zeichnen. Aber auch die IABR Ausstellung in Rotterdam gab uns einen grossen Einblick in die „livable future cities“.

Unsere Aufgabe war es vor Amsterdam einen Ort auszusuchen, bei dem wir unsere Ideen verwirklichen konnten. Ich habe mir den Oosterpark und die Umgebung ausgesucht und musste hier mit dem Thema Urban Gardening arbeiten.

Hier ein paar fotografische Einblicke meiner ausgewählten Location:

Oosterpark

O1

O2

O3

O4

Als erstes galt es, die Situation so zu skizzieren, wie sie ist:

Skizze1 Skizze2 Skizze3

Es fiel auf, das Amsterdam aber bereits sehr grün war. Es hatte viele Pärke, viel grüne Flächen, und auch vorbildliche Häuser, die ihre Wände oder Balkone mit Pflanzen versehen hatten. Es erfüllte bereits meine Ideen, die ich vor unserer Reise hatte.

Nun skizzierte ich meine Ideen in das Vorhandene:
Als ich den Park besichtigt habe sind mir besonders die runden Formen aufgefallen, die nur mit Gras bepflanzt sind. Das finde ich schade, denn genau solche Plätze sollte man für Urban Gardening nutzen. Das können Blumen, sowie auch Gemüse sein, wovon beispielsweise Obdachlose einen Nutzen haben. Sie hätten somit einen Garten zum pflegen und auch etwas zu Essen. Natürlich dürften auch weitere Besuchers des Parks das Lieblingsgemüse anpflanzen und mitnehmen.

Os1

Os2

 

Meine Idee ist ebenfalls in diesem PDF kurz erklärt:

IDEE

 

Umgebung

In der Umgebung wäre noch einiges möglich mit Urban Gardening. Beispielsweise kann man die Dachterrassen der hübschen Häuser von Amsterdam für ein eigenes Gewächshaus nutzen.

 

Dach1

Häuser mit Garten

Gewächse

R

Für die, die keine Dachterrasse haben, könnten auch Ihren Balkon farbiger gestalten:

Balkon

R4

 

 

Urban Sketching Amsterdam – Let’s plant vegetables in the city

Die letzte Schulwoche im 2. Semester führt uns nach Amsterdam. In dieser Zeit werden wir uns mit dem Thema Urban Sketching beschäftigen. Es geht vor allem um die „livable future city“. Die Themengebiete gehen von Aufstockung, Neuland, Eventlocation bis zu neuen Strassen. Ich habe das Thema Urban Gardening erhalten.

Während dieser Woche müssen wir anhand unseres Themas folgenden Fragen nachgehen:

– Was heisst eigentlich urbane Lebensqualität?
– Wie sieht urbane Lebensqualität aus?
– Wie könnte urbane Lebensqualität aussehen?

 

Zu erst einmal zu meinem Thema, was ist eigentlich Urban Gardening?

Urban Gardening
Städtischer Gartenbau ist eine Sonderform des Gartenbaus. Landwirtschaftliche Anbauflächen werden reduziert, aber Menschen müssen immer noch ernährt werden. Deshalb ist es das Ziel des Urban Gardenings, städtische Flächen gärtnerisch zu nutzen, auch wenn diese nur klein sind. Das Urban Gardening bringt also einige Vorteile mit sich:

  • Transportwege werden kürzer, wenn in der Stadt angebaut wird (weniger Co2 Ausstoss)
  • Engpässe in der Versorgung des städtischen Raums können verhindert werden
  • Bedarf an Nahrungsmitteln, welche umweltverträglich und sozial gerecht produziert werden, steigt
  • Interesse an Nahrungsmittelproduktion des Individuums

Hier noch ein Artikel von  20 Minuten. Fünf Profi Tipps für Urban Gardening!

New_crops-Chicago_urban_farmBrooklyn-Grange-rooftop-farm-New-York-City-1

 

Meine Location: Oosterpark und umliegende Häuser

image-slider-2
Der Oosterpark ist ein grosser Stadtpark im Stadtteil Amsterdam Oost. Im Sommer finden viele Festivals statt. In den ruhigeren Zeiten geniessen die Holländer die vielen Spazierwege, Teiche sowie Planschbecken für Kinder.

Der Park ist ein englischer Park, welcher 1891 vom holländischem Landschaftsarchitekt Leonard Anthony, designt wurde. Beim Bau musste ein jahrhunderte alter Friedhof hinter dem Tropical Museum umplatziert werden. Auf dies folgten zahlreiche Proteste der Einwohner, schlussendlich akzeptierten sie dies jedoch.

Oosterpark3slavernijmonument

 

Spezielles im Oosterpark:

  • Im Park befindet sich das National Slavery Monument, welches an die Abschaffung der Sklaverei in Holland im Jahr 1863 erinnert.
  • Es befindet sich ebenfalls ein Denkmal von Theo van Gogh im Park. Er war ein Filmemacher und kontroverser Kolumnist. Im Jahr 2004 wurde er von einem muslimischen Extremisten getötet.
  • Ein sogenannter „Speaker’s Stone“ wurde aufgestellt, an dem jeder Besucher um 13.00 seine Meinung öffentlich sagen kann.

Quelle: Wikipedia und iamsterdam

Location

–> Oosterpark

 

Streetview der ausgewählten Location

Meine Idee
Ich möchte die bestehende grüne Fläche des Oosterparks nutzen, um darauf Gärten oder Gewächshäuser anzubauen. Eine weitere Idee ist es, auf den Dächern der umgebenen Häusern ebenfalls Gewächshäuser anzubringen. Dort besteht auch nicht die Gefahr von unfruchtbaren Boden, oder verschmutzen Boden.

Was gibt es schon?
Im östlichen Teil der Stadt gibt es bereits solche Projekte. Erstaunlich ist dabei unter anderen ein Garten direkt vor einem McDonalds!

http://farmingthecity.net/?p=5770

Biotopy-city-net hatte die Idee, auf Dächern das Urban Gardening zu verwirklichen. Das ganze ist mitten im Industriegebiet! Im Moment ist es die grösste Urban Gardening Anlage in Europa. Im Video oder auf der Homepage kann man sich das grossartige Projekt anschauen.

Fragestellung
Wo können urbane Gärten entstehen?
– in Pärken?
– auf den Dächern umliegender Häuser?

Wie soll so ein Urban Garden aussehen?
– Welches Design?
– Was soll angepflanzt werden?
– Wie gross?

Wie viele Gärten bräuchte es und in welchem Umfang?
– Wie gross sollten sie sein, damit sich viele Bewohner von diesem Gemüse ernähren können?
– Wie viele Anzahl Gärten bräuchte es in der Stadt?

Was ist weiter zu beachten?
– Werden bestehende Pärke und grüne Flächen genutzt, verschwinden mehr Erholungszonen.
– nicht alle Gemüse können aufgrund des Klimas in Amsterdam angebaut werden

Interaktionselemente

Interaktionselemente sorgen dafür, dass sich der Nutzer auf der Website zurechtfindet. Sie müssen vor allem visuell erkennbar sein. Es gibt viele verschiedene Interaktionen, teils unterschiedlicher Bedeutung, teils dieselbe Bedeutung. Typisch sind Buttons, Checkboxen, Radiobuttons aber auch Links und Menus. Zalando.ch hat viele verschiedene Interaktionselemente auf der Website:

Hier ist „Inspiration“ angeglickt, wobei ein Dropdown-Menu erscheint. Das dient dazu, um auf der Seite auch Platz zu sparen, er wird nur das angezeigt, was der User sehen möchte.

Zalando Seite

 

Zalando hat aber auch Dropdown Menus die durch Hover erscheinen wie im Beispiel unten:

Zalando Seite 3

Hier geschieht auch eine Interaktion nur mit einem „Hover“, also „Herren“ oder „Kinder“ wird grau angefärbt, sobald man mit der Maus drüberfährt (hier „Kinder“).

Zalando Seite 2

 

Wenn man auf einer Seite ist, ist diese mit einem schwarzen Balken gekennzeichnet. So weiss der Nutzer, auf welcher Seite er sich gerade befindet.

Zalando Seite 4

 

 

Beim Anmeldeformular sind im Vergleich zu anderen Seiten nur wenige Formularfeldtypen zu sehen. Zalando begnügt sich mit Checkboxen und Textfeldern.

Zalando Site 5

 

 

Raster und Breakpoints

Die Webentwicklung hat es heute nicht einfach, denn es gibt unzählige verschiedene Grössen von Bildschirmen und Geräten. Es ist beinahe unmöglich, für jedes einzelne Gerät ein Layout zu erstellen. Deshalb ist es heute üblich, dass man mit Rastern und Breakpoints arbeitet. Das Raster verkleinert sich dabei von einem z.B 3-spaltigem, zu einem 1-spaltigem Raster für die Tablet- oder Smartphone Anzeige. Das geschieht, sobald die Breakpoints erreicht sind. Sobald die sogenannte Viewportgrösse unterschritten wird, springt das Raster auf eine kleinere Form. Dies anhand von einem Beispiel einer Schweizer News-Seite.

Desktop

Raster Desktop

 

Tablet

Raster IPad

 

 Smartphone

Raster Iphone

 

Der kleine Prinz in Farbe

In der nächsten Vorlesung war es unsere Aufgabe, unsere bestehenden schwarz/weiss Cover farbig zu gestalten. Erlaubt waren diesmal einfache Formen, aber keine Bilder oder Illustrationen. Ich habe mich deshalb für Formen entschieden, die zum kleinen Prinz passen. Der Kreis demonstriert den Mond, oder den Planeten. Der weisse Zickzack stellte eine Krone dar. Die Layouts habe ich absichtlich mit einer Farbe versehen, da die Schriftzüge sehr simpel sind, und auffällige Farbe meiner Meinung nach nicht sehr passend sind.

 

Der Kleine Prinz 4-01-01 Der kleine Prinz 5