Skill Tree Design
This is a skill tree design I created based on the gods in the homebrew DnD game I am currently playing.
This is a skill tree design I created based on the gods in the homebrew DnD game I am currently playing.
In developing my design, I was most inspired by the unusual tiled patterning of the Batman Arkham Knight skill tree. I recently visited an Escher exhibition, and the particular piece here influenced the way I arranged and designed the diamonds for my skill tree. I used the Skyrim tree as an example of a constellation-themed tree, and this inspired the scales layout of my tree. I looked at the layout of all of them as reference when deciding on the placement of the information and menu elements.
In developing my design, I was most inspired by the unusual tiled patterning of the Batman Arkham Knight skill tree. I recently visited an Escher exhibition, and the particular piece here influenced the way I arranged and designed the diamonds for my skill tree. I used the Skyrim tree as an example of a constellation-themed tree, and this inspired the scales layout of my tree. I looked at the layout of all of them as reference when deciding on the placement of the information and menu elements.
This was my initial wireframe exploring this concept. I mostly played around with the alignment of different items and decided where each part would fit best in the space.
This was my initial wireframe exploring this concept. I mostly played around with the alignment of different items and decided where each part would fit best in the space.
Here, I had developed the idea more, changing the shape from random to an outline of a pair of scales, representing the god's symbol. I was also making more use of the whole space and thinking about how the controls could work.
Here, I had developed the idea more, changing the shape from random to an outline of a pair of scales, representing the god's symbol. I was also making more use of the whole space and thinking about how the controls could work.
This shows a skill that has already been unlocked being selected. The colours are different according to the skill type. I added the constellation next to the god's name to show the symbolism of the tree's shape.
This shows a skill that has already been unlocked being selected. The colours are different according to the skill type. I added the constellation next to the god's name to show the symbolism of the tree's shape.
In the previous wireframe, the player would have to press 'X' to open the skill information. In this design I changed this so the skill information stays fixed on the left side of the screen to decrease the amount of effort needed from the player to refer to this important information. For the other controls, the player uses the left stick to move the selector around the tree and can zoom in/out with the right stick. There would be different trees for each of the gods, so the name of the current tree is also featured prominently in the bottom right-hand corner, with the option to click 'B' to go back. The overlay of the icon on the information box is to ensure that the player knows what is selected and to reinforce the connection between the icon and the skill.
In the previous wireframe, the player would have to press 'X' to open the skill information. In this design I changed this so the skill information stays fixed on the left side of the screen to decrease the amount of effort needed from the player to refer to this important information. For the other controls, the player uses the left stick to move the selector around the tree and can zoom in/out with the right stick. There would be different trees for each of the gods, so the name of the current tree is also featured prominently in the bottom right-hand corner, with the option to click 'B' to go back. The overlay of the icon on the information box is to ensure that the player knows what is selected and to reinforce the connection between the icon and the skill.
This shows a skill that is yet to be unlocked being selected on the tree. I ordered the skill information by importance to the player, starting with the skill name and type, to the cost, and then the skill descriptions. Once they have gotten all of the information needed to make a decision, they are presented with the option to buy the skill.
This shows a skill that is yet to be unlocked being selected on the tree. I ordered the skill information by importance to the player, starting with the skill name and type, to the cost, and then the skill descriptions. Once they have gotten all of the information needed to make a decision, they are presented with the option to buy the skill.