Making of Skin Ink
comment
Feature

Making of Skin Ink

Drei Mann entwickeln in sechs Wochen ein Spiel für ein Grafik-Tablet und werden damit Sieger eines Wettbewerbs. Mark Jawdoszak schildert die Entstehung des Tattoo-Zeichenspiels Skin Ink.

Making Games

@ Facebook

Making Games

@ Twitter

Skin Ink entstand als Einreichung für den »Dare with Bamboo«-Wettbewerb 2010 der Wacom GmbH. Aufgabe des Wettbewerbs war es, eine Applikation für Wacoms neue Bamboo-Plattform zu entwickeln. Unser Team bei Gaslight Games entschied von Anfang an, dass wir etwas Einzigartiges und Ungewöhliches mit dieser Plattform anstellen wollten: das Bamboo ist ein stylusbasiertes Grafik-Tablet.

In Skin Ink muss der Spieler vorgegebene Tattoos nachstechen – hier ein Schriftzug, den man (noch) zu selten auf der Haut von Menschen sieht!

Die Kunst des Stechens
Als erstes mussten wir das Basisdesign unserer Wettbewerbsbeitrags angehen. Was für ein spaßiges und interessantes Spielkonzept könnten wir erstellen, das gleichzeitig die besonderen Eigenschaften des Wacom-Tablets ausnutzt? Wir gingen davon aus, dass die meisten Menschen, die ein Grafik-Tablet besitzen, wohl Künstler sind. Also wollten wir ein Spiel machen, das mit Kunst zu tun hat. Daraus entstand das Grundkonzept für Skin Ink.
Ein Spiel auf der Basis eines gut etablierten Mediums (Tätowieren) zu erstellen erschien uns eine großartige Idee. In den letzten Jahren ist Tätowieren zum Mainstream geworden, das Verständnis für die Kunst dahinter ist gut ausgebildet. Wir wussten, dass Tätowierer spezifische Werkzeuge und Methoden einsetzen, die wir verstanden und von denen wir glaubten, sie gut simulieren zu können. Ein Aspekt dieser Industrie, den wir einfangen wollten, ist der Unterschied zwischen Zeichnen/Malen und Tätowieren. Zum Beispiel können Tätowiernadeln können nur eine begrenzte Menge Farbmittel aufnehmen, deshalb muss man den Vorrat immer wieder auffrischen, um weiterstechen zu können. In Skin Ink simulieren wir diese Notwendigkeit dadurch, dass mit dem Stylus auf ein »Tintenfass« tippen muss. Das ist eines der Features, mit dem wir Skin Ink näher an wirkliches Tätowieren heranrücken, statt es nur zu einem weiteren digitalen Zeichenprogramm zu machen.

Die Konzeptzeichnung für den »Freehand«-Modus mit Überlegungen zum Benutzer-Interface.Das Konzept
Aber wie macht man daraus ein wirkliches Spiel? Wir brauchten Sieg- und Niederlagebedingungen; Punkte; und etwas mehr als nur unser simuliertes Tintenfass! Wir steckten die Köpfe zusammen, stritten und einigten uns schließlich auf zahlreiche Ideen und Spielmodi. Der erste und zweifellos einfachste ist »Freehand«. Darin entwirfst du deine eigenen Schablonen, überträgst sie auf einen virtuellen Körper und stichst sie schließlich. Wir bauten zwei verschiedene Nadeltypen – Liner und Shader – und mehrere Farben ein. Aber das ist immer noch »nur ein weiteres Zeichenspiel«. Wir wollten mehr.
Der zentrale Spielmodus, den wir anpeilten, sollte die Karriere sein. Man beginnt als Lehrling, absolviert ein Tutorial und lernt dabei über das Entwerfen von Schablonen und den Unterschied zwischen normalem Zeichnen und Tätowieren. So steigt man auf zum Künstler. Ab diesem Rang tätowiert man Kunden, verdient Geld und sammelt Erfahrung. Was für ein großartiges Konzept, dachten wir: Deine künstlerischen Fähigkeiten bahnen dir spielerisch den Weg zum Erfolg! Aber wie genau vergibt man Punkte für Tattoos?
Um unsere eigene Frage zu beantworten, entwarfen wir einen dritten Spielmodus, »Ink Trial«. Daraus wurde der zweite von schließlich nur zwei Modi, gemeinsam mit »Freehand«, als wir feststellten, dass alle Dinge weitaus länger dauern, als man so denkt.

