Aprende a programar juegos para iOS: conociendo Xcode (II)

Tras la pasada entrega, titulada aprende a programar juegos para iOS: Conociendo Xcode, y antes de adentrarnos en Cocos2d, vamos a profundizar un poco más en Xcode. En esta ocasión, interactuaremos con los elementos creados, en lugar de limitarnos a un simple “Hola mundo”.

Con ello, ganaréis destreza en el manejo de Xcode, y podréis hacer vuestras primeras aplicaciones “útiles” de forma rápida; al aprender el uso básico de botones y etiquetas de texto. Por ser esta clase algo más compleja que la anterior, tendréis disponible para descarga el ejemplo práctico al final de la entrada, para que podáis ejecutarlo y comprobar que funciona correctamente!

En primer lugar, abrimos Xcode y creamos un nuevo proyecto eligiendo la plantilla “single view application”, igual que en la clase anterior; esto nos creará un espacio de trabajo basado en una sola ventana, con su “asistente gráfico”. Una vez abierto, seleccionamos el archivo viewcontroller.xib (recordemos que es la “cara gráfica” de nuestra primera vista o escena, llamada viewcontroller, y cuya parte de “código” está en los archivos viewcontroller.m y viewcontroller.h), y nos dirigimos al cuadro de objetos, situado abajo a la derecha, para empezar a arrastrar componentes a nuestra escena: labels, botones… va a tener de todo!

Como vemos en la imagen, en esta ocasión hemos arrastrado lo siguiente:

• Un objeto “label“, a modo de título. No va a interactuar con nada.
• Otro objeto “label“, que albergará valores numéricos.
• Un “stepper“, encargado de aumentar o disminuir el valor numérico del “label” anterior.
• Un botón para comprobar que el “label” numérico coincide con un valor que nosotros habremos elegido previamente.

¿Sabéis ya de que se trata este ejercicio? Muy sencillo; tendremos que elegir nuestra edad (año a año con el “stepper”), y luego, mediante el botón comprobar, averiguar si somos mayores de edad. Tan absurdo como educativo, con este ejercicio vais a aprender de un plumazo varias cosas.

Como veis en la imagen superior, el tamaño y color de los “label” se puede personalizar. Cada objeto tiene multitud de parámetros que podréis ir averiguando si investigáis un poco. Una vez hayáis dejado cada objeto con las características que más os gusten, es hora de hacer balance: por ahora hemos “dibujado” nuestra aplicación; nada interactúa con nada… necesitamos darle unidad.

Para ello, vamos a meternos con algo de código (muy básico, y explicado rudimentariamente); concretamente con el archivo viewcontroller.h, que alberga las definiciones básicas de la clase viewcontroller (nuestra principal ventana!). No ejecuta código ni acciones, tan solo plantea las bases y las funciones necesarias, para que viewcontroller.m pueda usarlas y hacer el trabajo duro… que veremos plasmado en viewcontroller.xib! Las tres caras de la misma moneda.

Explicado esto, podemos empezar a definir en el “código” todos los objetos que hemos definido visualmente. Nos dirigimos al archivo viewcontroller.h, y añadimos lo siguiente:

Existen varias formas de definir variables o elementos, pero en este caso, como necesitamos que un elemento acceda a ellos (nuestra ventana, la parte gráfica), los asignamos de esta forma (empezando por @property). Es un tema que abordaremos en futuras clases, por ahora vale con que sepáis intuir o identificar a que se refiere cada uno: un “label” (solo uno, ya que el título que creamos no va a interactuar con nada, y no necesitamos definirlo en el código), una variable de numeros enteros llamada “mayoriaDeEdad” (esta es nueva, no la pusimos en el apartado gráfico.. tan solo almacenará la mayoría de edad para hacer comparaciones),un “stepper” (llamado stepper1).

Además de lo anterior, también hay dos funciones (las dos que empiezan por un guión, son funciones); una de ellas se encargará de hacer algo cuando apretemos el stepper  (¿por ejemplo, hacer que el “label” cambie nuestra edad? exacto), y otra encargada de comparar la edad actual del “label” con la que nosotros hemos fijado.

Hasta ahora tenemos la parte gráfica definida, y también la parte de código. Sin embargo, ¿cómo le enseñamos a nuestra aplicación a qué corresponde cada variable o elemento del código, con su equivalente en la parte gráfica? Pues muy fácil. Hacemos click sobre viewcontroller.xib, y damos al botón redondo y gris con forma de “play” y texto “show document outline”, que encontramos debajo a la izquierda de la hoja cuadriculada. Con ello se desplegará un panel con los elementos de nuestra ventana.

Nos fijamos arriba, en “Placeholders”, que contiene dos cubos: uno amarillo (File’s owner), que es donde asociaremos los objetos con el código (labels, botones,etc); y otro rojizo (First Responder), donde asociaremos las funciones que hemos definido a diversas acciones (por ejemplo, que al pulsar un botón se ejecute una función).

Empezamos con los objetos. Hacemos click derecho sobre el cubo “Files Owner”, y se desplegará un menu negro. Desplegamos el apartado “Outlets”, y veremos todos los elementos que hemos definido en el código (sólo hay dos, label y stepper1); tenemos que arrastrarlos hasta su correspondiente elemento gráfico: label con el label numerico que hemos creado, y stepper1 con el stepper.

Al arrastrarlo veremos como se crea un “tentáculo azul” que sigue nuestro ratón hasta el objeto que queremos asociar. (Nota: para empezar el proceso de arrastrar, hay que hacer click en los circulitos vacíos junto al nombre de cada objeto, como en la foto)

Ahora hay que hacer lo mismo con las funciones; un click derecho en “First Responder”, y hacemos lo siguiente:

1. Hacemos click en “checkEdad”, y sin soltar, arrastramos hasta el botón de nuestra ventana gráfica, el de comprobar edad. Se abre un nuevo menú desplegable y elegimos “Touch down”.
2. Hacemos lo mismo con “stepperValueChanged”, pero esta vez lo arrastramos hasta nuestro “stepper” gráfico, y en el menú desplegable elegimos “Value Changed”.

Ahora mismo solo queda añadir el “código real” a viewcontroller.m; tenemos que decirle qué debe hacer con cada accion que ocurra. Empezamos por indicarle que esté al tanto de las variables definidas en viewcontroller.h (la variable de edad legal, la variable del stepper, y la variable del label; ambas asociadas a su homólogo gráfico) mediante “@synthesize nombre_de_la_variable_u_elemento“, justo como vemos en la imagen:

Sin salir de viewcontroller.m, nos dirigimos a la función viewDidLoad (al final del archivo), y justo debajo de lo que ya está escrito, pero antes del “}“, definimos cuál debe ser la mayoría de edad en nuestro país. En este caso, 18:

Por último, vamos a crear y programar las funciones que hemos definido en viewcontroller.h (son sólo dos). Una se ejecutará cada vez que presionemos el stepper, y debe mostrar la edad que vaya cambiando, en nuestro “label”.

La otra, se ejecutará cuándo apretemos al botón de comprobar edad, y comprobará (valga la redundancia) si la edad que hemos introducido es igual o superior que la mayoría de edad: Si la respuesta es afirmativa, el fondo de la App cambiará a verde; si no lo es, se pondrá rojo. Ambas hay que colocarlas en el archivo viewcontroller.m; por ejemplo, inmediatamente antes de la función -(void) viewDidLoad.

Ahora llega lo mejor. ¡Hay que probarlo! Dirigíos al botón play de arriba, comprobando que esté elegido el “iPhone Simulator”, y dadle. Se os abrirá vuestra ventana, y podréis interactuar con ella!

El ejercicio se podría hacer más complejo, pero con esto tenéis las bases para investigar por vuestra cuenta, y probar nuevas opciones. Para que sea más fácil seguir el tutorial, por curiosidad, o simplemente por si no conseguís hacerlo funcionar, aquí tenéis el proyecto en un archivo comprimido! Espero que os haya servido… hasta la próxima!

Más información – Aprende a programar: conociendo Xcode (I)

Descarga – Segunda clase de programacion para Xcode