Some New Thoughts On Shipboard Item UI

Hey Folks! I tried to put my head down today and focus on gamedev, and got a fair amount of work done.

I had a thought last night about a different way to wire-up the ship items using an in-game UI. Rather than clicking on an item and filling-in a bunch of text fields when building the ship, it might be more intuitive and fun to do it graphically. Plus, I can probably simplify things for the user in the process.

The new idea is to let the user "open" the control panel to see wiring inside, and then choose colored wires that correspond to items on the ship. The colors available will depend on how that panel is linked in the ship via colored conduits. Here's a preview of what it might look like:

IMAGE(http://bluebottlegames.com/img/screenshots/screenshot-2016-08-16.png)

Left: Control panel surface. Right: Control panel innards.

In the above image, the control panel is the meter on the left. Clicking any of the screws will replace that UI and expose the "innards." In this case, two wiring terminal screws with some labels. The labels here might say "Meter 01 Input" and "Meter 02 Input." There's really only one meter here, but I wanted the second screw to show how more would look.

Clicking on the gold screw will show available wire colors to choose from. The user can then choose which wire connects to the meter input, and voila! The control panel is hooked-up to the ship item.

How does the user know which color to choose? Easy. They determine that by laying colored conduit between the control panel and items on the ship:

IMAGE(http://bluebottlegames.com/img/screenshots/screenshot-2016-08-16a.png)

Colored signal conduits coming from a battery into a junction box.

Just like laying power conduits (the gray-blue quartet of pipes), the user can place anywhere from 0-4 different colored conduits on the ship. Depending on where these are, they may connect items to control panels. So if the control panel was at the top of the screen above, it would have green and yellow conduits coming into it. And if the player wanted the meter to be based on signals from the battery, they would choose the yellow conduit. (Green doesn't connect to anything, it just ends at the junction box.)

Of course, this isn't a perfect system.

For one thing, I'll still need a text box or something to edit the label on the meter (so it doesn't just say "Title.") Also, what if the control panel is on the same item it needs to get the signal from? (Any color works?) What if I need two signals from the same item? (Does it matter? Maybe one conduit is good enough for all signals from a single item.) And are four colors really enough to wire an entire ship?

But I kinda like this approach. It looks fun, and a heck of a lot more engaging than filling in a form for each UI.

Plus, this seems like it might open up the possibility of fixing equipment in-game. Perhaps I could let players reroute controls to different items in a pinch? Or figure out why a panel is dead after a hit? I could add patch cables to run along the floor and jury-rig connections when underway. I might even be able to let the player slot replacement parts into items/panels this way.

As I said, seems like it could be fun. I'm waiting for the gotcha to appear :)

Comments

Malacodor's picture
Malacodor

If the panel is connected to "battery_1" you could simply copy that name to the panel's label. If the user changes the name to "Main Battery", the label would change accordingly.

If the panel is attached to the battery it should be automatically connected to it without even needing to pick a wire color.

Use USB cables, then one is enough fo all data from a device. Even a coaxial cable should suffice, which would also add shielding against electromagnetic interference.

I wouldn't depict a single wire as two cables anyway, so you should have enough room for adding cyan and magenta wires, if needed. Also, a bridge, which allows wires of the same color to cross without connecting, should make wiring easy enough.

Ran around with a clown mask before it was cool

dcfedor's picture
dcfedor

If the panel is connected to "battery_1" you could simply copy that name to the panel's label. If the user changes the name to "Main Battery", the label would change accordingly.

I think this works for some control panels (like the battery meter), but I'm wondering if there are going to be panels where the user will need to edit labels. E.g. a panel reporting tank pressures would be ambiguous without more contextual info. A human-created name like "O2 tank 3" is probably preferable to "pressure tank 12."

If the panel is attached to the battery it should be automatically connected to it without even needing to pick a wire color.

I agree. Though, I'll have to figure out how to differentiate this situation in code.

I wouldn't depict a single wire as two cables anyway, so you should have enough room for adding cyan and magenta wires, if needed.

There are a couple hidden reasons for the current two-wire graphics. First of all, laziness. The double wire is symmetric and can be rotated 180 degrees without misalignment, so fewer variations of the sprite are needed to create a complete set. (1x straight section, plus a universal junction) Asymmetric/off-center wire sprites would require 4 sprites (1 per direction).

And if all wires were centered (like the yellow one), they'd stack and occlude each other.

Also, each color is spatially distinct (closer/further apart), making it easier to tell the difference if color is hard to discern (e.g. due to colored/dim lighting or color blindness).

However, if I need more colors, I may have to bite the bullet and make asymmetric, single wires with more color choice. And the good news is this is just busy work. No engine changes required.

Also, a bridge, which allows wires of the same color to cross without connecting, should make wiring easy enough.

I'll have to look into this. I think I set it up such that a conduit has a "source A" and "source B" point defined, and it picks up signals from one and drops them into the other. If I setup a bridge that was 3x1 tiles with sources far enough apart to avoid a crossing line, maybe that'd do the trick.

Alternately, (and maybe I want this anyway), I could setup special conduits that take a "yellow" signal on one end and transfer it to a "red" signal on the other side. The benefit of this is a given signal line can change color at different points to suit crossover/organizational needs.

E.g. if there is already a yellow line in an area that needs to be crossed by a separate yellow line, it could temporarily switch to red to cross the area and back to yellow later on.

But the bridge may be enough, provided the engine works as I remember.

Dan Fedor - Founder, Blue Bottle Games

ra1's picture
ra1

If you tell it to not be rotated to 4 positions, but 2 instead, then you do not have the problem of having up to ~7 different colored wires and no extra work required.

dcfedor's picture
dcfedor

This is true. Though, it does require some engine changes. Probably some new property on each item specifying which rotations it has, and the code to process it.

Still, that may be a lot less work!

Dan Fedor - Founder, Blue Bottle Games