Satchel // Open-source modern backpack system

Hi, I have three suggestions and the last suggestion here in this post is something you should consider changing in your script, let’s begin!

Suggestions

Change the ScrollingFrame's BorderSizePixel to 0

Problem:
There’s a weird line that appears next to the Scrollbar whenever the player is Scrolling on a Computer or Mobile. (Tools are copied from Satchel Playground and duplicated for demonstration purposes.)

Video

This is because the ScrollingFrame’s BorderSizePixel is not set to 0, rather it is set to 1.

-- 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

New Changes
To fix this, we have to set the ScrollingFrame’s BorderSizePixel to 0.
Code

-- 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.BorderSizePixel = 0 -- [[ADDED]]
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

See that weird black line next to the scrollbar has finally disappeared below, now I can relax without worrying about that anymore.
Video

Add TextTruncate to ToolName (No attachments because it's self-explanatory)

Previous Changes
Code

ToolName = NewGui("TextLabel", "ToolName")
ToolName.Size = UDim2.new(1, -SLOT_EQUIP_THICKNESS * 2, 1, -SLOT_EQUIP_THICKNESS * 2)
ToolName.Position = UDim2.new(0.5, 0, 0.5, 0)
ToolName.AnchorPoint = Vector2.new(0.5, 0.5)
ToolName.Parent = SlotFrame

New Changes
Code

ToolName = NewGui("TextLabel", "ToolName")
ToolName.Size = UDim2.new(1, -SLOT_EQUIP_THICKNESS * 2, 1, -SLOT_EQUIP_THICKNESS * 2)
ToolName.Position = UDim2.new(0.5, 0, 0.5, 0)
ToolName.AnchorPoint = Vector2.new(0.5, 0.5)
ToolName.TextTruncate = Enum.TextTruncate.AtEnd -- [[ADDED]]
ToolName.Parent = SlotFrame
Better OnUISChanged (or Keyboard Status, this one might be complicated)

Problem:
Whenever a player goes using Keyboard whilst on Mobile, the hotkey labels (or SlotNumbers) appear, but if they go back into Touch (by using their hands or paws), the hotkey labels never disappear

Video

Code 1 (Optional, I recommend ignoring the mouse part)

local GAMEPAD_INPUT_TYPES: table = { -- These are the input types that will be used for gamepad
	[Enum.UserInputType.Gamepad1] = true,
	[Enum.UserInputType.Gamepad2] = true,
	[Enum.UserInputType.Gamepad3] = true,
	[Enum.UserInputType.Gamepad4] = true,
	[Enum.UserInputType.Gamepad5] = true,
	[Enum.UserInputType.Gamepad6] = true,
	[Enum.UserInputType.Gamepad7] = true,
	[Enum.UserInputType.Gamepad8] = true,
}

Code 2

local function OnUISChanged(property: string): ()
	if property == "KeyboardEnabled" or property == "VREnabled" then
		local on = UserInputService.KeyboardEnabled and not UserInputService.VREnabled
		for i = 1, NumberOfHotbarSlots do
			Slots[i]:TurnNumber(on)
		end
	end
end

Code 3

-- Listen to keyboard status, for showing/hiding hotkey labels
UserInputService.Changed:Connect(OnUISChanged)
OnUISChanged("KeyboardEnabled")

Video

New Changes
To fix this, we have to make a better one

Code 1 (Optional, I recommend ignoring the mouse part)

local MOUSE_INPUT_TYPES: table = { -- These are the input types that will be used for mouse -- [[ADDED]], Optional
	[Enum.UserInputType.MouseButton1] = true,
	[Enum.UserInputType.MouseButton2] = true,
	[Enum.UserInputType.MouseButton3] = true,
	[Enum.UserInputType.MouseMovement] = true,
	[Enum.UserInputType.MouseWheel] = true,
}

local GAMEPAD_INPUT_TYPES: table = { -- These are the input types that will be used for gamepad
	[Enum.UserInputType.Gamepad1] = true,
	[Enum.UserInputType.Gamepad2] = true,
	[Enum.UserInputType.Gamepad3] = true,
	[Enum.UserInputType.Gamepad4] = true,
	[Enum.UserInputType.Gamepad5] = true,
	[Enum.UserInputType.Gamepad6] = true,
	[Enum.UserInputType.Gamepad7] = true,
	[Enum.UserInputType.Gamepad8] = true,
}

Code 2

local function OnUISChanged(): () -- [[EDITED/FORKED]]
	-- Detect if player is using Touch
	if UserInputService:GetLastInputType() == Enum.UserInputType.Touch then
		for i = 1, NumberOfHotbarSlots do
			Slots[i]:TurnNumber(false)
		end
		return
	end

	-- Detect if player is using Keyboard
	if UserInputService:GetLastInputType() == Enum.UserInputType.Keyboard then
		for i = 1, NumberOfHotbarSlots do
			Slots[i]:TurnNumber(true)
		end
		return
	end

	-- Detect if player is using Mouse (Optional, I recommend ignoring the mouse part)
	for _, mouse in pairs(MOUSE_INPUT_TYPES) do
		if UserInputService:GetLastInputType() == mouse then
			for i = 1, NumberOfHotbarSlots do
				Slots[i]:TurnNumber(true)
			end
			return
		end

		-- Detect if player is using Controller
		for _, gamepad in pairs(GAMEPAD_INPUT_TYPES) do
			if UserInputService:GetLastInputType() == gamepad then
				for i = 1, NumberOfHotbarSlots do
					Slots[i]:TurnNumber(true)
				end
				return
			end
		end
	end
	
	--[[
	if property == "KeyboardEnabled" or property == "VREnabled" then -- replaced
		local on = UserInputService.KeyboardEnabled and not UserInputService.VREnabled
		for i = 1, NumberOfHotbarSlots do
			Slots[i]:TurnNumber(on)
		end
	end
	]]
end

Code 3

-- Listen to keyboard status, for showing/hiding hotkey labels
UserInputService.LastInputTypeChanged:Connect(OnUISChanged) -- [[EDITED/FORKED]], formerly UserInputService.Changed:Connect(OnUISChanged)
OnUISChanged()

Video


Here are all of the changes/suggestions in one Video

(Tools are copied from Satchel Playground and duplicated once again for demonstration purposes.)

and here’s the place file if you wanna try it out yourself.
Im_Andr3i’s Suggestions or Forks for Satchel.rbxl (471.1 KB)


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’m sure you can do the suggestions better than I and I’m planning to suggest another thing again so happy developing y’all! (Fun fact: I don’t have Github so I’m posting my suggestions here.)

2 Likes