Program Flow in Visual Scripting May 25th 2017

I felt an urge to talk about visual scripting and how it typically handles program flow. It is not a comparison between coding and visual scripting tools, the pros and cons of it or even a comparison between the different tools available (but it is strongly opinionated).

I am basing my thoughts (largely) on the following implementations:

I am mostly familiar with Blueprint and Drag and Drop (having designed the latter), so I will draw mostly from my experience with these two - and frankly PlayMaker's presentation is horrendous, which is unacceptable for a visual scripting tool. Nevertheless it's the go to tool for Unity, for lack of an official implementation (though I have a tingling feeling that Unity will [attempt to] acquire PlayMaker in the near future, like they did with TextMesh Pro).

All visual scripting tools have to provide a solution to a common question: how is program flow defined? There's no way around this - it's just code behind the eye candy, and it has to have an entry point and an order of execution. Flow. Let's look at what the aforementioned tools do...

Blueprint

Unreal Engine's visual scripting tool, Blueprint, is based on a free form node layout. I like that you have complete freedom in designing your scripts, but that's just as easily a downside. Like every visual scripting tool, Blueprint replaces the syntactic hocus pocus of coding with something more, well, visual. However it's evident that while they separated coding from writing code (I want to say you don't write code with visual scripting but rather structure code) they didn't want to distance users from the act of coding. That's a matter of intentions and target audience, and while Unreal Engine is a fantastic engine for indie developers it's probably not the first program you would point someone to for their first game with no prior experience. It's a visual scripting tool designed for tech people, and it does an awesome job at that.

Blueprints

I added green arrows to emphasize the program flow (otherwise denoted by the white curve). It's neatly laid out, but if you trace the program flow with a finger you'll find that, well... You can't. It has two entry points and two orders of execution, and yet they're not separate programs. This is because I used the particularly interesting "Custom Event" node, which...

  • Offers a solution to organizing your screen space intense scripts (Epic Games calls them graphs)
  • Lets you reuse code, creating what you'd normally describe as a function (and these functions are accessible from other scripts or graphs)

That's all very nice, but it comes with a cost: that you can't trace the program flow with your finger. These custom events can theoretically be entered at the "Start" label from any other script in your source code and return flow back to the calling script at any of the "End" labels. I would hope they have great code analysis integration with their visual scripting or this could easily spin out of control... Let's face it, it often will anyway - but is that Blueprint's fault? And if it is, how would you fix it?

In my opinion Epic Games are at the bleeding edge of visual scripting (albeit visual scripting in general develops at a turtle's pace), so if you want inspiration - or to try it - this is a good place to go. That's not to say there aren't other ways to go about it, though.

Drag and Drop

Cue the visual scripting tool designed largely for users ranging from complete beginner to novice developer. An immediate distinction between Blueprint and Drag and Drop is how they handle program flow. Blueprint takes a free form approach where Drag and Drop takes a top-down approach. You start at the top and you end at the bottom, no two (or three, or four, or five) ways about it. This makes it easy to trace the flow with your finger (yay!) but that in turn makes it harder to organize your script, meaning you're gonna be spending a fair amount of time scrolling up and down. It's easier to think of Drag and Drop as logic-driven building blocks as they're stacked vertically.

Drag and Drop

One price to pay for an easy-to-follow program flow is that blog screenshots become awfully large; and all but two nodes are collapsed. It does however make it easier to insert new nodes or move existing ones - you just pick it up and put it somewhere else. So despite the vertical screen space requirements, it's quite fast to work with. All visual scripting workflows suffer from a dependency on user input to pick which node to add and where to insert it.

While Drag and Drop doesn't assume any prior coding knowledge, it does go a long way to ease you into coding with its top-down structure and various tools. If you want to make a game just like the 2D games you love on Steam but have no skills in coding, this is where you want to start.

PlayMaker

Having covered both Blueprint and Drag and Drop, PlayMaker just feels redundant to talk about. It is the most popular visual scripting tool for Unity however, and that deserves some merit. It feels redundant because the only thing that really sets it apart from Blueprint (apart from visual appeal or lack thereof) is the fact that it doesn't work with Unreal Engine. I want to say Unity's lackluster extension model is part to blame for PlayMaker's monotone design, but don't tell me the most popular game engine in the world can't handle rendering textures... Even if the Unity editor is immediate mode. If you weren't aware of that fact, now you know what to blame next time you think a part of Unity's interface looks a bit stale.

Drag and Drop

I'm making it painfully apparent that I've never used PlayMaker but I went over it to see if they did anything exceptionally well and found it wanting. It's an asset I haven't purchased so I can't give you a "real" screenshot; this one is -- laughably -- promotional material from Unity's Spotlight blog post. However it does a good job of showing their solution to program flow: "There and Back Again".

Color

You'll notice I haven't added "Start" and "End" labels. That's because I can't tell where it starts and ends. Has there ever been a better time to reiterate the popular mantra less is more?

If you scroll back up and look at the Blueprint and Drag and Drop screenshots, you'll see they have something in common: color denotes meaning! Granted PlayMaker supports color tinting, but you have to assign a color to each node manually. Which brings me to my...

Conluding thoughts

Unsurprisingly a lot of visual scripting tools use the free form node-based layout - it's perhaps the easiest to implement too ("add it and forget it"). There are other ways to structure it though, and I have to mention Scratch for their innovation.

I am of the opinion that because visual scripting is slower than writing code (assuming some knowledge) it at least has to be fun to use and pretty to look at. I think both Blueprint and Drag and Drop are fun to use, and I think both tools do a good job at catering to their respective target audiences. I'm not sure where to place PlayMaker, however, as for a top-rated tool on the Unity Asset Store it sure commits a lot of sins.

I hope to see more development in visual scripting, especially as more and more people pick up coding every year.