Hello person reading this, I have an issue. I have the same script in multiple entities (a cloning script and a drag and drop script). When I stop draging it, it should clone the character where ever it is, and then put the thing you were dragging back to the spot it’s held at (back in the blue or red area). But it clones the entity after draging it, and then it just breaks. I can’t drag the entities any more, which is all I’m trying to do (nothing else can happen!). I think it has to do that when I clone the entity, I asked for it to delete the cloned entity’s drag and drop script. Or it could be that when I clone the entity, it clones all the other entities, too, so I can’t drag them. HELP PLEASE!
EDITOR
https://playcanvas.com/editor/scene/884474
DRAG AND DROP CODE
var CharDrag = pc.createScript('charDrag');
CharDrag.attributes.add('handle', {type: 'entity', default: null, title: 'Handle'});
CharDrag.attributes.add('axis', {type: 'string', default: "y", title: 'Axis', description: 'lock drag to axis: x, y or xy'});
CharDrag.attributes.add('op',{type:'vec3',title:'Original Position'});
CharDrag.prototype.postInitialize = function() {
if( ! this.handle ) this.handle = this.entity.parent.findByName("CharDragHandle");
if( this.handle ) this.addHandleListeners();
else throw new Error( "CharDrag has no handle" );
this.isDragging = false;
this.touchId = -1;
this.mousePos = new pc.Vec3();
this.anchorPos = this.handle.getLocalPosition().clone();
};
CharDrag.prototype.getUIScreenComponent = function() {
return this.handle.element.screen.screen;
};
CharDrag.prototype.addHandleListeners = function() {
this.handle.element.useInput = true;
this.handle.element.on(pc.EVENT_MOUSEDOWN, this.onPressDown, this);
this.app.mouse.on(pc.EVENT_MOUSEUP, this.onPressUp, this);
this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onPressMove, this);
if( this.app.touch )
{
console.log("initing touches");
this.handle.element.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
this.app.touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
}
this.on('destroy', function() {
this.handle.element.off(pc.EVENT_MOUSEDOWN, this.onPressDown, this);
this.app.mouse.off(pc.EVENT_MOUSEUP, this.onPressUp, this);
this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onPressMove, this);
if( this.app.touch )
{
this.handle.element.off(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
this.app.touch.off(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
this.app.touch.off(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
this.app.touch.off(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
}
});
};
CharDrag.prototype.onTouchStart = function(ev) {
var touch = ev.changedTouches[0];
this.touchId = touch.identifier;
this.startDrag( ev.x, ev.y );
ev.event.stopPropagation();
};
CharDrag.prototype.onTouchMove = function(ev) {
for(var i=0; i< ev.changedTouches.length; i++ )
{
var t = ev.changedTouches[i];
if( t.id == this.touchId )
{
ev.event.stopPropagation();
this.updateMove( t.x, t.y );
return;
}
}
};
CharDrag.prototype.onTouchEnd = function(ev) {
for(var i=0; i< ev.changedTouches.length; i++ )
{
var t = ev.changedTouches[i];
if( t.id == this.touchId )
{
ev.event.stopImmediatePropagation();
this.touchId = -1;
this.endDrag( t.x, t.y );
return;
}
}
};
CharDrag.prototype.onPressDown = function(ev) {
ev.event.stopImmediatePropagation();
this.startDrag(ev.x,ev.y);
};
CharDrag.prototype.onPressUp = function(ev) {
ev.event.stopImmediatePropagation();
this.endDrag(ev.x,ev.y);
};
CharDrag.prototype.onPressMove = function(ev) {
this.updateMove(ev.x,ev.y);
ev.event.stopImmediatePropagation();
};
CharDrag.prototype.startDrag = function(x,y) {
this.isDragging = true;
this.setMouseXY(x,y);
};
CharDrag.prototype.updateMove = function(x,y) {
if( this.isDragging ) this.setMouseXY(x,y);
};
CharDrag.prototype.endDrag = function(x,y) {
this.isDragging = false;
this.entity.script.paste.pasteit();
this.handle.setLocalPosition(this.op);
this.setMouseXY(x,y);
};
CharDrag.prototype.setMouseXY = function(x,y) {
this.mousePos.x = x;
this.mousePos.y = y;
};
CharDrag.prototype.update = function(dt) {
this.updateDrag();
};
CharDrag.prototype.updateDrag = function() {
if( ! this.isDragging ) return ;
if(!this.screen) this.screen = this.getUIScreenComponent();
var device = this.app.graphicsDevice;
var xOffs = this.handle.element.anchor.x*device.width;
var yOffs = this.handle.element.anchor.y*device.height;
var scale = 1/this.screen.scale;
var screenX = (this.axis == 'x' || this.axis == 'xy') ? (this.mousePos.x-xOffs)*scale : this.anchorPos.x ;
var screenY = (this.axis == 'y' || this.axis == 'xy') ? (-this.mousePos.y+yOffs)*scale : this.anchorPos.y ;
this.handle.setLocalPosition(screenX,screenY,0);
};
PASTE (CLONE) CODE
// initialize code called once per entity
Paste.prototype.initialize = function() {
};
// update code called every frame
Paste.prototype.update = function(dt) {
};
Paste.prototype.pasteit = function() {
var centity = this.entity.clone();
this.app.root.findByName("DevLevel").findByName("Screen").addChild(centity);
centity.setPosition(this.entity.getPosition());
centity.enabled = true;
/*if (this.entity.name === "Knight") centity.name = "ClonedKnight";
if (this.entity.name === "DarkKnight") centity.name = "ClonedDarkKnight"; */
centity.script.destroy("charDrag");
};