Controles

Hoy vamos a ver como crear una ventana con los controles tipicos del iPhone, tampoco vamos a complicarnos mucho la existencia porque solo nos interesa ver los conceptos básicos: como diseñar una ventana con controles y como enlazar esos controles a nuestro codigo para recibir los eventos, además como apunte extra vamos a guardar el estado de la ventana para poder recuperarlo cuando la abramos de nuevo.

Resumiendo: cocos2d es un completo framework para hacer juegos en 2D. ese 2D No se debe interpretar como una carencia, sino como una especialización en la parte que cubre que lo hace con muy buena nota, tenemos sprites, animaciones, transiciones entre vistas, musica y fx, touchs, sistemas de partículas .. blah blah. Todo lo que necesitamos.

Mas detalles detrás del salto

Crear un proyecto basado en ventanas

Empezamos por crear un proyecto desde 0, vamos a File -> New Proyect y seleccionamos que queremos un proyecto del tipo ‘Window-based Application‘ que viene a ser algo asi como ‘proyecto con una ventana y listo’

Esto nos creará un proyecto vacío con una única ventana (con su vista), lo primero que vamos a hacer es localizar donde se encuentra esta ventana dentro de nuestro proyecto, para ello nos iremos al arbol ‘Group & Files’ y podemos encontrar una sección llamada NIB Files, ahi es donde se encontrarán todas las ventanas que tengamos diseñadas, desplegamos y vemos que tenemos una única ventana llamada ‘MainWindow.xib‘.

Nos vamos a tener que ir acostumbrando a que todo lo que termina por IB hará referencia al Interface Builder. Para acceder a el diseñador de la ventana damos doble-click al correspondiente .xib y se nos abrirá el Interface Builder.

Interface Builder: Creando los controles

El interface Builder es la herramienta desde la cual vamos a diseñar nuestras ventanas, la filosofía del XCode es que tengamos separada la vista del controlador, siendo la vista la ventana que nos da una interfaz de usuario, y el controlador el código que se ejecuta bajo esa ventana. La logica es que nosotros definamos por un lado la ventana, y por otro el código, y una vez que tengamos las 2 cosas poder enlazarlos, asi que eso es lo que vamos a hacer ahora, simplemente vamos a definir la vista, osea … nuestra ventanita con sus controles. En primer lugar vamos a desplegar la biblioteca de controles, que podemos encontrar en Tools -> Library y desde aqui vamos a arrastrar los controles que nos interese a nuestra ventana hasta que lleguemos a esta apariencia

Si queréis podeis dejarlos en cualquier otra posición … lo importante es que funcione, y luego ya nos podemos entretener con la disposición de los controles. solo un par de detalles a tener en cuenta, para el label del centro debéis marcar que quereis tener el texto centrado, y que el fondo es opaque, al marcarlo como opaco no veremos el texto … pero tranquilos que todo está controlado, y luego veremos porque …

Implementando el controlador

Ya tenemos la vista definida (por lo menos los controles que queremos usar) ahora debemos ir al controlador, que será nuestra clase que controle las propiedades de esta vista, esta clase se llama ControlesAppDelegate y la tenemos dentro de ‘Clases‘, lo que vamos a hacer aqui es definir una variable para cada uno de los controles que tengamos en la vista y que nos interese controlar, o acceder a sus propiedades, en nuestro caso queremos controlar los 3 Sliders y el label del centro, y vamos a definir los metodos que se van a ejecutar, tanto para los 2 botones, como para el evento que se lanzará cada vez que se mueva un Slider.

Vamos a ControlesAppDelegate.h y añadimos estas lineas

Como veis de momento solo hemos definido unos punteros a los objetos que tenemos en la ventana … punteros que no hacen nada todavía porque aun no están asignados a los controles reales de la ventana. Esto es lo que vamos a hacer ahora, asi que de momento vamos a Guardar los cambios de esta clase.

Enlazando vista y controlador

Ahora viene el paso que todos estabais esperando, cuando enlazamos los controles reales que tenemos en el formulario con las variables de la clase, y esto se va a hacer desde el Interface Builder, asi que vamos de nuevo a nuestra ventana MainWindo.xib y pulsamos doble-click sobre ella para abrirla… y empezaremos a asociar los controles a sus variables, primero los 3 Sliders, y aqui viene lo facil/chungo .. asi que atentos a las instrucciones:

