Programmer | Game Developer | Open Source Creator

In-Game IDE

I'm showing this off because it's the culmination of years of work, and I'm really proud of the result.

It's gone through lots of incremental changes and rewrites, and continuously improved over time, so I'm documenting it as best I can. A lot of this is based on vague memories and old tweets, so some aspects might be slightly inaccurate.

For Lua Learning to meet its design goal, the player would need a good IDE to learn and practice in.

In March 2018, I began writing a Lua lexer from scratch, coming up with all sorts of string manipulation tricks to accomplish this. @sircfenner was a HUGE help in creating that, and years later I’m still grateful for his patience and kindness. The lexer mostly worked, but it was extremely naive and had tons of edge cases. I used that for a while, while I focused on other aspects of the IDE and game.

The naive syntax highlighting circa 2018

Ft. extremely shoddy UI design by young me :)

In September 2018, I worked alongside @slietnick and @pobammer to port the Penlight lexer to Roblox, as well as expanding it to suit my needs. That lexer was designed to highlight syntactically correct code, which meant that it failed when the user was in middle of typing in the IDE. I wrote more patterns for it, designed for incomplete syntax, based on my knowledge from my previous lexer. This lexer is open sourced for anyone else who might find it useful, and can be found here.

I now had a decent syntax highlighter, but the rest of the IDE was frustrating. It was built on top of a default Roblox TextBox, which at the time didn’t let the user select text, copy text, and many other features were missing. In January 2019, I commissioned @brianush1 to create a better alternative with a custom clipboard, and his custom TextBox was the core of my IDE for some time. This version had automatic indentation, end block completion, in-game clipboard, undo/redo, highlight all occurrences, and live error detection. Roblox updates eventually broke it, but it was very CPU and memory intensive anyway and needed a rewrite regardless.

While I had brianush1’s version, I decided it was time to try to push my IDE to the next level and attempt some autofill mechanic. I managed to get a naive autofill working relatively well, so I cautiously integrated it into Lua Learning.

Simple autofill predictions in my IDE test environment

When TextBoxes were updated to allow copying in summer 2019, I knew it was time to switch back so my users could take advantage of that instead of just my custom in-game clipboard. I switched back to them, and wrote modules that expanded their functionality such as Undo/Redo and arrow key navigation. However, it was still lacking.

TextBoxes and ScrollingFrames aren't friends with each other, so this is when I wrote and released SmoothScroll because I needed a custom scrolling method to allow users to scroll while still focused in a TextBox.

I started to work on adding all the features of the previous edition, with autofill, end block completion, etc. This took a while, and by the time I added all the features the code was an unusable mess. But it worked, so I called it "done for now" and just didn't touch it.

When I began to work on InCommand with @Elttob, I had to rewrite that mess so that we could use a simplified version of it. I continued to improve that InCommand rewrite as we updated the plugin, and then I decided I should take this clean plugin version and branch off and make a Lua Learning version of it. Careful not to make it messy, I re-added the fancy features to that version.

The refactored IDE structure- neatly compartmentalized and written

And with that, we've arrived at the current product! Allow me to show off what it can do. :)

Live Syntax Highlighting (duh)

Using the lexer from earlier, I wrote a highlighter that is highly optimized. Using object pooling, caching, work determination, and a few microoptimizations, I got my highlighter to work on massive scripts in milliseconds. This speed allows it to be run in real time, highlighting the whole script every time you type a single letter.

Context Aware Autofill

Suggests soft-matched autofill suggestions when the context allows it, aka it doesn’t suggest while you’re typing a variable declaration, in a string, comment, or number.

Block Completion

Automatically finishes your if statement, function, do block, or anything else that requires an end. Indents your cursor as well, according to the relative indentation standard. Similarly, it adds the closing symbol for your multiline string/comment, with support for all the = variations.

Realtime Error Highlighting

Non-intrusive syntax error highlighting. While you type, it doesn’t display errors as not to annoy you for not closing the statement you’re still in middle of writing. As suggested by @zeuxcg, it highlights any words mentioned in the error instead of just highlighting the erroneous line.

Indentation Maintaining

When you enter a new line, it adds the indentation of the previous line and moves your cursor. No IDE is even viable without this feature. Simple, but vital.

Waypoints (Undo/Redo)

A handy feature, but it uses a fair amount of memory due to the immutability of strings in Lua. I plan to rewrite this piece with clever diff-patch methodology, but it works good enough for now!

Custom Theming

Lua Learning’s settings allow users to set their preferred highlighter colors for code blocks in tutorials, and the IDE respects those and updates in real time, including the autofill suggestions.

Highlight All Occurrences

A nice QoL feature that highlights all other occurrences of the selected word.

I hope you’ve enjoyed reading the history of this IDE and the work it takes to make it! Big thank you to all the people who helped me along the way.