9 Replies Latest reply on Feb 20, 2013 5:13 PM by chanojuano

    hitTest() how to do it on edge?!

    chanojuano

      I been looking and looking for a tutorial on how to do a hit test between two symbols in edge.

       

      I see we have a variables like, gotoAndPlay like and symbols like, so it would b e absurde that there was not a easy way to implement the hitTest wich is the heart and soul of everyflash game, this wave you would trigger a huge game develoment with animate and conquer the IOS

       

      I dont think that we should develop on flash CS5 and then convert it with google swiffy and then converto to the strange json that it makes, with all the bugs and lack of support this would carry

       

      just a simple, as it was with flash or close to this wonderfullest thing

       

      if(_root.mono.hitTest(_root.malo1)){

         _root.gotoAndPlay("muerte")

      }

       

      this donne properlly was beautyfull and so powerfull

       

      Thank so much good samaritans rescuing the poor flashed bread developers

       

      best wishes from Mexico!

        • 1. Re: hitTest() how to do it on edge?!
          chanojuano Level 1

          so there is not hum? so being heavy and no hitTest() i guess i better be off learning canvas...

          • 2. Re: hitTest() how to do it on edge?!
            TimJaramillo Level 4

            Hi chanojuano,

             

            Edge isn't really meant to be a game framework. If you're building a game, I'd reccommend taking a look at CreateJS (this uses canvas). I've built a game with it, and it was pretty breezy to use. It's code is meant to mimic the Flash display list. If you're a Flash dev, you'll love it!: http://createjs.com/#!/CreateJS

             

            Anyhow, below is a simple js function that returns true/false depending on if the 2 incoming objects intersect. BUT, to use in Edge, you'd have to change all the x/y values to offset.left/offset.top, and use jQuery to get the width and height values. I tried to do this, but have been unsuccessful thus far ...

             

            sym.collides = function(a, b) {

                                return a.x < b.x + b.width &&

                               a.x + a.width > b.x &&

                               a.y < b.y + b.height &&

                               a.y + a.height > b.y;

                      }

            • 3. Re: hitTest() how to do it on edge?!
              chanojuano Level 1

              Thank you very much Tim, i am just so rooten in actionscript for so long, i will play with this, you are so kind!

              • 5. Re: hitTest() how to do it on edge?!
                chanojuano Level 1

                Thanks again, when the flashCS6 came out i was so anxios to cover this createJS technology but the tutorials that came out with it where very basic, and as i told u i just want that hitTest function, because to me a game cannot about just poping baloons with mouseclic, so i was searching and searching for a couple months and then i gave it up, i tought edge was the answer, and u know all that stuff about flash dying, i felled i should abandon it, but that game tutorial looks good, thanks a lot Tim. My drama is that here in mexico nobody makes games, so i was for 9 years trying to learn to make them with flash and once i did, flash was death, so clients where all about the thing working on their mobiles and all, so i want the shortest way to regain my habilities with the right technology!

                 

                thanks a lot, have a great week!

                • 6. Re: hitTest() how to do it on edge?!
                  TimJaramillo Level 4

                  Cool, if you do use CreateJS, here's the hitTest function I used in my game ("boundsWidth" and "boundsHeight" props are built in to CreateJs- they are the width and height of first frame of the object):

                   

                  p._collides = function(a, b) {

                                      return a.x < b.x + b.boundsWidth &&

                                     a.x + a.boundsWidth > b.x &&

                                     a.y < b.y + b.boundsHeight &&

                                     a.y + a.boundsHeight > b.y;

                            }

                   

                  I built my game using prototypes, which are psuedo-classes ... to structure it similar to using Flash .as classes.

                  • 7. Re: hitTest() how to do it on edge?!
                    Quaver80

                    I'm new to Edge and HTML 5 but stumbled upon this thread and was having a go at converting the hitTest function for Edge and I think I've cracked it - see below.  I hope it helps.

                     

                    function hitTest(a, b) {

                        aPos = {x:parseInt(a.css('left')), y:parseInt(a.css('top'))};

                        bPos = {x:parseInt(b.css('left')), y:parseInt(b.css('top'))};

                     

                        return aPos.x < bPos.x + b.width() &&

                        aPos.x + a.width() > bPos.x &&

                        aPos.y < bPos.y + b.height() &&

                        aPos.y + a.height() > bPos.y

                    }

                     

                    I'm now going to try and customise it to accommodate a point hit test rather than an object intersection hit test, as this would suit my needs more.  I will post if I manage it

                     

                    Oh, and I forgot to say - thanks Tim for posting the original function!

                    • 8. Re: hitTest() how to do it on edge?!
                      Quaver80 Level 1

                      OK, I think I've cracked the point hit test too - here's a cut down version of my code in Edge that works with the mouse position.  Please note this is still work in progress and by no means perfect but I hope it helps some folk.

                       

                      dragItem.mousedown(function(e) {

                           e.preventDefault();

                           startDrag();

                      });

                       

                      sym.$('#Stage').mousemove(function(e) {

                           e.preventDefault();

                           mousePos = {x:e.pageX, y:e.pageY};

                           moveDrag();

                      });

                       

                      sym.$('#Stage').mouseup(function(e) {

                           e.preventDefault();

                           endDrag();

                      });

                       

                      function startDrag(){

                           dragOn = true;

                      }

                       

                      function moveDrag(){

                           if(dragOn){

                                dragItem.css({ top: mousePos.y - (dragItem.height()/2), left: mousePos.x - (dragItem.width()/2) });

                           }

                      }

                       

                      function endDrag(){

                           dragOn = false;

                           hitSuccess = pointHitTest(mousePos, sym.$('Target Object'));

                           alert (hitSuccess);

                      }

                       

                      function pointHitTest(mousePos, obj) {

                           objPos = {x:parseInt(obj.css('left')), y:parseInt(obj.css('top'))};

                           return mousePos.x < objPos.x + obj.width() &&

                           mousePos.x > objPos.x &&

                           mousePos.y < objPos.y + obj.height() &&

                           mousePos.y > objPos.y

                      }

                      • 9. Re: hitTest() how to do it on edge?!
                        chanojuano Level 1

                        Quaver that is really awesome, would there be a way u could upload a simple file to deconstruct that displays this? thanks a lot, i knew it was a matter of time for a little genius like u to surface!!