Detección de colisiones

Llamamos detección de colisiones a la lógica que nos permite detectar cuando dos o más sprites, en nuestro caso vistas, chocan entre ellos y en función a esas colisiones actuar en consecuencia.

Para nuestro juego tendremos que detectar cuando la pelota choca con cualquiera de las paletas o en los límites de pantalla, y en cuyo caso producir un cambio en su velocidad con el fin de que se cumpla la tercera Ley de Newton o de acción y reacción. No profundizaremos más en el tema, se deja a gusto del lector hacer el juego un poco más divertido con cambios en relación al punto de impacto de la pelota con la raqueta.

Pues vamos a ello, primeramente tendremos que volver a modificar nuestra cabecera iPingPongViewController.h declarando nuevas variables instanciadas y un método:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#import <UIKit/UIKit.h>
 
@interface iPingPongViewController : UIViewController {
 
	UIView *player1;
	UIView *player2;
 
	UIView *ball;
 
	UILabel *player1Score;
	UILabel *player2Score;
 
	UILabel *startLabel;
 
	CGPoint ballVelocity;
 
	BOOL gameRunning;
 
	NSInteger player1ScoreValue;//New
	NSInteger player2ScoreValue;//New
}
 
@property(nonatomic, retain) UIView *ball;
@property(nonatomic, retain) UIView *player1;
@property(nonatomic, retain) UIView *player2;
 
@property(nonatomic, retain) UILabel *player1Score;
@property(nonatomic, retain) UILabel *player2Score;
 
@property(nonatomic, retain) UILabel *startLabel;
 
@property (nonatomic) CGPoint ballVelocity;
 
@property (nonatomic) NSInteger player1ScoreValue;//New
@property (nonatomic) NSInteger player2ScoreValue;//New
 
-(void)playAgain: (BOOL) newGame;//New
 
@end

No creo que nadie a estas alturas albergue dudas ante el código anterior, simplemente declaramos dos variables instanciadas de tipo NSInteger que almacenarán el tanteo que luego será mostrado por las etiquetas player1Score. Además nos hemos declarado un método que usaremos para controlar quien es el jugador ganador.

Sin más dilación, abrimos iPingPongViewController.m e introducimos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

#define kBallSpeedX 3
#define kBallSpeedY 2
 
#define kFPS 0.01
//New
#define kScoreToWin 5
 
#import "iPingPongViewController.h"
 
@implementation iPingPongViewController
 
@synthesize ball, player1, player2, player1Score, player2Score; 
@synthesize startLabel, ballVelocity;
@synthesize player1ScoreValue, player2ScoreValue;//New
 
...
 
	[NSTimer scheduledTimerWithTimeInterval:kFPS target:self 
                      selector:@selector(gameLoop) userInfo:nil repeats:YES];
}
 
-(void)gameLoop{
 
	if (gameRunning) {
 
		ball.center = 
CGPointMake(ball.center.x + ballVelocity.x, ball.center.y + ballVelocity.y);
 
		//Collision Detection
		if(ball.center.x>self.view.bounds.size.width || ball.center.x < 0){
 
			ballVelocity.x = -ballVelocity.x;	
		}
 
		if(ball.center.y>self.view.bounds.size.height || ball.center.y < 0){
 
			ballVelocity.y = -ballVelocity.y;
		}
 
		if (CGRectIntersectsRect (ball.frame, player1.frame)){
			if (ball.center.y < player1.center.y){
				ballVelocity.y = -ballVelocity.y-0.1;
			}
 
		}
 
		if (CGRectIntersectsRect (ball.frame, player2.frame)){
			if (ball.center.y < player2.center.y){
				ballVelocity.y = -ballVelocity.y+0.1;
			}
 
		}	
 
		if(ball.center.y <= 0) {
			player1ScoreValue++;
			ballVelocity = CGPointMake(kBallSpeedX, kBallSpeedY);
			[self playAgain:(player1ScoreValue >= kScoreToWin)];
		}
 
		if(ball.center.y > self.view.bounds.size.height) {
			player2ScoreValue++;
			ballVelocity = CGPointMake(kBallSpeedX, kBallSpeedY);
			[self playAgain:(player2ScoreValue >= kScoreToWin)];
		}
 
		} else {
 
			if (startLabel.hidden) {
				startLabel.hidden = NO;
			}
 
		}
 
}
 
