How to drag and drop a Entity (it isn't a UI element) ?

Hi there,

I'll attach an example system that should point you to the right direction. There's a couple of requirements with this:
- need to have two custom components: 'Draggable' and 'Dragged'. These can be empty without any defined values.
- need to have a camera entity with the name 'Camera'.
- in order to drag something, it needs to be a sprite with 'Sprite2DRenderOptions' and 'Draggable' components.

Code (JavaScript):

1. namespace game {
2. export class CanvaslessDragSystem extends ut.ComponentSystem {
3.     OnUpdate(): void {
4.         // calculate mouse cursor position inside the Tiny canvas
5.         const display = this.world.getConfigData(ut.Core2D.DisplayInfo);
6.         let mousePos = ut.Core2D.Input.getInputPosition();
7.         // adjust 0,0 to the center of the Tiny canvas
8.         mousePos.x -= display.width / 2;
9.         mousePos.y -= display.height / 2;
10.  
11.         // calculate mouse cursor position in world coordinates
12.         const camera = this.world.getEntityByName("Camera");
13.         const cameraPos = this.world.getComponentData(camera, ut.Core2D.TransformLocalPosition).position;
14.         const halfSize = this.world.getComponentData(camera, ut.Core2D.Camera2D).halfVerticalSize;
15.         const mouseWorldPos = new Vector2(
16.             cameraPos.x + mousePos.x / (display.width / 2) * (display.width / display.height * halfSize),
17.             cameraPos.y + mousePos.y / (display.height / 2) * halfSize);
18.  
19.         // update entities with the Dragged component to use the cursor position
20.         this.world.forEach([ut.Entity, game.Dragged, ut.Core2D.TransformLocalPosition],
21.             (entity, draggable, localPos) => {
22.                 localPos.position = new Vector3(
23.                     mouseWorldPos.x, mouseWorldPos.y, localPos.position.z);
24.             });
25.  
26.         // check for mouse button events
27.         const mouseDown = ut.Core2D.Input.getMouseButtonDown(0);
28.         const mouseUp = ut.Core2D.Input.getMouseButtonUp(0);
29.         if (!mouseDown && !mouseUp)
30.             return;
31.  
32.         // check if the mouse has been clicked on top of a draggable sprite
33.         this.world.forEach([ut.Entity, ut.Core2D.TransformLocalPosition, ut.Core2D.Sprite2DRendererOptions, game.Draggable],
34.             (entity, localPos, spriteOpts, draggable) => {
35.                 const entityPos = localPos.position;
36.                 const entitySize = new Vector2(
37.                     spriteOpts.size.x / 2, spriteOpts.size.y / 2);
38.  
39.                 // perform a hit test to add/remove the Dragged component
40.                 if (mouseWorldPos.x < entityPos.x + entitySize.x
41.                     && mouseWorldPos.x > entityPos.x - entitySize.x
42.                     && mouseWorldPos.y < entityPos.y + entitySize.y
43.                     && mouseWorldPos.y > entityPos.y - entitySize.y) {
44.                         if (mouseDown && !this.world.hasComponent(entity, game.Dragged))
45.                             this.world.addComponent(entity, game.Dragged);
46.                         if (mouseUp && this.world.hasComponent(entity, game.Dragged))
47.                             this.world.removeComponent(entity, game.Dragged);
48.                 }
49.             });
50.     }
51. }
52. }
53.  

17.1 edit:

1. Modified the example to use display.width and display.height instead of frameWidth and frameHeight. This makes it work even if the canvas size is different from the browser frame size.
2. Added a check for mouseDown and mouseUp before the second forEach loop. This will avoid unnecessary operations when there is no mouse click events.

Cheers!