tech-tree-js

tech tree example

Demo

Please check out the demo by visiting https://ldd.github.io/tech-tree-js

activating a tech node

Features

  • use a TexturePacker spritesheet or individual images
  • horizontal, vertical and even radial tech trees
  • multiple parents for a single technology

Usage

in the browser

Download the minified file and optinally, the source map. Include the minified file and the dependencies in your html file

    <script src="lib/d3.min.js"></script>
    <script src="lib/saveSvgAsPng.min.js"></script>
    <script src="js/techTree.min.js"></script>

Building and running

To build, be sure you have node and npm installed.

Ideally, you should also have gulp installed globally.

Clone the directory using git:

git clone https://github.com/ldd/techtreejs

Install dependencies:

npm install

Build:

gulp

Run a webserver

gulp serve

Then open a browser and go to localhost:8000 to see the site.

Art used

Art assets used under the CC-BY 3.0 License

Software libraries used

Libraries used under the MIT License

  • d3
  • saveSvgAsPng

Copyright (C) 2017 ldd

Share this project:
×

Updates