Hi Animate forum:
Here is my workaround to the problem of there being no built-in hittest in HTML5 JavaScript. (JavaScript developers are you listening?) I found a lot of info on how to do it in plain HTML5, but not much on how to do it in Animate, so I am posting the code below in hopes it saves work for someone. You can download the FLA, HTML and JS files from dropbox: hittest_demo.
The red and blue buttons instantiate flowers from the library. Drag them to the compost bin and see them disappear (the JPG shows a blue flower about to disappear with the intersection of hit areas.) Basically the code works by testing for the intersection of rectangles described in the if clause (code below). If anyone can improve on the code, please contribute.
Also, I have one question: How would I delete the flowers after they become invisible? Thanks.
Zaffer
let flower;
let compost = this.compost_mc;
let flowerW = 32; //width and height of flower clips
let compostW = 40; //width of compost bin
let compostH = 80; //height of compost bin
this.redButton_btn.addEventListener("click", positionRedFlower.bind(this));
this.blueButton_btn.addEventListener("click", positionBlueFlower.bind(this));
function positionBlueFlower() //instantiates a blue flower from the library
{
const blueFlower_mc = new lib.blueFlower();
this.addChild(blueFlower_mc);
blueFlower_mc.x = 75;
blueFlower_mc.y = 75;
blueFlower_mc.addEventListener("pressmove", moveSomeFlower.bind(this));
}
function positionRedFlower() //instantiates a red flower from the library
{
const redFlower_mc = new lib.redFlower();
this.addChild(redFlower_mc);
redFlower_mc.x = 75;
redFlower_mc.y = 200;
redFlower_mc.addEventListener("pressmove", moveSomeFlower.bind(this));
}
/*
function moveSomeFlower() makes flowers draggable and makes hittest with compost bin.
hittest works by testing if the rectangle described by the flower width and height
intersects the rectangle described by the width and height of the compost bin.
hittest areas are shown in black outline.
*/
function moveSomeFlower(e)
{
flower = e.currentTarget;
pt = exportRoot.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = pt.x;
e.currentTarget.y = pt.y;
if(flower.x + (0.5*flowerW) >= compost.x - (0.5*compostW) &&
flower.x - (0.5*flowerW) <= compost.x + (0.5*compostW) &&
flower.y + (0.5*flowerW) >= compost.y - (0.5*compostH) &&
flower.y - (0.5*flowerW) <= compost.y + (0.5*compostH)){
//console.log("hit");
flower.visible = false;
}
}
1 Correct answer
Hi, Zaffer.
Thanks for the file.
Using localToLocal, your moveSomeFlower function could be like this:
function moveSomeFlower(e)
{
var pt1;
flower = e.currentTarget;
pt = exportRoot.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = pt.x;
e.currentTarget.y = pt.y;
pt1 = compost.localToLocal(0, 0, flower);
if (flower.hitTest(pt1.x, pt1.y))
{
flower.parent.removeChild(flower);
flower._off = true; // needed for some versions of Animate
}
}
I hope it helps.
Regards,
...
7
Replies
AdChoices