View the interactive A* Pathfinding demo now.

The A* demo allows you to build paths with blockers and different tile heights. Demo includes details on the searches measurements and a general overview of how it works. You can download the source code to help build your own implementation.

Use code dotd0409au for 50% off

Use code dotd0409au at www.manning.com/crowther2/ after putting the book in your cart and checking out.

A terraforming RPG available for free on Android. Click image to download now.

Overcoming Time Limitations

One of the biggest difficulties our team faced while creating the game was me being the only developer. This was very frustrating for everyone as we wanted to create a complete game with a beginning and end in 72 hours. Instead of writing everything myself, I built tools that allowed our game designers to input all the text via JSON. This allowed them to build out structures and arching text conversations. Free online JSON tools such as http://www.jsoneditoronline.org/ can be very useful for getting non-tech savy people to write out JSON quickly. We have over 500 lines of JSON data that generates the entire game experience. Considering how successful the game was (considering it was built in 72 hours) I’ll probably consider this approach again for future hackathons.

All text is pulled from JSON files generated by non-developers

Reactions

Our overall reaction from people at the Dark Side Game Jam was very positive. We had one of the only complete games and probably the most story driven game. Not to mention we had generated a massive amount of content in a short time. We found this slightly funny, as our game has no physics engine, 3D, or other really cool features. Just a 2D game with lots of text and the ability to make choices.

Players are presented with a dilemma and given a structure choice to try and counter it

Play Now

The game was written with the Corona SDK and you can get the source code on GitHub. If you have an Android phone you can play the game now by downloading it on Google Play.

A level editor for Canvas Prime that never made it

Maintain small amounts of code

Originally Canvas Prime was about 1,000 lines of code, at the end of the project it was well over 3,000. It was too much to maintain. Lots of lines to maintain means the code base can easily become sloppy and broken over time. When starting a project, its a good idea to start off by making your code base as small as possible (ideally under 500 lines).

New features aren’t always good

More features means a larger code base you’ll have to maintain. Even if a new feature sounds awesome, you need to make sure that there are enough resources available to maintain it. I added a level editor to Canvas Prime, but it wasn’t a good idea looking back, as it would have taken roughly 300+ hours to complete. Not exactly a good focus of time and resources when you only have 10 hours to dedicate to a project weekly.

Bring a team

Probably the largest contributing factor to Canvas Prime’s failure was that I developed 90% of it by myself. It would have been much better if I started this project with somebody else instead of doing things solo. Then again, if you bring other people on-board be prepared to plan meetings and teach others if they aren’t up to speed with your programming level.

Make a granular plan

When I initially planned out Canvas Prime I had a small roadmap that looked something like this:

1. Core of game engine
2. Sprite support
3. Sound support
4. Level editor

While the first three items sound great, I didn’t think the fourth item through very thoroughly  A level editor requires design, a completely different interface, many hour of UI planning, and a plethura of steps. Ultimately the level editor was so massive I got hung up on it and lost interest in the project as a whole.

The lesson learned is you need to break down larger steps into micro-steps and list out the total hours. If you bump into something that might be 100+ hours while making a list, its probably a good idea to throw it out and make it a separate project.

This is not a playground

Since the code base for Canvas Prime is written in NodeJS I did far too much experimenting. I constantly broke functionality and blew holes in the code base to tinker with features I probably shouldn’t have. It was like playing with a bazooka, then later realizing that blowing up your house wasn’t such a good idea. I recommend writing your project in a language you’re familiar with and toying with code elsewhere.

Document EVERYTHING!

Write your documentation while you write your code. That way you don’t have to come back and write separate docs later. It saves you tons of time and is quickly becoming a standard practice at many development shops. For JavaScript documentation I recommend JSDoc which can be compiled into a full blown website on the fly.

Its also a good idea to keep a readme file in your root for docs, but be careful to write it in a way that you don’t have to constantly update it as your project evolves.

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.

View Demo – Warning, haven’t fixed a DOM bug in IE9. Library has been tested and works fine in IE8 and up though.