Pinchamos sobre el primer Slider, localizamos la ventana ‘Connections‘ y buscamos la sección ‘New Reference Outlet‘ al final del todo, veremos que a la derecha tiene un circulito: pinchamos sobre ese circulito y arrastramos hasta la ventana ‘MainWindow.xib’ a la sección ‘App Delegate’:

Soltamos sobre ‘App Delegate’ y nos aparecerá una ventana con un listado de todas las variables que tengamos en esa clase y que se puedan asociar a este control (al slider que teníamos marcado):

Vamos a pinchar en ‘SliderRed’ y veremos ahora como en la ventana de ‘Connections’ ya nos indica que ese objeto está asociado a la variable SliderRed que definimos en el controlador:

Ahora vamos enlazar los eventos del Slider con el método que teníamos en el controlador, para ello vamos de nuevo a la ventana de ‘Conections‘ y buscamos el evento ‘Touch Drag Inside‘ y lo arrastramos a la sección ‘App Delegate‘ de la misma forma que hicimos antes, ahora al soltar sobre esta sección nos aparecerán los métodos que se puedan enlazar

Seleccionamos el método ‘moveSlider‘ con lo que nos quedará esto:

Con todo esto ya hemos conseguido que el puntero *SliderRed de nuestro controlador apunte a este control del formulario, y además le hemos dicho que método vamos a lanzar cada vez que el Slider cambia de valor.

De esa forma tan fácil/chunga se pueden enlazar los controles de nuestra ventana con las variables del controlar, vamos a hacer lo mismo para el SliderGreen (el segundo de la ventana) y con el SliderBlue (el tercero) .. debéis hacer que cada uno apunte a su puntero, y luego los 2 deben apuntar al mismo método ‘moveSlider’.

Siguiente paso: vamos a asociar el label del centro al puntero *miLabel:

Y finalmente, los 2 botones, el Reset y el Save vamos a asociar su evento ‘Touch Up Inside‘ al evento clickReset y clickSave respectivamente.

Con esto ya podemos guardar los cambios y cerrar el Interface builder, no intentéis ejecutar la aplicación porque ahora nos daria errores de ejecución, solo hemos definido los métodos en el header, pero estos métodos aun no están creados así que nos fallará cuando intente lanzaros. Ese será nuestro siguiente paso, crear los correspondientes métodos.

Los eventos

Vamos a ControlesAppDelegate.m y añadimos estas lineas

Este es el método que se va a lanzar cuando cambia cualquiera de los 3 Sliders, lo único que hace es sacar el valor de cada slider (que será un flotante entre 0.0 y 1.0) y luego ponemos ese color como background del label central, ademas para verlo mejor podemos esos valores como texto del label:

Y aquí tenemos el método Reset y Save de los 2 botones, que lo único que hacen es guardar y leer el estado de los 3 sliders de la configuración de la aplicación. Fijaros como el Reset lee lo que tengamos en ‘standardUserDefaults’ y lo pone en el value de los 3 Sliders, y luego fuerza una llamada al método ‘moveSlider’ de esa forma se actualizará el label del centro, es como si después de poner los valores le forzamos a indicarle que los sliders han cambiado.

Con esto ya funciona toda nuestra aplicación … salvo por un pequeño detalle: cuando la abrimos por primera vez no se hace ninguna lectura de los valores guardados hasta que no pulsamos el botón ‘Reset’. Nos puede interesar, de hecho nos interesa, que al abrirse la aplicación se carguen los valores siempre, así que vamos a implementar el método ‘awakeFromNib‘: este método se llama cuando la ventana se ha cargado por primera vez, nos garantiza que los controles ya se han creado, así que es el momento perfecto para modificarlos, y lo que vamos a hacer es llamar nosotros mismos al método ‘clickReset‘, para que cargue los datos y los muestre en pantalla:

You may also like...

2 Responses

  1. sparker dice:

    Muy bueno, gracias 🙂

    Lo que sí que estaría bien es hacer algún tuto del uso de openAL, algo sobre lo que no hay mucho escrito.

    Saludos!

  2. neofar dice:

    De momento no he probado nada con OpenAL .. las pruebas que he hecho con audio son demasiado básicas .. pero imagino que todo llegará.

    Ahora volveré al OpenGl, mi intención al meter algo con controles es que en los próximos tutoriales intentaré mezclar las 2 partes: tener una ventana con opciones y otra con el sample en si. .. ya veremos como evoluciona esto.

    De todos modos el audio es algo que tarde o temprano tendremos que usar .. así que me lo anoto

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *