Satchel // Open-source modern backpack system

WinnersTakesAll · July 4, 2023, 4:11am

Documentation | GitHub | Playground | Discord

“Satchel, a modern open-source alternative to Roblox’s default backpack.”

About

Satchel is a modern open-source alternative to Roblox’s default backpack. Satchel aims to be more customizable and easier to use than the default backpack while still having a “vanilla” feel. Installation of Satchel is as simple as dropping the module into your game and setting up a few properties if you like to customize it. It has a familiar feel and structure as to the default backpack for ease of use for both developers and players.

Features

Packed with much-needed features and changes the default backpack doesn’t have.

Modernized Familiar Feel

Satchel completely remakes the backpack’s UI to a uniform and vanilla feeling UI, blending in with other elements designed by Roblox.

Highly Customizable & Versatile

Satchel is highly customizable & adjustable with instance attributes support, allowing you to customize the behavior and appearance of over 10+ attributes. Please change the color, transparency, behavior, and more of its elegantly designed UI.

Improved Mobile Experience

Satchel expands on the mobile experience, doubling the number of slots, allowing players to not be disadvantaged.

Topbar Plus Support

Satchel supports Topbar Plus by 1ForeverHD, allowing users to open the inventory easily and more quickly.

250658604-95d22c15-0eec-4862-8f1c-8407fd325729

Playground

We provide an open-source playground of Satchel where you can test and play with Satchel before deciding to use it. See Satchel Playground on Roblox. Feel free to use the playground as a reference for how to use Satchel. Please download and modify it to your liking.

Installation

Installation of Satchel is easy and painless. Satchel is a drag-and-drop module that works out of the box and with easy customization. Below are different ways to get you to download and install Satchel.

Install from Creator Marketplace

Get the Satchel module from the Creator Marketplace.

Open Roblox Studio and create a new place or open an existing place.
Open or locate the Toolbox.

Open your Inventory from the Toolbox.

Search for Satchel created by WinnersTakesAll and click on it.

Toolbox

Insert Satchel into the Explorer and drag into StarterPlayerScripts.

Install from GitHub Releases

Download the Satchel.rbxmx file from Releases.

Open Roblox Studio and create a new place or open an existing place.
Go to the Explorer and right click on StarterPlayerScripts and click on Insert from file....

Select the Satchel.rbxmx you downloaded from GitHub and click Open.

Ensure that Satchel is in StarterPlayerScripts.

Documentation

Tip

Satchel has it’s very own documentation site you can visit. Find guides on how to get started and documentation. Below see a summary of Satchel.

Attributes

Satchel supports instance attributes allowing you to change and customize many aspects including various behaviors in a friendly easy-to-use interface without having to touch any code. Below see all attributes.

Attributes

Attribute	Description	Default
BackgroundColor3: `Color3`	Determines the background color of the default inventory window and slots.	`[25, 27, 29]`
BackgroundTransparency: `number`	Determines the background transparency of the default inventory window and slots.	0.3
CornerRadius: `UDim`	Determines the radius, in pixels, of the default inventory window and slots.	`0, 8`
EquipBorderColor3: `Color3`	Determines the color of the equip border when a slot is equipped.	`[255, 255, 255]`
EquipBorderSizePixel: `number`	Determines the pixel width of the equip border when a slot is equipped.	`5`
InsetIconPadding: `boolean`	Determines whether or not the tool icon is padded in the default inventory window and slots.	True
OutlineEquipBorder: `boolean`	Determines whether or not the equip border is outline or inset when a slot is equipped.	True
TextColor3: `Color3`	Determines the color of the text in default inventory window and slots.	`[255, 255, 255]`
TextSize: `number`	Determines the size of the text in the default inventory window and slots.	`14`
TextStrokeColor3: `Color3`	Determines the color of the text stroke of text in default inventory window and slots.	`[0, 0, 0]`
TextStrokeTransparency: `number`	Determines the transparency of the text stroke of text in default chat window and slots.	0.5

Methods

Satchel offers access to some of its internal methods and events for scripting purposes. Below see a table with all the methods available.

Methods

IsOpened(): `boolean`
Returns whether the inventory is opened or not.

SetBackpackEnabled(enabled: boolean): `void`
Sets whether the backpack gui is enabled or disabled.

GetBackpackEnabled(): `boolean`
Returns whether the backpack gui is enabled or disabled.

GetStateChangedEvent(): `RBXScriptSignal`
Returns a signal that fires when the inventory is opened or closed.

Latest Release Notes

Release notes for the latest release of Satchel:

NidhoGames · July 4, 2023, 4:50am

btw there is a typo where it says ‘Highly Customizable and Versitile’ just wanna let you know

WinnersTakesAll · July 4, 2023, 5:11am

