How to size frame that is rotated

[BrokerBG (CODEX)]

I tried to animate a frame that is rotated but then I noticed that the frame doesn’t scale properly

This is the script:

  local targetSize = UDim2.new(0, 3,1, 10)

	local tweenInfo = TweenInfo.new(0.5)
	local tween = TweenService:Create(object, tweenInfo, {Size = targetSize})

	tween:Play()

Why does the frame do this?

And how to animate it properly!

[Vikko151]

Hello, @BrokerBG !

I think that the problem is that sizing only works on the screen’s XYZ and not on the part’s XYZ. For finding the solution, we need to do a proportion between the rotation and the size, so to scale the X Vector with the Y vector as it keeps your line’s proportion. However, another move will be required to keep your line’s width. I will study this so I can give you the good objective ?

I would be really happy to help you in this issue and if you can show me the animation you wanted, you can message me !

While I’m studying the issue, I’m waiting that someone answer my topic…

Best regards,

@Vikko151

[Vikko151]

Hello back, @BrokerBG !

I fixed the issue (normally) with what I understood. If you want to make a proportionnality like this :

Is this what you’ve waiting for ? If yes, here is the needed code for :

local targetSize = UDim2.new(0.334, 0, 1, 10)

local tweenInfo = TweenInfo.new(0.5)
local tween = TweenService:Create(object, tweenInfo, {Size = targetSize})

tween:Play()

If it wasn’t what you’ve waiting for, message me and please show me what you wanted with words, with pictures or with a video !

Best regards,

@Vikko151

[BrokerBG (CODEX)]

My goal I to make like a slash-screen effect. When The line stretches just to go down like that:

the line to stretches straight

[Vikko151]

Hello, @BrokerBG !

I see… I trough that you wanted to scale with a proportion effect, however you waited for a slash.

I think I’ve found what you was waiting for. Please stay up-to-date, I am searching.

Best regards,

@Vikko151

[Sleazel (Malcolm)]

GUI objects are automatically repositioned when they are scaled. To achieve the desired effect, you will need to tween BOTH Size and Position.

There are few considerations:

• Frame AnchorPoint should be set at 0.5,0.5. This is to ensure Your frame moves properly.
• Both frame initial and final Position and Size should only use scaling and not pixel offset. This is to ensure effect looks the same on all screen sizes.
• To properly calculate the object final position, since the frame is rotated, you will have to use mathemiatical sine and cosine function (math.sin(), `math.cos()), that you need to multiply final Position with. You may also use trial and error (as I did), but then you cannot have random slashes on screen. Finding a proper formula is not something I am very good at, but it is possible.
• Finally, rotated frames behave weird, consider other solution. Fullscreen ViewPortFrame with 3D objects just in front of camera will look really nice imho.

Now for the solution:

--initial settings, feel free to set them in explorer instead

object.AnchorPoint = Vector2.new(0.5,0.5)
object.Size = UDim2.new(0.001,0,0,0)
object.Position = UDim2.new(0.2,0,0,0)

local targetSize = UDim2.new(0.001,0,1.5,0)
local targetPosition = UDim2.new(0.03,0,0.5,0) -- that was trial end error approach
--local targetSize = UDim2.new(0, 3,1, 10)

local tweenInfo = TweenInfo.new(.5)
local tween = TweenService:Create(object, tweenInfo, {Size = targetSize, Position = targetPosition})

tween:Play()

EDIT: It seems that the final position will also depend on the screen aspect ratio, so there’s that.

I have found an alternative solution. Simply resize the frame both ways, while keeping it in the same spot. True, the frame will resize outside of the screen, but the player won’t notice the difference anyway. Just make sure Anchor point is at 0.5, 0.5.

object.AnchorPoint = Vector2.new(0.5,0.5)
object.Size = UDim2.new(0.001,0,0,0)

local targetSize = UDim2.new(0.001,0,1.5,0)

local tweenInfo = TweenInfo.new(.5)
local tween = TweenService:Create(object, tweenInfo, {Size = targetSize})

tween:Play()

[BrokerBG (CODEX)]

@Vikko151
@Sleazel

Thank you so much for the help!!