In den letzten zwei Monaten konnte ich an weiteren iPhone Games für bwin arbeiten:

• „Kick’n’Spin“ – eine 5-Reel-Slot Machine im Fußballgewand, passend zur WM 2010. Das ist natürlich das altbekannte „Gold of Yucatan“ im neuen Gewand.
• „European Roulette“ – Eine komplett neue Applikation, die einige Herausforderungen zu bieten hatte.

Im Zuge dessen ist auch ein Fork des jQTouch Frameworks entstanden, den ich auf github hoste und der nun auch gut auf Android Geräten funktioniert:

github.com/tladesignz/jqtouch

Das ist insbesondere deswegen interessant, weil David Kaneda sich ja inzwischen mit ExtJS zu Sencha verbunden hat und sich dort offenbar momentan hauptsächlich auf das iPad konzentriert.

Für viele Zwecke ist ein ExtJS aber weit übers Ziel hinausgeschossen, deswegen möchte ich meinen Fork jedem ans Herz legen, dem Sencha Touch zu viel ist!

Effiziente Positionserkennung

Das Roulette Setzfeld (im Englischen auch „Layout“ genannt) hat bei näherer Betrachtung doch ziemlich viele unterschiedliche Positionen, die es zu erkennen gilt, insbesondere was die Belegung der Feldränder angeht.

Zusätzlich kam die Anforderung hinzu, daß es verschiedene Vergrößerungsstufen des Feldes geben sollte: Eine Übersicht, in der alle Felder zu sehen sind, eine gezoomte Ansicht im Portrait, bei der man nur die Zahlenfelder erreichen muß, und im gedrehten Zustand eine gezoomte Ansicht auf die volle Breite des Tisches.

Eine einfache Lookup-Tabelle wäre zu unflexibel und eine furchtbar öde Arbeit, dazu kommt man schnell in Laufzeitprobleme, wenn diese nicht intelligent genug geordnet ist.

Nach einigen Tagen Überlegung und Gebastel habe ich dann die optimale Kombination aus normalisierter (vergrößerungsunabhängiger) hirarchischer Lookup Tabelle und mathematischer Berechnung gefunden:

Die Zero wird aufgrund Ihrer völlig aus dem Rahmen fallender Größe extra behandelt, alle anderen Felder werden über Bestimmung der Spalte und Reihe erkannt. Danach wird überprüft, ob evtl. eine Randposition vorliegt und in einer Lookup-Tabelle der entsprechende Code dafür ermittelt.

Toolbar unten

Wie schon in dem Lessons Learned Artikel erwähnt, gibt es kein position: fixed am iPhone. Braucht man eine Toolbar am unteren Rand des Bildschirms, muß man das ganze mit position: absolute machen, beraubt sich aber dadurch des nativen (sich „natürlich“ anfühlenden) Seitenscrollings.

Mit den iScroll Skript wird alles wieder gut, allerdings handelt man sich dadurch einige Unschönheiten mit dem Tap-Event-Handling ein, um die man herumarbeiten muß.

Animations-Performance

Das Warten auf die Kugel sollte zwei Animationen beinhalten: Ein sich drehender Kessel mit Kugel die nach der Serverantwort entsprechend fällt. Darunter eine Vergrößerungsansicht der sog. „Fächer“.

Das hat sich auf dem iPhone 3G, daß ja noch durchaus eine weite Verbreitung genießt, als schwere Herausforderung herausgestellt: Beides zusammen ist dort einfach nicht machbar. Entsprechend ist das auf dem iPod Touch sicher nicht anders.

Grund: Wenn man versucht, Bilder, die sehr viel größer sind als der Bildschirm (Wie das Fächer-„band“), durch selbigen zu scrollen, frißt das ganz schnell sämtliche Rechenleistung des Geräts auf, was sich in fürchterlichem Flackern auf Schwarz und/oder plötzlichen Einblendungen weißer Fläche (statt des Bildes) bemerkbar macht.

In bestimmten Situationen ist dabei die Hardwarebeschleunigung der CSS3 Transitions und Animations sogar noch langsamer! Falls man in Performance Probleme gerät, kann es durchaus ein gangbarer Weg sein, einmal die Hardwarebeschleunigung wegzunehmen und die Animation stattdessen händisch mittels JavaScript Intervallen zu machen.

Hier half allerdings auch das nicht, und weil der Kunde keinesfalls ganz auf eine der beiden Animationen verzichten wollte, haben wir uns dann für „Graceful Degradation“ entschieden:

Beim Start des Spiels wird, während alle Bilder geladen werden, eine mathematische Operation mehrmals hintereinander ausgeführt.
Überschreitet die Zeit, die dafür benötigt wird, einen Schwellwert, wird die Animation abgespeckt: Das Fächerband wird dann erst am Ende, wenn die Serverantwort da ist, eingeblendet.

Gamblers Fallacy

Abschließend möchte ich noch jedem die Wikipedia Artikel zum Thema Roulette ans Herz legen. Im Zuge dieser Arbeit habe ich mich intensiv damit auseinandersetzen müssen – sie sind wirklich interessant zu lesen, insbesondere die Abschnitte zu Setzstrategien.

Wikepedia über Roulette: de / en

Wikipedia über den Spielerfehlschluss, bzw. Gamblers Fallacy

Aber immer schön daran denken: Die Bank gewinnt immer! 😉