Traviso Isometric JS Engine

JavaScript Isometric World Engine

Traviso is an open source JS engine that makes it easy to build isometric applications that run in a web browser. It aims maximum flexibility in order you to implement your own logic on top of it. Along with a set of optimised algorithms, Traviso is built on top of the awesomely fast pixi.js rendering engine.

If you’re interested, you can follow me on twitter (@axaq) or visit the website for more info.

Tutorials

• Basic Isometric World

• How to Customize

• Data File Structure

• Camera Controls

• Callbacks

Docs

You can find the documentation here

What is Ahead

• More tutorials
• Built-in multi-controllable support
• Priority levels for moving objects
• Built-in support for block-like tiles
• Ground/terrain height
• Fog of war

Contribute

Do you want to contribute? That's awesome. You can either message me through Twitter (@axaq) or use the Traviso.js blog.

How to build

After cloning the repo, install the build dependencies using npm:

$> npm install

Then build:

$> npm run build

This will create browser, CommonJS, and ES module versions of the library under dist folder. A minified version for browsers can be found at the same place.

Compatibility

traviso.js	Supported pixi.js
0.1.x	^6.0.4
0.2.x	^7.0.0

Pixi 8 support is not included in the 0.2.x line yet. That will ship in a later release.

Usage

// Here, we initialize the pixi application
var pixiRoot = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0xffffff,
});

// add the renderer view element to the DOM
document.body.appendChild(pixiRoot.view);

// engine-instance configuration object
var instanceConfig = {
    mapDataPath: 'mapData.json', // the path to the json file that defines map data, required
    assetsToLoad: ['../assets/spritesheet.json', '../assets/house.png'], // array of paths to the assets that are desired to be loaded by traviso, no need to use if assets are already loaded to PIXI cache, default null
};

// initialize traviso instance and add it to the stage
var engine = TRAVISO.getEngineInstance(instanceConfig);
pixiRoot.stage.addChild(engine);

You can now also use traviso as a npm module:

$> npm install traviso.js pixi.js@^7.0.0

import * as TRAVISO from 'traviso.js';

var engine = TRAVISO.getEngineInstance(instanceConfig);

If you need to stay on Pixi 6, keep using traviso.js@0.1.12 with pixi.js@^6.0.4.

This content is released under the (http://opensource.org/licenses/MIT) MIT License.