Collision Detection - Revision history

Filmote: /* But how does the collision detection work? */

2024-08-16T04:59:38Z

But how does the collision detection work?

← Older revision		Revision as of 04:59, 16 August 2024
Line 46:		Line 46:
	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));
	</pre>		</pre>



	Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.		Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.

Filmote at 04:45, 16 August 2024

2024-08-16T04:45:54Z

← Older revision		Revision as of 04:45, 16 August 2024
Line 1:		Line 1:

	~~=== Background ===~~
	The Arduboy2 library provides functions to detect when two rectangles or a rectangle and a point overlap. It is implemented in such a way that is independent of other constructs such as the screen and sprites. In practice though, the detection of collisions is often focused on the collision of sprites (players, bullets, etc) with other entities (enemy sprites, background elements or other play elements). These collisions may occur onscreen or off and functions within the library are flexible enough to cater for this.		The Arduboy2 library provides functions to detect when two rectangles or a rectangle and a point overlap. It is implemented in such a way that is independent of other constructs such as the screen and sprites. In practice though, the detection of collisions is often focused on the collision of sprites (players, bullets, etc) with other entities (enemy sprites, background elements or other play elements). These collisions may occur onscreen or off and functions within the library are flexible enough to cater for this.

	The following examples and code assume you are familiar with the concept and functions available to render sprites. More information on this can be found in the article covering the [[Sprites / SpritesB Library]].		The following examples and code assume you are familiar with the concept and functions available to render sprites. More information on this can be found in the article covering the [[Sprites / SpritesB Library]].

	=== But how does the collision detection work? ===		== But how does the collision detection work? ==

	The Arduboy2 library provides two collision detection methods which are shown below. <pre>		The Arduboy2 library provides two collision detection methods which are shown below. <pre>
	bool collide(Point point, Rect rect);		bool collide(Point point, Rect rect);
Line 110:		Line 110:
	Running the above code will print 0 as the two rectangles do not overlap anymore. The first rectangle’s top left corner is now at 0, 0 and its lower right corner is at 4, 4. The second rectangle’s top left corner is at 5, 5 and its lower left corner is at 11, 11.		Running the above code will print 0 as the two rectangles do not overlap anymore. The first rectangle’s top left corner is now at 0, 0 and its lower right corner is at 4, 4. The second rectangle’s top left corner is at 5, 5 and its lower left corner is at 11, 11.

	~~One (minor) issue~~ with the ~~detection~~ code ~~is that when detecting collisions, you need~~ to ~~construct~~ the ~~‘rectangle’~~ and ~~‘point’ structures based on the positions of~~ the ~~players~~ and ~~obstacles in the game~~.		== Using Collision Detection with Sprites ==


			It is common to want to detect collisions between sprites - such as a player and an enemy. This often results in code like the following being scattered through a game's code to create Rects with the same position, width and height as the player and enemy sprites.

	<pre>		<pre>
	~~Serial.print("A collides with B : ");~~		Rect player = { player.x, player.y, 16, 16 };
	~~Serial.println(arduboy.collide( (~~Rect){xA, yA, 16, 16}~~, (~~Rect){xB, yB, 16, 16} ));		Rect enemy = { enemy.x, enemy.y, 16, 16 };

			Serial.println(arduboy.collide(player, enemy);
	</pre>		</pre>

	~~In the sample code above, two rectangle structures are populated with the current positions of the moving squares and the image size (16 x 16 pixels).~~ This is ~~relatively simple~~ when there are only a ~~few objects~~ to ~~consider~~ but ~~can become a little more complex and error prone~~ if there ~~are numerous objects with~~ different ~~sizes.~~		This is perfectly acceptable when there are only a handful of sprites to track - but what if there were dozens, and their sizes all different? The chance of coding errors increases significantly!

	A typical design pattern for action games is to define a class to hold information about players including their current position. A sample header and implementation class is shown below		Assuming you are using classes to represent your players, enemies and other game play elements, a typical design pattern for action games is to define a class to hold information about players including their current position. A sample header and implementation class is shown below

	<pre>		<pre>
Line 151:		Line 156:
	</pre>		</pre>

	The header declares three public variables for the player’s coordinates and the image used when rendering the screen. It also prototypes a function that will return a rectangle structure that will describe the area on screen that the player currently occupies. The implementation of that function is included in the .cpp file. It simply creates and returns a populated Rect structure using the ‘x’ and ‘y’ coordinates from the class itself and the width and height of the image by reading these from the image array itself.		The header declares three public variables for the player’s coordinates and the image used when rendering the screen. It also prototypes a function that will return a rectangle structure that will describe the area on screen that the player currently occupies. The implementation of that function is included in the .cpp file. It simply creates and returns a populated Rect structure using the ‘x’ and ‘y’ coordinates from the class itself and the width and height of the image by reading these from the image array itself which happen to be the first two bytes when using the standard Sprites library. If you are unfamiliar with how sprite data is stored refer [[Sprites / SpritesB Library\|here]].

	The code below shows the declaration of two player objects and shows how they can be used when testing collisions.		The code below shows the declaration of two player objects and shows how they can be used when testing collisions.


	<pre>		<pre>
Line 179:		Line 183:

	https://github.com/filmote/Collide_Article1 (simple example)		https://github.com/filmote/Collide_Article1 (simple example)

	https://github.com/filmote/Collide_Article2 (using the ‘Player’ class).		https://github.com/filmote/Collide_Article2 (using the ‘Player’ class).

Filmote at 04:30, 16 August 2024

2024-08-16T04:30:16Z

← Older revision		Revision as of 04:30, 16 August 2024
Line 48:		Line 48:


	Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.
			Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.

			Moving the point outside of the square with the following code:
	[[File:Collision 01.png\|thumb]]		[[File:Collision 01.png\|thumb]]
	<pre>		<pre>
Line 66:		Line 69:

	Will print 0 as the point at position 14, 2 is outside of the square whose top left corner is at position 5, 5 and lower right corner is at 15, 15.		Will print 0 as the point at position 14, 2 is outside of the square whose top left corner is at position 5, 5 and lower right corner is at 15, 15.


	The second function compares the position of two rectangles and tests to see if there is any overlap. This is demonstrated in the code below:		The second function compares the position of two rectangles and tests to see if there is any overlap. This is demonstrated in the code below:
	[[File:Collision 02.png\|thumb]]		[[File:Collision 03.png\|thumb]]

	<pre>		<pre>
	Rect r1 = {2, 2, 5, 5};		Rect r1 = {2, 2, 5, 5};
	Rect r2 = {4, 4, 8, 8};		Rect r2 = {5, 5, 7, 7};

	Serial.println(arduboy.collision(r1, r2));		Serial.println(arduboy.collision(r1, r2));
Line 84:		Line 85:


			</pre>

			Running the above code will print 1 as the two rectangles overlap. The first rectangle’s top left corner is at 2, 2 and its lower right corner is at 6, 6. The second rectangle’s top left corner is at 5, 5 and its lower left corner is at 11, 11.

	~~</pre>~~		Moving the smaller rectangle away from the larger ones so they do not overlap:

	~~Will print 1 as the two rectangles overlap.~~ ~~The first rectangle’s top left corner is at 12, 8 and its lower right corner is at 28, 24. The second rectangle’s top left corner is at 16, 20 and its lower left corner is at 32, 36~~.		[[File:Collision 04.png\|thumb]]

	<pre>		<pre>
	r1.x = 40;		r1.x = 0;
	r1.y = 40;		r1.y = 0;

	Serial.println(arduboy.collision(r1, r2))		Serial.println(arduboy.collision(r1, r2))








	</pre>		</pre>

	~~Will~~ print 0 as the two rectangles do not overlap anymore. The first rectangle’s top left corner is now at 40, 40 and its lower right corner is at 56, 56. The second rectangle’s top left corner is at 16, 20 and its lower left corner is at 32, 36.		Running the above code will print 0 as the two rectangles do not overlap anymore. The first rectangle’s top left corner is now at 0, 0 and its lower right corner is at 4, 4. The second rectangle’s top left corner is at 5, 5 and its lower left corner is at 11, 11.

	One (minor) issue with the detection code is that when detecting collisions, you need to construct the ‘rectangle’ and ‘point’ structures based on the positions of the players and obstacles in the game.		One (minor) issue with the detection code is that when detecting collisions, you need to construct the ‘rectangle’ and ‘point’ structures based on the positions of the players and obstacles in the game.
Line 105:		Line 117:
	</pre>		</pre>

	In the sample code ~~aboce~~, two rectangle structures are populated with the current positions of the moving squares and the image size (16 x 16 pixels). This is relatively simple when there are only a few objects to consider but can become a little more complex and error prone if there are numerous objects with different sizes.		In the sample code above, two rectangle structures are populated with the current positions of the moving squares and the image size (16 x 16 pixels). This is relatively simple when there are only a few objects to consider but can become a little more complex and error prone if there are numerous objects with different sizes.

	A typical design pattern for action games is to define a class to hold information about players including their current position. A sample header and implementation class is shown below		A typical design pattern for action games is to define a class to hold information about players including their current position. A sample header and implementation class is shown below

Filmote: /* But how does the collision detection work? */

2024-08-16T04:21:07Z

But how does the collision detection work?

← Older revision		Revision as of 04:21, 16 August 2024
Line 69:		Line 69:

	The second function compares the position of two rectangles and tests to see if there is any overlap. This is demonstrated in the code below:		The second function compares the position of two rectangles and tests to see if there is any overlap. This is demonstrated in the code below:
			[[File:Collision 02.png\|thumb]]

	<pre>		<pre>
	Rect r1 = {12, 8, 16, 16};		Rect r1 = {2, 2, 5, 5};
	Rect r2 = {16, 20, 16, 16};		Rect r2 = {4, 4, 8, 8};

	Serial.println(arduboy.collision(r1, r2));		Serial.println(arduboy.collision(r1, r2));









	</pre>		</pre>

Filmote: /* But how does the collision detection work? */

2024-08-16T04:16:58Z

But how does the collision detection work?

← Older revision		Revision as of 04:16, 16 August 2024
Line 55:		Line 55:

	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));

