Script Source Color3 and BrickColor Previewer

This plugin displays color swatches in the margin of your script editor (if you dock the widget there) that correspond with Color3 and BrickColor constructors in the source code of your currently open script.

For a long time I’ve wanted Color3 previewing in scripts, and while working on my game recently I ran into a situation where not being able to do that really bothered me. So here we are.


Setup

This plugin is a niche tool and is not useful outside of the script editor.

You can add this plugin to your Quick Access Toolbar, create a hotkey, or use the plugin toolbar button.

Click on the button or use your hotkey while in a script to open the widget. Dock the widget left or right of the script editor (Right works best for me since I have other things docked to the left).

image


Features

Previewing of Color3 and BrickColor

Previews are generated via loadstring , so short in-line calculations (e.g. 150/255 without parenthesis) will be correctly parsed.

  • Color3.new/fromRGB/fromHSV are supported.
  • All BrickColor constructor functions are also supported.

Multiple constructors on one line will be shown in the widget in the correct order.

This plugin uses loadstring but should be relatively safe; the loadstring environment is limited to the math, string, BrickColor, Color3, and Random libraries.

Line “Go to”

You can jump anywhere in your source via the “Go to” tool. This helps you sync the widget up with where you’re currently working in your script. Similarly, you can use the shortcut Ctrl G to jump to any line in the script editor.

This option only appears if you mouse over the widget.
This exists since there is currently insufficient API for me to sync the widget with the script editor automatically. See: Plugin script cursor methods

image

Automatically Minimizes in Viewport

When you leave the script editor, the widget will close itself until you open another script to save you screen space.

If you intentionally close the widget, it will not reopen until you reopen it using the plugin button or your hotkey.

Automatically Updates Preview

The widget will regenerate the preview a few seconds after you stop typing in your script.


Shortcomings

Performance

This plugin starts to experience performance issues in scripts around 5k lines or longer, depending on your hardware, and there are a number of smaller optimizations I’ve neglected to implement for this version since they seemed negligible for shorter (1-2k line) scripts.

The biggest performance issue requires a custom implementation of ScrollingFrame that completely hides off-screen UI. I currently do not have time to do this, but maybe in the future I will consider it.

If anyone is willing to provide a modular custom implementation of ScrollingFrame that fulfills the above requirement, let me know and I can take a look sooner.


Future

It would be cool to expand this into a general script previewer / overview tool with other things previewed, but I’m not sure what else to render other than color constructors and overall “code shape” (i.e. a code minimap). When I have more time I may look into this.

Feel free to suggest other things you’d like to see previewed out of your scripts.


Bugs

Existing bugs

  • In-line function calls and parenthesis-wrapped expressions are not parsed (e.g. Color3.new(math.sin(0.3)) or (150/255)). You currently cannot use parenthesis inside constructors.
  • It’s possible to make the widget show up in the viewport after starting and stopping a play solo session. This is non-destructive and it can be closed, ignored, or fixed by opening a script.

Reporting bugs

I’ve only tested this plugin in my own projects for about three days. Reply to this thread if you find a way to reliably break it. Remember to include reproduction steps or code that reproduces the issue.

24 Likes