How do I completely cover this black space with UI?

Help and Feedback Art Design Support
#1

This is a fairly easy question yet I can’t understand this

image
image1470×530 172 KB

Black rectangle: SizeConstraint XY .7,0,.25,0
White square in the black rectangle: SizeConstraint YY 1,0,1,0

Without overflowing, how would I fill the black space with a frame inside the black rectangle?

1 Like
#2

I’m not sure what you are trying to do. Is it one of these?

  1. Fill the rectangle in the X direction, but overflow in the Y direction such that the white frame has a 1:1 aspect ratio
  2. Fill the rectangle with copies of the frame in the X direction
    2.1 …and don’t display more white frames than fit in the rectangle, so there will be some black at the end
    2.2 …and display more white frames than fit in the rectangle, so one white frame will overflow
    2.3 …and display more white frames than fit in the rectangle, but cut off with ClipsDescendants
  3. Fill the rectangle with a white frame of exactly the same size (such that the white frame will not be a square)

Could you provide an extended/better explanation, or point out which one of these it is if one of these fits the description?

#3

image

Fill this entire space without any overflow.

#5

I realize now that you want to cover that black space with a new frame.

I can’t think of a way to do this without any scripting. None of the GUI properties or UI Constraints I can think of will let you subtract a Y scale from an X scale (or vice versa).

You could use a simple script such as the following to accomplish it:

local gui = script.Parent  -- new frame you want to cover the space
local base = gui.Parent  -- black rectangle

local function update()
	gui.Size = UDim2.new(1, -base.AbsoluteSize.y, 1, 0)
end

update()
base:GetPropertyChangedSignal("AbsoluteSize"):Connect(update)

Ideally you would put this programming somewhere else (like whatever script does all of that gui’s programming), but to test it out I put it in a LocalScript in the new frame. Here’s the file: XScaleMinusYScale.rbxl (13.9 KB)

#6

Got a super hacky strategy.

Have “half” of the UI be stretched at XY (from the end) and have the other UI be YY after the square. They would overlap each other but still gets the job done.