Category Archives: Game Development

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 html5inaction.com 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

HTML5 Game Engine – Canvas Prime

Over the past couple months I’ve been working on an object oriented HTML5 game engine known as Canvas Prime. What makes it very different from all the other Canvas game engines, is ¬†you can use simple hooks to significantly modify the engine on the fly. Want to rewrite collisions at the engines core? Use a hook. Want to rewrite the loading screen animation with the current load value? Use a hook. Want to add in WebGL models, could easily be done by adding in a couple hooks.

Continue reading HTML5 Game Engine – Canvas Prime