Adobe Animate workaround for hittest with HTML5

Contributor ,
Mar 21, 2022 Mar 21, 2022

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; 
	
	}
}

 

hittest demo.jpg

TOPICS
Code

Views

143

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Mar 22, 2022 Mar 22, 2022
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, ...

Likes

Translate

Translate
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

Hi.

 

Thanks for sharing.

 

Have you tried the localToLocal [1, 2] method?

 

Please let us know.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 21, 2022 Mar 21, 2022

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 22, 2022 Mar 22, 2022

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 22, 2022 Mar 22, 2022

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 22, 2022 Mar 22, 2022

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 22, 2022 Mar 22, 2022

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

LATEST

Nice!

 

Actually both hitTest and localToLocal methods belong to CreateJS.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines