For a long time, Macromedia and later Adobe Flash was really the only kid on the block. If you wanted to build a rich, interactive website or software like experience in the browser – Flash was it. Later Microsoft’s Silverlight came along, but not many developers that I know actually ever used it. I supposed Java was there too, but it couldn’t compare to Flash in terms of ease for creating an engaging UI and content delivery system for the web.
For data centric apps, I use a combination of Backbone & Dust.js, with Bourbon/SASS for the CSS. But for a graphical based app – these tools would be sorely lacking. So I began researching HTML5 game development, and what people use to build immersive games to be published via the appstores, as well as a browser. This lead me to some game engines such as Phaser, Melonjs, and Kiwijs – but after experimenting with them, I decided they didn’t allow me enough control – and added bloat of things I didn’t need. I decided that a game based learning app really comes down to 3 visual elements:
- graphic rendering of scenes & elements
- particle generation for effects
The centerpiece of many kids’ learning apps is buttery smooth drag and drop. You see this all over many of the gorgeous IOS apps for kids. I was able to achieve this using a combination of Greensock’s GSAP and Pixi, thanks to a sample generously built for me by Blake over at Greensock.
I’ll continue this post with specific examples of how what I’ve done with these libraries, with code samples.