Improving Usability in Dani AI’s Editor

Improving Usability in Dani AI’s Editor

During the past couple of months, we’ve been taking a look at our editor tool and noticed a few fundamental design flaws that our testers reported.  We went back to the drawing board and drew inspiration from other tools and games, including Amplify Shader, Blender, and Democracy 3.  A key concept from these tools and games is that information is shown when needed, and hidden (but accessible) when not.

 

A More Responsive Editor

We overhauled the Editor’s functionality, stability, and design. Such changes include:

  • A redesign of the nodes and connections
    • Nodes now separate incoming connections to better show where the inputs are coming from
    • In Unity’s “Play Mode”, running nodes are colored in shades of green from darkest to lightest to show the order of the AI’s thoughts (Observer -> Decision -> Action)
    • Node design is fully editable via a GUISkin object in the project
  • Knowing what AI to edit
    • Selected templates are marked with a checkbox in the dropdown menu as a quick reminder of what template is being edited
  • Better touchpad support
    • Selecting multiple nodes is a matter of clicking and dragging, as opposed to click-drag-click
    • Scrolling is much faster
  • Dark Skin support
    • We are able to natively support Unity’s dark skin for all the Unity Pro users!
  • Improved performance
    • Faster startup speeds and rendering, especially during Play Mode

Check out the before and after images of the changes we’ve made to our UI!

Dani-before.png
Our old editor.
Dani-after.png
Our new editor, after the overhaul.

 

dani-live-debugging
The editor during “Play Mode”.  The shades of green show the order in which the AIBrain is considering which actions to run.

 

dani-dark-skin
An example of the editor in dark skin

Clickable Connections

Clicking connections was fairly limited in the old editor.  One would have to click a small square in the middle of the connection in order to select it.  It led to a few problems:

  • Connections were hard to click with the touchpad
  • Large resolutions or high DPI made clicking even more difficult
  • Some squares overlap

Clicking on a connection is important in Dani AI, because the connection provides us additional information that is not normally shown on the editor, such as conditions.  As a result, we changed our click detection to a spline-based detection, so a connection can be clicked anywhere on the line.

 

dani-inspector.png
A clicked connection and a built-in inspector.  Connections can be clicked anywhere on the line and are shown as bolded lines.

 

Built-in Inspector

Originally, we offloaded the node-displaying capabilities to the inspector in Unity.  While it does the job well, it led to a couple of issues:

  • It’s easy to lose focus on the node by clicking on another object in Unity
    • Would need to click the node again to refocus on the node again
  • A possible solution is to manage multiple inspectors
    • Done via “Add Tab/Inspector” in any editor window
    • Not many people know this trick
    • It’s easy to forget to lock the inspectors, otherwise all inspectors will show the same selected object

Instead, we opted to bake our own inspector into the editor.  For the editor coding developers, the built-in inspector maintains the same functionality, so you can keep your existing custom inspectors!

 

As we are nearing the public release for Dani AI (date TBD), we’re happy to continue to work with our testers for bug-hunting and feedback!

And as always, if you have any questions or would like to test our AI, please shoot us an email at info@initialprefabs.com or find us on Facebook or @initialprefabs on Twitter

— initialPrefabs Team

Advertisements

The Quest of Simplification: Dani AI’s Editor

We had a blast last month showcasing Modern Knights and spending time talking to you guys in Play NYC and Otakon.  For us, it was about learning from others and making moves based on what was learned and what we want to do next.  And we’re continuing that in Unity Developer Day in NYC this Saturday, so catch us there!

Speaking of conversations, we’ve gotten quite a few questions during the events from the curious and the veteran testers about the current state of Dani AI.  Based on the current feedback and suggestions, we’re currently focusing on improving its user interface, so we took the time to fix the largest kinks in its armor:

Connecting the Dots

Dani AI is a powerful AI tool that decides which actions to take at a given situation.  It does so by connecting observers, decisions, and actions (otherwise known as AI nodes)together to create a template that an agent can use to perform actions in a meaningful way.  In other words, the nodes provide the information, while the connections provide the context of what is happening or will happen.

One of the first issues we tackled in the editor was the inconsistencies of creating and editing the connections.  Originally, connections are only editable in the Inspector.  A typical workflow for this is adjusting the conditions for the decision to activate:

  • Click the observer
  • Look in the “Connected Decisions” list
  • Find the correct decision that contains the condition
  • Edit the condition

It’s a bit odd, given that the only way to create connections is dragging the mouse in the editor to connect the nodes together. As a result, we made the connections clickable in the editor so we can jump to editing the condition in one click.

dani-connections.PNG
The editor for Dani AI.  Connections can be selected by clicking the gray squares.

We also added a new custom inspector for connections to provide relevant information on the nodes and the conditions.

dani-connection-inspector.PNG
The new custom inspector that will appear when selecting a connection between two nodes.

Weighing in on the Situation

When an observer is connected to a decision, it contributes to the decision’s total score by generating a sub score based on the condition.  For example, if an agent wants to attack, his health should be above 50 and if so, contribute a point to the “Attack” decision.

Given that situation, its a bit odd to see percent signs when clicking on the observer or connections.  Originally it was meant to show the influence an obsever has relative to other connected observers, but we kept it simple by just showing the weight instead:

dani-selecting-connection.PNG
Selecting the connection between “Health” and “Run Away” shows that the current weight is “1”.

 

When the decision is selected, the connections show both the weight and its relative influence over the decision:

dani-selecting-decision.PNG
Selecting the decision shows the weight in parenthesis and the relative influence in percentage.  100% means that the health observer is the only influencer for running away.

 

Snapping into Order

Freely-moving nodes are fun to drag around, but are often quite annoying to align.  One pixel may not seem like a problem, but it’s enough for our testers to waste minutes per connection just to align them properly.

As a solution, we added a really simple snapping method that rounds the positions of each node to the nearest incremental value (5 pixels by default, but is configurable in the settings).  It’s most easily noticeable when moving the mouse slowly as it produces a stepper-like movement.

A stepper-like pattern for aligning nodes together.

Where are we now?

Again, big thanks to our testers who are willing to test our tool every step of the way.  We’re aiming to push Dani AI to the Unity Asset Store soon, but right now we’re confident that Dani AI is in a reasonable stable state.

If you have any questions or would like to test Dani AI, please shoot us an email at info@initialprefabs.com or find us on Facebook or @initialprefabs on Twitter.

 

– initialPrefabs Team

 

 

 

Dani AI’s Revolution

GDC 2017 (otherwise known as Game Developers Conference) is going on right now with amazing talks and keynotes on everything related to game development!  While that is going on, we made some major improvements to our Dani AI system as well as to its editor, thanks to the feedback that we received from our testers!

Editor’s UI Overhaul

We updated the interface to focus on quickly providing information on what the agent is doing at a glance.  Much of our inspiration came from various interfaces from games including Tom Clancy’s The Division, Endless Legends, and Civilization V.

Why games?  Other than the point of Dani being an AI framework for games, interfaces in games are great at displaying information to glance at, since the focus is not particularly on the interface itself, but is on the game world and what’s going on in it.  It’s a lot easier to glance in the corner and see how much ammo you have left, than to push a button and have  a ton of weapon information show up.  As a result, we’ve done the following:

  • Icon support for nodes
    • Quickly associate images with the node’s purpose
    • Customizable with one line of code
  • Action nodes now show what state they are in on runtime
  • Unity Pro skin is now supported
Dani_UI_Overhaul.PNG
The new interface, a 180 on using the default Unity skin.

Additionally, we’ve made various quality-of-life improvements on the editor, such as selecting multiple nodes and copy+paste functionality, with full undo support.  Keyboard support is available to, if you want to use Ctrl + C and Ctrl + V to copy and paste.

Selecting Multiple Nodes.gif

Selecting multiple nodes in order to move or copy and paste.

Utility AI Support

There are times when a character needs to be less robotic and do more than “if A is true, then do B”.  We call those agent “humanoid characters”, and a utility-based approach suits well for those kind of characters.  Utility-based AI is another way to determine which actions an agent can take via using something along the lines of “how much will A make me do B?”  The more A influences B, the more “useful” A is.

Utility can be defined using curves, and what we’ve done is adding an Animator Curve (used in Unity!)  to visually define the usefulness without needing to work out and invent new equations.

Utility.PNG
A utility inspector.  Curves can be defined by clicking “Function”.
Utility curve.png
Unity’s editor for defining an animator curve.

As always, huge thanks to our testers who are willing to test the framework with us and implement Dani AI into their own projects.  If you have any questions or would like to test Dani AI, please shoot us an email at info@initialprefabs.com or find us on Facebook or @initialprefabs on Twitter.

 

-initialPrefabs Team