Tech posts share implementation details from luxe engine, from all corners of making a game engine. Sign up to the newsletter for future detailed posts on rendering, entity systems, editors and more.
p.s don't miss this recent exciting luxe news...
When working in something like an editor, it's often convenient to be able to input numbers in a quick and easy way without having to reach for the keyboard.
Apps like Photoshop and many (many) others for a long time have had a concept where you drag a number field to change it, which works pretty well. Scrubbing is convenient, I've always liked the idea and implemented it into my tools before, but it never felt exactly right. It often felt too precise or imprecise, too fast or to slow, not as general as I'd hoped.
More specifically, they're not exact as I want, exact in the snapping sense. I often want to move something at 0.1 increments, and immediately it's not a great fit. They're also often conceptually stuck within a range, rather than working with any range.
The precision radial
Note that the version shown is work in progress/not final.
That's where the precision radial comes in. By holding left mouse on an increment, dragging horizontally will add or substract the increment to the value. By holding right mouse and dragging (or holding alt + left mouse), the increment is multiplied instead.
- It's as quick as the dragging behaviour workflow wise, it's still dragging
- It's not bound by range, since you can scale up or down on demand
- It's precise and exact, since you can bump values in fixed increments
- It's unintrusive, stays out of the way (and can be made to fit anywhere)
You can see it in action here below. When a number field is focused, hovering the precision marker will bring up the radial. You can then make a selection and start dragging to change the values.
Here you can see it in context in the main editor. I'm not done integrating it so there's minor issues, but it'll replace all number fields soon!
Other ideas
This is my own take on an idea that's been around a while, so I'll link some here for reference/interest sake. Everyone has their own preference and this is how I like it: easy to learn, easy to discover, and fluid for users already familiar. If you implement this in your own work, a link back would be appreciated.
While I've known about (and implemented some of) these over time, it came up in a recent discussion in The Toolsmiths discord, which conveniently meant there was a couple links collated in one place to share.
Houdini has what they call a ladder which is similar:
There's another common idea of using the other axis as magnitude. If horizontal axis is the amount of change, vertical axis can control rate of change. This is similar to how in blender the distance from the cursor controls the rate, or how when scrubbing videos on iOS (or youtube) when you drag further away from the control, the rate is slower.
- here's a slider where the distance from it controls the rate of change, this thread has a lot of the mentions here
- A blender proposal for similar https://blender.community/c/rightclickselect/J3fbbc/
- RotoSlider from AntTweakBar is quite similar
Darktable takes the idea a bit further with a visualization of the rate of change.
That's it!
I'm happy with this! I'm sure once I'm done with cleaning up and polish it'll be even better.
Tech posts share implementation details from luxe engine, from all corners of making a game engine. Sign up to the newsletter for future detailed posts on rendering, entity systems, editors and more.