Visual thumb-dot indicator on virtual stick and dpad#173
Conversation
Adds a moving thumb-dot indicator so the player can see where their touch is registering on the on-screen gamepad. Applied to both the left stick (analog and dpad modes) and the right side when it's used as a virtual analog stick (touchGamepadButtonCount === 1). Also makes the dpad's hit region more forgiving — its visible cross was a small tap target compared to the actual feel a thumb wants. The hit region grows from a touchGamepadSize-radius disk to a touchGamepadSize*2 disk, gated to the left half so the wider region never steals a touch from the right-side buttons. A faint touch-zone halo behind the cross visualises this area. - Renderer (left): halo (dpad only), outline ring/cross, filled thumb dot at stickCenter + sticks[0] * touchGamepadSize/2 (radius touchGamepadSize/4). The previous behavior (filled circle, fill toggling on press) is replaced. - Renderer (right): when buttonCount === 1, match the left stick's ring + thumb-dot using sticks[1]. When buttonCount >= 2, render face buttons as before; the dead count<2 branches inside the loop collapse to constants. - Handler: stick hit region widened to touchGamepadSize*2 with a left-half guard. No new state, no new public settings. No new exported symbols.
|
id like to fix the conflicts and just checkin the new engineInput.js |
There was a problem hiding this comment.
Pull request overview
Adds a visual thumb-dot indicator on the on-screen virtual gamepad so the player can see where their touch is being registered, and widens the dpad hit region. The change is local to the touch-gamepad renderer and one hit-test in the touch input handler.
Changes:
- Replace the filled-circle/dpad press indicator with a stroked ring (or cross) plus a filled thumb dot positioned at
stickCenter + touchGamepadSticks[0] * touchGamepadSize/2. - Add a matching ring + thumb-dot renderer for the right side when
touchGamepadButtonCount === 1(driving offtouchGamepadSticks[1]). - Widen the left stick / dpad touch hit region to
touchGamepadSize * 2, gated totouchPos.x < mainCanvasSize.x/2so the right-side buttons aren't shadowed, and draw a faint halo behind the cross to visualize it.
Reviewed changes
Copilot reviewed 1 out of 6 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/engineInput.js | Widens left-side stick/dpad touch region and reworks the touch gamepad renderer to draw a ring + thumb dot for both left and right (single-button) sticks; collapses the face-button branch to a single radius. |
| dist/littlejs.js | Regenerated bundle mirroring the source change; engine version bumped to 1.18.15.1. |
| dist/littlejs.esm.js | Regenerated ESM bundle mirroring the source change. |
| dist/littlejs.release.js | Regenerated release bundle mirroring the source change. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Excellent. Yes makes sense, the other file changes were the build I did when testing. Really probably shouldn't have been in the commit. If you'd like to quickly see it before merging. |
|
@copilot can you fix the conflicts |
thanks! trying to get copilot to wrap it up. i will be doing some more work on touch gamepad so just want to get your changes in first |
|
@copilot resolve the merge conflicts on this PR. Preserve the intended change in src/engineInput.js, and remove the files from the dist folder so the only file in in the change is src/engineInput.js |
This reverts commit 9b494ba.
* Plan: resolve PR #173 conflicts * feat(input): visual thumb-dot indicator on virtual stick and dpad * Revert "Plan: resolve PR #173 conflicts" This reverts commit 9b494ba. * Resolve PR #173 conflicts with src/engineInput.js only * Align dist artifacts with main for PR #173 * docs(input): clarify full-circle arc convention in inputRender Co-authored-by: petegordon <1993032+petegordon@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: petegordon <1993032+petegordon@users.noreply.github.com>
|
done 49a1281 |
Closes #172.
Adds a moving thumb-dot indicator on the on-screen gamepad so the player
can see where their touch is registering. Applied to:
filled thumb dot at
stickCenter + sticks[0] * touchGamepadSize/2(dot radius
touchGamepadSize/4). Replaces the previous filledcircle whose fill toggled on press.
touchGamepadButtonCount === 1— samering + thumb-dot treatment driven by
touchGamepadSticks[1]. Theinput handler was already populating this stick; only the renderer
was missing.
touchGamepadSize-radiusdisk to
touchGamepadSize * 2, gated to the left half so it can'tsteal touches from the right-side buttons. A faint touch-zone halo
behind the cross visualises the area.
No new public settings, setters, or exported symbols. Touches one
source file (
src/engineInput.js); the rest of the diff is theregenerated
dist/bundle.Test plan
npm run build)npm test— 208/208, no new ones; touchbehaviour is renderer/event-driven and can't be exercised in the
node --testharness)dpad accepts touches outside the visible cross
touchGamepadButtonCount = 1,touchGamepadAnalog = true): right side shows ring + thumb dotmatching the left
touchGamepadButtonCount >= 2): unchanged