Embedded Files
Best Practices
Best Practices
Server Sided Plugin Modifications should be placed and fully contained inside of the Plugins folder in ServerScriptService. Developers should avoid placing any server sided modifications outside of this folder so that bugs can be easily found & removed and features can be easily updated or removed.
Accessing The Framework
Accessing The Framework
Accessing The Server Framework is through the following method in any ServerScript:
local N1ServerFramework = game:GetService('ServerScriptService'):WaitForChild('N1_ServerFramework', 3)
Then, the default binds are found in the following directory.
local DefaultBinds = N1ServerFramework:WaitForChild('DefaultBinds')
The default binds are where the default N1 core Events & Functions are found. These relate primarily to Data & Character Appearance handling. They are as follows:
'PlayerLoadedSlot', 'PlayerDataLoaded', 'PlayerDataSaved', 'CharacterDressed' - BindableEvents
'ForceSavePlayerSlot', 'ForceSavePlayerData', 'DeleteSlot', 'DressCharacter' - BindableFunctions
Default Bindables
Default Bindables
"PlayerLoadedSlot" : BindableEvent
Fired whenever a Player's Slot Data is loaded by the N1 Server.
Useful for ensuring that certain values exist inside of a Player's Slot and adding them to the main datastore without modifying core components of the framework.
local PlayerLoadedSlot = DefaultBinds:WaitForChild('PlayerLoadedSlot')
Default Functions
Default Functions
"ForceSavePlayerSlot" : BindableFunction
Forcefully saves the slot data of a given player on the server.
local ForceSavePlayerSlot = DefaultBinds:WaitForChild('ForceSavePlayerSlot')
Service Registry
Service Registry
"GetService" : BindableFunction
Global N1 default service registry function. Used to obtain core N1 services from the global module.
local _HousingService = DefaultBinds:WaitForChild('GetService'):Invoke('HousingService')
"HousingService" : N1 Service
The global housing service handled by the N1 engine. Allows generation, deletion, manipulation & saving of house data on a game.
local _HousingService = DefaultBinds:WaitForChild('GetService'):Invoke('HousingService')
N1 UI Service
N1 UI Service
N1 UIService is a modular UI framework designed for the N1 game framework.
It provides a structured and scalable way to dynamically generate UI elements such as menus, buttons, sliders, and text boxes.
It is created in such a way that players can easily create new UI themes for the entire game without needing to overhaul major systems, whilst also being able to produce UI packs & reworks that best suit various audiences and visual aesthetics for games that may be using the N1 Engine.
The system uses a builder pattern to create UI menus called OptionsLists, allowing developers to chain commands for clean UI construction.
It can be accessed using the following script:
local UIService = reqruire(game:GetService('ReplicatedStorage'):WaitForChid('CoreClientSettings'):WaitForChild('UIService')
Architecture Overview
Architecture Overview
UIService relies on the following structure inside ReplicatedStorage:
ReplicatedStorage
└ CoreClientSettings
└ N1v1_UISettings
├ Bank
│ ├ DefaultBack
│ ├ DefaultButton
│ ├ DefaultSlider
│ ├ DefaultTwinButtons
│ ├ DefaultImageDisplay
│ ├ DefaultTextBox
│ └ DefaultTopLabel
│
├ Icons
│ └ (icon ImageLabels)
│
└ MaxListContent (NumberValue)
Bank
Bank
Contains UI templates used to generate elements.
Each element must follow the naming convention:
Default<Type>
Example:
DefaultButton
DefaultSlider
DefaultTextBox
Icons
Icons
Stores icon ImageLabels used when assigning icons to UI elements.
MaxListContent
MaxListContent
Defines the maximum number of UI elements that can appear before the menu automatically enables scrolling.
Core Concepts
Core Concepts
OptionsList
OptionsList
An OptionsList is the main UI container used to display menus.
It automatically handles:
UI layout
scrolling
animations
element stacking
overflow detection
Creating an OptionsList
Creating an OptionsList
OptionsList(Parent, Size, Position, Alignment)
Parameters
Parameters
Parent - Instance
Parent UI container
Size - UDim2
Optional custom size
Position - UDim2
Position of the UI
Alignment - string
"Left", "Center", or "Right"
Returns
Returns a Builder Object used to construct the menu.
Returns
Returns a Builder Object used to construct the menu.
Example
Example
local Menu = UIService.OptionsList(
PlayerGui.ScreenGui,
nil,
UDim2.new(0.75,0,0.25,0),
"Right"
)
Builder Methods
Builder Methods
All UI elements are created using the Builder pattern as follows:
TopLabel
Creates a top label element.
:TopLabel(Text)
TopLabel
Creates a top label element.
:TopLabel(Text)
Example
Menu:TopLabel("Bank Menu")
Example
Menu:TopLabel("Bank Menu")
Notes:
Only one TopLabel can exist per OptionsList.
It is automatically placed at the top.
Button
Creates a standard button.
:Button(Name, Icon, Color)
Button
Creates a standard button.
:Button(Name, Icon, Color)
Parameters
Parameters
Name - string
Button label
Icon- string
Icon name from Icons folder
Color - Color3
Highlight color
Example
Menu:Button(
Example
Menu:Button(
"Deposit",
"Money",
Color3.fromRGB(0,200,0)
)
Slider
Slider
Creates a slider UI element. The sliding system for the slider UI element is already prepared.
:Slider(Name, Icon, Color)
Parameters
Name - string
Button label
Icon- string
Icon name from Icons folder
Color - Color3
Highlight color
Example
Menu:Slider(
Example
Menu:Slider(
"Transfer Amount",
"Money",
Color3.fromRGB(255,200,0)
)
Scroller
Scroller
Creates a Left/Right scroller UI element. The prescribed button names should be "LeftButton" and "RightButton".
:Scroller(Name, Icon, Color)
Parameters
Name - string
Button label
Icon- string
Icon name from Icons folder
Color - Color3
Highlight color
Example
Menu:Scroller(
Example
Menu:Scroller(
"Shirt (1/50)",
"Shirt",
Color3.fromRGB(255,200,0)
)
TwinButtons
Creates a two-button confirmation UI.
TwinButtons
Creates a two-button confirmation UI.
:TwinButtons(A, B, Color)
Parameters
Parameters
A- string
Button label
B- string
Button label
Color - Color3
Highlight color
Example
Menu:TwinButtons(
Example
Menu:TwinButtons(
"Confirm",
"Cancel",
Color3.fromRGB(255,0,0)
)
TextBox
TextBox
Creates a text input UI.
:TextBox(Name, Icon, Color)
Example
Example
Menu:TextBox(
"Recipient",
"User",
Color3.fromRGB(255,255,255)
)
ImageDisplay
ImageDisplay
Creates an image display UI element.
:ImageDisplay(Name, Icon, Color)
Example
Example
Menu:ImageDisplay(
"Bank Logo",
"Bank",
Color3.fromRGB(255,255,255)
)
Opening The OptionsList
Opening The OptionsList
Menu:Open()
The UI will:
fade in
slide from the alignment direction
Animation uses:
Exponential easing
Closing The OptionsList
Closing The OptionsList
Menu:Close()
The UI will:
fade out
slide away toward its alignment side.
Destroying The OptionsList
Destroying The OptionsList
Menu:Destroy()
Completely removes the UI from memory.
Accessing Button Events
Accessing Button Events
Every button created internally returns a structure containing:
{
Clicker = ButtonObject,
Body = UIInstance,
Type = UIType
}
Example:
local Btn = Menu:Add("Button","Deposit")
Btn.Clicker.MouseButton1Click:Connect(function()
print("Deposit pressed")
end)
Automatic Layout System
Automatic Layout System
UIService automatically manages layout using:
UIListLayout
Elements are stacked vertically with spacing.
Automatic Scrolling
Automatic Scrolling
If the number of elements exceeds:
MaxListContent
The system automatically converts the list into a ScrollingFrame.
Example:
MaxListContent = 6
If more than 6 elements exist, scrolling activates automatically.
Theme Modification
Theme Modification
Color is applied dynamically using special object names inside templates.
Highlight Frame
Highlight Frame
Frame named "Highlight"
Highlight.BackgroundColor3 = Color
Highlight Button
Highlight Button
TextButton named "HighlightButton"
Highlight Text
Highlight Text
TextLabel named "HighlightTextLabel"
Highlight Image
Highlight Image
ImageLabel named "HighlightImageLabel"
Icon System
Icon System
Icons are assigned using the Icons folder.
Icons
├ Money
├ Bank
└ User
When an icon is passed:
:Button("Deposit","Money")
UIService finds:
Icons.Money.Image
and applies it to all ImageLabels in the element.
Example Full Menu
Example Full Menu
local Menu = UIService.OptionsList(
PlayerGui.ScreenGui,
nil,
UDim2.new(.75,0,.25,0),
"Right"
)
:TopLabel("Bank")
:Button(
"Deposit",
"Money",
Color3.fromRGB(0,200,0)
)
:Button(
"Withdraw",
"Money",
Color3.fromRGB(200,0,0)
)
:Slider(
"Transfer Amount",
"Money"
)
:TextBox(
"Recipient",
"User"
)
:TwinButtons(
"Confirm",
"Cancel",
Color3.fromRGB(255,0,0)
)
Menu:Open()
UIService automatically provides:
Dynamic layout
Scroll detection
Animation
Highlight coloring
Icon injection
Menu builder pattern
UI scaling
UI overflow management
Best Practices
Best Practices
Use chained building
Use chained building
Good:
Menu
:TopLabel("Bank")
:Button("Deposit")
:Button("Withdraw")
Avoid creating elements separately unless necessary (i.e you need to script functions for each button inside each element that do different things).
Keep templates consistent
Keep templates consistent
All UI templates must follow the naming structure:
Default<Type>
Example:
DefaultButton
DefaultSlider
DefaultTextBox
Page updated
Google Sites
Report abuse