Download on GitHub

Simple to use JavaScript Easing Library

Simple Tween JS is a loop friendly easing library, meaning its optimized for animation with HTML5′s Canvas API or SVG. It supports the ability to create, reset, tweak, and loop tweens on the fly. While that might not seem like a lot of features, most JavaScript easing libraries take a serious performance impact from packing in too many features. It also uses the latest JavaScript programming techniques to prevent slow performance from supporting IE7 and below.

The file size is only 2.83kb when minified and it stands at less than 200 lines of code. It can be instantly integrated with existing projects and you can use it right away as so.

// Create a new re-usable tween
// Parameters: startValue, distance, duration, animationType, loop
var myTween = new Tween(0, 20, 3000, 'quadIn', 'loop');

// Get the value of the tween relative to the current time
myTween.getValue();

Complete documentation and additional methods can be found in the GitHub’s README.md file.

Extending functionality

Since the library is written with simple prototypical inheritance, you can easily extend it with a little object oriented programming. For example, you can easily add in the ability to change the current tween’s animation type as so.

Tween.prototype.setAnimation = function (myAnimation) {
    this.animationType = myAnimation;
};

Currently Simple Tween JS is being used on multiple projects, so optimizations and updates will come regularly. If you have any suggestions, feature requests, or find any bugs please let me know in the comments below.

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

Edit 8/18/2012: Updated the game’s graphic and added a playable link to the game.

You can play SVG Aliens at html5inaction.com and get the source code by downloading it from Manning’s HTML5 in Action page.

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

The game allows you to move and interact in a 2d environment. But all the shapes (2d and 3d), are created with WebGL. Shooting elements on the screen uses a 2d collision system, that causes objects to explode into a massive amount of cube particles. One of the biggest difficulties to overcome with the game was memory management, as WebGL requires extra steps to remove shader and buffer data out of memory in a fast paced game setting. Normally JavaScript automatically removes data for garbage collection when there are no more references to it, WebGL makes this slightly complicated.

WebGL Context and 2D Context API don’t mix

I feel that the demo is a successful demonstration of what WebGL and JavaScript can accomplish for 3D in 2D. The biggest issue around blending the two is WebGL and Canvas can’t be used in the same <canvas> context, so the demo is completely written in WebGL, which is a slightly different approach than I would have liked. You can layer WebGL <canvas> context on top of a <canvas> 2D context, but I don’t recommend it. Reason being if you want to export your Canvas data to something like PhoneGap or Chrome’s app packager, it can cause issues. You’re better off using faux 3D (aka dirty 3D or fake 3D) if you want 3D graphics while using the Canvas 2D API.

WebGL Game Engine Tutorial

If you want to learn how to create this game you can pick up a copy of my book HTML5 in Action for step-by-step instructions. Its WebGL game engine tutorial teaches you how to roll everything from scratch with principles also applicable HTML5 Canvas API development. If you don’t want to pickup the book, you can always open up the game’s source in your browser and read through the vast amount of inline comments.

Click here to play HTML5 Canvas Ricochet

All assets were drawn exclusively with the Canvas API and no images are used except for the background. Because Canvas Ricochet relies so heavily on Canvas’ drawing abilities, the demo is primarily for Chrome. It should technically run in IE9, Safari, Firefox, and other browsers, but I can’t guarantee stability for them.

If you think the game is pretty awesome and want to know how I built it. I’ve created step by step instructions in my book HTML5 In Action. You can get a copy now (before it even comes out) from Manning’s MEAP program. If you don’t want to buy a copy you can pop open the source and figure everything out. As it uses a fairly straightforward design pattern.

• Getting my game engine Canvas Prime into beta and writing tutorials for it
• Invites to test out my top secrect HTML5 tower defense game
• Finishing my WordPress libraries for settings, custom post types, and user profiles (with documentation)
• Articles on HTML5 game theory, tutorials with emerging technologies, screencasts, and more!

Note: If you want to run the Breakout demo, please visit the HTML5 In Action page on manning.com.