home

You've successfully subscribed to luxe engine!

Subscribe to luxe engine

Get updates from luxe directly to your inbox.
We'll only email for important dev news or betas.

tech #1 - precise number input

luxe

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.

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.

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:

Houdini Ladder

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.

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.