Help me understand ZIndex

Help and Feedback Art Design Support
,
#1

1. What do you want to achieve? Keep it simple and clear!

Im making a drawing plugin, for drawing icons or for fun, the name is “Icon Maker”

2. What is the issue? Include screenshots / videos if possible!

Im currently making the layer system, but i think i understood ZIndex wrong. The way i made the layer system is the following:

  • Layers are CanvasGroups, all inside a single folder
    image

  • Each Layer has a ‘Content’ folder for the paint, and a ‘Strokes’ CanvasGroup with another ‘Content’ folder for outlines
    image

  • The Zindex for everything is the following:
    Layer1: x
    Strokes: x+1
    Paint: x+2+amount of paint

  • And for new layers i would simply just increase the Layer Zindex, like this:
    Layer2: x+1
    Strokes: x+2
    Paint: x+3+amount of paint

  • The main idea was that the Zindex only affected parents, so if the layer ZIndex is bigger than the other layers, any children inside it will also be on top

  • But instead, parents have nothing to do with Zindex, so all the paint is on top of each other, the only difference being the ‘amount of paint’, so newer paints are on top of old paint

3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

  • I have thought of a way around it, but i would have to calculate the ZIndex of multiple paint, and that would lag very easily

  • Despite that, i think really look into it

After that, you should include more details if you have any. Try to make your topic as descriptive as possible, so that it’s easier for people to help you!

If anyone knows a better way around it, or maybe something else that works i would be very happy to try it

image
this is how i calculate ‘number of paint’, by the way this number never decreases or resets

1 Like
#2

Just a little note, i will be busy this week so i might not answer in a while, sorry about that

#3

So you know that higher index is more upfront, and you know that children are more upfront then the parents, right?

#4

yes, but that didnt seem to work when i tested it

#5

What is amount of paint?

Also, ScreenGUI have something called LayoutOrder, It’s the sam as ZIndex, but renamed for ScreenGui.

#6

Amount of paint is simply just a way for paint to be on top of each other, so every time you click, it adds a frame and increases ‘DrawIndex’, that being the ‘Amount of paint’

#7

Also isnt LayoutOrder simply for grids, lists, etc?

#8

Nope, it’s for ScreenGui

ALSO, are all the

in the same layer (like the for all of them the ScreenGui is their grandparent)

#9

All layers are inside a folder, also there is no screenGUI its a plugin
The ‘Strokes’ are inside the layers

#10

Maybe you should use ScreenGUI, your plugin might be malfunctioning

#11

But isnt ScreenGui going to bug anything in the plugin?

#12

What is this plugin? What does it do? Why do you need it? Can you do without it?

#13

It’s the plugin im trying to make, its a drawing plugin, in case you want to draw your own icons for a game or just for fun, wdym by “can you do without it”?

image
image804×526 57.9 KB

#14

Wait what?!?!

I thought you were creating a drawing game with a plugin, NOT creating a plugin for drawing.

So how can this show if there is not any ScreenGUIs?

1 Like
#15

Yeah, i said in the first line “Im making a drawing plugin”, now you got it

#16

Yah right, sorry should’ve paid more attention

#17

It’s all inside a frame called “WidgetContent”

#18

And how does this Frame render without a ScreenGUI?

#19

Usually when making plugins i just use this code:

--local TagS = game:GetService("CollectionService")
local Selection = game:GetService("Selection")
local toolbar = plugin:CreateToolbar("Draw")
local newScriptButton = toolbar:CreateButton("Icon Maker", 
	"Make your own icon", 
	"rbxasset://studio_svg_textures/Shared/InsertableObjects/Dark/Standard/Workspace@3x.png")
newScriptButton.ClickableWhenViewportHidden = true

local WindowContents = script.Parent.WidgetContent
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float, -- Widget will be initialized in floating panel
	false, -- Widget will be initially enabled
	false, -- Don't override the previous enabled state
	800, -- Default width of the floating window
	800, -- Default height of the floating window
	600, -- Minimum width of the floating window (optional)
	600 -- Minimum height of the floating window (optional)
)


local testWidget = plugin:CreateDockWidgetPluginGui("IconMaker", widgetInfo)
testWidget.Name = "Icon Maker"
local OpenW = testWidget.Enabled or false
--print(OpenW)
testWidget.Title = "Icon Maker"
WindowContents.Parent = testWidget



newScriptButton.Click:Connect(function()
	OpenW = not OpenW
	if OpenW then
		testWidget.Enabled = true
	else
		testWidget.Enabled = false
	end
end)

But i dont know how it renders, it just does
in any case, i will try switching it to ScreenGui to see what happens

#20

It’s just blank, i dont know how that works out but using a frame was the first way i found to make a plugin