icono_twiter icono LinkedIn icono Facebook Icono Xing
Roberto Canales Mora

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Ingeniero Técnico de Telecomunicaciones y Executive MBA por el Instituto de Empresa 2007.
Twitter:

Autor de los Libros: Planifica tu éxito: de aprendiz a empresario y Informática profesional, las reglas no escritas para triunfar en la empresa

Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-10-24

Tutorial visitado 3.878 veces Descargar en PDF
Añadiendo reconocimiento de gestos a nuestra aplicación desde StoryBoard

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.

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.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: