Hi @Abneto,
Here’s a quick and dirty script I made for sliders that limit the height the handle can move (assuming the meter is 580 units tall).
var SliderControl = pc.createScript('sliderControl');
SliderControl.attributes.add('type', {
type: 'string',
title: 'Slider Type?',
description: 'handle,meter'
});
SliderControl.attributes.add('handle', {
type: 'entity',
title: 'Handle Object'
});
SliderControl.attributes.add('screenobject', {
type: 'entity',
title: 'Screen Object'
});
SliderControl.prototype._handleDragHelper = null;
// initialize code called once per entity
SliderControl.prototype.initialize = function() {
var app = this.app;
var self = this;
if(this.type === 'handle') {
this._handleDragHelper = new pc.ElementDragHelper(this.entity.element, 'y');
this._handleDragHelper.on('drag:move', function(position) {
self._handleDragHelper._deltaHandlePosition.y = pc.math.clamp(self._handleDragHelper._deltaHandlePosition.y, 0,580);
self.entity.setLocalPosition(self._handleDragHelper._deltaHandlePosition);
app.fire('updatemeter');
});
}
else if(this.type === 'meter') {
app.on('updatemeter', function() {
self.entity.setLocalScale(1,self.handle.getLocalPosition().y/580,1);
});
}
};
// update code called every frame
SliderControl.prototype.update = function(dt) {
};
// swap method called for script hot-reloading
// inherit your script state here
// SliderControl.prototype.swap = function(old) { };
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/
It looks like the way you’re declaring your variables might be messing with things. You’ll notice in my script that I only assigned the pc.ElementDragHelper to certain objects, and I used ‘this’ so that it’s only associated with the object the script is attached to instead of the global scope.
Here is another example where I limit the placement of an object after dragging is stopped based on the width and height of my elements:
var CcCargoScreen = pc.createScript('ccCargoScreen');
CcCargoScreen.attributes.add('monitor', {
type: 'entity',
title: 'Cargo Monitor'
});
CcCargoScreen.attributes.add('unloadColor', {
type: 'rgb',
title: 'Unloaded Color',
default: [1,1,1]
});
CcCargoScreen.attributes.add('loadColor', {
type: 'rgb',
title: 'Loaded Color',
default: [0.165,0.525,0.702]
});
CcCargoScreen.prototype.isLoaded = false;
// initialize code called once per entity
CcCargoScreen.prototype.initialize = function() {
var app = this.app;
var self = this;
this.origPos = this.entity.getLocalPosition().clone();
this._handleDragHelper = new pc.ElementDragHelper(this.entity.element);
this._handleDragHelper.on('drag:start', function() {
self.entity.setLocalScale(1.25,1.25,1.25);
});
this._handleDragHelper.on('drag:end', function() {
self.entity.setLocalScale(1.0,1.0,1.0);
if(self.inCargoHold(self.entity.getLocalPosition()) && !self.isLoaded) {
self.isLoaded = true;
self._handleDragHelper._deltaHandlePosition.x = pc.math.clamp(self._handleDragHelper._deltaHandlePosition.x,
self.monitor.getLocalPosition().x - (self.monitor.element.width/2) + (self.entity.element.width/2),
self.monitor.getLocalPosition().x + (self.monitor.element.width/2) - (self.entity.element.width/2));
self._handleDragHelper._deltaHandlePosition.y = pc.math.clamp(self._handleDragHelper._deltaHandlePosition.y, self.monitor.getLocalPosition().y - (self.monitor.element.height/2) + (self.entity.element.height/2),
self.monitor.getLocalPosition().y + (self.monitor.element.height/2) - + (self.entity.element.height/2));
self.entity.setLocalPosition(self._handleDragHelper._deltaHandlePosition);
self.monitor.script.ccCargoScreenMonitor.loadedcount++;
self.entity.element.color = self.loadColor;
self.entity.children[0].element.color = self.loadColor;
app.fire('updateCargoCount');
app.fire('cargoChange', 'load', self.entity.children[0].element.text);
}
else if (self.inCargoHold(self.entity.getLocalPosition()) && self.isLoaded) {
self._handleDragHelper._deltaHandlePosition.x = pc.math.clamp(self._handleDragHelper._deltaHandlePosition.x,
self.monitor.getLocalPosition().x - (self.monitor.element.width/2) + (self.entity.element.width/2),
self.monitor.getLocalPosition().x + (self.monitor.element.width/2) - (self.entity.element.width/2));
self._handleDragHelper._deltaHandlePosition.y = pc.math.clamp(self._handleDragHelper._deltaHandlePosition.y,
self.monitor.getLocalPosition().y - (self.monitor.element.height/2) + (self.entity.element.height/2),
self.monitor.getLocalPosition().y + (self.monitor.element.height/2) - + (self.entity.element.height/2));
self.entity.setLocalPosition(self._handleDragHelper._deltaHandlePosition);
}
else if (!self.inCargoHold(self.entity.getLocalPosition()) && self.isLoaded) {
self.isLoaded = false;
self.monitor.script.ccCargoScreenMonitor.loadedcount--;
app.fire('updateCargoCount');
self.entity.element.color = self.unloadColor;
self.entity.children[0].element.color = self.unloadColor;
self.entity.setLocalPosition(self.origPos);
app.fire('cargoChange', 'unload',self.entity.name,self.entity.children[0].element.text);
}
else if (!self.inCargoHold(self.entity.getLocalPosition()) && !self.isLoaded) {
self.entity.setLocalPosition(self.origPos);
}
});
app.on('cargoReset', function() {
self.isLoaded = false;
self.entity.element.color = self.unloadColor;
self.entity.children[0].element.color = self.unloadColor;
self.entity.setLocalPosition(self.origPos);
});
};
CcCargoScreen.prototype.inCargoHold = function(position) {
if(position.x + (this.entity.element.width/2) > this.monitor.getLocalPosition().x - (this.monitor.element.width/2) &&
position.x - (this.entity.element.width/2) < this.monitor.getLocalPosition().x + (this.monitor.element.width/2) &&
position.y + (this.entity.element.height/2) > this.monitor.getLocalPosition().y - (this.monitor.element.height/2) &&
position.y - (this.entity.element.height/2) < this.monitor.getLocalPosition().y + (this.monitor.element.height/2)) {
return true;
}
else {
return false;
}
};
// update code called every frame
CcCargoScreen.prototype.update = function(dt) {
};
// swap method called for script hot-reloading
// inherit your script state here
// CcCargoScreen.prototype.swap = function(old) { };
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/
Here you can see the use of the formulas from Mozilla above to place the object with range of the designated area after dragging has stopped. I hope these examples are helpful, and of course, if I went wrong somewhere, I would love to hear from the rest of the community.
