2017-05-01

Elfer Liga


This article is about lessons learned from the Elfer Liga game on the Tipp24.com platform. While building a small browser game in HTML5, Tiny Roar tried out some new framework architectures and gained a huge amount of experience because of it. The lessons here not only refer to this game, but also to another small game my team and I built a prototype for. Here are my conclusions:

[GALLERY: media/penalty/1.jpg;media/penalty/2.jpg;media/penalty/3.jpg]

HTML5 lessons

I used a smaller JS Framework that was developed over several game jams by a programmer from InnoGames. The problem with small frameworks (like in every language or use-case), is that it will contain errors and will need a lot of bugfixes. It also hadn’t been tested in high-production environments. Okay, it might be very lightweight which might result in good performance, but next time another framework might be more appropriate for the following reasons:

  • PixiJS, CreateJS, Phaser or other JavaScript rendering frameworks are better and less error-prone. The frameworks I mentioned provide all the basic necessities for a production environment like Spritesheets, and all the methods you can imagine for a perfect setup.
  • They also use WebGL Rendering (instead 2D Rendering) for better performance and 2D rendering as a fallback. They also have Mobile Support through these frameworks as well as Sound, Preloading and many more features besides...
  • You also get things like better Spriteatlas Support and an overall bug-free and feature-complete product due to a large open source community.
  • We learned we could also use an EcmaScript implementation next time. For example: TypeScript, CoffeeScript or Haxe.
  • We shouldn’t have any more file-handling like we had with require.js. Fixing those bugs was a major unnecessary time-waster.
  • Haxe could have brought advantages like support for native Android / iOS export - which could be a decisive feature for some projects. For web usage; Pixi, Box2D and others have Haxe-workable versions.

Art & UI lessons

  • UI and Animations are quite difficult to implement in JS. The best solution would be for the artist to build it on his own instead of depending on the programmers. There are some stand-alone tools (and tools for PixiJS etc.) out there that provide an GUI for easily accomplishing these jobs. We haven’t explored all the options yet, but there are a lot out there. To be continued...
  • Another possibility could be trying Cocos2D or other web-optimised engines. Maybe they would have been better? (Unity3D currently has large export files, so in our case this wasn't an option)

Links