How do I script this puzzle into my GUI?

[Yo2uber99 (SkullGamer97_YT)]

I want to add these Puzzles into my GUI but I don’t know how to script “Puzzle 1”.

I need help with scripting “Puzzle 1”

Puzzle 1:

• Explanation: The blue line moves from side to side, when the blue part is in the green area(frame) then the player can click a button. If the button is press and blue line is in green area then it will stop and the code/script will run a function.

• picture example:
  

  

Puzzle 2:

• picture example:
  
  

Puzzle 3:

• picture example:
  
  

[astraIboy (The Batman)]

For puzzle two you said what it had to do when they are all green but never explained how the player is supposed to turn them green, by clicking them?

[Yo2uber99 (SkullGamer97_YT)]

Yes puzzle 2, your supposed to click the red button to turn it green.

[exwumm (exwum)]

You could try using GuiBase2d.AbsolutePosition to grab the position of both elements, and while the bar moves or while it’s being clicked, figure out if it’s in a X pixel that’s occupied by the green zone.

For example, if the zone’s AbsolutePosition is 600,900, and its size is {0,200,0,50}, it means that if the bar’s X AbsolutePosition is between 600 and 800, it’s in the green zone. (AbsolutePosition, as far as I know, takes its position from the top left corner of the gui object, not the centre.)

[astraIboy (The Batman)]

Well for the first puzzle you can have a frame let’s call that bar and then for the main line we can also have another frame, lets just call that line

So this would be the hierachy of our current setup

Also make sure that they are both using scale, and set the anchor point of both of them to .5 on both axis

You’ll notice if you check the position of the line frame, that when it’s completely to the left it will be at 0, when it’s completey to the right its at 1

LEFT

RIGHT

So now knowing this we can have a loop that continously adds to the position of the bar to the left until it reaches 1, and then go back to 0 and so on, and that would be the logic for the main line moving

For the green button that has to pressed in order for the puzzle to be completely youd put the green button as a child of the bar frame we created and make sure the green button has a anchor point of .5 on both axis and also make sure its using scale

When the button is pressed you would just do something to take into account the size and position of the green button and see if the line inside of it!

Here is the final hierachy

[msix29]

For puzzle one:

• Make a main frame that will be the diagonal black frame.
• Add blue line and make it move horizontally over and over, you can use tweening to animate it.
• Add the green frame, to check if the blue line is inside the green frame, do:

local positionDelta = greenFrame.AbsolutePosition - blueFrame.AbsolutePosition
local isInFrame = positionDelta.X > 0 and positionDelta.X < greenFrame.AbsoluteSize.X
-- Absolute position is the top left corner of the GuiObject.
-- Larger than 0 to make sure it's on the right.
-- Smaller than the green frame's size to make sure it's inside it.
-- We don't need to check for Y-axis!

if not isInFrame then return end

-- If the blue line is inside the green frame, run the code u want.

---

For puzzle two:

• Create a class (or function, if you don’t know OOP) that takes in a button and handles the logic for toggling between green and red when it ges clicked.
• Create as many buttons as needed and store them in a table, when a button’s color changes, do:

local buttons = {} -- Fill this as you want.

for i, v in ipairs(buttons) do
	handleButton(v) -- Handles color changing logic, do it as you prefer.
	
	v:GetPropertyChangedSignal("BackgroundColor3"):Connect(function())
		if v.BackgroundColor3 == Color3.fromRGB(255, 0, 0) then return end -- If this button is red, don't proceed, helps with performance

		for i, v in ipairs(buttons) do -- Loop through all buttons
			if v.BackgroundColor3 == Color3.fromRGB(255, 0, 0) then return end -- If a button is red, stop everything			
		end

		-- Run the function you want here
	end)
end

---

For puzzle 3:

• Again, class or function to handle the main logic which is as follow.
• The middle part is a button, when it gets clicked, the charger percentage increases until it gets released or reaches 100%.
• The green part can just be sized as UDim2.fromScale(x, percentage / 100).
• Store them in a table again and check the green part’s size, or percentage if u have it saved, when all of them are full, run your function.

---

I gave code examples where I thought it was needed, note that this code wasn’t tested but should theoretically work or at least point you in the right direction.

That’s all for me, good luck.