Nutzen als Werbeplatform

Die schwindende Wirkung von konventionellen Werbeformen verlangt nach neuen Wegen, über die Menschen effizient erreicht werden können. Werben mit Spielen ist einer dieser Wege. Games erhalten als Freizeitbeschäftigung in dreierlei Hinsicht Bedeutung für die Werbeindustrie: Aufgrund der demografischen Verbreitung, der aufmerksamkeitsstarken Wirkung und des intensiven Involvements des Spielers in die Handlung. Hinzu kommt eine hohe Aufmerksamkeit: Wer spielt, richtet seinen Fokus ausschliesslich auf die Spielhandlung. Dabei treffen Videospiele sogar den wichtigsten Werbeträger, das Fernsehen, an seiner empfindlichsten Stelle: Berufstätige spielen überwiegend zur Entspannung nach Feierabend, zur so genannten „Primetime“. Genau dann, wenn sie eigentlich für die Werbebotschaften erreichbar sein sollten. Wenn man diese Aufmerksamkeitzurückgewinnen will, kommt man also nicht umhin, mit den Werbe-Botschaften auch in Spielen und deren Umfeld präsent zu sein. Werben lässt sich dabei auf zwei unterschiedliche Weisen:

Als Teil des Gameplay

Wenn Marke oder Produkt zum Teil der Spielhandlung werden, ist das Involvement des Spielers am grössten. Die Wahrnehmung ist garantiert, der Spieler setzt sich intensiv mit der Marke auseinander und wird die im Spiel erlebten Emotionen mit der Marke in Verbindung bringen. Diese Werbeform ist nicht nur die effektivste, sie ist sicher auch die aufwendigste.

Teil der Spieleszenerie

Die Werbung, die Marke oder das Produkt tauchen im Szenario des Games auf, zum Beispiel als Bandenwerbung in einem Sportspiel. Oder aber als Getränkeautomat, Geschäftsfiliale oder einfach als Teil einer Kulisse. Spannend ist diese Werbeform vor allem, wenn sie dynamisch ins Spiel eingefügt wird und nicht statisch im Spiel integriert sein muss. So können Banden oder Billboards tagesaktuell und sogar mit regionalem Bezug platziert werden. Auf dem iPhone sind beide Arten problemlos möglich. Durch die perfekte Symbiose von grossem Display, guten Multimediainhalten und einfachem Onlinezugriff ist das iPhone schnell zum inbegriff des mobilen Spielens geworden, mit rasant wachsender Tendenz.

Spielegenres, Umsetzung und Kosten

Die bevorzugten Genres auf dem iPhone sind Fun-, und Geschicklichkeitsspiele, was durch den Typ des Freizeitspielers und des mobilen Nutzerverhaltens auch logisch erscheint. Hinzu kommen zwei wesentliuche Faktoren:

• Ein schneller Einstieg: Es muss sofort erkennbar sein, um was es geht.
• Kurze Nutzungszeiten: Die durchschnittliche Spielezeit beträgt gerade einmal 5 Minuten. Unterschieden wird grundsätzlich zwischen 2D und 3D Spielen. Aus technischer Sicht ist auf dem iPhone prinzipiell beides möglich, es hat sich aber gezeigt, dass obige Bedingungen am Besten auf 2D Spiele zutreffen. Hinzu kommt, dass professionelle 3D Spiele und insbesondere die Erstellung der Assets problemlos fünfstellige Beträge erreichen können. Budgets die zumeist noch nicht zur Verfügung stehen im Bereich der mobilen Spiele. 2D Spiele haben zudem einen ganz speziellen Reiz und gehen auch besser mit den visuellen Einschräkungen und Limitation des Displays um. Hinzu kommt, dass sich viele der Spieler an Spiele aus der eigenen Kinder- und Jugendzeit erinnert fühlen. Wer kennt nicht Pac-Man, Donkey Kong, Super Mario und wie sie alle heissen…

Denken auch Sie daran, ein iPhone Game zu realisieren? Dann lassen Sie uns darüber sprechen!

Live-Sendungen, bei denen für Analyse spontan aktuellste Grafiken eingeblendet werden müssen, waren für Moderation und Regie bisher eine spezielle Herausforderung. touchViz unterstützt nun alle Beteiligten wirksam. Am iPhone oder iPod touch kann sich die Moderation über bereitstehende Grafiken/Einspieler informieren und diejenige vorwählen, die als nächstes behandelt wird – Informationsvermittlung mit Fingerspitzengefühl! touchViz erlaubt, während Live-Sendungen die Grafikausgabe über ein iPhone/iPod touch direkt interaktiv zu steuern. In solchen Sendungen muss die Live-Moderation spontan auf sich verändernde Situationen eingehen und aktuellste Grafiken abrufen können. Bei der bisher üblichen Arbeitsweise stellt dies höchste Anforderungen an die Kommunikation mit der Regie.

