Barely Functional Theories

Musings on science and game design by James Furness.

Project Tanks 1: Simple Fake-3D Wireframes

The 3D tank

With Probus finished I’ve started out building a new game to keep me busy at the weekends, “Project: Tanks”. I’m sticking with the HTML5 canvas platform again, but aiming at PC web browsers this time. I’m hoping to play around with supporting player made content in this one, so I set out on making a slower paced ‘twin stick’ shooter inspired by the Wii Tanks game I enjoyed playing with my brother years ago.

I had a basic engine running pretty quickly and filled it with programmer art using the vector drawing functions of the HTML5 canvas. I intended to update this ‘art’ later in development but to my surprise by applying a simple technique to turn the dull 2D shapes into ‘3D’ wireframes I was able to make the programmer art into the games full visual style. I was so happy with the results that I wanted to share the technique in this post.

Over the course of the article we are going to develop a drawing routine to take a Tank model from the humble beginnings shown on the left, to the glorious ‘3D’ seen on the right.

The drawing functions will be detailed in pseudocode along the way and the Javascript that powers the examples can be downloaded here for reference.



One Comment