Copy link to clipboard
Copied
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;
}
}
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,
...Copy link to clipboard
Copied
Copy link to clipboard
Copied
JC, I tried to follow your links for localToLocal but got "This site can't be reached." I think createjs.com is down. I'll try again later.
Speaking of error messages, do you know why my FLA file would not upload? It gave the error message "content type (application/octet-stream) does not match its file extension." Thanks.
Zaffer
Copy link to clipboard
Copied
Hi.
Since yesterday createjs.com is facing instability.
https://twitter.com/CreateJS/status/1505921948483678211
Some users are reporting that it's still happening today.
https://twitter.com/CreateJS/status/1505956863682433024
And the forum doesn't accept FLA files. You can upload yours to a file sharing service like Creative Cloud, Google Drive, Dropbox, WeTransfer, and paste de link here.
Regards,
JC
Copy link to clipboard
Copied
Thanks JC. I edited my original post to include a Dropbox link with the demo files. Hope createJS is up and running soon.
Zaffer
Copy link to clipboard
Copied
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,
JC
Copy link to clipboard
Copied
Thanks JC. I didn't know JavaScript had a built in hitTest. It's a well kept secret! I would probably try to change this code so that the flower and compost bin would fire a hittest anywhere in their respective rectangles, rather then just at their center points
Zaffer
Copy link to clipboard
Copied
Nice!
Actually both hitTest and localToLocal methods belong to CreateJS.