console.log()

Meine Highlights der OnGameStart – Warschau 2013

| Keine Kommentare

Vom 18.9-20.9.2013 fand in Warschau zum dritten Mal die ongamestart Konferenz statt. Eine Konferenz über HTML5 und Spiele. Am Vortag gab es 2 Workshops und ein offizielles Warm-Up Event mit der sehr großen lokalen Meet.js Gruppe, ehe die eigentliche Konferenz im Primas-Palast los ging.
Es wurden WebGL Tipps und Tricks erklärt, jede Menge Rendering und Gaming Engines demonstriert, sowie der letzte Stand der Audio API und allerlei Cross-Plattform Probleme Desktop – Mobile diskutiert. Ich möchte hier aber gar keine detaillierte Zusammenfassung schreiben, Wargula und BushidoIT haben dies ohnehin getan, sondern die für mich interessantesten Entdeckungen und Neuigkeiten mit euch teilen.

Tools:

OGNrTPc

Spine – 2D Skeletal Animation for Games
Da Team SAGA jede Menge Social Brand Games erstellt kommen wir bei großen Projekte um Charakteranimationen nicht herum. Bisher haben wir immer auf Keyframe-Animationen gesetzt. Alle zusammenhängenden Animationsstufen werden dabei in ein Sprite komprimiert und dann von unserer Engine durchgeschleift. Bei vielen Animationsschritten werden die Sprites allerdings sehr groß und die Ladezeiten immer länger. Weiters lassen sich unterschiedliche Animationen nicht mittendrin flüssig miteinander verbinden. Hier schafft Skeletal Animation abhilfe. In der 3D Welt ein alter Hut gibt es auch jetzt mit Spine eine einfache Möglichkeit Skeletal Animation für 2D sehr einfach einzusetzen. Der Vorteil liegt auf der Hand: Der Grafiker braucht nur noch die zu bewegenden Teile zu liefern die auf ein Skelet aufgespannt werden. Das Skelet wird anschließend animiert. Diese Animationen kann man dann als JSON exportieren und in einer Runtime als Szenenobjekt laden. Dabei sind nicht nur die interpolierten Animationen viel flüssiger, sondern durch die massiv eingesparten Datenmengen können Ladezeiten spürbar reduziert werden. Ein weiterer großer Vorteil ist aber sicherlich die Unabhängigkeit Development –  Kreation, wenn man schnell eine Animation ändern muss, oder eine zusätzliche braucht kann auch jeder Dev schnell etwas ändern.

Die einst Kickstarter geförderte Software Spine wirkt auf den ersten Blick sehr intuitiv und auch der Support von etlichen Runtimes spricht für sich.

Jede Menge Beispiel-Videos und eine Demo zum Download(ohne Exportmöglichkeit) finden sich direkt beim Hersteller unter http://esotericsoftware.com/. Als Alternative möchte ich aber euch auch nicht den gratis Cocos2D Builder vorenthalten.

 

Datenvisualisierung:

d3JS

d3.js ist eine Javascript Library um Daten zu manipulieren und in eindrucksvollen Visualisierungen zu präsentieren. Eine Vielzahl an Beispielen gibt es unter http://d3js.org.

 

Rendering- und Game Engines

Auf der ongamestart wurden eine Vielzahl an Engines dargestellt. Auffallend war, dass fast alle Engine Beispiele nicht Framerate unabhängig waren. Ein typischer Anfängerfehler den viele Webengines außer Acht lassen. Auch wenn viele Engines eine Target(Max)framerate von 60fps haben ist das kein Garant, dass das jedes Device die auch schafft. Ein Spieler sollte sich mit 20fps genauso weit in einer Sekunde wie mit 60fps bewegen um Chancengleichheit zu gewährleisten.

 Solpeo

Solpeo, einer der Hauptsponsoren der #ogs13, ist eine noch nicht fertige Canvas basierte Game Engine eines jungen Startup Teams aus Polen. Momentan ist nur die JS Engine fertig. Das Backend sowie Editor wurden noch nicht öffentlich. Solpeo hat sich speziell auf die isometrische Darstellung von Spielen spezialisiert. Die Dokumentation ist auch schon recht gut. Auf der #ogs13 wurde ein simples Breakout Game in ein paar Minuten programmiert. Nichts atemberaubendes, aber schon recht solides.

Wer schon immer einmal einen Worms-Klon programmieren wollte hat jetzt mit JawsJS die Möglichkeit dazu.Die Engine, die unter Kategorie Hobbyprojekt fällt, hat einige interessante Features mit der man in wenigen Handgriffen TileMaps laden kann aber eben auch Worms-artige Landschaften zeichnen und zerstören kann. Die finale Demo der Konferenz findet ihr unter http://jawsjs.com/ongamestart/final.html mit hoch entwickelten Devgrafiken 😉

 impact++

Den Abschluss der Konferenz machte impact++, nach eigener Beschreibung eine kostenlose Boilerplate für die kommerzielle impactjs Game Engine. Der ganze Vortrag war als ingame Demo angelegt und hat die Vorzüge der Boilerplate bestens demonstriert, von dynamischen 2D Schatten, Blendmodes für Lichter, lowcost Pathfinding, Kamerakontrollen und für mobil ganz wichtig unabhängig gerenderte Texte um immer eine lesbare Schrift zu garantieren. Am Liebsten hätte ich auch gleich losgelegt, speziell der Ingame Profiler und Editor machen Lust gleich eigene Ideen umzusetzen. Die Demo gibt es übrigens zum Nachspielen hier: http://collinhover.github.io/impactplusplus/demo/index.html. Unbedingt ansehen.

PixiJS

Mein persönliches Highlight war aber PixiJS. Eine Rendering Engine, die alles, sofern vom Browser unterstützt und aktiviert, per WebGL rendert und ansonsten als Fallback einen Canvas Renderer anbietet. Die Geschwindigkeit und das Feeling der Run Pixie Run Demo auf meinem iPhone 5 ist beeindruckend. Der Performanceunterschied zwischen WebGL und Canvas Fallback ist enorm: WebGL ist je nach Demo ca. 10 – 20 Mal so performant wie Canvas(http://www.goodboydigital.com/pixijs/bunnymark/). Im Unterschied zu den anderen Engines kümmert sich PixiJS nur um das Rendering. Es bietet keinerlei Physik- oder Audioklassen. Weiters unterstützt es das oben genannte Spine. Nachteil es unterstützt wie alle Canvas- und WebGL Engines nicht den bei unseren Kunden noch immer sehr beliebten IE8. Bei soviel Perfomance und Grafikeffekten lassen sich aber hoffentlich auch bald Kunden zu spannenden und zukunftsträchtigen Projekten ein. Ich bin jetzt schon Feuer und Flamme dafür.

 

Unabhängig von den unglaublichen tollen Eindrücken gibt es allerdings auch noch jede Menge Probleme um HTML5, speziell die WebAudio API(http://slides.krutisch.de/ongamestart_web_audio_in_depth/) ist noch eine Dauerbaustelle. Aber auch Canvas Performance Probleme machen vielen Studios bei umfangreichen Projekten zu schaffen. Für mobile Geräte werden zum Beispiel Animationen im Hintergrund vereinfacht, sowie die Framerate auf 30fps limitiert um Energie zu sparen und die Erhitzung von mobilen Endgeräten zu reduzieren. Nur bei Aktionen wo ein flüssiges Erlebnis essenziell ist, wie Drag & Drop, wird  die Framerate auf 60fps erhöht.

Meine und Team SAGAs Erfahrungen damit im Produktiveinsatz finden sich hoffentlich demnächst hier.

Bis dahin viel Spaß beim Ausprobieren,

Clemens

Autor: Clemens Mautner Markhof

Ich bin zuständig für Game Design und Development im SAGA(Social Apps & GAmes) Team am Standort Wien. In meinen Aufgabenbereich fällt die Konzeption und Umsetzung neuer Facebook Apps und Games. Von Papier-Prototypen, über Game Balancing, bis hin zu MySQL Tweaking ist alles dabei. Meine liebsten Tools sind Netbeans und Sequel Pro am Mac. Vor meiner Tätigkeit bei vi knallgrau habe ich mehrjährige Erfahrung im Game Modding (Rainbow Six und Ghost Recon), sowie Ranking Systems und Community Building gesammelt.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.