Beginner’s Guide to Roblox Frameworks

Are you an experienced software developer? The first thing you probably did was look for Roblox Frameworks or some open source projects to help accelerate your game development efforts. If not, that’s ok – we all take different paths to learn new things. 

Here we’ll cover a few essential open-source Roblox frameworks and libraries to boost your productivity and make amazing games.

It’s time to enhance your coding skills with professional tools!

Benefits of using Visual Studio Code

When you first started using Roblox Studio you probably got frustrated when it crashed on you while working on your project. 

Don’t lose all your hard work.

Using Visual Studio Code gives you the power of a mature development environment that includes lots of extensions to boost your productivity.

Better collaboration with Git source control

One of the main benefits of using Visual Studio Code is source control. We can use Rojo to import our code into Roblox Studio to execute while saving our changes using git.

Git is the best source control program available that allows developers to collaborate with one another across the internet. Using Github or Bitbucket allows you to share and collaborate with other developers anywhere in the world.

Check out these guides from Atlassian to learn more about how to use git.

Check out my Effective git tips for more!

Code confidence with testing

Another great reason to use an external editor such as VS Code is having the ability to write unit tests. While not the most exciting code to write, unit tests give you confidence that your code is working as expected. Roblox provides its own unit testing framework called TestEZ.

We can use Lua linters to also show us any errors in our code before it’s even imported to Roblox Studio. You can lint your scripts using Luacheck as well as do static code analysis. Make sure to use Roblox-luacheck to properly inspect your Roblox scripts. Static code analysis will show you which lines could use improvement to reduce bugs. 

The Selene project is also another great static analysis and linter tool you can use.

Use Stylua as a git hook or a manual command to keep your code style consistent. 

Roblox Lua module packages and documentation

Once your project gets big enough it makes sense to package reusable modules that you can use in future projects. Wally is very similar to node’s npm tool and allows you to easily package your modules.

Need a way to generate Lua documentation for your modules? Check out Moonwave. Moonwave can also generate a website for your documentation.

Are you fluent in Typescript? Use roblox-ts to transpile Typescript into Lua.

Useful Roblox Visual Studio extensions

• vscode-rbxlua – syntax highlighting
• Roblox Lua autocomplete – quickly generate templated code
• Roblox API Explorer – hints and descriptions for Roblox APIs
• TestEZ Companion – run unit tests and get test results in VS Code

Using these tools speeds up your development by giving you quick feedback through linters and syntax highlighting.

How to setup Visual Studio Code with Rojo & Roblox Studio

What is Rojo?

Rojo is a tool that connects your editor of choice (Visual Studio Code) with Roblox Studio. It will import your code through a server on your computer.

Get started quickly by installing the Rojo VS code extension.

If you prefer not to use VS Code, Rojo has standalone binaries to run its server for you.

While Team Create is great when first starting, it’s best to keep things isolated between each team member. I’d recommend using git to manage your scripts and game assets.

If you ever decide to abandon using Rojo, you can simply edit your game in Roblox Studio directly after all scripts have been imported.

Build better games with the Knit Roblox Framework

Why use the Knit Framework?

Software architecture is very important when building complex game projects. The Knit Roblox Framework makes it much easier to work with client and server scripts. 

The Knit framework is not just for Visual Studio Code users but also works for those using only Roblox Studio. You can use Knit directly by adding the module to your project.

As long as you understand how Roblox games work when using remote events and functions, the Knit framework takes care of these connections so you can focus on your game features.

Knit Services define all server-side logic to interact with Roblox components only accessible from the server. 

Knit controllers define all client-side logic to interact with Roblox components you’d normally use in a LocalScript.

Instead of using a chain of callbacks to connect the client to server logic, we can use Promises. A promise is an object that returns a value in the future (as promised, get it?) or throws an error when the promise fails (sometimes promises get broken, unfortunately).

We can also create middleware with Knit which is especially useful for debug logging or ensuring input data gets sanitized before any service begins to process the data.

How to use the Knit Roblox Framework

Now that we understand how the Knit Roblox Framework helps us, let’s learn how to use it.

Before going any further, I’d recommend getting familiar with Roblox Data Stores.

Knit stitches the connection between the client and server. We can build standalone game services such as those used for in-game currency or game passes and connect the client by using Knit’s services and controllers.

Knit Service Example

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local BankService = require(ReplicatedStorage:WaitForChild("BankService"))
local KnitBankService = Knit.CreateService { Name = "KnitBankService", Client = {} }

Check out my guide on in-game currencies to review the internals of BankService.

