3D View Plugin for the Impact HTML5 Game Engine
TwoPointFive is a plugin for the Impact HTML5 Game Engine that provides a 3D viewport for the game world.
A demo game that uses this plugin is included in this repository.
Please note that you need a license for Impact to actually run the demo. The
lib/weltmeister/directories from Impact need to be copied into the
lib/directory of this demo.
The demo game and its sources in
lib/game/should give you a good overview on how to use the plugin.
The most importantant thing for your entities is to subclass them from
tpf.Entityrather than from
tpf.Entityprovides some capabilities to position and draw them in 3D space. Each entity has an additional
.velthat determines its vertical position and speed in the world.
The layers in your level need to be named in a certain way for TwoPointFive to recognize them. The tile layers for the graphics need to be named
walls. An additional
lightlayer provides an additional tint for each of the tiles in the level. Note that the tilesize for each of these layers must be the same. Again, have a look a the included
lib/game/levels/base1.jsfor an example.
TwoPointFive comes with some additions to Impact's Debug Module. To load it, simply require the
plugins.twopointfive.debugmodule in your
Whenever drawing parts of an image in WebGL, such is done here when drawing tiles, WebGL may sample pixels from a region of the image that is outside the one you specified. This happens mostly due to rounding errors and will result in ugly seams between tiles.
TwoPointFive attempts to work around this issue by redrawing your tileset into a slightly larger image and adding a 1 pixel border around each tile. This 1px border is a copy of the neighboring pixels. Whenever WebGL now samples a texture slightly outside the tile boundary, it will sample from this 1px border and thus avoid any seams in your map.
If you do not want this behaviour, you can disable it by setting
tpf.Map.fixTileSeams = false;before calling