How can I use Studio Components

Help and Feedback Scripting Support
#1

Hello! I dont post here often but im stuck. I want to use studio components made by @sircfenner for plugin ui

I’ve tried looking at the docs but i dont really get it. It seems that I need wally, but the docs on wally are absolute garbage. Is there any way I can use studio components without wally or is there a half decent tutorial on how to set up studio components/wally.

Any help is appreciated!

#2

Download the project from github and move all the scripts from src/ to Studio. If you don’t want to use Wally/Foreman for managing dependencies (there’s only one for Studio Components), you’ll have to install them manually. I.e. download Roact and also put that in Studio, in the place where all the scripts in src/ expect to find it.

#3

sorry for the bump(just found this)

I managed to download it using wally. Do you mind showing me how I would use the module?

1 Like
#4

TL;DR - stepwise guide

Installing wally and StudioComponents

  • Install foreman
    • Set up your PATH variable to point to foreman.exe AND C:\Users\username\.foreman\bin, where system-wide tools like wally will be installed.
  • In C:/Users/username/.foreman/foreman.toml, add wally = { source = "UpliftGames/wally", version = "0.3.1" } on a separate line under [tools]. Optionally remove the comment to also enable rojo
  • From any dir, run foreman install. This installs wally (and rojo) as tools on your system.
  • If your PATH is set up, run wally --version to verify the install.
  • In your game’s dir, run wally init to set up your project as a basic wally project. This creates wally.toml
  • Under [dependencies] in wally.toml, add StudioComponents = "sircfenner/studiocomponents@0.1.1" on a separate line.
  • Run wally install. This installs StudioComponents, but also all the packages that it itself depends on.
  • That’s it! Start developing using StudioComponents :star2:

The post I originally wrote:

Phew, okay took me a while to get up to speed. You’re right the docs are pretty lacking :confused:

Just to make sure we’re on the same page, here’s foreman.toml from my C:/Users/username/.foreman dir.

[tools]
rojo = { github = "rojo-rbx/rojo", version = "7.0.0" }
wally = { source = "UpliftGames/wally", version = "0.3.1" }

With the latest version of foreman and running foreman --install, I can then run wally --version to get “wally 0.3.1”. The wally install guide says to install 0.1.0, which uhh is out of date I guess.

wally init then creates a default wally.toml file in the working directory:

[package]
name = "username/wallytest"
version = "0.1.0"
registry = "https://github.com/UpliftGames/wally-index"
realm = "shared"

[dependencies]

To figure out the exact dependency string to add I run wally search components, and after adding that my dependencies list looks like

[dependencies]
StudioComponents = "sircfenner/studiocomponents@0.1.1"

finally, wally install will actually install studio components :fireworks: yay

You can now use Rojo to sync these dependencies into Studio. Here’s a Rojo project file default.project.json that will do nothing but pull in packages from the Packages folder on your file system and into ReplicatedStorage/Packages (it overwrites/deletes anything you put in there manually though, just a heads up):

{
  "name": "WallyTest",
  "tree": {
    "$className": "DataModel",

    "ReplicatedStorage": {
      "Packages": {
        "$path": "Packages/"
      }
    }
  }
}
1 Like
#5

thanks

how would I go about creating something simple like a button using studio components?

thanks for the help btw

#6

also 1 question, did I set it up correctly? My packages folder only has a module in it without the actual studio components source code:

image

my tmol:

[package]
name = "sircfenner/studiocomponents"
version = "0.1.1"
registry = "https://github.com/UpliftGames/wally-index"
realm = "shared"

[dependencies]
StudioComponents = "sircfenner/studiocomponents@0.1.1"
1 Like
#7

nvm I fixed it by doing:

[package]
name = "username/wallytest"
version = "0.1.0"
registry = "https://github.com/UpliftGames/wally-index"
realm = "shared"

[dependencies]
StudioComponents = "sircfenner/studiocomponents@0.1.1"

thx for ur help, i’ll manage to find out how to use the module, thanks!

CC: @ThanksRoBama

#8

No, if that’s really the only thing in it then something didn’t go right. There should also be a folder called _Index, which contains the actual modules. E.g.

image

(although I have Input and Timer instead of StudioComponents)

StudioComponents is Roact based, so I think you have to install Roact as well. So change your wally.toml to

[dependencies]
Roact = "roblox/roact@1.4.2"
StudioComponents = "sircfenner/studiocomponents@0.1.1"

… and run wally install. Remember to sync into Studio again using Rojo, and to turn off Rojo once you’re done if like me you don’t want a Rojo based workflow for anything other than syncing in packages.

Here’s the very basics of how to make GUIs with Roact (and StudioComponents, which just provides pre-built Roact components):

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Debris = game:GetService("Debris")
local Roact = require(ReplicatedStorage.Packages.Roact)
local StudioComponents = require(game.ReplicatedStorage.Packages.StudioComponents)

Debris:AddItem(game.CoreGui:FindFirstChild("TestPlugin GUI"))

local app = Roact.createElement("ScreenGui", 
	{
		Name = "TestPlugin GUI",
	}, 
	{
		ButtonA = StudioComponents.Button({
			Size = UDim2.new(.25, 0, .25, 0),
			Text = "Hello, Roact and StudioComponents! ♥"
		})
	}
)

Roact.mount(app, game.CoreGui)

Put it in a script, right click and save as local plugin:

image

Set up a keyboard shortcut for it to speed up plugin development (a bit).

image

2 Likes
#9

dude you’re a legend.

thx you dont know how much you helped me thank you so much :slight_smile:

1 Like
#10

NP mate, ask away if anything else comes up ^.^

1 Like