When you're modding the UI elements you need a solid imagination of how it shall look like in the end! I recommend sketches or photoshop montages. This preparation can save a lot of time as soon as you got familiar with the UI elements in guts! For this I guess it will need a tutorial at a certain point since there are so many options to handle these elements... Hi
@lolesch !
I realized how correct you are with this statement and how critical it is to working precisely on a UI mod. So i tried hard to make a vision which I won't be ashamed to show to you
So here it is...
Figure 1 shows the widened skilltree in the UI with some sample skills on it. I think it should be as close as possible to the vanilla art and other layout elements so that other layouts don't need to be adjusted. I take responsibility to make all the art pieces to be used in the layout.
Figure 1 Training Skills Highlighted in blue is the "training skills" area. The training skill is like the base skill for a particular player-style (fighter, caster, rogue, etc.). So the multiple tabs on top will switch you between the skilltrees of the different player-styles, and each style will have its own training skill.
Training skills will most likely be passive skills that grant bonuses helpful for their particular style and I think it's okay to go up to level 15. But in my design I will make each level a separate skill, so that any one of them can be defined as a requirement for unlocking another skill (because I don't know if this can be done with a multi-level skill).
Even though they are separate skills, the display of the training skills can be simpler than full icons to save space (in figure 1, i made them just small buttons). The training skill levels will unlock in sequence (level 1 unlocks level 2 and so on). As you invest in each level, a simple artwork color change can indicate which level you already reached.
Skill Unlocking The idea is that a given skill in the main section above the training skill area can require that you have invested in a certain level of the training skill before the given skill is "unlocked". Figure 2 shows ideas for how the UI can display the various "states" of a skill.
Figure 2 When a skill is still locked the UI will not show any plus sign to click to invest in the skill and the skill icon itself will be grayed. Once the skill becomes unlocked the UI would show the plus sign to be able to invest in the skill. But if there are no points invested in the skill yet, the icon will still be grayed. Once you have invested any point/s in an unlocked skill, its icon will then be displayed in color. Skill Display Whether the skill is locked or unlocked i think the player should still see the tooltip describing the skill. Figure 3 shows an idea for the skill tooltip
Figure 3 These "main skills" could be active or passive
and they could be multi-level ( [LEVEL1]...[LEVELn] ). So ideally the tooltip will show the "current level" / "next level" descriptions like the vanilla game.
What is different from the vanilla skills is I'm planning the main skills will
not have any tier bonuses (if the skill will "evolve" to a stronger version, I will make it a new skill instead). Also it is ideal if the tooltip can show the required level of the training skill needed to unlock the skill (encircled in blue in Figure 3 above).
Finally, it would be ideal if each training skill level could also have a tooltip (although there's no need to show "current / next").
Spoiler: More Tips from lolesch! (hover to show) For example the "Group"-folder is more or less for invisible elements like logic, controllers and statwatchers, etc. Always use the "Window" element to group visible things. this parent window just need a size but no image so it is more like a placeholder.
When I'm modding UI I clone the file (in this case the skilltreeoverride) and inside the file I coppy paste everything into a "Window" element with the name "Original" with visibility - false. This way I can doublecheck how it was done originally and copy anything I need without reopening the base file.
IMPORTANT: sometimes there is a conflict with logic groups since the dublicated i.e. Button is not linked to anything...
Thanks very much for these tips! Just to make sure... you do use the UIScale tool from the GUTS Utilities? This is a must have when you edit UI
Uh... i don't know! what is that? lol! Have you noticed that investing in that skill will make you suffer damage? I guess the "deal physical damage" has to be redirected
Yes thanks I was able to fix that and put it into the dropbox folder I would recommend to keep locations clean and mathematical. I nearly never use the "SCALE HIGHT/WIDTH" property since it is based on your screen resolution and much harder to keep "in place".
Haha! Yes i noticed this - I think this is the cause of the "moving elements" i mentioned. Next big thing is that the guts editor does not show the "correct" resolution of objects larger then "whatever" pixel so you need to mesure the right position with photoshop or trial and error between guts editor and "in game mode"
Depending on the objects position I often choose between top center bot right center left - and from there I can offset the next object for its own width and a few spacer pixels (was that understandable?)
Thanks again for these tips too! Again lolesch i am really really grateful for your expert help but i think the work should be "even" as much as possible, which is why I want to take responsibility for the images (at least that I can do!). Also I would like to actually learn this, so I ask pls be patient with me if I'm slow on something which you could do in a minute or less
!
I am really excited about working on this mod! Thanks again!