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: 294

Filed under:

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. Link to image

© Game Development or respective owner

Related posts about php