Item Creation UI Design

Page last edited 4,027 days ago
From Artisan
Jump to navigation Jump to search

Overview[edit | edit source]

Below is an initial mockup of the main UI for item creation. Item Creation UI Mockup.jpg 1: The primary editing window. This is where the weapon being created is displayed, and where tools from the toolbox are applied.

2: The toolbox. Each button here represents a different tool that can be used to manipulate the current weapon (the function of these tools is listed further down the page.) This includes the buttons at the top of the screen (undo/redo, etc). The second and third row of tools are template-dependent: what tools are available will depend on the template you are useing.

3: "Part" selection (pending better name). The user can edit only one "part" of the weapon at a time, so this menu allows the user to select a currently active part.

4: Material view: displays stats about the material being used to create the current part of the weapon, and provides a button to switch materials for a part.

5: Statistics of the weapon being formed thus far (data points listed are placeholders)

6: A pane that contains options for whatever tool is currently being used. These options vary widely from tool to tool - for instance, the vertex editing tool can toggle 3D (advanced) vertex editing from here, and the fuller/draw tools can choose a shape to apply.

7: Displays help text for the currently selected tool, or whatever the mouse is hovering over.

8: An area for context buttons to appear - additional operations that need to be buttons that are only applicable in specific circumstances. For instance, when a vertex is selected, a "delete" button appears here that can be clicked to delete the currently selected vertex.

9: The "Done Editing" button that leaves this window and moves on to the embellishing stage.

Vertex Editing[edit | edit source]

A smiple mock-up of the vertex editing process. The shading on the outside indicates the boundaries in which vertex editing can occur. (This will be a highlighted underlay in the actual program.)

Vertex editing the is the principal method of shape editing. Vertex editing edits only the outlines of the item; not all vertices in the 3D model will be available to the player for editing.

The player adds a player controllable vertex by clicking on a spot without a vertex. When the player performs this action, the system infers the vertices to add to the model to account for the new player added vertex. In this way, the player sees the item outline transform to include the new vertex.

Conversely, to delete a vertex, the player selects a vertex and then hits the delete key or button. The opposite of vertex addition occurs, and the system removes all model vertices that were previously present to connect to the deleted vertex.

Once a vertex has been selected, it can be dragged to alter item shape. Each blueprint has a bounding box which restricts the extent to which the vertex can be moved.

Additionally, two modes of editing should be implemented: simple 2D editing and more advanced 3D editing. 2D editing is useful beginners, as having only two dimensions will greatly lower the complexity of editing. Two dimensional editing allows the player to view and edit items looking straight at the item in the x, y, and z direction. Advanced users will likely want more granular control, and 3D editing will facilitate this desire.

Curved surfaces may not be implemented for the demo if time does not permit it.

Other tools[edit | edit source]

Tools are listed in approximate order of priority: tools described earlier are higher priority.

Tool Name Description Image
Thicken/Flatten The thicken and flatten tools allow the player to make a portion of the item thicker or thinner. To use the tools, the player selects a set of vertices and then uses the keyboard or onscreen buttons to raise or lower the section. The section is moved along the normal to the plane formed by the selected vertices.
An illustration of the thickening/flattening process. The bottom illustrates the effect on the blad - it is not part of the UI.
Hole Punch The hole punch tool creates a hole in the item. By clicking on a portion of the item, the player can remove all material across the item in the direction the camera is pointing. Various brush shapes and sizes will be available to the user.
A possible result of using the Hole Punch tool
Edge operations Item edges can be altered by using various edge operations. Currently, these two edge operations are sharpening and smoothing. Edges are altered by selecting a tool and dragging along the edge to alter.

Sharpening creates a sharp edge along the selected edge. Eventually, there will be multiple types of sharpening, such as standard sharpening and serration.

Smoothing can transform a sharpened edge back to a normal edge.

A sketch of the possible results of performing edge operations
Fuller/Drawing The fuller can chisel a groove into an item. It is implemented as a 3D sphere slightly raised from the surface of the item; all material that comes in contact with the tool is removed. There will be various fuller shapes that create unique grooves in items.

Drawing raises a ridge on the item. It is implemented in the same fashion as the fuller, but adds material rather than removing it.

A sketch of the operation and result of the Fuller tool.
Symmetric mode Symmetric mode will be a convenience feature in the editor. Using this feature will cause the operation the player is currently performing to be applied to both sides of the item. In the case that an item is asymmetrical, the action is applied to the other side as is feasible.
A sketch of how vertex editing will behave in symmetric mode.
Undo/redo Undo and redo actions taken by the player.
Vertex Curves Applies a curve to the area between two vertices. Due to potential modeling complexities, this feature may not be available for the demo.
Cutting / Milling Cutting or milling removes all material outside of a plane that the player draws. This can be done from any 2D view by simply drawing a line (clicking the start and end points). The cutting plane becomes the line projected in the third dimension
A line is drawn to remove material up to a surface.

Design Feedback / Open Questions[edit | edit source]

How do we handle UVs? Snap grid to control how close two points can come - toggle for user

  • Just a plug for the UI, I really like it!

Feedback on specific tools[edit | edit source]