Open Source Project Tips

My project for Canvas Prime was originally meant to be a simple HTML5 game framework that ran on Canvas. Shortly after releasing an early version it was featured on a gaming blog and started being used in my workplace. Traction was growing and it seemed like my new open source project would be a success. About a year and a half later everything has gone down the tube and the codebase is a mess. Although it was a failure, I learned a few lessons that will hopefully prevent you from making the same mistakes.

A level editor for Canvas Prime that never made it

Continue reading Open Source Project Tips

JavaScript Easing Library – Simple Tween JS

One of the major components missing from my open source game engine has been a lightweight JavaScript easing library. If you aren’t familiar with easing, its used to create unique animation movement that feels lifelike and less robotic. There are general use libraries such as jQuery and completely dedicated JavaScript easing libraries that have the words Tweening in the title. While these tools are great, I found them to be too robust, slow, or undocumented. Because of this I’ve created a new lightweight open source library called Simple Tween JS.

Simple Tween JS is a lightweight open source JavaScript easing library at less than 200 lines of code. Complete documentation and the latest version can be found at the GitHub repo.

Continue reading JavaScript Easing Library – Simple Tween JS

HTML5 Space Invaders like game with SVG

For my upcoming book HTML5 in Action, I wrote a chapter on creating a game like Space Invaders with SVG. The tutorial teaches you various methods for creating visual assets with vector graphics and XML.After creating the visual assets, it teaches you how to combine everything with JavaScript. The JavaScript isn’t too complex and I walk you through every step of the way. Great for those who want to learn how to create re-sizable graphics for in-browser use.

Play SVG Aliens at and download the source code at the book’s official page.


Continue reading HTML5 Space Invaders like game with SVG

WebGL Game Geometry Destroyer

Creating 3D games with WebGL and HTML5 APIs isn’t an easy task. It requires matrix manipulation, communicating with graphics hardware, and a good understanding of OpenGL ES (mobile version of OpenGL). To try and make these concepts easy to understand, I created a game tutorial in my new book for HTML5 In Action called Geometry Destroyer. By clicking on the image below, you can play it right now.

Geometry Destroyer is a classic space shooter style game, written with JavaScript, HTML5 APIs, and WebGL

Continue reading WebGL Game Geometry Destroyer