How to display a hierarchical skill tree in php
Posted
by
user3587554
on Game Development
See other posts from Game Development
or by user3587554
Published on 2014-05-10T05:39:16Z
Indexed on
2014/06/09
15:43 UTC
Read the original article
Hit count: 318
php
If I have skill data set up in a tree format (where earlier skills are prerequisites for later ones), how would I display it as a tree, using php? The parent would be on top and have 3 children. Each of these children can then have one more child so its parent would be directly above it.
I'm having trouble figuring out how to add the root element in the middle of the top div, and the child of the children below each child of the root. I'm not looking for code, but an explanation of how to do it. My data in array form is this:
Data:
Array
(
[1] => Array
(
[id] => 1
[title] => Jutsu
[description] => Skill that makes you awesomer at using ninjutsu
[tiers] => 1
[prereq] =>
[image] => images/skills/jutsu.png
[children] => Array
(
[2] => Array
(
[id] => 2
[title] => fireball
[description] => Increase your damage with fire jutsu and weapons
[tiers] => 5
[prereq] => 1
[image] => images/skills/fireball.png
[children] => Array
(
[5] => Array
(
[id] => 5
[title] => pin point
[description] => Increases jutsu accuracy
[tiers] => 5
[prereq] => 2
[image] => images/skills/pinpoint.png
)
)
)
[3] => Array
(
[id] => 3
[title] => synergy
[description] => Reduce the amount of chakra needed to use ninjutsu
[tiers] => 1
[prereq] => 1
[image] => images/skills/synergy.png
)
[4] => Array
(
[id] => 4
[title] => ebb & flow
[description] => Increase the damage of water jutsu, water weapons, and reduce the damage of jutsu and weapons that use water element
[tiers] => 5
[prereq] => 1
[image] => images/skills/ebbandflow.png
[children] => Array
(
[6] => Array
(
[id] => 6
[title] => IQ
[description] => Decrease the time it takes to learn a jutsu
[tiers] => 5
[prereq] => 4
[image] => images/skills/iq.png
)
)
)
)
)
)
An example would be this demo image minus the hover stuff.
© Game Development or respective owner