The Name field is required and used to reference the Knit service, as you’ll soon see.

The Client field in the Knit service constructor is optional and allows us to include client-side functions. Client-side functions let you use Knit services from LocalScripts.

function KnitBankService:GetPlayerBalance(player)
  local playerId = player.UserId
  local balance = BankService:GetPlayerBalance(playerId)
  return balance
end

Each Knit service gets created as a ModuleScript. In this example, we can now get a player’s bank balance from a Knit controller or other Knit service.

Knit Controller Example

For some useful client-side scripts, check out my guide on different examples of how to work with Roblox Humanoid.

local Players = game:GetService("Players")
local CameraController = Knit.CreateController { Name = "CameraController" }
function CameraController:PlayerAdded(player)
  player.CameraMinZoomDistance = 2
  player.CameraMaxZoomDistance = 20
end

Players.PlayerAdded:Connect(function(player)
  CameraController:PlayerAdded(player)
end)

In this controller, we’re keeping all camera logic within a CameraController and updating zoom properties once the player gets added to the game.

Custom Knit Events in services and controllers

Using Knit’s Signals, we can also create our own custom events in services and controllers. 

Let’s create a player movement controller. This controller will allow the player to double jump.

local UserInputService = game:GetService("UserInputService")
local Players = game:GetService("Players")
local PlayerMovementController = Knit.CreateController { Name = "PlayerMovementController" }

PlayerMovementController.JUMP_DELAY = 0.2
PlayerMovementController.DOUBLE_JUMP_POWER = 1.05
PlayerMovementController.canDoubleJump = false
PlayerMovementController.hasDoubleJumped = false
PlayerMovementController.Character = nil
PlayerMovementController.Humanoid = nil
PlayerMovementController.defaultPower = nil

local function PlayerMovementController:JumpRequest(player)
  if not self.Character or not self.Humanoid or not self.Character:IsDescendantOf(workspace) or
    self.Humanoid:GetState() == Enum.HumanoidStateType.Dead then
    return
  end

  if self.canDoubleJump and not self.hasDoubleJumped then
    self.hasDoubleJumped = true
    self.Humanoid.JumpPower = self.defaultPower * self.DOUBLE_JUMP_POWER
    self.Humanoid:ChangeState(Enum.HumanoidStateType.Jumping)
  end
end

local function PlayerMovementController:CharacterAdded(newCharacter)
  self.Character = newCharacter
  self.Humanoid = newCharacter:WaitForChild("Humanoid")
  self.hasDoubleJumped = false
  self.canDoubleJump = false
  self.defaultPower = humanoid.JumpPower

  humanoid.StateChanged:connect(function(old, new)
    if new == Enum.HumanoidStateType.Landed then
      self.canDoubleJump = false
      self.hasDoubleJumped = false
      self.Humanoid.JumpPower = self.defaultPower
    elseif new == Enum.HumanoidStateType.Freefall then
      wait(self.JUMP_DELAY)
      self.canDoubleJump = true
      end
  end)
end

Players.LocalPlayer.CharacterAdded:Connect(PlayerMovementController:CharacterAdded)

UserInputService.JumpRequest:Connect(PlayerMovementController:JumpRequest)

Robust UI Roblox Frameworks – Build better UIs with Roact

Roact aims to provide a declarative UI Framework similar to Facebook’s React. By using a familiar architecture, Roact makes it easier to create and maintain your game’s UI.

Roact Components

By building our UI with components, we can easily reuse them to compose our interfaces. 

For instance, your game may have multiple areas that use a grid layout or a vertical scrolling list layout. Using components lets us focus on the styling and data for each instance of a component. 

With components, you only have to build a layout once to re-use anywhere.

Example

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local Roact = require(ReplicatedStorage.Roact)

local app = Roact.createElement("ScreenGui", {}, {
    HelloWorld = Roact.createElement("TextLabel", {
        Size = UDim2.new(0, 400, 0, 300),
        Text = "Hello, Roact!"
    })
})

Roact.mount(app, Players.LocalPlayer.PlayerGui)

3D UI with Roact Portals

With Roact’s Portals, we can also work with 3d objects in your game’s scene. This is especially great for full-screen interfaces such as your main menu. Portals allow us to create interfaces that you’d typically see in console games where it includes 3d environments and characters.

Check out the main menu from Escape The Darkness or The Wild West for an immersive interface that’s possible with Roact portals.

What’s Next

You should now have the Roblox frameworks and tools to build better games and experiences. 

Thank you for reading and stay curious!