collisions hitTest() animate 2017

[cbunbury20]

First i want to say the adobe animate team has done a great job to rework a tool that exported this kind of interactivity in swf now in html5 I was a big user and fan of AS2 and was never a fan of AS3 and suffer greattlly with the whole flash funerall process and all that, but to be able to recicle all those habilities that where in the droor for 4 or 5 years? it fells awesome to use and fell flash as best interactive animation for the web again!

I have badder with these issue before, and been pointed by mr Skinner to tutto on his site, and found some others, but always something that was above my code level of understanding cous i an one of those with more graphic desing and anim bck plus had bad math teachers mostlly in other words i need something more simple like in the AS2 times (actionscript 2) wich was:

if(yourhero.hitTest(enemy1)){

    hero.gotoAndPlay("herosdied")

}

other two objects any movie clips on your stage

if(enemy2.hitTest(enemy3)){

   enemy1.gotoAndPlay("bounceanim")

   enemy2.gotoAndPlay("bounceanim")

}

in most game makers, construct2, buildbox, defold, unity its something similar super simple, even in free html5 libraries like enchant,js its as simple as these:

   Apple.intersect(Enemy);

would acomplish the same job very efficientlly.

I seen the flappy birds demo, wich its very good, but it gets complex cous theres lots of functions interacting together, i would need just a simple tutorial for "hodors"(got) with 2 movieclips on esene, moving movie clip with button on stage or mouseclic into a colliding path, then alert("collision success") this would send me upong the sky!!

but i have search and only found big game tutorials, where i cant quite understand or implement.

thank you very much for your attention have a great end of week!

[kglad · Accepted solution]

are you creating an html5/canvas project?

if yes, EaselJS Tutorial: Using hitTest

if no, you can use the hitTestObject of as3 like you used the as2 hitTest

[cbunbury20]

hello thank you very much, but there is not a fla file, i am the kind who always used a multimedia app, toolbook, flash, construct, director, thats the pipeline i am familiar with, i could never do well in the javascript file with html file, so i loved edge animate and now getting back into adobe animate, i can do a lot back from the swf times, now on the canvas, but this tutorial is using shaps, that its creating all with code, so in other words i am and old flasher who is looking into a tutorial for these, in the .fla format, in the flash enviroment, because, i can implement it, on the fla with movieclips and timelines, i would not know how to apply that code to stuff i create in the adobe animate GUI, maybe i am too dumb for these but i am searching, tyvm

[kglad]

are you going to use adobe animate?

if so, will you be creating an html5/canvas project?

[cbunbury20]

yes

and

yes

[cbunbury20]

i guess theres no other way but to dive in the html editor zzz ZZZ zzz if other multimedia products provide this out of the box from their IDE, once you are out of the app, you have to resort to something else....

[Colin Holgate]

I think the biggest difficulty is that the CreateJS team themselves don't use Adobe Animate, and so the example code you'll find online is assuming that you're doing everything in a text editor. Of course you don't have to work that way at all, you can use Animate to do a lot of the graphic work for you. Your challenge is to read the example code and recognize which parts are what you need, and which parts is overhead they had to include because they don't use Animate.

[cbunbury20]

its cumbersome to have to do in an app that one strengh was its online games, not to include support for these function, i understand some more js heavy solutions, but as i said in the flappy birds tutorial example, it puts functions to interact together, like 6 and then i cant track them (bad programmer) doing the points to follow over the graphic its a lot more work and programming understanding that we needed at those times, and it would seem the just dint build it in it, in the code samples just cous they dint want to, like the past version wich dint export responsive. thanks much for your input Colin. I am updating old AS2 files to these new windows format and i get exited that i am getting most things to work, without sweating, but hitTest seems to be more complex, ill keep searching

[Colin Holgate]

Looking at the example code for hittest(), it does seem to just give the lines you would need, in the best case you should be able to convert the AS2 code a line at a time to CreateJS code.

CreateJS doesn't see to have hitetestobject() though, which flappy birds might need. Here's an article on getting pixel perfect hit testing in CreateJS:

EaselJS Pixel Perfect Collision Detection for Bitmaps with Alpha Threshold |indiegamr

kglad posted that link in another thread.

[markr17328370]

Here is an example code for Adobe Animate CC that incorporates 6 drag able items, and 2 drop areas.  This also works when the canvas is set to responsive.  It should be easy enough to cannibalize this into whatever is needed between drag and drop and collision detection / hit test. 

this.block1.on("pressmove", function (evt) {

var p = stage.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x;

evt.currentTarget.y = p.y;

});

this.block2.on("pressmove", function (evt) {

var p = stage.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x;

evt.currentTarget.y = p.y;

});

this.block3.on("pressmove", function (evt) {

var p = stage.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x;

evt.currentTarget.y = p.y;

});

this.block4.on("pressmove", function (evt) {

var p = stage.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x;

evt.currentTarget.y = p.y;

});

this.block5.on("pressmove", function (evt) {

var p = stage.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x;

evt.currentTarget.y = p.y;

});

this.block6.on("pressmove", function (evt) {

var p = stage.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x;

evt.currentTarget.y = p.y;

});

this.on("tick", update.bind(this));

function update() {

var b1 = this.block1.localToLocal(100, 0, this.frontAnswerDrop);

var b2 = this.block2.localToLocal(100, 0, this.frontAnswerDrop);

var b3 = this.block3.localToLocal(100, 0, this.frontAnswerDrop);

var b4 = this.block4.localToLocal(100, 0, this.backAnswerDrop);

var b5 = this.block5.localToLocal(100, 0, this.backAnswerDrop);

var b6 = this.block6.localToLocal(100, 0, this.backAnswerDrop);

if (this.frontAnswerDrop.hitTest(b1.x, b1.y)) {

console.log("b1 collided");

}

if (this.frontAnswerDrop.hitTest(b2.x, b2.y)) {

console.log("b2 collided");

}

if (this.frontAnswerDrop.hitTest(b3.x, b3.y)) {

console.log("b3 collided");

}

if (this.backAnswerDrop.hitTest(b4.x, b4.y)) {

console.log("b4 collided");

}

if (this.backAnswerDrop.hitTest(b5.x, b5.y)) {

console.log("b5 collided");

}

if (this.backAnswerDrop.hitTest(b6.x, b6.y)) {

console.log("b6 collided");

}

}