Filmote: /* But how does the collision detection work? */

2024-08-16T04:16:36Z

But how does the collision detection work?

← Older revision		Revision as of 04:16, 16 August 2024
Line 55:		Line 55:

	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));






	</pre>		</pre>

Filmote: /* But how does the collision detection work? */

2024-08-16T03:10:22Z

But how does the collision detection work?

← Older revision		Revision as of 03:10, 16 August 2024
Line 49:		Line 49:

	Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.		Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.
			[[File:Collision 01.png\|thumb]]

	<pre>		<pre>
	p.x = 20;		p.x = 14;
	p.y = 20;		p.y = 2;

	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));
	</pre>		</pre>

	Will print 0 as the point at position 20, 20 is outside of the square whose top left corner is at position 5, 5 and lower right corner is at 15, 15.		Will print 0 as the point at position 14, 2 is outside of the square whose top left corner is at position 5, 5 and lower right corner is at 15, 15.

Filmote: /* But how does the collision detection work? */

2024-08-16T02:05:44Z

But how does the collision detection work?

← Older revision		Revision as of 02:05, 16 August 2024
Line 31:		Line 31:
	The first function tests to see if a point is contained within the specified rectangle. The sample code below demonstrates this:		The first function tests to see if a point is contained within the specified rectangle. The sample code below demonstrates this:

			[[File:Collision 00.png\|thumb]]
	<pre>		<pre>
	Point p;		Point p;
Line 45:		Line 46:
	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));
	</pre>		</pre>
	~~[[File:Collision 00.png\|thumb]]~~

	Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.		Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.

Filmote at 02:05, 16 August 2024

2024-08-16T02:05:15Z

← Older revision		Revision as of 02:05, 16 August 2024
Line 44:		Line 44:

	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));
			</pre>
	[[File:Collision 00.png\|thumb]]		[[File:Collision 00.png\|thumb]]

	~~</pre>~~

	Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.		Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.

Filmote at 02:04, 16 August 2024

2024-08-16T02:04:39Z

← Older revision		Revision as of 02:04, 16 August 2024
Line 1:		Line 1:
	The code for the application is shown below. It starts by drawing a number of fixed items on the screen. Pressing the ‘A’ button causes two rectangular images to cross the screen colliding with both the fixed objects and each other. The status of the collisions is logged out to the serial port so you can see the results.

			=== Background ===
			The Arduboy2 library provides functions to detect when two rectangles or a rectangle and a point overlap. It is implemented in such a way that is independent of other constructs such as the screen and sprites. In practice though, the detection of collisions is often focused on the collision of sprites (players, bullets, etc) with other entities (enemy sprites, background elements or other play elements). These collisions may occur onscreen or off and functions within the library are flexible enough to cater for this.

	~~But how does~~ the ~~collision detection work?~~		The following examples and code assume you are familiar with the concept and functions available to render sprites. More information on this can be found in the article covering the [[Sprites / SpritesB Library]].

	The Arduboy2 library provides two collision detection methods which are shown below:		=== But how does the collision detection work? ===
			The Arduboy2 library provides two collision detection methods which are shown below. <pre>
	<pre>
	bool collide(Point point, Rect rect);		bool collide(Point point, Rect rect);
	bool collide(Rect rect1, Rect rect2);		bool collide(Rect rect1, Rect rect2);
	</pre>		</pre>

	It also provides two structures to assist:		It also provides two structures to assist.

	<pre>		<pre>
Line 26:		Line 26:
	};		};
	</pre>		</pre>

			The structures describe a rectangle and a point in space - the x / y coordinates are arbitrary and their origin can be anywhere but it typical to align these with screen's coordinates. Thus 0, 0 is located at the top-left corner of the screen with negative x and y values representing locations to the left and above the screen respectively.

	The first function tests to see if a point is contained within the specified rectangle. The sample code below demonstrates this:		The first function tests to see if a point is contained within the specified rectangle. The sample code below demonstrates this:
Line 33:		Line 35:
	Rect r;		Rect r;

	p.x = 10;		p.x = 5;
	p.y = 10;		p.y = 5;

	r.x = 5;		r.x = 2;
	r.y = 5;		r.y = 2;
	r.width = 10;		r.width = 10;
	r.height = 10;		r.height = 10;

	Serial.println(arduboy.collision(p, r));		Serial.println(arduboy.collision(p, r));
			[[File:Collision 00.png\|thumb]]

	</pre>		</pre>

	~~Will~~ print 1 as the point at position 10, 10 is in the centre of the square whose top left corner is at position 5, 5 and lower right corner is at 15, 15.		Running the above code will print 1 as the point at position 5, 5 is in the centre of the square whose top left corner is at position 2, 2 and lower right corner is at 11, 11.


	<pre>		<pre>