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

Aprende a programar

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!

Insertando objetos en xcode

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.

Personalizacion de etiquetas en xcode

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:

implementando variables en xcode

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

Xcode menu de outlines

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)

Asociando objetos en xcode

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ยป.

Asociando acciones en xcode

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:

Implementacion de variables en xcode

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:

Funcion didload de xcode

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.

funciones de la clase dos

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!

foto del ejercicio dos

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


Top 15 Juegos
Te puede interesar:
Los TOP 15 juegos para iPhone
Sรญguenos en Google News

Deja tu comentario

Tu direcciรณn de correo electrรณnico no serรก publicada. Los campos obligatorios estรกn marcados con *

*

*

  1. Responsable de los datos: AB Internet Networks 2008 SL
  2. Finalidad de los datos: Controlar el SPAM, gestiรณn de comentarios.
  3. Legitimaciรณn: Tu consentimiento
  4. Comunicaciรณn de los datos: No se comunicarรกn los datos a terceros salvo por obligaciรณn legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu informaciรณn.

     Abeckoers dijo

    Perfecto, espero que no tardes es publicar mas cursos. Pero podrias especificar detallada mente que hace cada funcion, por ejemplo: ยซ*)senderยป y ยซElegida: %dยป ya que hay personas que no tenemos conocimientos en objetive-c. Muy buen post.

    Saludos Sergio Abril.

        Sergio Abril dijo

      Hola!
      Muchas gracias, te explico brevemente, de una forma un poco ยซrรกpidaยป y ยซfรกcilยป, ya que es una pregunta muy acertada:

      Generalmente cuando defines una funciรณn, tienes que aรฑadir los parรกmetros que quieres enviar a dicha funcion, y con los que quieres trabajar en ella; en el caso de botones y steppers, los aรฑadimos para que la funcion sepa que estรก llamandole cierto objeto (en el caso de una, un UIButton, y en el caso de otra, un UIStepper), al que ponemos el nombre que queramos para trabajar con el dentro de la funcion (en este caso ambos ยซsenderยป, pero vale cualquiera). De ahรญ que tras el nombre de la funcion, haya dos puntos, y luego (UIButton*)Sender.

      Para demostrarte que esas funciones estรกn recibiendo ยซel objeto que las llamaยป, aunque es cierto que yo no lo he aprovechado, prueba lo siguiente:

      Sustituye en la funcion checkerValuechanged (dentro de viewcontroller.m), todos los ยซstepper1ยป que encuentres, por ยซsenderยป. Veras que sigue funcionando igual, y el resultado es el mismo (aunque en el caso de este ejercicio, no me he aprovechado de los datos que recibe y almacena ยซsenderยป, sino que he hecho referencia directa al stepper1 (que es lo mismo)… de ahรญ que surjan dudas.. asรญ que bien preguntado!

      En cuanto a lo segundo, un NSLog no es mas que un ยซlogยป de pantalla, para que abajo en la consola de Xcode aparezca el texto que nosotros metamos entre las comillas. Si ademas, queremos que muestre determinados valores, para ver, por ejemplo en este caso, que valor tiene el stepper1 en cada momento, esa es la forma correcta de aรฑadirlo; colocando donde queremos que vaya el valor un %d, y detras de las comillas, el nombre de la variable. (%d hace referencia a que es un valor entero. si fuera por ejemplo un decimal, habria que poner %f).

      En un momento podrias pensar que deberiamos poner NSLog(@ยปelegido: VARIABLEยป);, pero como todo lo que va entrecomillas sale ยซliteralยป, no saldria el valor sino la palabra VARIABLE… y hay que recurrir a NSLog(@ยปelegido: %dยป, VARIABLE), para que al detectar el ยซ%ยป sepa que ahi va un valor que colocaremos despues de la coma.

      Es un poco lioso, pero espero haberme explicado ๐Ÿ˜‰

          dAnn dijo

        Gracias por tu generosidad; sigue asi ๐Ÿ™‚

     Santi_Xixon dijo

    Por favor no dejes de hacer el post, es muy รบtil y seguro que a mucha gente, me incluyo, le gusta.

     Gustavo de la Rosa dijo

    Excelentes los dos artรญculos que llevas hasta ahora Espero los prรณximos para seguir aprendiendo sobre este nuevo lenguaje. Una pregunta, ยฟporque las funciones que se utilizaron son del tipo IBAction y no simplemente void?

     VicT04- dijo

    Jamas avรญa programado algo y haces que todo sea tan sencillo muchas gracias por escribir estos artรญculos espero los demรกs con muchas ansias, disculpa pero algunos libros o paginas web para seguir estudiando del tema tengo mucha curiosidad por aprender a hacer aplicaciones no importa si estรกn en ingles espero me puedas ayudar gracias.

     Llusan dijo

    ยฟhabrรก tercera parte?, ya estamos en marzo