gergonzalez

Nuestro primer videojuego para iPhone – I

Escrito por gergonzalez | Noviembre 20, 2009 | Casos de Estudio | Comentarios 0

Nuevo diseño y nuevo enfoque más orientado al mundo de los videojuegos, por ello, durante este post y sucesivos nos dedicaremos a programar cierto clásico imperecedero que emulaba el tenis de mesa.

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.

iPingPong

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

#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.

statusbar

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:

#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.

Compártelo: