Allow to add a vertex to a collision mask by pulling an edge. #4778

D8H · 2023-01-03T17:40:30Z

http://gdevelop-storybook.s3-website-us-east-1.amazonaws.com/pull-new-vertex/latest/index.html?path=/story/objecteditor-spriteeditor--collision-masks

LuniMoon · 2023-01-05T10:14:11Z

UX frictions identified during individual testing to consider:

On Mobile:
Video with the interaction: https://user-images.githubusercontent.com/103995399/210753877-5a5ed200-4640-4e57-bd46-d19bd7092a4d.mp4

Zooming in/out with the "pinch" interaction (my first reaction since this is common mobile interaction, instead of using the zoom bar) makes a mess with vectors. I would either a "AAmobileU I can zoom in/out pinching the collision mask workspace" or if that's too complex, "block" the possibility of adding a new vector when the user "pinches" the screen (probably hard too?)
Moving around the workspace (during zoom-in) to edit other vectors (with one hold/drag interaction of my finger) also makes a vector mess. This interaction is tricky cause we need to distinguish between wanting to move a vector or navigate the space
Better visual feedback for "press and hold" vectors: the finger "hides" the vector just under, so there is no way to tell if it is selected or placed on the proper location. Mobile devices (a representation of Apple's on this case) had some "magnifying glass" UI that let the user know what they were selecting.

Question: do we still need the drag for XY lines? It was there to re-order vector position, but I'm not entirely sure that they should be there anymore (in order to prioritise a visual, over a numeric Interface).

Uncertainties to observe during tests (on recruiting status):

Are vector colors visible enough?
How do users click to add a vector on the workspace (click alone or click and drag?)
How do users feel about having "vectors disappearing" when they're merged into a straight line?
Would having a change on cursor (move, add, subtract) would clarify these interactions?

ClementPasteau

lgtm, just a few comments

ClementPasteau · 2023-01-05T11:15:46Z

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/CollisionMasksPreview.js

+  /**
+   * @returns true if the vertex should be deleted.
+   */
+  const magnetDraggedVertexForDeletion = (): boolean => {


I think this function should have a clearer name to say what it does.
But it's confusing because it does both "update the draggedVertex" and "say if it should be deleted"
maybe call it updateMagnetDraggedVertexForDeletion()

I though is was a verb, I'll replace it with "magnetize".

ClementPasteau · 2023-01-05T11:17:37Z

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/CollisionMasksPreview.js

@@ -127,32 +270,45 @@ const CollisionMasksPreview = (props: Props) => {
            />
          );
        })}
-        {mapVector(polygons, (polygon, i) => {
+        {mapVector(polygons, (polygon, polygonIndex) => {


way clearer thanks

ClementPasteau · 2023-01-05T11:22:43Z

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/PointsEditor/index.js

@@ -43,7 +43,7 @@ const horizontalMosaicNodes: EditorMosaicNode = {
  direction: 'row',
  first: 'preview',
  second: 'properties',
-  splitPercentage: 50,
+  splitPercentage: 66.67,


Does this look fine on all resolutions? (+mobile?)

On mobile, it uses the vertical layout. Even with a 1,000 pixels wide window, it seems ok. It allows a bigger image.

LuniMoon · 2023-01-09T13:34:26Z

Vector Wokspace - User testing 7/01/2023 (Thanks @roshh and @beanmatt for your valuable input!):

2 out of 2 users really liked the new vector workspace
1 out of 2 users figured quickly that pressing and dragging, added a new vector
1 out of 2 users clicked once -without dragging- to add a vector. The system didn't add the vector.
They later figure out that clicking while dragging would do what they wanted it to do.
2 out of 2 users tried to delete a vector on the workspace by selecting the vector, and pressing "⌦" (erase/delete) on the keyboard
2 out of 2 users understood that pressing the trashcan deleted a selected vector on the workspace
2 out of 2 users didn't figure out how to delete a vector (both pressed "⌦" to do so)
1 out of 2 users took time to find out that placing a vector on a straight line on the workspace, deletes the vector

Other findings:

Vector color doesn't seem to be an issue (black, red, blue)
Changing the cursor status might help the user understand when a vector is being deleted on a straight line
To complete the (un-existent implementation yet) "move collision mask to the right", users:
- Tried to shift select multiple coordinates on the XY list to later move it
- Double clicked on the center of the mask

To do:

Allow users to delete a vector by pressing "⌦" on their keyboard
When a vector is been dragged to a straight line (to be deleted), change the cursor indicator to show a minus symbol to tell the user their vector will be deleted (see image)

Nice to haves:

Allow users to move selected vectors with keyboard arrows ← → ↑ ↓
Allow keyboard input to undo and redo actions
Allow users to double click on collision masks (to select all vectors) and move them with mouse or keyboard arrows (for more precision)

WIP: Allow to add a vertex to a collision mask by pulling an edge.

9779b88

D8H changed the title ~~Allow to add a vertex to a collision mask by pulling an edge.~~ WIP: Allow to add a vertex to a collision mask by pulling an edge. Jan 3, 2023

D8H added 6 commits January 3, 2023 18:48

Fix flow

45b2ef4

Forbid to remove vertex on a triangle.

f13f07e

Change the colors to make the vertices pop-up more.

f67cec9

Change colors.

4acdce9

Organize the code.

b5dff76

Fix the new vertex hit point when the cursor is outside of the frame.

bd6ef18

D8H changed the title ~~WIP: Allow to add a vertex to a collision mask by pulling an edge.~~ Allow to add a vertex to a collision mask by pulling an edge. Jan 4, 2023

D8H added 4 commits January 5, 2023 10:17

Add some tests.

1e918c1

Remove vertices list dragging.

57f1666

Layout the point editor.

21fd04d

Remove useless import.

d01ec22

Rename some functions.

9f5bc5b

D8H marked this pull request as ready for review January 5, 2023 10:35

D8H requested a review from 4ian as a code owner January 5, 2023 10:35

ClementPasteau approved these changes Jan 5, 2023

View reviewed changes

Review changes: rename a function.

8586fc6

D8H merged commit c0ba26f into master Jan 5, 2023

D8H deleted the pull-new-vertex branch January 5, 2023 11:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow to add a vertex to a collision mask by pulling an edge. #4778

Allow to add a vertex to a collision mask by pulling an edge. #4778

D8H commented Jan 3, 2023 •

edited

LuniMoon commented Jan 5, 2023

ClementPasteau left a comment

ClementPasteau Jan 5, 2023

D8H Jan 5, 2023 •

edited

ClementPasteau Jan 5, 2023

ClementPasteau Jan 5, 2023

D8H Jan 5, 2023 •

edited

LuniMoon commented Jan 9, 2023 •

edited

Allow to add a vertex to a collision mask by pulling an edge. #4778

Allow to add a vertex to a collision mask by pulling an edge. #4778

Conversation

D8H commented Jan 3, 2023 • edited

LuniMoon commented Jan 5, 2023

ClementPasteau left a comment

Choose a reason for hiding this comment

ClementPasteau Jan 5, 2023

Choose a reason for hiding this comment

D8H Jan 5, 2023 • edited

Choose a reason for hiding this comment

ClementPasteau Jan 5, 2023

Choose a reason for hiding this comment

ClementPasteau Jan 5, 2023

Choose a reason for hiding this comment

D8H Jan 5, 2023 • edited

Choose a reason for hiding this comment

LuniMoon commented Jan 9, 2023 • edited

D8H commented Jan 3, 2023 •

edited

D8H Jan 5, 2023 •

edited

D8H Jan 5, 2023 •

edited

LuniMoon commented Jan 9, 2023 •

edited