Overgrowth text editor

Add comment!

May 16th, 2009

Hey guys, one thing that is important for the Overgrowth editor is being able to edit and create scripts efficiently. To do this, Phillip asked me to make a text editor UI widget so we can work on stuff within the game. I started out by making a simple text editor. Since we are using webkit as our UI layer via Awesomium, this was really easy using standard HTML and CSS. I basically just made a textarea tag.

Since that only took a couple of minutes I decided to polish it a little. I decided to embed an open source text editor called CodeMirror. This gives us some cool editor features like paren matching, syntax highlighting, and other niceties that programmers are accustomed too.

Overgrowth text editor

Since CodeMirror is written in JavaScript / HTML, it took only a couple of minutes to swap out my vanilla textarea and embed CodeMirror instead. I am pretty confident that Overgrowth now sports one of the best embedded raw code editors of any video game and it only took me a couple of hours thanks to open standards!

It would be pretty easy to write a syntax highlighter module for GLSL so that we can extend this editor to shaders. That would make our live texture/shader updating even easier! I think I might leave that as an exercise for the reader though, while I work on the animation editor. ;)