3d totem destroyer

How to create a simple totem destroyer prototype in 3d space with 2d physics. Actually it’s the same process as doing a totem destroyer in 2d, instead of 2d sprites we use 3d objects. First off, take a look at a totem destroyer game, this one is the most basic version TotemDestroyer. As you can see, a very basic game concept and still very enjoyable.
The P2.js physics engine will handle all the physics and collision detection events, all we have to do is to create a level to play with. In this case we will use a free vector drawing software called Inkscape to create many levels easy and fast.


prepare Inkscape

We use Inkscape as level editor, Inkscape will export an xml file with all the layers and objects we  have created. We can also add custom information to any object such as, is it destructible, is it a target or the ground plane. All this features make Inkscape perfect as level editor for a totem destroyer game.
There are a few things to keep in mind while using Inkscape as level editor.

Change basic settings to optimized, which applies transformation direct to object
Change document properties width and height to match the 2d world size
Use the xml editor to edit object attributes such as the id

Once Inscape is prepared, it’s fairly easy to create a level. Each layer of the document defines a new level in the final game. Make sure you are on the right layer, enable snapping for precise positioning, start draw some rectangles and create a fun level. Define a target zone, in this case with an id called “ground”. Also create an object which should finally land and stop on that position with an id called “target”. We use this objects later on to define if the player finished the level or not.

A simple level created on a layer called “level_1”, with a target and a ground to land on.


load levels

Load a SVG file with a simple loader, once loaded we can create levels based on that data. The SVG file has the center point on the bottom left, the 3d world has the center point top center. To align the objects properly we have to offset all the position values.


user input

Handles user input for touch and mouse events.


full prototype



While this is still a raw prototype, it already has a lot of code to study and understand. Once the code is separated into render, game logic and object scripts, the actual game script will be just a few line of code.
It’s still a really simple script and if everything is set up correctly, creating multiple levels is fast and easy.