ryan/stickman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance UI and control features for Phase 4, including status bar, mode switcher, and cursor feedback

Browse Source
This commit is contained in:
ryan
2026-09-01 23:38:43 -04:00
parent f208127917
commit d77b5e5441
2 changed files with 253 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plans/PHASE_4b_POLISH.md
+134
View File
@@ -5,3 +5,137 @@
We have a good start with feature implementation, we want to polish some of the features and fix bugs before the next phase. We don't want too much tech debt
## 2. UI
1. There should be a status bar across the bottom of the screen that can hold information. As of now, that status bar should hold the current coordinates of the mouse at the right side of the bar. Similar to what is in the stickman editor.
2. We need a better way to distinguish between EDIT and DIRECT modes. Let's change to the following
- **Unified Mode Switcher (Segmented Control):** Move mode toggles into a single visual group [ ✏️ Edit | 🎬 Direct | ▶️ Play ] at the far left of the toolbar. Currently, "Direct" sits between object spawners (Area and Grid), making it look like a spawnable object rather than a mode toggle.
- **Contextual Toolbars:** Swap toolbar options based on active mode to eliminate clutter:
- **Edit:** Show spawner buttons (Ground, Ramp, Crate, Stickman), transform tools, and Grid/Snap settings.
- **Direct:** Hide spawner buttons; show director controls like action queue triggers, sequence prompts, target selectors, and event rules (when planning and implementation is complete).
- **Play:** Collapse layout tools entirely, keeping only playback controls (Pause, Restart). This is already complete!
3. **Viewport Color Frame / Canvas Background:** Use distinct visual cues directly on the canvas so you don't need to look at text:
- **Edit Mode:** Keep the active construction grid visible.
- **Direct Mode:** Add a subtle amber/gold viewport border frame (like a camera viewfinder overlay) or change gizmo colors to gold.
- **Play Mode:** Fade out the grid background for a clean preview, accompanied by a subtle green glow around the Play control.
4. **Status Badge (High-Contrast Pill):** Replace the plain text Mode: EDIT with a prominent badge in the top-left or top-right of the viewport:
- ✏️ EDIT (Cyan / Blue Accent)
- 🎬 DIRECTING (Amber / Gold Accent)
- ▶️ SIMULATING (Green Accent)
5. **Cursor Feedback:** Change the mouse cursor per mode (e.g., standard pointer/crosshair in Edit, a target ring or director wand in Direct, and a default game pointer in Play).
## Control and Response
Creating a stage should be a little like 'drawing'. The user should have a very easy time building.
### Terrain Placement (Edit Mode)
1. **Input Handling & Drag Trajectory**
- **Anchor & Drag Trajectory:** Pressing the left mouse button sets a fixed grid anchor coordinate. Moving the mouse updates a dynamic target grid coordinate.
- **Cardinal Angle Lock (Shift Key):**
- When Shift is active, calculate the dominant delta component ($\vert{}dx\vert{}$ vs $\vert{}dy\vert{}$) from anchor to target.
- Force the target coordinate to lock to the dominant axis, restricting the placement trajectory strictly to 0°, 90°, 180°, or 270°.
- Non-dominant delta is overridden to 0 relative to the anchor point, suppressing diagonal step generation completely.
- **High-Contrast Guide Line:**
- Render a primary vector guide line from the center of the anchor cell to the center of the locked target cell.
- Line style uses a high-contrast accent (e.g., bright cyan or gold) with dashed styling to ensure visibility over any terrain color.
2. **Pathing & Ghost Preview System**
- **Staircase Pathing Engine:**
- When unrestrained by Shift, run Bresenham's line algorithm between anchor and target to yield an ordered array of target grid cell coordinates.
- This array forms a continuous, non-overlapping sequence of horizontal, vertical, and diagonal staircase steps.
- **Ghost Rendering Pipeline:**
- For each cell coordinate in the path array, project a semi-transparent preview block (matching the active terrain block's dimensions and sprite).
- Preview blocks update dynamically every frame as the mouse moves.
3. **Overlap & Connection Handling (Existing Blocks)**
To support connecting new lines to existing structures (such as extending a 3-block row with 4 additional blocks), use a three-state grid query for every cell along the drag path:
- **Cell State 1: Empty Cell (Valid Placement)**
- **Visual:** Standard semi-transparent green ghost.
- **Action on Release:** Instantiate and place a new block node at this coordinate.
- **Cell State 2: Occupied by Same Block Type (Overlap Skip)**
- **Scenario:** Dragging across or starting from an existing ground block.
- **Visual:** Neutral outline ghost or fully transparent preview (signifying no double-creation).
- **Action on Release:** Skip instantiation for this cell. The tool treats existing identical blocks as valid structural connections without duplicating physics nodes or causing rendering z-fighting.
- **Cell State 3: Occupied by Different/Conflicting Object (Blocked)**
- **Scenario:** Dragging across an obstacle (e.g., crate, hazard, stickman spawn).
- **Visual:** Muted red ghost.
- **Action on Release:** Skip instantiation for this specific cell while preserving valid placements along the rest of the line.
- **Connecting Workflow Example:**
- **Scenario:** Existing blocks at positions (1,0), (2,0), (3,0).
- **Case A (Seamless Extension):** User clicks empty cell (4,0) and drags to (7,0). Ghost blocks display at 4, 5, 6, 7. On release, 4 new blocks are created cleanly adjacent to block 3.
- **Case B (Overlapping Extension):** User clicks existing block (3,0) and drags through to (7,0). Position 3 is flagged as Occupied (Skip), while 4, 5, 6, 7 flag as Empty. On release, block 3 remains untouched and blocks 4, 5, 6, 7 are instantiated.
4. **Atomic Transaction & State Management**
- **Batch Commit:** On mouse release, process the path array in a single frame. Collect all newly instantiated block nodes into a single batch array.
- **Grid Spatial Dictionary:** Update the stage’s centralized grid data structure with references to the newly spawned blocks, marking those cell coordinates as occupied for subsequent editing tasks.
### General UI
1. **Controls**
- **Build Cancelling:**
When in edit mode and an object is selected to be created (terrain, prop, stickman, etc) - if the use clicks the LMB we end draw/placement mode (the object button gets toggled) and the cursor returns to normal.
- **Moving Trigger Objects**
When a trigger object (such as an 'Area') gets moved, and it has a current action binded with it, the action display with the dashed line connecting to it does not follow the shape. The action line should redraw once the shape is moved so the use can see it updated.
### Styling
1. When the user clicks a stickman / object in direct mode and a context menu pops up, the font and emoji icons are too small. The font size should be increased for that.
2. When a stickman or object has an assignment, there is an emoji/icon shown under the stickman/object that represents the action. That should also be larger.
3. A styling/theme JSON configuration file should be implemented so the user can edit it manually and change font sizes for both points 1 and 2.
4. The JSON configuration file should also have an entry for grid snap size (so that can persist)
5. It would also be good if the JSON file can also have font names/types configured so the user can change the font used in the sandbox UI.
### Actions
- **Scenario:** When in direct mode and the stickman is selected and an action is picked (walk to waypoint for example), the top corner of the display tells me to click where i want the waypoint to be. I don't think this is very visible to a user (especially a kid.)
- **Solutions:**
1. **Cursor-Attached Floating Tooltip**: Instead of forcing the eye to look up at the top bar, attach a floating instruction pill right next to the mouse pointer.
- **Visual:** A small, rounded badge with a high-contrast background (e.g., bright orange or cyan) that follows the mouse cursor.
- **Content:** 🚩 Click to set walk target with a small [Esc to cancel] tag.
- **Why it works:** Kids follow the mouse pointer with their eyes; placing instructions directly at the cursor ensures zero cognitive friction.
2. **Rubber-Band Trajectory Line & Ghost Marker**
Provide continuous visual context on the canvas connecting the Stickman to the target location while picking a point. - **Trajectory Line:** Draw a dashed or pulsing line from the Stickman’s feet directly to the mouse cursor. - **Ghost Target Icon:** Render a semi-transparent target pin, flag, or footprint icon under the cursor that snaps to the stage floor or grid. - **Color Feedback:** Highlight the line green if the ground path is valid, or red if the target point is out of reach or inside solid terrain.
3. **Custom Action Cursor**
Change the default arrow mouse cursor into a context-specific tool icon when waiting for a click. - **Target Reticle / Flag:** Swap the cursor to a animated targeting reticle or a flag icon. - **Floor Ring:** Project a pulsing circle onto the stage terrain under the cursor to indicate the drop location.
4. **Prominent Top-Center Banner (If keeping text)**
If you keep UI text, move it out of the debug/status bar and convert it into a dedicated floating action banner. - **Position:** Top-center of the viewport, styled like a floating notification card. - **Design:** Bright accent color border, a clear icon (🎯 or 🚩), bold text, and a clickable [ X Cancel ] button so users don't have to rely on knowing the Esc key.
- **Chosen Solution:** Combined Workflow
```
[ Stickman ] ─────── (Dashed Trajectory Line) ───────> [ 🚩 Floating Target Marker ]
└─ [ Pill Tooltip: "Click to walk here!" ]
```
When the action is selected:
1. The mouse cursor changes to a Flag Marker.
2. A dashed rubber-band line draws from the Stickman to the cursor.
3. A floating badge next to the cursor reads "Click to walk here!".
Similar behavior should be taken when the user selectes "When... Trigger Area" and "When... Collision"
## Bugs
1. Walking to waypoint causes jitter when waypoint is reached.
- **Scenario:** When creating a waypoint for a stickman - playing the scene causes the stickman to jitter rapidly up and down when the waypoint is reached.
- **Reproduce:**
1. Place a stickman
2. Go into direct mode
3. Create a walking waypoint for the stickman.
4. Enter Play mode
5. Observe the stickman walking to the waypoint.
- **Results:** The stickman walks to the waypoint, and jitters rapidly but slightly up and down.
- **Expected:** The stickman stops - no more movement.
plans/PHASE_4b_POLISH.md.bugs.md
+119
View File
@@ -0,0 +1,119 @@
# Phase 4: Triggers & Event System — Implementation Plan
## 1. Overview
We have a good start with feature implementation, we want to polish some of the features and fix bugs before the next phase. We don't want too much tech debt
## 2. UI
1. There should be a status bar across the bottom of the screen that can hold information. As of now, that status bar should hold the current coordinates of the mouse at the right side of the bar. Similar to what is in the stickman editor.
2. We need a better way to distinguish between EDIT and DIRECT modes. Let's change to the following
- **Unified Mode Switcher (Segmented Control):** Move mode toggles into a single visual group [ ✏️ Edit | 🎬 Direct | ▶️ Play ] at the far left of the toolbar. Currently, "Direct" sits between object spawners (Area and Grid), making it look like a spawnable object rather than a mode toggle.
- **Contextual Toolbars:** Swap toolbar options based on active mode to eliminate clutter:
- **Edit:** Show spawner buttons (Ground, Ramp, Crate, Stickman), transform tools, and Grid/Snap settings.
- **Direct:** Hide spawner buttons; show director controls like action queue triggers, sequence prompts, target selectors, and event rules (when planning and implementation is complete).
- **Play:** Collapse layout tools entirely, keeping only playback controls (Pause, Restart). This is already complete!
3. **Viewport Color Frame / Canvas Background:** Use distinct visual cues directly on the canvas so you don't need to look at text:
- **Edit Mode:** Keep the active construction grid visible.
- **Direct Mode:** Add a subtle amber/gold viewport border frame (like a camera viewfinder overlay) or change gizmo colors to gold.
- **Play Mode:** Fade out the grid background for a clean preview, accompanied by a subtle green glow around the Play control.
4. **Status Badge (High-Contrast Pill):** Replace the plain text Mode: EDIT with a prominent badge in the top-left or top-right of the viewport:
- ✏️ EDIT (Cyan / Blue Accent)
- 🎬 DIRECTING (Amber / Gold Accent)
- ▶️ SIMULATING (Green Accent)
5. **Cursor Feedback:** Change the mouse cursor per mode (e.g., standard pointer/crosshair in Edit, a target ring or director wand in Direct, and a default game pointer in Play).
## Control and Response
Creating a stage should be a little like 'drawing'. The user should have a very easy time building.
### Terrain Placement (Edit Mode)
1. **Input Handling & Drag Trajectory**
- **Anchor & Drag Trajectory:** Pressing the left mouse button sets a fixed grid anchor coordinate. Moving the mouse updates a dynamic target grid coordinate.
- **Cardinal Angle Lock (Shift Key):**
- When Shift is active, calculate the dominant delta component ($\vert{}dx\vert{}$ vs $\vert{}dy\vert{}$) from anchor to target.
- Force the target coordinate to lock to the dominant axis, restricting the placement trajectory strictly to 0°, 90°, 180°, or 270°.
- Non-dominant delta is overridden to 0 relative to the anchor point, suppressing diagonal step generation completely.
- **High-Contrast Guide Line:**
- Render a primary vector guide line from the center of the anchor cell to the center of the locked target cell.
- Line style uses a high-contrast accent (e.g., bright cyan or gold) with dashed styling to ensure visibility over any terrain color.
2. **Pathing & Ghost Preview System**
- **Staircase Pathing Engine:**
- When unrestrained by Shift, run Bresenham's line algorithm between anchor and target to yield an ordered array of target grid cell coordinates.
- This array forms a continuous, non-overlapping sequence of horizontal, vertical, and diagonal staircase steps.
- **Ghost Rendering Pipeline:**
- For each cell coordinate in the path array, project a semi-transparent preview block (matching the active terrain block's dimensions and sprite).
- Preview blocks update dynamically every frame as the mouse moves.
3. **Overlap & Connection Handling (Existing Blocks)**
To support connecting new lines to existing structures (such as extending a 3-block row with 4 additional blocks), use a three-state grid query for every cell along the drag path:
- **Cell State 1: Empty Cell (Valid Placement)**
- **Visual:** Standard semi-transparent green ghost.
- **Action on Release:** Instantiate and place a new block node at this coordinate.
- **Cell State 2: Occupied by Same Block Type (Overlap Skip)**
- **Scenario:** Dragging across or starting from an existing ground block.
- **Visual:** Neutral outline ghost or fully transparent preview (signifying no double-creation).
- **Action on Release:** Skip instantiation for this cell. The tool treats existing identical blocks as valid structural connections without duplicating physics nodes or causing rendering z-fighting.
- **Cell State 3: Occupied by Different/Conflicting Object (Blocked)**
- **Scenario:** Dragging across an obstacle (e.g., crate, hazard, stickman spawn).
- **Visual:** Muted red ghost.
- **Action on Release:** Skip instantiation for this specific cell while preserving valid placements along the rest of the line.
- **Connecting Workflow Example:**
- **Scenario:** Existing blocks at positions (1,0), (2,0), (3,0).
- **Case A (Seamless Extension):** User clicks empty cell (4,0) and drags to (7,0). Ghost blocks display at 4, 5, 6, 7. On release, 4 new blocks are created cleanly adjacent to block 3.
- **Case B (Overlapping Extension):** User clicks existing block (3,0) and drags through to (7,0). Position 3 is flagged as Occupied (Skip), while 4, 5, 6, 7 flag as Empty. On release, block 3 remains untouched and blocks 4, 5, 6, 7 are instantiated.
4. **Atomic Transaction & State Management**
- **Batch Commit:** On mouse release, process the path array in a single frame. Collect all newly instantiated block nodes into a single batch array.
- **Grid Spatial Dictionary:** Update the stage’s centralized grid data structure with references to the newly spawned blocks, marking those cell coordinates as occupied for subsequent editing tasks.
5. **Controls**
- **Build Cancelling:**
When in edit mode and an object is selected to be created (terrain, prop, stickman, etc) - if the use clicks the LMB we end draw/placement mode (the object button gets toggled) and the cursor returns to normal.
- **Moving Trigger Objects**
When a trigger object (such as an 'Area') gets moved, and it has a current action binded with it, the action display with the dashed line connecting to it does not follow the shape. The action line should redraw once the shape is moved so the use can see it updated.
## Bugs
### Director Issues
1. Area trigger not working
- **Scenario:** Area triggers do not see to do anything.
- **Reproduce:**
1. Place a stickman
2. Place an area
3. Go into direct mode
4. Create a walking waypoint for the stickman that moves through the Area
5. Assign a 'When' action to the stickman - When Enters Trigger Area - Ragdoll
6. Enter Play mode
- **Results:** The stickman walks to the waypoint, but nothing happens when it passes through the area.
- **Expected:** The stickman triggers the area and activates ragdoll.
2. Collisions are not working
- **Scenario:** When assigning a collision trigger, nothing happens
- **Reproduce:**
1. Place a stickman
2. Place a ground where the crate will be on top.
3. Place a crate on top of the ground
4. Go into direct mode
5. Create a walking waypoint for the stickman that moves through the crate
6. Assign a 'When' action to the stickman - When Enters Collides (with crate) - Ragdoll
7. Enter Play mode
- **Results:** The stickman walks to the waypoint, but nothing happens when it collides with the prop.
- **Expected:** The stickman collides with the prop, and the prop moves, etc....