Position of Frames doesn't fit when importing to another UI

Hello. I am creating a drawing game (not to share public, but just for practice), but, whenever I click on share (basically shares the drawing to all the server, it doesn’t position well. Here is the part that handles the positioning, and a video:
https://streamable.com/vo8i3n

function client_Event(username, drawingClone) -- Drawing clone is a table I sent from the server > client that includes separate tables (each for individual frame) with their properties.
	local mainFrame = game.Players.LocalPlayer.PlayerGui.Draw.Around.SharedDrawings.DrawTemplate:Clone();
	local drawFrame = mainFrame.Drawing;
	for _, v in ipairs(drawingClone) do
		local frame = Instance.new("Frame");
		frame.Parent = drawFrame;
		frame.Size = v.Size
		frame.Position = v.Position -- Here is where I position the newly created frame
		frame.BackgroundColor3 = v.BackgroundColor3;
		local uiCorner = Instance.new("UICorner", frame);
		uiCorner.CornerRadius = UDim.new(0, 50);
	end
	mainFrame.Parent = game.Players.LocalPlayer.PlayerGui.Draw.Around.SharedDrawings.Drawings;
	mainFrame.Username.Text = username
	mainFrame.Visible = true
end;

Don’t really know how to help soo much, but I think you’re getting the wrong Values.

for _, v in ipairs(drawingClone) do

Getting the table will only get the Gui values but they will not change into the gui itself? I’m just saying.
From what I see you’re saying that the Table Values resemble the properties of the Gui. Maybe somewhere there is wrong, can you show the table just to I not get mistaken

Here is the part where I send the table:

function on_Click()
	local remoteEvent = script.Parent:FindFirstChild("ServerCommunication");
	local tab = {};
	for _, v in ipairs(script.Parent.Parent.DrawArea:GetChildren()) do
		if not v:IsA("UICorner") then
			table.insert(tab, #tab + 1, {Size = v.Size, Position = v.Position, BackgroundColor3 = v.BackgroundColor3})
		end
	end
	if remoteEvent then
		remoteEvent:FireServer(tab)
	end
end;

All seems good. Are you making the paint appear correctly? You’re just Replicating the frame inside the Ui but the painting is not coming Together, I don’t really know but maybe you aren’t replicating the paint together with the frame, correct me if Im wrong.

I am positioning the frame the same way that the position I sent was.
I tried to do Position - AbsolutePosition but it didn’t work either.

What about try resizing the gui yourself to see what the problem is. The painting is just probally appearing smaller. Again correct me if I’m wrong

When you are positioning the frames when you are drawing them, are you using scale or are you using absolute position. From the video it looks like all of the frames in the drawing and in the shared frame have the exact same absolute position. You want to use scale instead.

The draw script is indeed using offset, how do I change this to scale? Here is the code that positions the frame on drawing:

clone.Position = UDim2.new(0, mouse.X, 0, mouse.Y) - UDim2.new(0, clone.Parent.AbsolutePosition.X, 0, clone.Parent.AbsolutePosition.Y)

UiScale.Scale probally, just look this information from the Api Reference:

The Scale property determines the multiplier used on the parent UI element’s GuiBase2d.AbsoluteSize. When set to 0.5, an AbsoluteSize of {0, 200}, {0, 50} becomes {0, 100}, {0, 25}. Similarly, when set to 2, such an AbsoluteSize would become {0, 400}, {0, 100}.

Maybe that’s what you want

Yes it needs to be scaled for it to work properly. Let’s try to convert it to scale. So scale is the first and third value parameter of Udim2.new. To calculate it I would find the absolute size of the drawing frame. Say the frame is 100,100 pixels wide. Then find the frame’s anchor point. Then when drawing subtract the anchor point of the drawing frame from the mouses position to find where the mouse is on the drawing frame. Now say you realize that the mouse is 50 pixels to the right on the X scale from the anchor point and 25 pixels down on the Y scale from the anchor point, we can convert it to scale. We said the frame was 100 pixels by 100 pixels, so we can calculate the X and Y scale. 50/100 = 0.5 for the x scale, and 20/100 = 0.2 for the Y scale. Now this is kind of confusing I will try to edit this to make it simpler.

I think I understood your point. Trying it rn

Is that supposed to work?

clone.Position = UDim2.new(mouse.X / clone.Parent.AbsolutePosition.X, 0, mouse.Y / clone.Parent.AbsolutePosition.Y, 0)

(Just updated it)

That’s not quite right. I just realized an easier way to do it than the post I did above. For both the drawing frame and the share frame did you size them using absolute position or scale position? Can you tell me the size for both of the two frames, knowing that I can help you change your code to fit it.

Should I use the older way that I used for positioning the draw frame?

Yes your old version works better. But if I know the size for the two frames (the drawing frame and the share frame) I can help you get the drawing right. Can you tell me the size for the two of them?

Edit: Wait I think I have enough info I’ll try to write you a new code.

Drawing frame size: {0.958, 0},{0.976, 0}
Share frame size: {0.949, 0},{0.923, 0} (The frame that has the drawing frames inside it)
And I don’t really need a new code, I just need a new way for positioning the frames to fit.

Basically what I am trying to do if figure out how much smaller the frame that appears in the top left corner when you press share is, than the share frame. Say the frame in the top left corner was half the size on both dimensions, then the absoulte position should be half of the size on both dimensions. If I knew the name of the frame in the top left corner then I could help you. Is the frame in the top left corner, the one that is coming out wrong, is that frame named drawFrame?

I don’t really understand. Could you please explain me what you want to be trying to do and I’ll implement it to fit?

I’m going to make a picture to make it easier to understand, give me like 10 minutes to draw it.

1 Like

I hope this helps I tried to explain it as best as I could. Basically we need to change the absolute position so that the image comes out scaled down. To find how much we need to change the absolute position we see how much larger frame b is than frame a: