Neues

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

Luminar 2018 gewinnen

SeedingUp | Digital Content Marketing

Ahadesign News

CFlappyDie durchaus umstrittene App Flappy Bird gibt es jetzt auch als Modul für Joomla 3.2.x. Es handelt sich um ein kostenloses Spiel, bei dem man eine Figur durch Hindernisse manövriert. Das Spiel kann sowohl sehr ärgern, als auch riesigen Spaß machen. Auf jeden Fall hat es Suchtpotenzial.

Joomla Modul CFlappy!

cflappy-modulDie allererste Version der Flappy Bird App für Joomla ist erschienen. Hierbei handelt es sich um eine Art Jump and Run Spiel im Stil von Super Mario Bros.

Ursprünglich hat ein vietnamesischer Entwickler das Spiel als App für mobile Geräte herausgebracht.

Anscheinend hatte der Entwickler Gewissensbisse bekommen, weil das Spiel süchtig mache und es aus dem Google Play Store und Apple App Store wieder entfernt.

Dennoch scheint das Spiel weiterhin seine Fans zu haben. So haben andere Entwickler die ursprüngliche App bzw. eine Abwandlung davon, jetzt als Modul für Joomla 3.2.x bereitgestellt.

cflappy-spielflaeche

Mit einem Vogel oder einer anderen Figur hangelt man sich bei dem Modul für Joomla an Rohren vorbei und darf nicht anstoßen.

cflappy-startGesteuert wird die Figur ganz einfach mit der Maus.

Durch stetiges Klicken irgendwo im Spielfenster wird die ständig absinkende Figur auf Position gehalten, was ganz schön schwer ist.

Die Installation des Moduls ist wie bei Joomla üblich, denkbar einfach und verläuft auch völlig fehlerfrei.

Danach kann die Konfiguration unter Erweiterungen -> Module vorgenommen werden.

joomlamodul-statusNatürlich muss das Modul den Status "Veröffentlicht" verpasst bekommen.

Man sollte unbedingt eine Modulposition wählen, welche breit genug ist.

In einer Seitenleiste mit üblicher Breite wird das Spielfeld sonst abgeschnitten dargestellt, was einfach unschön aussieht.

Schließlich wird noch eine Modulzuweisung für die gewünschten oder alle Seiten vorgenommen. Aber das ist ja für alle Module immer die selbe Prozedur.

Als einzige weitere Konfigurationsmöglichkeit gibt es ein Textfeld. Hier ist schon eine gewisse Syntax zu erkennen, welche für eigene Definitionen auch eingehalten werden muss.

cflappy-playersAls erstes wird die Bezeichnung des Bildes der verwendeten Figur eingetragen.

Nach einem Gleichheitszeichen folgt ein beliebiger Name für die Spielfigur.

Dann wieder ein Gleichheitszeichen und ein beliebiger Hinweistext bzw. Slogan kann eingetragen werden.

Hier kann auch ein Link auf eine Website stehen, was in den Beispielen ja schön ersichtlich ist.

So könnte man sich jetzt auch eine eigene Figur erstellen wie oben im Bild zu sehen ist. Am besten orientiert man sich hierbei an den vorhandenen Grafiken.

Diese liegen nach der Installation zwar auch im Modulordner unter /modules/mod_cflappy/media/mod_cflappy/assets. Diesen Ordner sollte man aber gleich wieder vergessen.

Eigene Grafiken werden nicht funktionieren, wenn sie in diesem Ordner abgespeichert werden. Der richtige Pfad lautet /media/mod_cflappy/assets.

Hier kann man sich jetzt zb. "bird.png" in einem Programm zur Bildbearbeitung öffnen. Für solche kleinen Grafiken wäre zb. Adobe Illustrator aber natürlich auch Photoshop geeignet.

Eigene VogelgrafikIst eine vorhandene Grafik geöffnet, lassen sich hier sehr gut die Maße herausfinden. Das sind 34 Pixel Breite und 96 Pixel Höhe.

Die Grafiken sind allesamt animiert, was offensichtlich mit CSS und jQuery realisiert wird. Deshalb sind auch immer vier unterschiedliche bzw. unterschiedlich im Winkel ausgerichtete Bilder untereinander dargestellt.

ps-werkzeugleiste

Eine einzelne Grafik hätte also die Abmessungen von 34 x 24 Pixel. So könnte man jetzt in Photoshop ein neues Dokument mit den Abmessungen 96 x 34 Pixel und transparentem Hintergrund öffnen und mit dem Eigene-Form-Werkzeug zb. den Vogel 2 oder irgendeine andere Form auswählen.

ps-formgroesseHier im Beispiel wurde also der Vogel 2 gewählt. In der Werkzeugleiste wurde Pixel verwendet.

Außerdem wurde in den Einstellungen zur Form gleich eine feste Größe eben von 34 x 24 Pixel definiert.

Nun kann der Vogel gleich noch zb. mit einem Verlauf und einer Kontur versehen werden. Danach wird der Vogel noch drei mal dupliziert und nahtlos untereinander angeordnet.

Damit eine Animation stattfindet, sollen die Vögel jetzt noch gedreht werden. Hierfür wäre es sinnvoll, die Abmessungen noch einmal etwas zu verringern. Zb. ganz schnell Transformieren mit dem Tastenkürzel STRG+T.

ps-transformationJetzt kann oben in der Werkzeugleiste für die Breite ein Pixelwert gewählt und das nebenliegende Schloßsymbol geklickt werden. Hier könnte man einfach einen Wert von 24 Pixel verwenden.

Ebenfalls in der Werkzeugleiste kann auch gleich eine Drehung von zb. -20 eingetragen werden.

Für den zweiten Vogel die selbe Vorgehensweise und vielleicht eine Drehung von +20. Für die beiden letzten Vögel wird das einfach nochmal definiert und man wäre schon fertig. Aber hier kann natürlich jeder kreativ auch ganz anders vorgehen.

png-speichernJetzt wird die Grafik einfach im PNG-Format und im oben genannten richtigen Ordner mit einem aussagekräfigen Namen gespeichert.

Dieser Name wird dann in der Konfiguration für das Modul verwendet und schon lässt sich auf der Joomla Frontpage mit der eigenen animierten Figur spielen.

Eine recht witzige Geschichte also. Die Extension CFlappy ist kostenlos erhältlich und kann ohne Anmeldung oder Registrierung heruntergeladen werden.

Hier geht es zum CFlappy - The flappy thing for Joomla - Download.

Cookies erleichtern die Bereitstellung unserer Dienste. Über deren Verwendung kann hier frei entschieden werden.
Datenschutzerklärung Ok Ablehnen