Añadiendo reconocimiento de gestos a nuestra aplicación desde StoryBoard
Después de una temporada muy larga leyendo libros de gestión necesito profundizar un poquito en el mundo técnico, y el desarrollo en iPhone/iPad me parece un entorno ideal.
Ya hay decenas de libros sobre la materia y miles de guías y tutorales por internet (eso sí, muchos en inglés) por lo que lo único que hace falta es un poco de ganas y tiempo. Siempre he creído que cualquier persona se puede reciclar a técnico de nuevo siempre que quiera… Efectivamente… Siempre que quiera.
He empezado a construir el esqueleto de un juego donde voy a ir consolidando todo el conocimiento que vaya adquiriendo sobre el desarrollo en IOS porque creo que de verdad aprendes cuando tienes una situación real, que se va complicando, a la que aplicar los pequeños ejemplos.
El ejemplo de momento tiene este aspecto:
Soy consciente de que hay frameworks y herramientas, como COCOS2D que pueden simplificar el trabajo pero el objetivo no es hacer el juego sino aprender los conceptos base fundamentales para aplicarlos a aplicaciones de gestión, que es lo que me da de comer. Lo único es que los juegos te obligan a aprender la memoria y rendimiento… Técnicas luego vitales para cualquier tipo de aplicaciones.
Partamos de la base de que tengo un controlador (arriba a la derecha) que es el que se activará cuando el juego empiece. Todo el código que voy a mostrar lo voy a acotar a ese punto.
Lo primero que vamos a hacer es definir la funcionalidad que quiero que tenga por ahora:
- Quiero que haya una especie de cursor que, al moverse, mueva un muñeco que va a ser el protagonista de mi juego. Pongamos que es un juego de obstáculos donde el muñeco tendría que ir por un camino de curvas y, si toca el borde, el jugador pierde.
Nos vamos a centrar solamente en este punto y voy a hacerlo así:
- Escribir una clase UIViewController que me permita manejar el elemento pintado con la herramienta de StoryBoards de IOS.
- Crear una barra sobre la que se moverá mi cursor, basada en una imagen, y que delimitará el movimiento máximo de esta: parecido a un Slider.
- Pintar encima de la barra mi control para que el usuario lo mueva con el dedo.
- Construir el objeto movil (basado también en una Image View) que será el que se mueva cuando desplace el cursor. A la misma velocidad (de momento) y posición, pero un poquito más arriba (aunque de distinto tamaño).
- Interceptar los eventos de mi control para mover la vista del coche.
Vayamos con ello.
Creo la clase UIJuegoNivel1ViewController
Creamos una clase:
Le decimos que de tipo UIViewController
Y la ligamos al componente pintado.
Para la imagen de la barra voy a hacer una (a partir de una barra de Scroll) con vista previa, ya después la sustituiré por una bonita pintada por un diseñador.
La llamo barra.png. La guardo donde quiera y la arrastro a mi proyecto dentro de XCode.
No es os olvide decir que la copie.
Asigno la imagen a un control Image View y creamos un outlet para recuperar sus dimensiones (que limiten el movimiento).
Añadimos otra Image View:
Y le asignamos una imagen. Reciclo una existente en el proyecto pero podemos hacer como antes y crear un nuevo recurso gráfico.
Es importante activar el parámetro: User Interaction Enabled para que podamos capturar los eventos.
Ahora insertamos otro elemento que queremos que se mueva. Lo hacemos sencillo de momento con otro UIImageView.
De momento voy a reciclar a nuestro Pólux de la serie www.terrakas.com.
Ahora vamos a incorporar un reconocedor de eventos de tipo Pan Gesture Recognizer a nuestro controll (la bola negra).
Vemos como nos queda:
Ahora desde el gesto vamos a crear un outlet de tipo Action.
Le llamamos gestosEnBola.
Y ahora sólo tenemos que escribir el código que se ejecutará cuando se pulse el dedo sobre la bola y se mueva. En los comentarios os dejo lo que hace en cada paso.
- (IBAction)gestosEnBola:(UIPanGestureRecognizer *)sender {
// recuperamos el frame de la barra para saber su x y tamaño
// restingiremos entre estos puntos el movimiento
CGRect limites = self.barraControl1.frame;
CGFloat lInX = limites.origin.x;
CGFloat lFinX = limites.size.width + lInX;
NSLog(@"Limite de area movimiento X: %f, LimiteY: %f", lInX, lFinX);
// recuperamos el movimiento tanto x como y
CGPoint movimiento = [sender translationInView:self.view];
// calculamos la nueva posición de donde qudaría el centro del objeto movil si lo movemos
CGFloat nuevaPosicionX = self.objetoMovil.center.x + movimiento.x;
if( movimiento.x > 0) // si nos movemos hacia la derecha
{
if(nuevaPosicionX > lFinX) // nos aseguramos de no sobrepasar la barra
{
NSLog(@"LimiteX");
return;
}
}
else{ // si nos movemos hacia la derecha
if(nuevaPosicionX < lInX) // nos aseguramos de no superar el origen
{
NSLog(@"InicioX");
return;
}
}
// pintamos la propia bola del control, que genera el evento, a ese centro
sender.view.center = CGPointMake(sender.view.center.x + movimiento.x,sender.view.center.y);
[sender setTranslation:CGPointMake(0, 0) inView:self.view];
// movemos tambien el objeto movil
self.objetoMovil.center = CGPointMake(nuevaPosicionX, self.objetoMovil.center.y);
[sender setTranslation:CGPointMake(0, 0) inView:self.objetoMovil];
// las comprobaciones del juego irían aquí o en el bucle de refresco del fondo y obstáculos.
Ya tenemos a nuestro muñeco moviéndose dentro de los límites de la aplicación.
He utilizado como base un tutorial excelente (investigad más que tienen un montón de artículos interesantes).
La verdad es que da gusto la sencillez que tiene trabajar en este entorno.
