Drag along x-axis & getting close to hitTest

[eugener2418576]

Hi there,

I am trying to create something a little unique. Essentially I have a picture of a tiger and a human. When the user clicks and drags the tiger along the x-axis (only x-axis) and gets closer to the human, there is a 'risk bar' (similar to a progress bar) which goes up/down depending on how close the tiger is to the human. If 100% risk then user can move onto the next part.

I have an example that was created by the previous person in my job. He created it in Animate Edge however so I can't really look at his file.

https://drive.google.com/open?id=1CPBQJrgxw1ozg8fC4rLOuX20tixmUgo1

How I assume the process works:

1. create draggable object

2. find some sort of constrain for drags (x axis only?)

3. find a way to do 'almost hitTest'.

4. create a 'progress bar' - no idea how do do this.

a little push in the right direction should get me going or some code if someone has done something similar.. or the exact names of what I am looking for if you know what they are called.

Thanks!

[kglad]

the startdrag method requires a bounds rectangle that contrains dragging.  you can also start a loop that checks the difference between the tiger and human x property and use that to control your progress bar's width/height.

[eugener2418576]

Hi Kglad,

Thanks mate, a really good push in the right direction!

I'm trying to get my tiger (handle) to stay within it's boundary.

Here's my code.

this.stop();
createjs.Touch.enable(stage);
var handleHeight = 100; // actually half the height  
var bounds = {x:200, y:300, width:800, height: 200};  
var sliderBoundary = new createjs.Shape();    
sliderBoundary.graphics.beginStroke("#999").  
setStrokeStyle(2).  
drawRect(bounds.x, bounds.y, bounds.width, bounds.height);  
this.stage.addChild(sliderBoundary);    
// we apply the same code for each symbol with the for loop
this.handle.on("mousedown", onMouseDown1.bind(this));
this.handle.on("pressmove", onMouseMove1.bind(this));
this.handle.on("pressup", onMouseUp1.bind(this));
this.handle.x = bounds.x;  
this.handle.y = bounds.y + bounds.height / 2; 
// mouse down event
function onMouseDown1(evt){
var item = evt.currentTarget;
item.offset = {x:0, y:0};
var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
item.offset.x = pt.x - item.x;
item.offset.y = pt.y - item.y;
item.drag = true;
}
// mouse up event
function onMouseUp1(evt){
var item = evt.currentTarget;
item.drag = false;
console.log("finished dragging");
}
// mouse move event
function onMouseMove1(evt){
var item = evt.currentTarget;
item.x = Math.max(bounds.x + handleHeight, Math.min(bounds.x + bounds.height - handleHeight, evt.stageX));
if (item.drag){
var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
item.x = pt.x - item.offset.x;
item.y = pt.y - item.offset.y;
if(evt.stageX > 300){
console.log('current object is stageX over 300');
}
}
}

As you can see i'm using drag code which has previously worked for me. Then I've tried to add a bounding box named 'sliderBoundary'. I add that to my stage but now I need to figure out how to tell the handle to stay in the bounds.

Any ideas?

[kglad · Accepted solution]

message 1 assumed you were using as3.

for javascript, start a loop on mousedown and repeatedly check the mouse position to determine if the dragged object is within bounds.