Thanks for the keen eye. I’ve edited the topic to correct the misspelling.

Im_Andr3i · July 4, 2023, 6:32am

I have a couple of suggestions, and here is the list of suggestions I would like to suggest:

Add an attribute/option to toggle the SlotFrame’s AutoButtonColor in Satchel’s attributes (also set it as true on default because it looks better when the player is hold-clicking a SlotFrame).
Make the ToolTip’s CornerRadius to 0, 4 instead of 0, 8 (and maybe add a separate attribute/option to change the ToolTip’s CornerRadius, setting the ToolTip’s CornerRadius to 0, 8 looks odd in my opinion).
Add a UIPadding to ToolTips and SlotFrames

Overall I like this resource, and you should find a way to get rid of the warnings. Thank you for making this!

WinnersTakesAll · July 4, 2023, 6:37am

Thanks for all your feedback and I’m considering how to make the Tooltip corners less aggressive while keeping one attribute for ease of use but I’m confused on the following:

Can you please specify what exactly are the “warnings”?

Im_Andr3i · July 4, 2023, 6:42am

Well according to Script Analysis (not a plugin btw), there are 97 warnings found in Satchel’s ModuleScript.

WinnersTakesAll · July 4, 2023, 6:44am

They are expected for pre-release software and on release they all should be resolved or significantly reduced. For now they should not limit functionality or cause any problems.

xvywop · July 4, 2023, 6:52am

Will give it a try later, overall it looks pretty solid and i love the way you can edit it through attributes its original

SubtotalAnt8185 · July 4, 2023, 7:02am

This would be very suitable for our upcoming game, considering that the Roblox backpack is still using .Draggable.

I do have a suggestion. Add an attribute that determines if tool switching should be scroll-wheel based on PC. This would be useful for zoom-locked camera types, as well as first person modes, where scrolling is helpful for switching tools.

WinnersTakesAll · July 4, 2023, 7:25am

Satchel aims to be as close to the default backpack hence why it’s called “vanilla”.

Adding such feature would also be very niche in my opinion due to how it would be limited to only first-person and how it can cause potential confusion if people use it outside.

Nothing stops you from forking this Satchel and implementing your own version of you would prefer building off of this.

Im_Andr3i · July 4, 2023, 7:26am

It looks like that SlotFrame’s ToolName is bigger than SlotFrame’s Icon, you should change that and make them the same size

WinnersTakesAll · July 4, 2023, 7:45am

Hi, I’ve fixed your issue with ToolName not being the same size as ToolIcon with commit 1efd888 on our GitHub.

Additionally, I would like to notify that the tooltips are no longer as round as before with commit e71db22.

Thanks for your valuable feedback. The changes are live on our GitHub and will be included in Satchel’s next release.

VSCPlays · July 4, 2023, 10:50am

minor nitpick: I found your github repo before you posted it here

but great resource!

WinnersTakesAll · July 4, 2023, 10:58am

Just 2 days ago I finished documentation and adding some last-minute changes for pre-release. Only today I just wrote the DevForum topic.

NidhoGames · July 4, 2023, 6:31pm

oh sorry found another typo
‘Improved Mobile Experiance’
good module btw, love the strict typing

WinnersTakesAll · July 4, 2023, 9:44pm

Thanks for the report again. I’ve fixed the typo and ran a spellchecker to ensure they shouldn’t be any more misspellings.

chickbeefin665 · July 6, 2023, 3:11am

Hey this looks awesome! I have one question though and forgive me if you already went over this but, can you change the open backpack button because I hate pressing the ‘ button to open the backpack. Basically what I’m saying is can you bind the backpack to open when you press the “tab” key or something like that? Otherwise, great system!

pankii_kust · July 6, 2023, 4:26am

I was scratchin my head so much with disabling Tool keybind for Reinvent (one of the tool inventory system like this) because it isn’t actually designed to have unbinding event when the UI is hidden/disabled, it breaks after the Default backpack is enabled with the UI there

Also it would be nice if you add a boolean option to hide backpack and the bar like HideHotbar and UnbindButtons to this resource, i hate to actually disconnect every single connections each time i wanted to unbind keys.

thebrickplanetboy · July 6, 2023, 4:37am

Really good resource I really love how the UI resemble the Chat UI. Keep up the good work

WinnersTakesAll · July 6, 2023, 8:40am

Yes, you can modify the keybind to toggle the backpack.

Replace line 93 in SatchelScript with the below to set Tab to toggle the backpack.

local ARROW_HOTKEY = { Enum.KeyCode.Tab, Enum.KeyCode.DPadUp }

Note that you can replace Enum.KeyCode.Tab with any Enum.KeyCode to toggle the backpack.

Just a warning but Tab is already binded to the leaderboard so you should disable that behavior first.