Im niedrigen Schwierigkeitsgrad (links) von »Ink Trial« sind die Figuren simpel gehalten, im hohen Schwierigkeitsgrad (rechts) werden sie zunehmend komplexer.

Technische Hürden
Bamboo basiert auf AS3 (ActionScript 3) und erlaubt den Zugriff auf alle Arten von Tablet-Features, darunter Erkennung von Schrift- und Radierspitze, Drucksensibilität und sogar Touch-Gesten. AS3 besitzt außerdem zahlreiche Grafik- und Sound-Features, die dem Programmierer eine große Last dabei abnehmen, Grafik auf dem Bildschirm darzustellen oder zu verschieben. Solche Objekte besitzen sogar eine pixelgenaue Kollisionsabfrage.
Unser Plan war, die Schablonen im Spiel als Sprite zu laden, in AS3 »MovieClip« genannt, um die Gratis-Kollisionsabfrage nutzen zu können. Tatsächlich waren erste Probeläufe erfolgreich. Bis auf ein sehr spezifisches und spielentscheidendes Problem: den Abstand. Die pixelgenaue Abfrage sagte uns zwar, ob der Mauszeiger mit dem Sprite kollidierte (true) oder nicht (false), aber nicht, wie weit in- oder außerhalb des Sprites er sich befand. Klar, wir konnten die Mitte des Sprites nehmen und von dort aus die Distanz berechnen, aber das funktionierte bei unförmigen Figuren nicht mehr. Wir brauchten einen Algorithmus zur Linienerkennung.
Rückblickend ist uns klar, dass wir uns das Leben sehr viel einfacher hätten machen können, wenn wir Methoden zur Kreuzung von Vektorlinien genommen hätten. Aber die Methode, die wir schließlich erfanden, funktioniert ebenfalls. Wir ließen die Schablonen als Linien berechnen, wobei wir auf AS3s Vektorgrafik-Bibliothek zurückgriffen. Die Funktion drawPath() benötigt zwei Arrays, der erste davon alle Befehle (als Integer), die man ausführen möchte. Ein Befehl ist in unserem Fall entweder »1«, was moveTo bedeutet, oder »2«, drawTo. Der zweite Array enthält die Koordinaten (als »Number«, AS3s Äquivalent zum Float-Datentyp) zu jedem Befehl.
Nun haben wir also eine Liste der Koordinaten, aus denen eine bestimmte Schablone besteht, und wenn der Spieler zeichnet, kennen wir außerdem die exakten Koordinaten des Stifts. Wir durchsuchen den Koordinaten-Array nach den zwei nähsten X,Y-Paaren und berechnen daraus ein Dreieck. Um den Abstand zur Schablonenlinie zu bestimmen – und also zu wissen, wie genau seine Zeichnung ist – brauchen wir nur die Höhe des Dreiecks. Das wäre bei rechtwinkligen Dreiecken ein Kinderspiel, aber das sind nur die wenigsten, also ist noch ein Schritt nötig. Wir haben die Längen aller drei Seiten, aber wir wollen die Höhe wissen. Die einfachste Formel ist (Basis * Höhe) / 2 = Fläche, von der uns zwei Elemente fehlen. Können wir die Fläche berechnen? Ja, können wir, mit Herons Formel und den Seitenlängen. Damit bleibt allein die Höhe als Unbekannte, wir können die Gleichung entsprechend auflösen und haben unseren Abstand!

Ein ungeplantes Tool
Jetzt hatten wir unsere Methode, um den Spieler mit Punkten zu bewerten, brauchten aber noch etwas, mit dem wir seine Genauigkeit vergleichen konnten. Nämlich einige Schablonen. Die ersten entwarfen wir von Hand auf Papier und berechneten das Koordinaten-Set. Für einfache Formen war das nicht schwierig, aber die komplexeren Muster (für den obersten Schwierigkeitsgrad) waren auf diese Weise praktisch unmöglich herzustellen. Also hatte der Schablonen-Editor seinen Auftritt.
Wir hatten keine Entwicklungszeit für Tools eingerechnet, deshalb war das ohne Zweifel eine wertvolle Lektion, die wir auf die harte Tour lernen mussten. Der Schablonen-Editor lud Figuren, die wir von Hand gezeichnet (und eingescannt) hatten, zog sie nach und glättete sie wenn nötig, und spuckte dann die Koordinaten im Array-Format aus. Durch den Versuch, die Schablonen von Hand herzustellen, verloren wir ein paar Tage in der Hoffnung, kein Tool programmieren zu müssen. Am Ende dauerte es nur einen Tag, den Schablonen-Editor zu schreiben, und einen weiteren Tag, bis wir sämtliche Muster im Spiel hatten.

