What do you want to achieve?
I want to have a notification system that goes up as new ones are added, and tweens the same distance on all devices.
What is the issue?
On my device, when I tween all the notifications up, it looks fine with the proper amount of space like this.
When I switch to different devices, the distance increases or decreases. For example: On an iPad 2, it looks like this
How can I make it have the same amount of distance as it does in the first image?
What solutions have you tried so far?
I tried messing around with the tween position settings including making it reduce by offset instead of scale however this did not give the exact result I was looking for.
Script doing the tweening:
local newgoal = {Position = UDim2.new(0.76, 0, oldgoal.Y.Scale - 0.049, 0)}
local twen = ts:Create(v, tinfo1, newgoal)
twen:Play()
I have a UIAspectRatioConstraint made by the autoscale plugin to make the size of the GUI the same on all devices which looks like this:
(Side Message is the object I clone then tween)
The actual script works fine and the notifications move up as I want them on my device, the problem is I’m not sure how to make it subtract the same amount of space on other devices. Please let me know if there is more info you need to help. Thank you!
I suggest not using the Scale properties of UDim2s. They’re better used only for attaching UI elements to the edges of your screen, or the center. Use Offsets instead.
Setting the elements’ AnchorPoint property manually also helps. AnchorPoint defines the center of the elements. Try using (1, 1) for your case.
local newgoal = {Position = UDim2.new(1, 0, 1, -40)}
local tween = ts:Create(v, tinfo1, newgoal)
tween:Play()
This “use Offsets” also applies to elements’ Sizes. You can use the Scale to stretch the axis of an element to the width/height of your screen, and Offsets to adjust its width/height independent of your window’s current size.
I tried what you suggested, but it did not seem to make much of a difference. These are the sizes and positions of the original GUI that I’m cloning (after I changed them similar to how you suggested including setting the anchor point)
Currently its off screen because the tween comes from off the screen. Again I changed the values a small amount to get the proper spacing which looks fine on my screen but much spacier on others.
I edited the script a bit too. I should’ve mentioned but my script clones the GUI, moves it to a fixed position, and then when a new clone is added, it moves all the existing clones, up by a fixed amount according to their existing position.
Script:
local goal = {Position = UDim2.new(1, -15,1, -20)} --fixed position I set new clones to after changing it with your tips
local tween = ts:Create(newmessage, tinfo, goal)
goaltable[newmessage] = UDim2.new(1, -15,1, -20) --adding it to table to subtract from
tween:Play()
for i,v in pairs(sidegui.Parent.SideMessages:GetChildren()) do
if v == newmessage then
elseif v.Deleting.Value == false then
print(v)
local oldgoal = goaltable[v]
local newgoal = {Position = UDim2.new(1, -15, 1, oldgoal.Y.Offset -34)} -- subtracting 34 pixels from the position it gets.
local twen = ts:Create(v, tinfo1, newgoal)
twen:Play()
goaltable[v] = newgoal.Position
end
end
The positions In the above code are after I tried changing them according to the example you gave. If you would like the original positions I used with scale, please let me know.
Results after changing it:
My Screen
iPhone X
Please let me know if I did not do it properly or am missing something. Thank you.
Maybe it’s the UIAspectRatioConstraint. Perhaps you can place the notification bars under a Frame with one UIAspectRatioConstraint instead of having one for each TextLabel (p.s. I’m not familiar with this constraint object as I’ve scratched my head too deep to understand how they work, and in the end I barely did.)
By the way, I reviewed your code and I have a small suggestion about your tweens: Tweens are reuseable. You can store two tweens that hide and show the GUI instead of making new ones every time.
You were right!.. Sort of… I did what you said and put the original and clones under a frame with the UIARC. I made a frame and set the size of it to (1,0,1,0) so that it would cover my entire screen as shown:
(I made it transparent)
I changed the positions in the script and the position of the original back to what I had it originally and on my screen it looks like how it should :
and on the iPad 2 it looks like this:
The space between them and the size of it look just how I wanted it to, however the whole thing has moved upwards. (The one at the very bottom is the offscreen original which Clone)
Furthermore, I looked the frame and saw it looked like this:
You can also apply the same techniques on the frame with its AnchorPoint, although I’m not entirely sure about your true purpose with a UIAspectRatioConstraint (personally speaking, I never use them).
The AnchorPoint of the frame should be (0, 1), and its position can be (0, 0, 1, 0).
The AnchorPoint of a GUI object defines its center, relative to its AbsoluteSize (similar to Pivots of Parts). You can think of a thumbtack anywhere on a piece of paper and moving both the tack and the paper around a corkboard. The thumbtack is the AnchorPoint.
The Scale of a GUI object’s size/position is its position relative to the window/viewport’s size, and the Offset is based on individual pixels.
Combining the two makes GUI designing much easier. If you were to snap a Frame to the left side of the screen with a width of 200 pixels while allowing 100 pixels for the user’s view on its top and bottom sides, you can do:
This made a lot of sense and helped me understand it a bit better. So where would the thumbtack be on this supposed piece of paper if we set the anchorpoint to (1,1)? Would it be in the bottom right corner of the paper?
