Dragging and dropping items in first person

Hi, If anyone can help me that’d be great, heres my problem:

I am currently working on a first person game, and i want to be able to drag and drop stuff, like in Karlson(game by Dani), please, if anyone can, help

Hi @Nicholas_Taylor and welcome! There are different ways to do this. The page and topic below can help you. Please share your result so far if you get stuck.

https://developer.playcanvas.com/en/tutorials/entity-picking/

Thank you so much, this is going to help quite a bit

1 Like

One question, do I add collision to the entity being dragged

Yes, the entity that you want to drag need a collision component and a kinematic rigidbody component.

I did all of that, added the script but it doesn’t drag.

If you share a link of your project, someone can check what’s going wrong.

ok, here it is:
https://playcanvas.com/editor/scene/1316984

I mightve fixed it because the player wasnt “Player” it was “player”
but just in case, here it is
the entity is the blue block…in case it wasn’t obvious

Personally I would use the raycast method to pick up an entity, because right now you have to move on the entity to pick it up. But if you are okay with that you have to create an empty child entity of your player with the name Point and place this entity in front of your camera.

So, create a whole new entity?
do I add the script to it?

Yes, as a child entity of your player entity.

No.

So I add the new entity to the player, and then what?
Do I add the rigid body and collision?

No, that will be the position of the entity that you picked up. The script need it.

when I drop it it puts it in the center of the floor

Actually the Point entity need to be a child of you Camera entity.

I didn’t know that reparent set the position back to zero. You can add something like below after the reparent rule. (For this your Point entity need to be a child entity of your Camera entity).

var point = this.app.root.findByPath('Player/Camera/Point');
this.entity.setPosition(point.getPosition());

how do I add

var point = this.app.root.findByPath(‘Player/Camera/Point’);
this.entity.setPosition(point.getPosition());

do I make a new script?

var Pickable = pc.createScript('pickable');

// initialize code called once per entity
Pickable.prototype.initialize = function () {
    this.pickedUp = false;
    this.entity.collision.on('collisionstart', this.onCollisionStart, this);
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
};

Pickable.prototype.onCollisionStart = function (result) {
    if (result.other.name === 'Player' && !this.pickedUp) {
        this.pickedUp = true;
        var point = result.other.findByName('Point');
        this.entity.reparent(point);
        this.entity.setPosition(point.getPosition());
    }
};

Pickable.prototype.onMouseDown = function (event) {
    if (event.button === pc.MOUSEBUTTON_LEFT) {  
        this.entity.reparent(this.app.root.findByName('Root'));
        var point = this.app.root.findByPath('Player/Camera/Point');
        this.entity.setPosition(point.getPosition());
        this.pickedUp = false;
    }
};

ok, ill try this thanks, for the help btw

it just shows this

image