8 Spiele die mit Webflow erstellt wurden

Dass man mit Webflow großartige Websites mit Animationen bauen kann, weißt du als aufmerksamer Leser meines Blogs bereits. Doch wusstest du, dass es mit Webflow auch möglich ist, ganze Spiele zu entwickeln? Richtig gelesen! Zahlreiche Game-Entwickler und -Designer nutzen Webflow für ihre Spiele. Und erzielen dabei richtig gute Ergebnisse.

Acht davon stelle ich dir in diesem Beitrag vor. Spiellust garantiert.

Einmal 90er bitte: Babyrace

Wenn du früher Super Mario auf dem Gameboy gezockt hast, wird dich Babyrace in diese Zeit zurückkatapultieren (zum Webflow Showcase Projekt*). Das Jump’n’Run wurde von der ESE Agency für den Schweizer Discounter Denner entwickelt. Ganze 10 Levels umfasst das Spiel, in dem man sich als Baby durch verschiedene Städte der Schweiz kämpft. Die Idee: Schnellstmöglich zum nächstmöglichen Denner Store gelangen. Kannst du die Zeit unterbieten, die im echten Leben benötigt wird, um von Schweizer Sehenswürdigkeiten zum nächstgelegenen Denner-Store zu gelangen?

Im Design hat man sich ganz an dem klassischen Gameboy orientiert. Und auch die Bedienung ist direkt über den virtuellen Gameboy - oder alternativ über die PC Tastatur - möglich. Smarte Idee, die unter anderem die CSS Design Awards für das das beste UI-Design, beste UX-Design und beste Innovation bekommen hat.

Kreative Agenturidee: Road Trip Reveal

Agenturen lassen sich immer etwas einfallen, um ihre Teams bei der Stange zu halten. So auch ThreeSixtyEight, die ihre Mitarbeiter herausfinden lassen wollten, welche Retreat Location 2022 aufgesucht wird. Dafür hat die Agentur ein interaktives Spiel erstellt, welches sogar als kostenloses Webflow Cloneable * zu Verfügung steht. Sechs Teams treten gegeneinander an, um Herausforderungen zu meistern und den Standort preiszugeben.

Herausgekommen ist ein Game, in das alle Team-Mitglieder involviert sind. Denn: Du kannst dein eigenes Team zusammenstellen. Und dann mit allen gemeinsam im VW Bus losdüsen, um den Retreat-Spot herauszufinden. Coole Idee. Noch cooler umgesetzt. Und von Awwwards mit einer Honorable Mention geehrt.

Das spielerische Portfolio: Pierre Louis

Die Konkurrenz kennt keine Gnade. Auch - und gerade - im kreativen Bereich. Da muss man aus der Masse hervorstechen. Ein einfaches Portfolio genügt nicht. Das dachte sich auch der französische Creative Freelancer Pierre Louis. Und gestaltete mit Webflow sein Portfolio kurzerhand als Game.

Klick für Klick entfaltet sich das ‘Game’ und gibt weitere Infos über Pierre sowie seine Artbei preis. Macht Laune, sieht gut aus - und fällt auf.

Nachgebaut mit Webflow: Civilization VI

Einfach mal nachgebaut mit Webflow. Und dabei eine große Vision verfolgt. Sarkis Buniatyan von Protocore Studio möchte der Welt zeigen, dass man auch ohne Code Großartiges erschaffen kann. So auch mit einem Nocode-Tool wie Webflow.

Also hat er einfach mal das Globalstrategiespiel Civilization VI nachgebaut und in seinen Worten “das größte Webflow-Projekt aller Zeiten mit 12.400 Elementen, 1.800 Stilen, 1.200 Assets und 400 Interaktionen veröffentlicht”. Er hat alle 46 Anführer zusammen mit ihren Soundtracks und fast allen Features im Spiel integriert. Das Projekt ist satte 124 GB groß! Jo, Nocode kann was.

Schau dir gerne mal das Webflow Projekt des Civilization Spiels im Designer an (free Cloneable*) an.

Tricks Games: Webflow Wizard Journey

Press & Hold. So startest du das Spiel von T.RICKS Games. Naja, nicht ganz. Erst erstellst du noch deinen Zauberer-Charakter. Farbe, Kopfform und das Design seines Hutes lassen sich anpassen. Und dann geht es auch schon los.

Die Spielregeln sind schnell erklärt. Meide die Käfer. Sammle Truhen. Und nutze die Leertaste zum Springen. Simpel aber süchtig-machend.

Das Spiel gibt es als kostenloses Webflow Cloneable*. Hier kannst du sehen, wie es gebaut wurde.

Übrigens: Wenn du das Spiel durchgespielt hast, kannst du deinen Preis unten aus einer Leiste wählen. Hier wird etwa der Custom Code sichtbar.

Work in progress: Das Zauberer-Game

Die freunde Timothy Ricks und Nick Landry haben ein kleines aber feines Spiel in Webflow erstellt. Im Wizards Game (kostenloses Cloneable*) läuft ein Zauberer durch eine Fantasy-Welt und zerstört dabei jeden Gegner, der ihm in den Weg kommt. Charakter-Wechsel möglich.

Das Menü ist über den einfachen Menü-Button gelöst. Ähnlich funktionieren die Schatztruhen, die als zwei Bilder - eine geschlossene und eine offene Truhe - in Webflow hinterlegt sind. Ebenso wie die Energieanzeige.

Zu Lernzwecken: Eine interaktive Fantasy-Karte nachbauen

Eine interaktive Karte * (free Cloneable), die aus einem echt guten Fantasy-Spiel stammen könnte. Timothy Ricks zeigt in einem Tutorial-Video, wie er die Karte baut. Grundlage ist ein Map Container und ein darin enthaltenes Map Image. Danach geht es an die Details wie Boxen, die als Buttons auf der Karte fungieren und Details zum Land sichtbar werden lassen.

Step by step sieht man in dem Video, wie diese interaktive Karte komplett in Webflow entsteht.

Du möchtest dir die Karte in Webflow näher ansehen? Hier geht es zum kostenfreien Cloneable. Allerdings ist dieser wirklich nur für Lernzwecke zu verwenden. Timothy verfügt nicht über die Rechte an dem Design.

Eine immersive Erfahrung: Christmas World

Eine Website, gebaut im Charakter eines Spiels - das kennen wir von Webflow. Doch selten so genial realisiert. Animationen lassen sich mit dem Website Builder ja bekanntlich richtig nice umsetzen. Und das machen sich die Entwickler von amce studios für ihre Christmas World zunutze.

Du trittst ein in die Christmas World und bewegst dich von Haus zu Haus. Die Häuser sind als 3D Elemente angelegt, die sich vor, zurück und in die Szene reinanimieren. Bei Klick in die Szene hinein siehst du weitere Details, die vom rechten Bildschirmrand rausklappen. Nach dem gleichen Prinzip wie die interaktive Fantasy-Karte aus dem Abschnitt hier drüber.

--

Mit * gekennzeichnete Links sind Affiliate Links zu Webflow.