a generalizable, customizable js library for displaying your game's tech tree. View a web-demo at 7yl4r.github.io/techtreejs.
git clone https://github.com/7yl4r/techtreejs- clone the repocd techtreejs- cd into your local copy
python serve_demo.py- start up the demo server- open your browser to http://localhost:8080/demo.html
See /demo/ for the implmentation of techtree.js that powers the web-demo 7yl4r.github.io/techtreejs.
###Basic usage###
<!-- load techtree dependencies: -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- load your treeConfig script -->
<script src="/demo/tree_config.js"></script>
<!-- load the tech tree script -->
<script src="/techtree.js"></script>
<!-- init the tree -->
<div id='tech-tree' onload="techtree.drawTree()">
your tree appears here (TODO: make this work rather than appending to document)
</div>The "jsonSrc" var set in your tree config determines where the data tree data comes from, and this file can take any form sufficiently similar to the demo file. Images used for the tree must be .png files stored in the /demo_tree/ directory and must have the same name as the node they represent.
The tree display can take many different forms based on the treeConfig provided. It is recommended that you modify the treeConfig /demo/ to suit your needs because all options must be specified. The treeConfig can be modified from javascript (as shown in demo/index.html), but this requires reloading of the tree.
The state of the research tree is represented in the tree JSON retrieved. The node attribute "enabled" can be set to true/false and defaults to false if not set.
When a node is selected for research techtree.js calls the dummy method techtree.canAfford("nodeName") and responds according to true/false return value. Simply override this function by setting techtree.canAfford=function(nodestr){ } to connect to your player's data.
Similarly, when techtree.canAfford returns true, techtree.js calls the dummy method techtree.selectNode("nodeName"), which you can override to update the player database.
Code is open-source under the Creative Commons Attribution 4.0 International (CC BY 4.0) See LICENSE file for full text.