Facebook Apps selbst entwickeln
Auf Facebook hat man die Möglichkeit, Spiele und Anwendungen zu benutzen, welche als "Apps" publiziert sind. Diese meist kleinen Utilities für Zwischendurch können auf die sozialen Erlebnisse des Benutzers zugreifen und das einfache miteinander spielen ermöglichen.
Für die sehr erfolgreichen Anwendungen auf Facebook muss man sich nicht einmal mehr registrieren. Benutzt wird die Software über den Facebook-Account. Eines der wohl bekanntesten Facebook-Games ist FarmVilla. Doch auch unendlich viele weitere, kleine Anwendungen inspirieren die Belegschaft und lassen nichts zu wünschen übrig.
Zeit also, sich mit dem Thema Facebook App Development näher zu befassen.
Die Idee ensteht, eine kleines und einfaches Klicki-Bunti-Spielchen "Create Your Character" zu entwickeln, in dem der User sich selbst ein Trichmännchen zusammenstellen kann. Dieses soll aus verschiedenen Köpfen Körper, Füßen-Stückchen zusammengesetzt werden können.
"Create Your Character" inspiriert kreativ durch Zusammenstellung eines Avatars.
Technische Umsetzung Facebook App
Auf developers.facebook.com lässt sich ein fb-Account mit einem Entwickler-Status erweitern. Nun kann man eigene Apps erstellen, diese benahmen und designen wie man Lust hat. Man hat die Freiheit der Umgebung, Programmsprache, Datenbanken und des Hostings, da dies auf einem eigenen Server ausgeführt werden kann (SSL-Zertifikat benötigt). Die Facebook-Apps binden per iFrame eine angegebene URL ein. Wer die Möglichkeit misst, eine Software selbst zu hosten, kann kostenlos einen Cloud-Webspace (php, node.js, perl, cgi) bei heroku.com erhalten.
Frontend: HTML
Die Slideshow, welche die einzelnen Elemente eines Character enthalten, werden in einer einfachen HTML-Struktur zusammengesetzt
|
[…]
[…]
[…]
[…]
Clientseitige JS-Logik
Um die Elemente siden zu lassen und das Gesamtbild zu realisieren, wird das jQuery Cycle Plugin installiert. Darauf aufbauend werden für das HTML-Element #game die Unterelemente zugewiesen. Mittels jQuery wird nun die Slideshow initialisiert.
1 2 3 4 5 6 7 8 9 10 |
// Cycle Slideshow $.each($('#game').children(), function(key, val) { $($(val).children('.gallery')).cycle({ fx: 'scrollHorz', speed: 400, timeout: 0, prev: $(val).children('.pre').children('a'), next: $(val).children('.next').children('a') }); }); |
CSS – Layout
Layout und Design werden mit CSS vollvollständigt. Wichtigster Bestandteil sind jedoch die Positionierungen der Character-Elemente, welche als Background-Images abgelegt sind.
#game { margin: 0 auto; position: relative; z-index: 10; height: 350px; background-color: #fff; } #gallery1, #gallery2, #gallery3, #gallery4 { position: absolute; left: 250px; width: 180px; } [...] .gallery { position: static !important; z-index: 20; } .gallery div { width: 100%; height: 100%; } /* Gallery 1 - Head Top */ #gallery1 .gallery .element1 { } #gallery1 .gallery .element2 { background: url('../images/character_head_top.png') no-repeat 5px -37px transparent; } #gallery1 .gallery .element3 { background: url('../images/character_head_top.png') no-repeat -151px -42px transparent; } #gallery1 .gallery .element4 { background: url('../images/character_head_top.png') no-repeat -315px -42px transparent; } #gallery1 .gallery .element5 { background: url('../images/character_head_top.png') no-repeat -490px -35px transparent; } #gallery1 .gallery .element6 { background: url('../images/character_head_top.png') no-repeat -806px -43px transparent; } #gallery1 .gallery .element7 { background: url('../images/character_head_top.png') no-repeat -1132px -44px transparent; } /* Gallery 2 - Head */ #gallery2 .gallery .element1 { background: url('../images/11.gif') no-repeat 18px 8px transparent; } #gallery2 .gallery .element2 { background: url('../images/9.gif') no-repeat 19px 8px transparent;} #gallery2 .gallery .element3 { background: url('../images/10.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element4 { background: url('../images/1.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element5 { background: url('../images/2.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element6 { background: url('../images/3.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element7 { background: url('../images/4.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element8 { background: url('../images/5.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element9 { background: url('../images/6.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element10 { background: url('../images/7.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element11 { background: url('../images/8.gif') no-repeat 19px 8px transparent; } #gallery2 .gallery .element12 { background: url('../images/character_head.gif') no-repeat -18px 16px transparent; } #gallery2 .gallery .element13 { background: url('../images/character_head.gif') no-repeat -176px 16px transparent; } #gallery2 .gallery .element14 { background: url('../images/character_head.gif') no-repeat -335px 16px transparent; } /* Gallery 3 - Body */ #gallery3 .gallery .element1 { background: url('../images/character.gif') no-repeat 10px 0 transparent; } #gallery3 .gallery .element2 { background: url('../images/character.gif') no-repeat -155px 0 transparent; } #gallery3 .gallery .element3 { background: url('../images/character.gif') no-repeat -313px 0 transparent; } #gallery3 .gallery .element4 { background: url('../images/character.gif') no-repeat -457px 0 transparent; } #gallery3 .gallery .element5 { background: url('../images/character.gif') no-repeat -622px 0 transparent; } #gallery3 .gallery .element6 { background: url('../images/character.gif') no-repeat -782px 6px transparent; } #gallery3 .gallery .element7 { background: url('../images/character.gif') no-repeat -918px 0 transparent; } #gallery3 .gallery .element8 { background: url('../images/character.gif') no-repeat -1083px 0 transparent; } #gallery3 .gallery .element9 { background: url('../images/character.gif') no-repeat -1241px 0 transparent; } #gallery3 .gallery .element10 { background: url('../images/character.gif') no-repeat -1382px 0 transparent; } #gallery3 .gallery .element11 { background: url('../images/character.gif') no-repeat -1547px 0 transparent; } #gallery3 .gallery .element12 { background: url('../images/character.gif') no-repeat -1705px 0 transparent; } #gallery3 .gallery .element13 { background: url('../images/character.gif') no-repeat -1866px 0 transparent; } #gallery3 .gallery .element14 { background: url('../images/character.gif') no-repeat -2031px 0 transparent; } #gallery3 .gallery .element15 { background: url('../images/character.gif') no-repeat -2189px 0 transparent; } #gallery3 .gallery .element16 { background: url('../images/character.gif') no-repeat -2367px 0 transparent; } #gallery3 .gallery .element17 { background: url('../images/character.gif') no-repeat -2525px 0 transparent; } #gallery3 .gallery .element18 { background: url('../images/character.gif') no-repeat -2683px 0 transparent; } /* Gallery 4 - Foot */ #gallery4 .gallery .element1 { background: url('../images/character.gif') no-repeat 10px -85px transparent; } #gallery4 .gallery .element2 { background: url('../images/character.gif') no-repeat -155px -85px transparent; } #gallery4 .gallery .element3 { background: url('../images/character.gif') no-repeat -313px -85px transparent; } #gallery4 .gallery .element4 { background: url('../images/character.gif') no-repeat -457px -85px transparent; } #gallery4 .gallery .element5 { background: url('../images/character.gif') no-repeat -621px -85px transparent; } #gallery4 .gallery .element6 { background: url('../images/character.gif') no-repeat -784px -85px transparent; } #gallery4 .gallery .element7 { background: url('../images/character.gif') no-repeat -918px -85px transparent; } #gallery4 .gallery .element8 { background: url('../images/character.gif') no-repeat -1082px -85px transparent; } #gallery4 .gallery .element9 { background: url('../images/character.gif') no-repeat -1240px -85px transparent; } #gallery4 .gallery .element10 { background: url('../images/character.gif') no-repeat -1382px -85px transparent; } #gallery4 .gallery .element11 { background: url('../images/character.gif') no-repeat -1547px -85px transparent; } #gallery4 .gallery .element12 { background: url('../images/character.gif') no-repeat -1705px -85px transparent; } #gallery4 .gallery .element13 { background: url('../images/character.gif') no-repeat -1866px -85px transparent; } #gallery4 .gallery .element14 { background: url('../images/character.gif') no-repeat -2030px -85px transparent; } #gallery4 .gallery .element15 { background: url('../images/character.gif') no-repeat -2190px -89px transparent; } #gallery4 .gallery .element16 { background: url('../images/character.gif') no-repeat -2367px -85px transparent; } #gallery4 .gallery .element17 { background: url('../images/character.gif') no-repeat -2525px -85px transparent; } #gallery4 .gallery .element18 { background: url('../images/character.gif') no-repeat -2683px -86px transparent; } [...] |
Nimmt man sich paar Abende Zeit und bastelt mit HTML, CSS und JS eine kleine Anwendung, entsteht dann folgendes Ergebnis:
- Create Your Character
Fazit
Mit garnicht so viel Zeit- und Skill-Aufwand entwickelt und veröffentlicht man ein schönes soziales Spielchen. Jedoch ist darauf zu achten, dass Features wie "Like" und "Share" vorhanden sind. Gegegenfalls ist auch die Verwendung weiterer interner Funktionen, wie BIlder posten bei Benutzern oder Freunden sowie Eigenschaftes des Benutzers auszulesen, spannend und interessant.
- Game on Github