Kunden Link

AppStore Link

Kunden Link

Auch diese iApp ist seit gut einem Jahr auf den obersten Platzierungen im AppStore und dank dem wirklich guten Content der dahintersteht, wird das sicherlich auch so bleiben. Eine Entwicklung, die Spass gemacht hat und dank derer ich heute Golfregeln kenne, ohne je gross selber gespielt zu haben

Kunden Link

AppStore Link

TV Screen ist ein Projekt, wie es so nur auf dem iPhone möglich ist. Dabei ist das iPhone eigentlich nur der Spiegel nach aussen. Klar, mit Cover Flow Ansicht, Video Overlay Infos zur Sendung und InApp Purchase wird auch einiges an Technik geboten, aber der wahre Erfolg dieser iApp, die sich seit Wochen in den vordersten Rängen tummelt ist die Kombination aus gutem Marketing, den richtigen Features zum richtigen Zeitpunkt und das kontinuerliche Verbessern und Eweitern der App. Ein Erfolgsrezept, dass sich 1:1 auf jede erfolgreiche iApp umsetzen lässt. Bei über 100′000 iApps, die sich im AppStore befinden geht es auch gar nicht mehr anders.

Am Beispiel der iApp für den Tages Anzeiger (iTunes Link) lässt sich dies gut erkennen.

iPhone Applikationen sind eine ganz spezielle Spezies, denn eigentlich gibt es ein paar (fast) nicht unter einen Hut zu bringenden Anforderungen zu erfüllen:

• Eine iApp muss einfach zu bedienen sein
• Sie muss schnell sein (Kein Ruckeln)
• Man sollte nur vom Server laden, was gerade gebraucht wird, dass dafür sehr schnell
• Die iApp muss jederzeit bedienbar bleiben, egal welche Datenmenge gerade gebraucht wird
• u.s.w.

Diese Liste liesse sich noch fast beliebig erweitern, wobei oft noch hinzu kommt, dass auch die Budgets nicht mehr so üppig zur Verfügung stehen wie auch schon. Kompliziert wird es dann erst richtig, wenn man sieht, welche technischen Rahmenbedingungen dem gegenüberstehen:

• Limitiertes Memory
• (Fast) klassische C-Programmierung (Keine moderne Programmiersprache trotz einzigatigem Framework)
• CPU ist nicht zu vergleichen mit einer Desktop CPU (Bsp. Multithreading)
• Kein Garbage Collection
• Simulator entspricht in keinster Weise dem Verhalten auf dem echten Device
• Wenige Entwickler mit entsprechendem Know-How verfügbar

Trotzdem erweckt Apple selber und Steve Jobs in seinen berühmten Sessions, dass alles ganz einfach ist und auch die komplexesten iApps in wenigen Tagen portiert sind. Bei Spielen mag das noch stimmen, aber auch dann nur, wenn bereits grosse Bibliotheken und vorallem dediziertes Know-How zur Verfügung stehen.Bei realen Kundenprojekten ist dies aber so gut wie nie der Fall.

Doch etwas habe ich bis jetzt nicht erwähnt. Trotz all den obrigen Widrigkeiten, unterscheidet sich die iPhone Programmierung von allen Anderen, denn es macht einfach Spass, Software für’s iPhone zu schreiben. Dass man davon alleine nicht leben kann ist klar, deshalb ist es auch extrem wichtig sich schnell eine Basis (früher hätte man Framework gesagt) zu schaffen, die einem Vieles erleichtert. Wir sind noch einen Schritt weitergegangen und haben sogenannte Factories erstellt. “Module” also, die sich für beestimmte Anwendungsbereiche “Lego” artig zusammenbauen lassen. Das ist zwar nicht für jede iApp möglich, aber bei all den News Apps, die durch unsere Hände laufen, macht dies durchaus Sinn und erlaubt uns auch schneller komplexere Themen wie Push Notification, InApp Purchase etc. einzubauen. Highlight ist aber sicher unser Basis System für alle News Anwendungen, das ein für’s iPhone optimiertes Multi-Threading unterstützt und immer dann die CPU und Memory beansprucht, wenn der Benutzer gerade etwas liest oder aus anderen Gründen wenig Ressourcen vom iPhone abverlangt.

