LibreCAD for Unreal Engine UI

Make a modern gaming-UI as a complete design noob

4 min readMar 1, 2021

I recently had to create an UI in Unreal Engine, and being the gimp-grouch that I am, I instantly thought I could (ab-)use LibreCAD, an Open Source technical drawing program, to create a scalable vector UI.

There was just one problem. Unreal Engine can’t import vector graphics.

LibreCAD is intuitive, easy to use and Open-source

This article assumes you have basic knowledge of Unreal Engine and C++. LibreCAD, as long as you only want to draw some straight lines, is completely self explanatory.

Now, there are more sensible solutions to this, you could just buy an SVG-importer on the marketplace, for a mere 20 bucks. You could also write your own bare bones Unreal SVG-importer — which would be stupid, since you are never going to do that in less than 30 minutes to justify not spending 20 bucks. But in my mind, I already had settled on an ingenious idea, which felt just too good not to do it.

On Paint — Draw Line

See, Unreal has a great feature/function for UserWidgets, called DrawLine. Since almost all elements in modern UIs can be straight lines and SVG-files exported from LibreCAD usually look like this:

I thought: Why not just feed those points into DrawLine-nodes and generate the entire UI dynamically as lines?

Parsing the SVG

Now since I’m not only a gimp, but also a C++ grouch, I of course didn’t implement a parser natively in Unreal (also because I didn’t want to think about the asset importer). I instead just did, what would have made every first semester computer science student proud and wrote a python script. A python script generating C++ code that is.

“The Script”

Just run this script with the SVG output-file of LibreCAD as the parameter and save the cpp-output of the script.

Exposing the Data to the Blueprint Editor

Open up your Unreal project and create a new C++ class:

Make it a C++ “BlueprintLibrary”, and add a function exposing two Unreal-TArrays of Vector2Ds to the blueprint editor, one for the starting points and one for the end points of each respective line.

Implement the functions in the respective .cpp-file and paste in the output of the python script.

Hit recompile in the editor. If this is the first time you are compiling a C++ class in Unreal, get a coffee now, because this might take a while.

Blueprint Editor

Create a new, empty UserWidget (right-click in main editor->new Blueprint->All Classes->search for “UserWidget”). Don’t forget to add it to your viewport, for example in the “EventBeginPlay” of your character (or via a HUD-class).

Select your widget in the construct node

In order to use the DrawLines-node, you should overwrite the “OnPaint”-function of your UserWidget.

You should have a function called “loadLines” available in the blueprint editor. This function should provide the two arrays as output pins. If not, check if the compilation has succeeded and try restarting your editor, sometimes Unreal just doesn’t reload changed files correctly.

Simply connect the endpoint array (or “Start Points”, doesn’t really matter) to a for-loop and use the “Array Index” pin to get the relevant position from the other array. Then let the “Loop Body” execute the “Draw Line”-function, using the two elements of the arrays as “Position A” and “Position B”.

Customizing In Unreal

Now that you have created a minimal working example, you can offset, scale or repeat your figures however you want (by adding or multiplying constant values onto the 2D-vectors), creating, in my opinion, pretty good looking and also perfectly scalable UI-elements.

Here is a small example macro which applies an offset to a point (Vector2D), just to give you some ideas: