Table of contents

  1. Show me the code
  2. Basic hit detection explained

My app on the Google play store

My app's GitHub code

Hit detection demo

Show me the code: 

// the vertices that represent the game's ui
GLfloat squareVertices[] = {
        // First square

        -0.800f, -0.0375f,   // Bottom-left corner
        -0.650f, -0.0375f,   // Bottom-right corner
        -0.650f,  0.0375f,   // Top-right corner

        -0.800f, -0.0375f,
        -0.650f,  0.0375f,
        -0.800f,  0.0375f,

        // Second square
        0.85f, -0.0375f,   // Bottom-left corner 
        1.0f, -0.0375f,    // Bottom-right corner
        1.0f,  0.0375f,    // Top-right corner

        0.85f, -0.0375f,
        1.0f,  0.0375f,
        0.85f,  0.0375f
};
void moveSecondSquare(GLfloat *vertices){
    //these are the x-axis boudaries for the second square
    float rightBoundarySquareOne = vertices[14];
    float leftBoundarySquareOne = vertices[12];
    float topBoundarySquareOne = vertices[5];
    float bottomBoundarySquareOne = vertices[3];

    //y-axis boundary for the second box
    float rightBoundarySquareTwo = vertices[2];
    float leftBoundarySquareTwo = vertices[0];
    float topBoundarySquareTwo = vertices[17];
    float bottomBoundarySquareTwo = vertices[15];



    if (!(rightBoundarySquareOne < leftBoundarySquareTwo || leftBoundarySquareOne > rightBoundarySquareTwo)) {
       // LOGI("farthestLeftTesting", "HIT!!!! RESET");

        if (!(topBoundarySquareOne < bottomBoundarySquareTwo || bottomBoundarySquareOne > topBoundarySquareTwo)){
            LOGI("farthestLeftTesting", "Y-RANGE HIT");
            resetSecondSquare(vertices);
            return;
        }

    }

    if(rightBoundarySquareOne <= -1){
        LOGI("farthestLeftTesting", "off screen");

        resetSecondSquare(vertices);
    }else{
        for(int i =12; i <23; i +=2){
              //This moves all the x-axis vertices to the left
              // and simulates movement
            vertices[i] += (-0.02f);
        }

    }



}

Basic hit detection explained

  • The first thing we need to do is to get the boundaries of our squares(technically triangles made to look like squares). These are just points on our objects that represent the largest and lowest points for the objects in the X and Y axis. 
//these are the x-axis boudaries for the second square
    float rightBoundarySquareOne = vertices[14];
    float leftBoundarySquareOne = vertices[12];
    float topBoundarySquareOne = vertices[5];
    float bottomBoundarySquareOne = vertices[3];

    //boundary for the second box
    float rightBoundarySquareTwo = vertices[2];
    float leftBoundarySquareTwo = vertices[0];
    float topBoundarySquareTwo = vertices[17];
    float bottomBoundarySquareTwo = vertices[15];
  • Next we need the hit detection formula:

if (!(right1 < left2 || left1 > right2)){}

  • Which really just means, right boundary for object one is less than left boundary of object two, or left boundary of object one is greater than right boundary for object two. If these conditionals are true this means they are separate. So we have to negate those conditionals with the ! operator. Which means that any time this: (right1 < left2 || left1 > right2) is false, it means there is an overlap and we use ! to make it true. I repeated that formula for both the X-axis and the Y-axis and got this: 
if (!(rightBoundarySquareOne < leftBoundarySquareTwo || leftBoundarySquareOne > rightBoundarySquareTwo)) {
       // LOGI("farthestLeftTesting", "HIT!!!! RESET");

        if (!(topBoundarySquareOne < bottomBoundarySquareTwo || bottomBoundarySquareOne > topBoundarySquareTwo)){
            LOGI("farthestLeftTesting", "Y-RANGE HIT");
            resetSecondSquare(vertices);
            return;
        }

    }
  • The first conditional checks the X-axis and the second conditional checks the Y-axis.

Conclusion

  • Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.