Search Unity

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

Discussion in 'Project Tiny' started by alamac123, Jan 8, 2019.

  1. alamac123

    alamac123

    Joined:
    Mar 15, 2017
    Posts:
    21
    How to drag and drop a Entity (it isn't a UI element) ?
     
  2. OrewaValiente

    OrewaValiente

    Joined:
    Aug 9, 2017
    Posts:
    1
    Attach a mouse interaction component to the entity. Reach this component in the script and check the "isDown" activity. When it's on "isDown" state, get the X and Y values from ut.Core2D.TransformLocalPosition and basicly replace it with the new ones after isDown is false.
     
  3. Nkon

    Nkon

    Unity Technologies

    Joined:
    Jun 12, 2017
    Posts:
    65
    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!
     
    Last edited: Jan 17, 2019