Jedermanns Problem
Der Zeitverlust mit den Schablonen führte uns deutlich vor Augen, wie wichtig Zeitmanagement ist. Wir konnten es uns einfach nicht leisten, wertvolle Tage zu verschleudern, nur weil wir das große Ganze nicht im Blick behielten. Unsere Haut gerettet hat uns Agile Development, das auf dem besten Weg zum Industriestandard ist. Wir brachen Skin Ink auf alle geplanten Einzelteile herunter und gewichteten sie nach ihrer Wichtigkeit und geschätztem Zeitaufwand. Der »Dare with Bamboo«-Wettbewerb lief über sechs Wochen, deshalb unterteilten wir unsere Entwicklung in sechs je eine Woche lange Blöcke. Normalerweise wäre das ein viel zu kleines Zeitfenster für einen Entwicklungsblock, man würde sechs Wochen für einen einzigen veranschlagen. Aber das Team hat sich der Vorgabe angepasst. Uns war klar, dass wir am Ende jeder Woche eine funktionierende Version des Programms mit immer neuen, immer komplexeren Features vorweisen können mussten. Das hat jeden Mitarbeiter auf Trab gehalten.
Wir sind ein sehr kleines Team, wann immer also Schwierigkeiten auftraten, konnten wir sie als Gruppe lösen. In den meisten Fällen war jedes Problem gleichzeitig jedermanns Problem. Wenn der Programmierer zum Beispiel beim Debugging auf eine Hürde bei den Bildgrößen stieß, spielte er das zurück an den Grafiker, um sie anzupassen, gleichzeitig musste aber auch der Designer neu ran, um das Interface entsprechend zu ändern. Diese Hindernisse führten dazu, dass wir viele unserer ursprünglichen Ideen für das Spiel neu gewichten mussten. Um das Spiel fertig zu kriegen, fielen letztendlich große Teile davon weg.

Es lebt!
Aber wir schafften es! In nur sechs Wochen vom Originalkonzept zur Wettbewerbsabgabe zu kommen war für uns ein großer Erfolg. Als wir dann auch noch gewannen, war das ein großartiges Gefühl! Dennoch denken wir im Rückblick oft daran, was wir mit einer einzigen weiteren Woche alles hätten erreichen können. Es gibt so viele Dinge, die wir hätten ändern, hinzufügen oder anpassen wollen. Aber gleichzeitig haben wir eine enorme Menge aus dieser Zeitspanne und den Vorgaben des Wettbewerbs gelernt, was wir in zukünftigen Projekten mitnehmen werden.

Der Hintergrund des Startbildschirms zeigt Skizzen echter Tattoo-Künstler.

Wie geht es weiter? Wir sind gerade hart bei der Arbeit, um eine völlig neue Version von Skin Ink zu erstellen, mit all den Elementen, die wir während des Wettbewerbs fallenlassen mussten. Wir haben uns Vorschläge zu Herzen genommen (etwa auch im Freehand-Modus Schablonen einsetzen zu können) und verbessern das Schablonen-System deutlich, um sehr viel ausgefeiltere Designs zu ermöglichen. Um diese Designs zuzulassen, mussten wir alle Entwicklungstools überarbeiten. Weil wir wissen, dass uns das in Zukunft viel Zeit und Schmerzen ersparen wird, sollen sie möglichst perfekt werden. Wir sind außerdem dabei, eine Online-Community anzubinden, darunter Facebook Connect. Das Spiel wird neue Körperteile enthalten, mehr der Bamboo-Tabletfeatures unterstützen und soll auf andere Plattformen übertragen werden. Und natürlich wird es den Karriere-Modus geben. Es liegt viel vor uns – glücklicherweise nicht mehr in einem Sechs-Wochen-Fenster.
Mark Jawdoszak

Mark Jawdoszak
ist der Projektleiter von Skin Ink

Mark ist Projektleiter und Programmierer für Skin Ink. Er kümmerte sich um die Planung, das Design und die Entwicklungsphasen und leitete das Entwicklerteam. Während des Wettbewerbs bestand Gaslight Games aus drei Leuten, neben Mark waren das Helen Smailes als Grafikerin und Steve Fullard als Designer.