Making Games Report - Wie das Tattoo-Zeichenspiel Skin Ink entstand

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

Mark Jawdoszak, Projektleiter von Skin Ink: »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.

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.

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.

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.

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

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!

» Den vollständigen Artikel lesen Sie in einem Special auf makinggames.de

Jedes Wochenende präsentieren wir Ihnen ausgewählte Making-Of-Artikel, Reportagen sowie Interviews aus unserem Schwestermagazin Making Games und lassen Sie hinter die Kulissen der Spielebranche blicken.
Und wer könnte besser über die großen und kleinen Geheimnisse der Spieleentwicklung schreiben als die Entwickler selbst? Genau das machen sie jede Ausgabe im Making Games Magazin und jeden Tag auf makinggames.de.

Dieser Artikel erschien in Ausgabe 03/2011 des Making Games Magazins.