Add viewport tools to select, move, rotate and scale from DevTools

Đang mở
  • Có gì không ổn?
#4,175 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
dart, flutter
Lĩnh vực
devtools, game-dev

Hướng nghiên cứu

Start by getting agreement on how the game-side overlay attaches and blocks input; the issue says this design must be settled before implementation. Then work through the suggested PR sequence, beginning with the connector, tool state and input blocking. Done means the acceptance criteria pass, including tests for drag and coordinate math.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

discussion enhancement
Problem to solve

Components can only be changed through number fields in the DevTools extension. There is no way to click a component in the game to select it, or to drag it into place.

Proposal

DevTools runs apart from the game and only talks to it through service extensions, so this can't live only in the extension. The proposal is a game-side overlay: the extension turns a tool on through a new connector, while hit testing, gizmo drawing and drags all run in the game process. The extension and the game share the selection.

The design needs agreement before implementation, especially how the overlay attaches to the game and how game input is blocked.

Tools: Interact (the default, with no effect on the game), Select, Move, Rotate, Scale.

Selection

  • Get candidates with componentsAtPoint(point).whereType<PositionComponent>(), topmost first.
  • Clicking again at the same point selects the candidate after the current one, wrapping around, so overlapping components can be reached.

Coordinates

  • Map local points to the canvas by walking up the parents and applying each transform. A World is only rendered through the cameras that look at it, so the mapping needs a camera, and a component can have one gizmo per camera.
  • Keep the gizmo outline as four corners, not a rectangle, so rotation, scale and flips on the component and its ancestors all work.

Drags

  • Capture what the drag needs when it starts, so it keeps following the pointer even when a camera follows the dragged component.
  • Measure from the pointer-down position, so the drag slop doesn't offset the component.
  • Support cancelling, which restores the starting value.
  • Move: convert the drag into the parent's space. Axis handles move along the component's local axis.
  • Rotate: turn by the angle the pointer sweeps around the anchor, and invert the direction when the parent space is mirrored.
  • Scale: dragging away from the anchor by one axis length doubles the scale. The square between the axes scales both uniformly.

Handles: suggested sizes are 40 for the axis, 8 to 18 for the free square, 50 for the ring radius, and a 6 pixel grab tolerance. All are fixed in canvas space regardless of zoom.

Snapping: while Shift is held, snap to 8 units, 15° or 0.1 scale, and re-apply the current drag when Shift is pressed or released. On a rotated axis, snap the distance moved so the component stays on the axis.

Suggested PRs
  1. Connector, tool state and input blocking.
  2. Click to select, synced with the extension's tree.
  3. Coordinate mapping and gizmo drawing.
  4. Move tool.
  5. Rotate tool.
  6. Scale tool.
  7. Shift snapping.
Acceptance criteria
  • With the Interact tool, or with DevTools closed, the game behaves exactly as it does today.
  • Nothing from this feature runs in release builds.
  • The game receives no pointer events while another tool is active.
  • Gizmos stay correct with camera zoom, rotated or flipped parents, and multiple cameras.
  • Tools work while the game is paused, and changes are visible straight away.
  • Drag and coordinate math is covered by tests.
More information

Part of the work to move the flame_studio debugging features to flame_devtools. Do this last, since it is the largest piece.

Ngôn ngữ chính
Dart
Star
10.8k
Fork
1.1k
Merge trung bình
1 ngày 21 giờ
Pull request đã merge (30 ngày)
53

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của flame-engine/flame

Tất cả issue của flame-engine/flame

Issue tương tự

Thêm issue về Dart

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.