-(void)playAgain:(BOOL) newGame {
	gameRunning = NO;
	ball.center = self.view.center;
	if(newGame) {
		if(player2ScoreValue > player1ScoreValue) {
			startLabel.text = @"PLAYER 2 WINS!";
		} else {
			startLabel.text = @"PLAYER 1 WINS!";
		}
 
		player2ScoreValue = 0;
		player1ScoreValue = 0;
	} else {
		startLabel.text = @"TAP TO START GAME";
	}
 
	player1Score.text = [NSString stringWithFormat:@"%d",player1ScoreValue];
	player2Score.text = [NSString stringWithFormat:@"%d",player2ScoreValue];
}
...

Al igual que en posts anteriores hacemos uso de constantes, en este caso para representar el número de puntos necesarios para ganar. Ya en nuestro método gameloop vemos como para la implementación de la detección de colisiones simplemente utilizamos cláusulas condicionales if para testear si la pelota se encuentra o tocando los bordes de la pantalla en cuyo caso cambia su velocidad con respecto al eje x, o interseccionando con la paleta, modificando entonces su velocidad en el eje y, y añadiéndole un factor para que la velocidad vaya aumentando en función a los golpes devueltos. Para evitar el molesto efecto que se produce a veces de que la pelota queda atrapada en nuestra paleta hemos introducido un if más que chequea esta problemática.

Lo siguiente que hacemos es comprobar cuando la pelota toca los bordes inferior y superior de nuestra pantalla y que suponen que un jugador ha logrado un punto, por lo tanto se aumenta la variable habilitada para tal fin y se llama al método que acabamos de declarar playAgain, el cual comprueba si hemos alcanzado el número de puntos necesarios para ganar, mostrando el mensaje correspondiente. También desde este método se actualizan las etiquetas que utilizamos como marcador.

Si simulamos ahora veremos como la pelota ya no desaparece de nuestra pantalla, ya que al llegar a una pared esta choca y cambia su dirección manteniéndose en la pantalla, lo mismo ocurre al colisionar con cualquiera de las dos paletas. Nuestro problema reside ahora en que nuestro oponente nos observa impertérrito y no hace ni ademán de devolvernos la pelota…

IA

Una vez implementada la detección de colisiones tenemos que hacer que la vista player2 interactúe con nosotros y nos intente devolver la pelota o lo que es lo mismo, asignarle una ia. Debido al carácter de nuestro caso de estudio, no vamos a profundizar en complejos sistemas para simular inteligencias artificiales, algo completamente fuera del alcance de este caso de estudio.

Por lo tanto vamos a crear una sencilla ia, para ello nuestro competidor empezará su movimiento en el momento en que la pelota sobrepase la red, y su movimiento consistirá en que a partir de este momento seguirá la dirección de la pelota, una constante que llamaremos kPlayer2Speed será el que controlará la velocidad de nuestro competidor y determinará el nivel de dificultad de este.

Pues vamos a ello, esta vez no necesitamos reescribir nuestro header, por eso en iPingPongViewController.m declararemos la constante antes nombrada y la lógica de comportamiento de nuestro oponente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#define kBallSpeedX 3
#define kBallSpeedY 2
 
#define kFPS 0.01
#define kScoreToWin 5
//New
#define kPlayer2Speed 3
 
...
 
-(void)gameLoop{
 
	if (gameRunning) {	
...		
               //AI
		if(ball.center.y <= self.view.center.y) {
			if(ball.center.x < player2.center.x) {
				player2.center = 
        CGPointMake(player2.center.x - kPlayer2Speed, player2.center.y);
			}
 
			if(ball.center.x > player2.center.x) {
				player2.center = 
         CGPointMake(player2.center.x + kPlayer2Speed, player2.center.y);
			}
		}
 
...

Como vemos nuestra lógica consiste en lo anteriormente explicado, comprobamos que la pelota sobrepasa la red y entonces nuestra vista player2 cambiará sus coordenadas con respecto a x en la misma dirección en la que se mueve la pelota con una velocidad determinada por la constante kPlayer2Speed. Tan simple como eso.

Pues ya está, ahora ya podemos simular y ver nuestro juego en acción, muy limitado y poco trabajado, pero ahora es cosa de cada uno mejorarlo a partir de las premisas dadas. Buena Suerte. En próximos post ya terminaremos este caso de estudio, mediante la introducción de un menú y sonidos. Saludos.

Game Loop

El Game Loop, o bucle de juego (¡qué difícil es adaptar términos al castellano!), es una de las partes más importantes de un videojuego, se podría decir que es el corazón de nuestro juego, siendo cada iteración del bucle como un latido, y al igual que a nosotros nos es imposible vivir sin un corazón, a un videojuego le sería imposible existir sin su Game Loop.

Hay infinidad de técnicas para implementar el Game Loop, queda en manos del programador y de las características de la plataforma en la que se trabaja la elección de este. Para este ejemplo no hemos entrado a analizar el grado de optimización de los recursos de nuestro iPhone, simplemente nos hemos limitado a que fuera sencillo y funcional.

Bueno, pues vamos a ir completando nuestro código anterior con el fin de implementar nuestro Game Loop, para ello en el header de nuestra clase iPingPongViewController.h declararemos una nueva variable instanciada que llamaremos ballVelocity, la cual no es más que una estructura del tipo CGPoint que contendrá un par de coordenadas que usaremos para definir la velocidad de nuestra pelota durante la ejecución, y también una variable del tipo BOOL y una etiqueta que usaremos para evitar que el juego empiece a ejecutarse nada más cargarse:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

#import <UIKit/UIKit.h>
 
@interface iPingPongViewController : UIViewController {
 
	UIView *player1;
	UIView *player2;
	UIView *ball;
 
	UILabel *player1Score;
	UILabel *player2Score;
        UILabel *startLabel;//New	
 
	CGPoint ballVelocity;//New
 
	BOOL gameRunning;//New
 
}
 
@property(nonatomic, retain) UIView *ball;
@property(nonatomic, retain) UIView *player1;
@property(nonatomic, retain) UIView *player2;
 
@property(nonatomic, retain) UILabel *player1Score;
@property(nonatomic, retain) UILabel *player2Score;
@property(nonatomic, retain) UILabel *startLabel;//New
 
@property (nonatomic) CGPoint ballVelocity;//New
 
@end

El siguiente paso consistirá en abrir iPingPongViewController.m y, al igual que para implementar nuestra interfaz, sobrecargaremos el método loadView para inicializar nuestras nuevas variables y crearemos una instancia de NSTimer que llamará a nuestro evento gameLoop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

//New
#define kBallSpeedX 3
#define kBallSpeedY 2
 
#define kFPS 0.01
 
#import "iPingPongViewController.h"
 
@implementation iPingPongViewController
 
@synthesize ball, player1, player2, player1Score, player2Score;
@synthesize startLabel, ballVelocity;//New
 
// Implement loadView to create a view hierarchy programmatically,
// without using a nib.
 
- (void)loadView {
 
	//Create the main view and assign a black color to background
	CGRect backgroundFrame = [[UIScreen mainScreen] applicationFrame];
        ...	
 
	//New
	//Tap to Start Label
	startLabel = [[UILabel alloc] initWithFrame:
                             CGRectMake(self.view.center.x-50, 200, 100, 15)];
	startLabel.font = [UIFont fontWithName:@"Helvetica" size:12];
	startLabel.text = @"TAP TO START GAME";
	startLabel.textColor = [UIColor whiteColor];
	startLabel.backgroundColor = [UIColor blackColor];
	[self.view addSubview:startLabel];
 
	//Game start Paused
	gameRunning = NO;
 
	ballVelocity = CGPointMake(kBallSpeedX, kBallSpeedY);
 
	[NSTimer scheduledTimerWithTimeInterval:kFPS target:self 
selector:@selector(gameLoop) userInfo:nil repeats:YES];
}
 
-(void)gameLoop{
 
	if (gameRunning) {
 
	ball.center = 
CGPointMake(ball.center.x + ballVelocity.x, ball.center.y + ballVelocity.y);
 
	} else {
 
		if (startLabel.hidden) {
			startLabel.hidden = NO;
		}			
         }
}
 
...
 
- (void)dealloc {
	[player1 release];
	[player2 release];
	[ball release];
	[player1Score release];
	[player2Score release];
	[startLabel release];//New
        [super dealloc];
}
 
@end

En el código superior vemos como primeramente nos hemos definido una serie de constantes que representan la velocidad de la pelota y la cantidad de frames por segundo (FPS), o lo que es lo mismo, el tiempo en milisegundos que nuestro timer tardará en llamar al Game Loop. Ya en loadView hemos inicializado la nueva etiqueta, el estado del juego, la velocidad de la pelota y, como hemos dicho antes, hemos creado una instancia de NSTimer que ejecutará nuestro Game Loop cada x tiempo en función a la constante kFPS que hayamos elegido.

Después hemos creado un nuevo método llamado gameLoop en el cual, por ahora, simplemente comprobamos el estado del juego mediante gameRunning y en caso de ser positivo cambiamos la posición de la variable ball sumándole la velocidad de la pelota en la coodenada correspondiente, de esta manera implementamos el movimiento de la pelota en función del tiempo.

Si simulamos no pasa nada, veremos nuestra interfaz anterior más una etiqueta que nos incita a tocar la pantalla, pero al hacerlo no ocurre nada, vamos a solucionarlo.

Control

Una de principales características del dispositivo iPhone es la carencia de un teclado físico, esta carencia es suplida por una interfaz táctil que nos permite registrar cada uno de los toques que se producen en la pantalla del terminal. Con estas características decidimos que la mejor manera de implementar nuestra interacción con el usuario es mediante el movimiento de nuestra paleta a la par que nuestro dedo, sin perder su posición con respecto al eje y, pero sí en x.

Entonces, para implementar un control como el descrito, abrimos de nuevo iPingPongViewController.m y copiamos en el lugar correspondiente los siguientes métodos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

...
 
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
	}
 
//New
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 
	if(!gameRunning) {
		startLabel.hidden = YES;
		gameRunning = YES;
	} else if(gameRunning) {
		[self touchesMoved:touches withEvent:event];
	}	
}
 
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
 
	UITouch *touch = [[event allTouches] anyObject];
	CGPoint location = [touch locationInView:self.view];
	player1.center = CGPointMake(location.x, player1.center.y);;
 
}
 
- (void)dealloc {
...

Como se observa, hemos sobrecargado touchesBegan para hacer que el juego empiece cuando se pulse por primera vez la pantalla, para ello simplemente testeamos el estado del juego y en caso de estar pausado lo ponemos en estado de ejecución y ocultamos la etiqueta startLabel.

En lo que se refiere al control del juego propiamente dicho, hemos decidido hacerlo lo más sencillo posible, simplemente con la sobrecarga de touchesMoved asignamos a la vista player1 las coordenadas en x que obtenemos del toque del dedo en la vista principal, manteniendo constante la coordenada con respecto a y.

En esta ocasión, al simular, veremos como nuestra pelota se mueve hasta desaparecer de pantalla, es normal, no hay límites que produzcan un cambio en su dirección y velocidad. Lo que si observaremos es como si movemos el dedo por la pantalla nuestra raqueta se mueve por el eje x al igual que nuestro dedo.

Pues por hoy ya es suficiente, más adelante implementaremos la detección de colisiones y una sencilla inteligencia artificial para nuestro oponente.

El juego original

Creado en 1972 por Atari, pong es uno de los primeros videojuegos de la historia y como tal forma parte de nuestro legado y recuerdo. Considerado un videojuego perteneciente al género deportivo, pong simulaba, con mucha imaginación eso sí, el tenis de mesa o ping-pong.

La mecánica de juego era realmente sencilla, un jugador controlaba una pala, normalmente la de la parte izquierda, mientras que la otra era controlada por la máquina o por otro jugador. El objetivo consistía en que uno de los jugadores consiguiera más puntos que el oponente, obteniendo esos puntos cuando el jugador adversario fallaba al devolver la pelota.

Empezando

Para empezar lo primero que debemos hacer es ejecutar Xcode y crear un nuevo proyecto, File > New Project o ⌘⇧N, elegimos el template View-Based Application, pulsamos choose… le ponemos de nombre iPingPong y aceptamos.

Interfaz gráfica

Nuestra intención es lograr la interfaz original que se muestra en la imagen inferior. Para ello debemos identificar que variables instanciadas vamos a declarar en nuestra clase iPingPongViewController, a simple vista observamos tres vistas para las palas (player1, player2) y la pelota (ball), y dos etiquetas para el marcador (player1Score, player2Score), para la red no es necesario declarar ninguna variable, ya que es un mero elemento decorativo y no cambiará su valor durante la ejecución de nuestro juego.

Una vez claras las variables, abrimos iPingPongViewController.h e introducimos el siguiente código para declararlas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#import <UIKit/UIKit.h>
 
@interface iPingPongViewController : UIViewController {
 
	UIView *player1;
	UIView *player2;	
	UIView *ball;
 
	UILabel *player1Score;
	UILabel *player2Score;	
}
 
@property(nonatomic, retain) UIView *ball;
@property(nonatomic, retain) UIView *player1;
@property(nonatomic, retain) UIView *player2;
 
@property(nonatomic, retain) UILabel *player1Score;
@property(nonatomic, retain) UILabel *player2Score;
 
@end

Antes de seguir ocultaremos el status bar que nos hace perder 20px de superficie de juego, abrimos iPingPong-info.plist, añadimos “status bar is initially hidden” y activamos el checkbutton.

Lo siguiente será inicializar nuestras variables instanciadas haciendo uso del método loadView() con los valores necesarios para obtener nuestro interfaz, para ello vamos a iPingPongViewController.m y copiamos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

#import "iPingPongViewController.h"
 
@implementation iPingPongViewController
 
@synthesize ball, player1, player2, player1Score, player2Score;
 
// Implement loadView to create a view hierarchy programmatically,
// without using a nib.
- (void)loadView {
 
	//Create the main view and assign a black color to background
	CGRect backgroundFrame = [[UIScreen mainScreen] applicationFrame];
	UIView *view = [[UIView alloc] initWithFrame:backgroundFrame];
	view.backgroundColor = [UIColor blackColor];
	self.view = view;
	[view release];
 
	//Create the net
	for (int i=0; i<20; i++) {
		UIView *net = [[UIView alloc] initWithFrame:
                           CGRectMake(16*i, self.view.center.y-2, 8, 4)];
		net.backgroundColor = [UIColor lightGrayColor];
		[self.view addSubview:net];
		[net release];
	}
 
	//Create the Score
	player1Score = [[UILabel alloc] initWithFrame:
			         CGRectMake(10, 190, 30, 30)];
	player1Score.font = [UIFont fontWithName:@"Helvetica" size:30];
	player1Score.text = @"0";
	player1Score.textColor = [UIColor whiteColor];
	player1Score.backgroundColor = [UIColor blackColor];
	[self.view addSubview:player1Score];
 
	player2Score = [[UILabel alloc] initWithFrame:
				 CGRectMake(10, 260, 30, 30)];
	player2Score.font = [UIFont fontWithName:@"Helvetica" size:30];
	player2Score.text = @"0";
	player2Score.textColor = [UIColor whiteColor];
	player2Score.backgroundColor = [UIColor blackColor];
	[self.view addSubview:player2Score];
 
	//Create our elements
	player1 =[[UIView alloc] initWithFrame:
			  CGRectMake(self.view.center.x-25, 420, 50, 10)];
	player1.backgroundColor = [UIColor whiteColor];
	[self.view addSubview:player1];
 
	player2 =[[UIView alloc] initWithFrame:
			  CGRectMake(self.view.center.x-25, 50, 50, 10)];
	player2.backgroundColor = [UIColor whiteColor];
	[self.view addSubview:player2];
 
	ball =[[UIView alloc] initWithFrame:
		   CGRectMake(self.view.center.x-4, self.view.center.y-4, 8, 8)];
	ball.backgroundColor = [UIColor whiteColor];
	[self.view addSubview:ball];
}
 
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
	}
 
- (void)dealloc {
	[player1 release];
	[player2 release];
	[ball release];
	[player1Score release];
	[player2Score release];
        [super dealloc];
}
 
@end

En el código podemos observar como todas las vistas se inicializan con un color, tamaño y coordenadas y se asignan a la vista principal. Igual ocurre con las etiquetas, pero asignándoles un tamaño y tipo de letra. Para la red utilizamos un bucle for para instanciar las UIViews (vistas) que la formarán. Y ya para acabar, no debemos olvidar el uso del método dealloc() para limpiar los recursos alojados.

Ahora sólo nos queda simular para poder disfrutar de nuestra interfaz gráfica.

Y esto es todo, ya en sucesivos posts se le otorgará interactividad y movimiento. Si encontráis algún error o tenéis alguna duda o pregunta no dudéis en comentar.