TwoPointFive

by phoboslab

phoboslab /TwoPointFive

3D View Plugin for the Impact HTML5 Game Engine

132 Stars 18 Forks Last release: Not found MIT License 8 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

TwoPointFive for Impact

TwoPointFive is a plugin for the Impact HTML5 Game Engine that provides a 3D viewport for the game world.

Demo

Super Blob Blaster

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/impact/
and
lib/weltmeister/
directories from Impact need to be copied into the
lib/
directory of this demo.

Usage

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.Entity
rather than from
ig.Entity
. The
tpf.Entity
provides some capabilities to position and draw them in 3D space. Each entity has an additional
.z
property for
.pos
and
.vel
that 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

floor
,
ceiling
and
walls
. An additional
light
layer 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.js
for an example.

TwoPointFive comes with some additions to Impact's Debug Module. To load it, simply require the

plugins.twopointfive.debug
module in your
main.js
.

A note about Tile Seams

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
ig.main()
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.