All   Archive   Code   News   Projects  

 

My name is Stephen Schieberl. I am a Senior Engineer at Wieden+Kennedy Lodge in Portland, Oregon. I make things with emerging technology.

Ban the Rewind?

A D M I N

Pictured: This tutorial demonstrates how to pass the UI tree through recursive methods to create a pattern with minimal code. This block is a little tough to explain, but I'll do my best. In short, it's a recursive interface node. It's basically a class representing a node in a tree structure, not unlike XML or JSON, only it has properties for creating interfaces instead of just storing data. It's not a GUI or a physics system, but it's a powerful building block for quickly creating those things. Essentially, it makes working in C++ a little more like Unity, or Flash from back in the day, or like working with the DOM in JavaScript. Get it here: ">https://github.com/BanTheRewind/Cinder-UiTree I wanted to create some more samples before releasing this, but I'm spending my life in VR headsets lately so I just needed to get this out there with some explanation. The block has twelve tutorials. Each one builds off the last and incrementally introduces features and concepts to ease you into it. There is only one sample project right now, a cross-platform audio player, which demonstrates how to make a 2D GUI system. While the sample and tutorials are 2D, this works with 3D interfaces. Pictured: A code snippet pointing out some advantages of this block (click to view full size). I can't live without this library now. It's sped up my development time in Cinder like crazy. It's both thorough and flexible. I use it for everything weird experimental interfaces to 3D games to high-performance prototypes and more. It's basically a shortcut to doing many things. Pull it and check out the tutorials and hopefully it will click what I'm doing here. I'll go over a few features: IT'S A TREE! The UiTree's primary feature is that it contains a map of children which are also UiTrees. It knows its parent, root, etc. This elegantly brings the parent-child relationship into C++ interface objects. FAST 2D/3D LAYOUTS AND ANIMATION The UiTree has built-in transform properties. When you set the position, rotation, and scale, you may optionally pass in a "speed" parameter which performs linear interpolation. There are also velocity variants for any sort of transform. The UiTree is Timeline-friendly, as demonstrated in one of the tutorials. Pictured: The audio player sample demonstrates how to use the UiTree to make a cross-platform music player. FAST AND POWERFUL NODE FINDING Every node in a UiTree structure has a unique ID. You can set these or let the UiTree increment these for you. If you know a node's ID, you can pull it up from anywhere shallower in the hierarchy. There is a also a query method which returns a flat list of nodes using a boolean method (kind of like sorting). For example, you can use query to return all the nodes on the top half of the screen, regardless of their depth in the tree. NODES CAN REPRESENT ANYTHING The UiTreeT<T> can store arbitrary data using a template argument. For example, if you have a Data structure which holds things like color, text, audio, etc, you set that as the tree's template argument. Now the UiTree has an instance of your Data structure which you can easily read and write. Optionally, you can rely on UiTree's unique ID system to store data externally and easily link back to it. Pictured: The software used in this Leap-based installation app uses the UiTree to create a 2D physics system which displays ideas submitted by employees at W+K. INTERACTIVITY AND EVENTS The UiTree is a mini-program which can hook up to pretty much any event Cinder broadcasts, as well as some unique events around visibility. Additionally, UiTree's can be made aware of their shape in 2D and 3D. This enables mouse/touch over and out events, as well as built-in collision testing. PORTABLE UiTree is a single header file. That's it. Pictured: A prototype mobile shooter which uses a UiTree for all its gameplay and GUI.