Überlegung: Wie kann ein Game authentischer erlebt werden? Welche Gesten/Mimiken lösen welche Funktionen aus? Wie kann man zur Interaktion anregen?

Erster Ansatz: Finger-Tetris

Eine alternative Tetris-Version, in der man mithilfe von Handzeichen die Formen generiert, die im Game nach unten fallen. Dazu soll die X-Position der Formen durch eine Kopfbewegung gesteuert werden. Der Spieler soll möglichst kreativ werden und im besten Fall beliebige Formen erstellen können. Eine andere Möglichkeit wäre es, den Spieler zu Beginn seine eigenen Formen trainieren zu lassen, um sie dann hinterher im Game verwenden zu können.

Beispiele, wie solche Formen aussehen könnten:

Demo: https://www.hs-augsburg.de/homes/n8lech/id4/block2/Tetris_Tiles/index.html

Bisheriger Tetris-Prototyp mit einigen Alternativformen:

Demo: https://www.hs-augsburg.de/homes/n8lech/id4/block2/Tetris_Tiles/index.html

Designkonzept/Interface:

Da hier ein Retro-Game mithilfe neuerer Technologien umkonzipiert wird, soll das Design ein moderneres, etwas futuristisches Aussehen bekommen, als ein herkömmliches Tetris. Das Interface soll idealerweise auf Handyformate abgestimmt werden können und durch eine simple Struktur userfreundlich sein. Zusätzlich kann über Hintergrundmusik nachgedacht werden, die den Spielspaß fördern und motivieren.

Entwurf für Desktop und Smartphone:

Gruppenarbeit Fingertrix

Ab hier wurde als Team weiter gearbeitet mithilfe von Miro.com.

Zuerst einigte man sich auf ein Konzept.
Es bleiben weiterhin Aspekte vom original Tetris, wie z.B. die Blöcke die von oben runter fallen, jedoch kann man diese nun nicht mehr nach rechts oder links bewegen (und drehen, wobei darüber noch diskutiert wird) und das Ziel eine Reihe voll zu machen, damit diese verschwindet.
Genauso soll auch das Ende des Spiels mit dem stapeln der Blöcke bis zum oberen Rand erscheinen.

Neu dazu gekommen ist nun die Möglichkeit selbst eine Blockform zu erstellen. Man macht eine Form mit der Hand nach und dieser wird dann als nächstes ins Spielfeld fallen.
Am oberen Spielfeldrand wird mithilfe eines kleinen blinkenden Pfeil angezeigt, wo das nächste Teil hinabfallen wird. Nun muss der Spieler mithilfe seiner Hand das richtige Teil „erstellen“ um, wie üblich in Tetris, eine Reihe voll zu machen.

Es wurde sich zuerst in den Code eingearbeitet, um zu sehen wie man Tetrix am besten in den KNN-Code einbauen kann.

Desweitern wird sich darum gekümmert für den ersten Test einige Handzeichen einzuarbeiten und diese dann an passende Blöcke zu binden.

In der Recherche wurden verschiedene Melodien gefunden, die als Hintergrundmusik genutzt werden können. Hier muss sich noch entschieden werden, welches am besten passt.

Ideen für Start und Endscreen wurden gezeichnet.

Der Code wurde überarbeitet und das Spiel mit Handpose verbunden.
Es werden nun vorerst zum testen 3 Labels zu Tiles zugeordnet und sind auch steuerbar mithilfe von Handpose.

Es fällt also als nächstes das „gezeigte“ Tile vom oberen Spiefeldrand nach unten.

Ein provisorischer Start- und Pausescreen wurde eingefügt.
Hier gibt es noch ein paar Schwierigkeiten beim Start die behoben werden müssen. Der Endscreen wird noch erstellt, hier zu muss aber erst noch ein Problem gelöst werden.

Eine kleine blinken() Funktion wurde eingefügt, um schon mal Basis für Text und Pfeilchen zur Verfügung zu stellen.

Die Handform wurde verändert, damit die Handfläche besser sichtbar ist.

Es ist nun möglich mit einer Handdrehung/durch Handwischen ein Tile zu drehen. Hier müssen sich noch die einzelnen Tiles überarbeitet werden, damit sie sich auch um die Mitte drehen.

Die Tiles fallen an unterschiedlichen Stellen herrunten, hierzu ist bereits ein Pfeil eingearbeitet, der die Stelle anzeigt.
Es muss noch überarbeitet werden das nicht mehrfach die selbe Stelle genutzt wird, aber das sollte mithilfe von einfachem Code machbar sein.

Die Gui wurde entfernt, damit unschöne Button nicht mehr zu sehen sind und das Laden der Daten sowie das starten des Programms wurde automatisiert.

Das Spielfeld wurde mithilfe von CSS in die Mitte des Bildschirms gerückt.

Im Laufe des Projekt wurde sich gegen den Namen Tetrix entschieden, da er zu nah an „Tetris“ ist und der Name des Projekt wurde zu Fingertrix geändert.

Es wurde ein Introvideo im loop eingefügt, das am Anfang so lange abgespielt wird während die Daten geladen werden.
Nach dem es geladen hat, soll der Startscreen kommen, der einem sagt was man tun muss.

Der Startscreen wurde angepasst und auch der Style im Spiel selbst dementsprechend verändert.

Eine Controls Seite wurde eingefügt, hier wird ein kurzes Video eingespielt das einem die einzelnen Tiles zeigt, die man erstellen kann.
Dabei tauchten einige Fehler auf, da sich das Video nicht über das Canvas legen wollte. Dies wurde aber behoben.

Eine passende Font wurde für den Titel eingefügt (Virgo_01).

Am Ende wurde noch Musik von Komiku eingespielt namens „Together we are stronger“, die anfängt, sobald man Enter gedrückt hat.
Quelle: https://freemusicarchive.org/music/Komiku/Poupis_incredible_adventures_/Komiku_-_Poupis_incredible_adventures__-_59_Together_we_are_stronger

Bugs die Zeitlich nicht lösbar waren

• das „nachschieben“ der Blöcke bei gelöschten Zeilen
• manchmal, wenn man in der letzten Sekunde das Teil noch dreht, verschwinden Tiles am unteren Rand oder buggen in einander
• die Drehung der Tiles funktioniert noch nicht 100% so wie sich das vorgestellt wurde

Finale Abgabe

Das finale Spiel ist nun vollständig mit der Tastatur zum starten und der eigenen Hand steuerbar.
Mithilfe von Handposen kann man nun entscheiden, welches Tile als nächstes ins Spielfeld fallen soll. Die Zeile, in der dies geschieht, entscheidet jedoch der Zufall.
Mithilfe einer Winkbewegung kann man das Tile noch drehen.
Um zu erfahren, welche Form durch welche Handgeste generiert wird, besteht die Option während dem Spiel die i-Taste zu klicken, um Informationen einzublenden. Durch wiederholtes Klicken auf „i“ kommt der Spieler zurück zum Spielfeld.

Wie im „standard“-Tetris ist das Ziel, die herunterfallenden Tiles so anzuordnen, das man eine Zeile füllen kann und diese verschwindet.

live demo: https://www.hs-augsburg.de/homes/n8lech/id4/block2/Fingertrix/index.html