Hi again, get ready for another suggestion! This one will involve the ScrollingFrame, let’s begin!
(Tools are copied from Satchel Playground and duplicated for demonstration purposes.)
You may already notice that if a player scrolls down a little bit, they’ll start seeing the attachments below.
So if you want to change that and you want it to look like the attachments below
Here’s how we can do it, but keep in mind this might cause some problems in some platforms like VR and XBox, so don’t forget to fix them. (If it turns out it actually has problems)
Code 1
We are going to change this
local MainFrame = nil
local HotbarFrame = nil
local InventoryFrame = nil
local VRInventorySelector = nil
local ScrollingFrame: ScrollingFrame = nil
local UIGridFrame: Frame = nil
local UIGridLayout: UIGridLayout = nil
local ScrollUpInventoryButton = nil
local ScrollDownInventoryButton = nil
To this, here we have added two instances/things; a UIListLayout, and a Frame called SpacingFrame
local MainFrame = nil
local HotbarFrame = nil
local InventoryFrame = nil
local VRInventorySelector = nil
local ScrollingFrame: ScrollingFrame = nil
local UIListLayout: UIListLayout = nil -- [[ADDED]]
local SpacingFrame: Frame = nil -- [[ADDED]]
local UIGridFrame: Frame = nil
local UIGridLayout: UIGridLayout = nil
local ScrollUpInventoryButton = nil
local ScrollDownInventoryButton = nil
Code 2
We are going to change this
local function UpdateScrollingFrameCanvasSize(): ()
local countX = math.floor(ScrollingFrame.AbsoluteSize.X / (ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS))
local maxRow = math.ceil((#UIGridFrame:GetChildren() - 1) / countX)
local canvasSizeY = maxRow * (ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS) + ICON_BUFFER_PIXELS
ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, canvasSizeY)
end
To this, here we have changed one line of code, which is the ScrollingFrame’s CanvasSize, I just added 35 into the code, 35 I believe is the most consistent, 36 is less consistent, and 40 is the most inconsistent but kind of looks fine (I tried my best to make ScrollingFrame’s CanvasSize constant), ehh I don’t know but moving on!
local function UpdateScrollingFrameCanvasSize(): ()
local countX = math.floor(ScrollingFrame.AbsoluteSize.X / (ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS))
local maxRow = math.ceil((#UIGridFrame:GetChildren() - 1) / countX)
local canvasSizeY = maxRow * (ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS) + ICON_BUFFER_PIXELS
ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, canvasSizeY + 35) -- [[EDITED/FORKED]], or 36 or 40, UDim2.new(0, 0, 0, canvasSizeY)
end
Code 3 (the longest code here)
We going to change this
local function UpdateBackpackLayout(): ()
HotbarFrame.Size = UDim2.new(
0,
ICON_BUFFER_PIXELS + (NumberOfHotbarSlots * (ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS)),
0,
ICON_BUFFER_PIXELS + ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS
)
HotbarFrame.Position = UDim2.new(0.5, -HotbarFrame.Size.X.Offset / 2, 1, -HotbarFrame.Size.Y.Offset)
InventoryFrame.Size = UDim2.new(
0,
HotbarFrame.Size.X.Offset,
0,
(HotbarFrame.Size.Y.Offset * NumberOfInventoryRows)
+ INVENTORY_HEADER_SIZE
+ (IsVR and 2 * INVENTORY_ARROWS_BUFFER_VR or 0)
)
InventoryFrame.Position = UDim2.new(
0.5,
-InventoryFrame.Size.X.Offset / 2,
1,
HotbarFrame.Position.Y.Offset - InventoryFrame.Size.Y.Offset
)
ScrollingFrame.Size = UDim2.new(
1,
ScrollingFrame.ScrollBarThickness + 1,
1,
-INVENTORY_HEADER_SIZE - (IsVR and 2 * INVENTORY_ARROWS_BUFFER_VR or 0)
)
ScrollingFrame.Position = UDim2.new(0, 0, 0, INVENTORY_HEADER_SIZE + (IsVR and INVENTORY_ARROWS_BUFFER_VR or 0))
AdjustHotbarFrames()
AdjustInventoryFrames()
end
To this, here we have made the ScrollingFrame’s Size to be the same height as the Inventory Frame, and we have made the ScrollingFrame’s Position to be completely Zero, or UDim2.new(0, 0, 0, 0). This is the part that could possibly cause problems with VR, but since I don’t have a headset (or VR headset), I don’t have a solution to fix the problem if I knew there was a problem, so keep note of that I guess, moving on
local function UpdateBackpackLayout(): ()
HotbarFrame.Size = UDim2.new(
0,
ICON_BUFFER_PIXELS + (NumberOfHotbarSlots * (ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS)),
0,
ICON_BUFFER_PIXELS + ICON_SIZE_PIXELS + ICON_BUFFER_PIXELS
)
HotbarFrame.Position = UDim2.new(0.5, -HotbarFrame.Size.X.Offset / 2, 1, -HotbarFrame.Size.Y.Offset)
InventoryFrame.Size = UDim2.new(
0,
HotbarFrame.Size.X.Offset,
0,
(HotbarFrame.Size.Y.Offset * NumberOfInventoryRows)
+ INVENTORY_HEADER_SIZE
+ (IsVR and 2 * INVENTORY_ARROWS_BUFFER_VR or 0)
)
InventoryFrame.Position = UDim2.new(
0.5,
-InventoryFrame.Size.X.Offset / 2,
1,
HotbarFrame.Position.Y.Offset - InventoryFrame.Size.Y.Offset
)
ScrollingFrame.Size = UDim2.new(
1,
ScrollingFrame.ScrollBarThickness + 1,
1,
0) -- -INVENTORY_HEADER_SIZE - (IsVR and 2 * INVENTORY_ARROWS_BUFFER_VR or 0) -- [[EDITED/FORKED]]
-- ) -- [[EDITED/FORKED]]
ScrollingFrame.Position = UDim2.new(0, 0, 0, 0) -- UDim2.new(0, 0, 0, INVENTORY_HEADER_SIZE + (IsVR and INVENTORY_ARROWS_BUFFER_VR or 0)) -- [[EDITED/FORKED]]
AdjustHotbarFrames()
AdjustInventoryFrames()
end
Code 4 (and Lastly)
We are going to change this
-- Make the ScrollingFrame, which holds the rest of the Slots (however many)
ScrollingFrame = NewGui("ScrollingFrame", "ScrollingFrame")
ScrollingFrame.Selectable = false
ScrollingFrame.ScrollingDirection = Enum.ScrollingDirection.Y
ScrollingFrame.ScrollBarThickness = 8
ScrollingFrame.ScrollBarImageColor3 = Color3.new(1, 1, 1)
ScrollingFrame.VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar
ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, 0)
ScrollingFrame.Parent = InventoryFrame
To this, here we have added two of the things/instances I have mentioned in Code 1; a UIListLayout, and a Frame called SpacingFrame, I have also finally added their properties here. (I tried my best to make SpacingFrame’s Size consistent as well)
-- Make the ScrollingFrame, which holds the rest of the Slots (however many)
ScrollingFrame = NewGui("ScrollingFrame", "ScrollingFrame")
ScrollingFrame.Selectable = false
ScrollingFrame.ScrollingDirection = Enum.ScrollingDirection.Y
ScrollingFrame.ScrollBarThickness = 8
ScrollingFrame.ScrollBarImageColor3 = Color3.new(1, 1, 1)
ScrollingFrame.VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar
ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, 0)
ScrollingFrame.Parent = InventoryFrame
UIListLayout = Instance.new("UIListLayout") -- [[ADDED]]
UIListLayout.SortOrder = Enum.SortOrder.LayoutOrder
UIListLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
UIListLayout.Parent = ScrollingFrame
SpacingFrame = NewGui("Frame", "SpacingFrame") -- [[ADDED]]
SpacingFrame.Selectable = false
SpacingFrame.Size = UDim2.new(1, 0, 0, 40)
--SpacingFrame.Position = UDim2.new(0, ICON_BUFFER_PIXELS, 0, 0)
SpacingFrame.Parent = ScrollingFrame
And there you go, that’s how we can achieve it. Here’s another place file if you wanna see how it works
Im_Andr3i’s Suggestions or Forks for Satchel 2.rbxl (654.5 KB)
What’s new in there is there’s a new TestBackpack ScreenGui thing that doesn’t work, an AllForks + ScrollingFrame Fork Script, and a ScrollingFrame Fork Script.
To see the changes I’ve made in a SatchelScript, use the Find feature by clicking the Find button or by pressing Ctrl/Control + G then type “Added” or “Edited/Forked”.
I hope this is helpful and don’t forget to take breaks, take care!
