9 Replies Latest reply on Feb 24, 2018 10:46 AM by markr17328370

    collisions hitTest() animate 2017

    cbunbury20 Level 1

      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!

        • 1. Re: collisions hitTest() animate 2017
          kglad Adobe Community Professional & MVP

          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

          • 2. Re: collisions hitTest() animate 2017
            cbunbury20 Level 1

            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

            • 3. Re: collisions hitTest() animate 2017
              kglad Adobe Community Professional & MVP

              are you going to use adobe animate?

               

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

              • 4. Re: collisions hitTest() animate 2017
                cbunbury20 Level 1

                yes

                 

                and

                 

                yes

                • 5. Re: collisions hitTest() animate 2017
                  cbunbury20 Level 1

                  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....

                  • 6. Re: collisions hitTest() animate 2017
                    Colin Holgate MVP & Adobe Community Professional

                    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.

                    • 7. Re: collisions hitTest() animate 2017
                      cbunbury20 Level 1

                      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

                      • 8. Re: collisions hitTest() animate 2017
                        Colin Holgate MVP & Adobe Community Professional

                        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.

                        • 9. Re: collisions hitTest() animate 2017
                          markr17328370 Level 1

                          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");

                          }

                          }