Ich werde in einigen weiteren Posts sicher noch mehr auf technische Details und auch noch auf die Tools genauer eingehen, zusammenfassend kann aber schon mal ein Fazit gezogen werden.

Eine einzelne iApp ist aus Business Sicht gesehen, immer im besten Fall eine schwarze Null, ein effektives Business kann daraus nur werden, wenn Synergien zwischen den Projekten geschaffen werden, möglichst viel automatisiert wird und nicht zuletzt ein sehr gutes Team dahinter steht.

Alles Dinge, die bei uns heute Realität sind und so Applikation wie die Tagi iApp Realität werden lassen. Dafür vielen Dank an all unsere Kunden!

Weitere Referenzen auf www.iagentur.ch.

• Man benutzt den Cover Flow View aus den Private Frameworks von Apple (Keine gute Idee, wenn man die App später auch erfolgreich in den AppStore bringen möchte)
• Man benutzt Core Animation und Layers
• Man verwendet OpenGL

Auf die erste Möglichkeit gehe ich aus verständlichen Gründen nicht weiter ein. Die zweite Variante mit Core Animation kam in einem meiner recht frühen Projekte zum Einsatz (Den Beispielcode erläutere ich nacholgend) und hat sich gut bewährt. Variante 3 setze ich aktuell in den Projekten ein, kann als Library gekauft werden und ist zudem im Video zu sehen.

Da das Core Animation Framework auf dem iPhone nicht ganz so mächtig wie unter MacOSX ist, muss man auf Filter verzichten, trotzdem sind schöne Ergebnisse zu erzielen. Doch nun zum Code.

#import
#import 
 
@protocol RBCoverFlowDelegate
- (int)numberOfItems;
- (UIImage*)coverImageForIndex:(int)index;
- (UIImage*)placeholderImage;
- (void)coverHasChangedToIndex:(int)index;
- (void)clickOnCoverWithIndex:(int)index;
@end
 
@interface RBCoverFlowView : UIView {
	CGPoint _startTouchPosition;
	float _centerPosition;
	float _sidePosition;
	CATransform3D _leftTransform;
	CATransform3D _rightTransform;
 
	CALayer* _contentLayer;
 
	id _delegate;
	int _itemCount;
 
	CGImageRef _placeholderImageRef;
	UIImage* _placeholderImage;
	CGImageRef _maskedPlaceholderImageRef;
 
	CGSize _imageSize;
	CGFloat _imageScaleX;
	CGFloat _imageScaleY;
 
	float _rowScaleFactor;
}
 
// Start the cover flow
- (void)start:(id)delegate;
 
@end

Der Cover Flow besteht zunächst aus einem “Hauptview”, der von UIView abgeleitet ist und in dem die Covers dargestellt werden. Dieser ist zudem für das Verarbeiten der Touches und der gesamten Animation zuständig.

Die Covers selber bestehen aus einzelnen Layern, bzw. genau drei Layern pro Cover. Der Layer mit dem Bild selber, ein Layer, der die Spiegelung (Reflection) darstellt und ein Rahmen-Layer, der das ganze Cover umschliesst.

- (CALayer *)addCoverLayer:(int)index {
	CALayer* containerLayer = [CALayer layer];
	containerLayer.name = [NSString stringWithFormat:@"%d", index];
	containerLayer.frame = CGRectMake(0.0f, 0.0f, [[self maxAvalibleImageWidth] floatValue], 1.5f * [[self maxAvalibleImageHeight] floatValue]);
	containerLayer.contentsGravity = kCAGravityResize;
 
	CALayer* holderLayer = [CALayer layer];
	holderLayer.name = [NSString stringWithFormat:@"Holder_%d", index];
	holderLayer.frame = CGRectMake(0.0f, 0.0f, [[self maxAvalibleImageWidth] floatValue], 1.5 * [[self maxAvalibleImageHeight] floatValue]);
	holderLayer.contentsGravity = kCAGravityResize;
 
	CALayer* imageLayer = [CALayer layer];
	imageLayer.name = [NSString stringWithFormat:@"Image_%d", index];
	imageLayer.contents = (id)_placeholderImageRef;
	imageLayer.frame = [self imageRect:(CGImageRef)imageLayer.contents];
	imageLayer.contentsGravity = kCAGravityResizeAspectFill;
	imageLayer.masksToBounds = YES;
 
	CALayer* reflectionLayer = [CALayer layer];
	reflectionLayer.name = [NSString stringWithFormat:@"Reflection_%d", index];
	reflectionLayer.contents = (id)_maskedPlaceholderImageRef;
	CGRect frame = [self imageRect:(CGImageRef)reflectionLayer.contents];
	frame.origin.y = imageLayer.frame.size.height + 2;
	reflectionLayer.frame = frame;
	reflectionLayer.contentsGravity = kCAGravityResize;
	reflectionLayer.masksToBounds = YES;
	reflectionLayer.transform = CATransform3DMakeScale(1.0f, -1.0f, 1.0f);
	reflectionLayer.opacity = 0.6;
 
	[containerLayer setValue:imageLayer forKey:kImageLayerKey];
	[containerLayer setValue:reflectionLayer forKey:kImageReflectionKey];
	[containerLayer setValue:holderLayer forKey:kImageHolderKey];
 
	[holderLayer addSublayer:imageLayer];
	[holderLayer addSublayer:reflectionLayer];
	[containerLayer addSublayer:holderLayer];
 
	return containerLayer;
}

Sind die Layer erstellt worden, müssen die einzelnen Cover nun entsprechend positioniert werden, damit das Aussehen dem Cover Flow der iPod App entspricht. Dies erreicht man, in dem man jeden einzelnen Layer im Raum positioniert, skaliert und leicht dreht.

- (void)layoutSublayer:(CALayer*)rootLayer number:(int)number {
	int selectedIndex = [[_contentLayer valueForKey:@"selectedIndex"] integerValue];
 
	rootLayer.frame = CGRectMake(0.0f, 0.0f, [[self maxAvalibleImageWidth] floatValue], 1.5f * [[self maxAvalibleImageHeight] floatValue]);
 
	CATransform3D layerTransform = CATransform3DIdentity;
	layerTransform.m34 = 1.0f / _sidePosition;
 
	CALayer* holder = [rootLayer valueForKey:kImageHolderKey];
 
	CGPoint pos = CGPointMake(CGRectGetMidX(_contentLayer.bounds), CGRectGetMidY(_contentLayer.bounds));
 
	if (number < selectedIndex) {
		pos.x -= (selectedIndex - number) * _imageSize.width * _rowScaleFactor;
		holder.transform = _leftTransform;
		holder.zPosition = _sidePosition;
		rootLayer.zPosition = _sidePosition - 0.1f * (selectedIndex - number);
		rootLayer.sublayerTransform = layerTransform;
	} else if (number > selectedIndex) {
		pos.x += (number - selectedIndex) * _imageSize.width * _rowScaleFactor;
		holder.transform = _rightTransform;
		holder.zPosition = _sidePosition;
		rootLayer.zPosition = _sidePosition - 0.1f * (number - selectedIndex);
		rootLayer.sublayerTransform = layerTransform;
	} else {
		pos.x = (self.bounds.size.width - _imageSize.width) / 2;
		holder.transform = CATransform3DIdentity;
		holder.zPosition = _centerPosition;
		holder.filters = nil;
		rootLayer.zPosition = _centerPosition;
		rootLayer.sublayerTransform = CATransform3DIdentity;
	}
 
	rootLayer.position = pos;
}

Die Animation ist in dem Code (Hier sind die kompletten Source Files) bewusst recht einfach gehalten und unterstützt keine sogenannten Heartbeat Animationen, d.h. Animationen die sogleich beginnen, wenn der Finger aufgesetzt wird. Im käuflichen und auf OpenGL basierten Code ist dies selbstverständlich vorhanden und insbesondere das Laden und Aufbauen der Bilder noch stark optimiert. Aber als Einstieg und fürs bessere Verständnis hoffe ich, dass der Beispielcode hier erstmal weiterhilft. Wer mehr darüber erfahren möchte, dem möchte ich nochmals unsere Workshops ans Herz legen, in denen wir wesentlich tiefer in die Materie einsteigen können. Also, viel Spass beim Cover Flow programmieren und nicht vergessen, auf mein Blog zu verlinken wenn Ihr die erste iApp mit Cover Flow in den Appstore bringt

Anfangs basierte dieser Code übrigens auf einem Beispiel Code von Bill Dudney, der damals einen Artikel über die Programmierung eines Cover Flow unter MacOSX veröffenlichte und auch ein sehr gut geschriebenes Buch zum Thema Core Animation geschrieben hat.