Table of contents
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.
Top comments (1)
I have hidden comments that appear to be written by a bot
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more