Skill tree GUI Positioning

[RockGodDev]

I’m working on a skill tree for my game, which is all GUI dependent, and I want to make it where clicking on one of the icons would bring that icon to the center of the screen.

I’ve basically achieved this using this system:

This almost works perfectly, but there are some issues for devices with different screen sizes, for example:

(Using normal screen size and clicking on an icon)

(Using a weird screen size and clicking on an icon)

This whole system is just janky, and I’m wondering if there’s some other way to do what I’m trying to do. I know that if I just used a 3d skill tree, I would just be able to set the camera’s CFrame to be above the icon, but I prefer it being GUI.

[wrello]

Could you show a video of the differences? It’s kind of hard to see what the problem is in that second image.

[RockGodDev]

Its barely noticeable, however the first image has the icon perfectly centered, while the second one has it slightly bottom left.

[bonecoat]

I would focus more on the fact that the background is stretching. Maybe set the background scale type to tile. Also I would test the screen sizes with the device emulator to see if it has that problem on actual device aspect ratios.

[RockGodDev]

Fixed the background, however yes, the issue persists on other screen sizes.

Icon should be centered, but is slightly towards the bottom.

[bonecoat]

Could you show me your explorer?

[RockGodDev]

[bonecoat]

Which is the icon? Is it start? And what are the values? Also, I did notice from the image you are using. I am assuming you are making a game revolving around Murder Drones?

[RockGodDev]

The center icon is the Start, the icon that’s off to the side is the Template. The thing that gets moved around is the main frame, and the main frame is the same size as the start icon.

Also yes, this is a murder drones game.

[RainingMemory (nat)]

maybe your anchor points aren’t right?

because you want to CENTER stuff in this situation, the anchor points of the skills and the main frame should be (0.5, 0.5), the center!

if that is the case and you have changed everything. if my brain is working today, i believe you have to change the 0.465 to 0.5 in this segment.

try it out!

[RockGodDev]

Unfortunately not, both the main frame and the icons have an anchor point of 0.5, 0.5, and setting the 0.465 value to 0.5 does this:

While its very very hard to notice, the icon is still not centered.

[bonecoat]

Is the frame that contains the icons sized to take up the entire screen?

[RockGodDev]

Nope, its the same size as the icons themselves.

[bonecoat]

Oh, I’m going to recreate what you have to see if I can find a solution.

[RockGodDev]

Okay thank you, I’ll keep looking as well to see if I’m able to fix this.

[RockGodDev]

Okay so, I fixed the X part of the icon positions, but even though the Y part functions exactly the same as the X, its still buggy. (Nevermind, the X axis is still acting up.)

[bonecoat]

I got something that should help and make it easier to code with.

The frame is now pivoted to one point which is the icon.

[bonecoat]

I should mention that the AspectRatioConstraints have the default values. Same with UiCorners. All of the UI elements have a pivot offset of 0.5 both coordinates.

[RockGodDev]

Tried for several hours now, and haven’t found a fix. I’m just gonna use 3d and make it look like its 2d, because it’s not worth the dozens of hours for it to be GUI dependent, when it can simply be recreated in 3d.

[bonecoat]

Yes you should save yourself a few days of your life.