Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Flappy Bird: So baut ihr die Game-Sensation in HTML5 nach

Flappy Bird in HTML5 nachgebaut.  (Bild: Thomas Palef)

Das Mobile-Game Flappy Bird wurde innerhalb kürzester Zeit zum Megahit. Der Entwickler Thomas Palef zeigt jetzt in einem Tutorial, wie ihr das Spiel in HTML5 nachbauen könnt.

Flappy Bird: Ein Tutorial erklärt euch, wie ihr das Spiel in HTML5 nachbauen könnt. (Screenshot: lessmilk.com)
Flappy Bird: Ein Tutorial erklärt euch, wie ihr das Spiel in HTML5 nachbauen könnt. (Screenshot: lessmilk.com)

Flappy Bird: Vom Erfolg in die Versenkung

Die Geschichte um Flappy Bird ist einigermaßen bizarr. Das kostenlose Spiel für Android und iOS wurde innerhalb kürzester Zeit zum Hit und soll dem Entwickler Dong Nguyen täglich 50.000 US-Dollar an Werbeeinnahmen eingebracht haben. Umso verwunderlicher erschien die Nachricht, dass Nguyen das Spiel aus Apples App-Store und Googles Play-Store entfernt hat. Als Grund nannte er den Umstand, dass sein Spiel süchtig machen würde. Ein Umstand, den die meisten Spieleentwickler vermutlich als Anzeichen für ein gelungenes Game ansehen würden. Nguyen hat seine Meinung dazu allem Anschein nach mittlerweile revidiert, und will das Spiel zu einem späteren Zeitpunkt wieder veröffentlichen.

Bis es so weit ist, könnt ihr euch eine HTML5-Version von dem Game nachbauen. Wie das geht, zeigt euch der Pariser Entwickler Thomas Palef. Der hat auf seinem Blog ein dreiteiliges Tutorial dazu veröffentlicht. Als Grundlage für seine Flappy-Bird-Kopie dient das Phaser-Framework. Statt einen Vogel zu steuern, kontrolliert ihr hier lediglich ein Rechteck. Aber es geht hier ja auch weniger um die Grafik als die zugrundeliegende Spielmechanik. Wie ihr die in HTML5 nachbauen könnt, erklärt euch Palef dafür sehr genau in seinem Tutorial.

Original vs. Fälschung: Flappy Bird als Browser-Game. (Bild: Thomas Palef)
Original vs. Fälschung: Flappy Bird als Browser-Game. (Bild: Thomas Palef)

Flappy Bird: HTML5-Nachbau in drei Teilen

Die drei Tutorials sind in Englisch gehalten. In den Artikeln findet ihr neben dem entsprechenden Quellcode als ZIP-Datei auch einen Link zu einer Demo-Version des Games. So könnt ihr euch anschauen, wie die Flappy-Bird-Kopie am Ende der jeweiligen Anleitung aussehen sollte. Hier sind die Links zu den drei Teilen des Tutorials:

Sofern ihr alle Schritte befolgt und nicht zu sehr von Palefs Anleitung abweicht, solltet ihr am Ende diese Kopie von Flappy Bird zu Gesicht bekommen. Während der eigentliche Flappy-Bird-Entwickler noch mit sich hadert, will Palef zukünftig weitere Game-Tutorials veröffentlichen. Wer sich dafür interessiert, sollte ab und an einen Blick auf seinen Blog werfen. Wer sich für die Geschichte hinter dem Original-Spiel interessiert, dem empfehlen wir den Artikel „Trotz 50.000 Dollar pro Tag: Flappy-Bird-Entwickler nimmt sein Spiel aus den Stores“.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

2 Reaktionen

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen