Flip & Flop – Part 1

Como el camino se hace caminando y no hay nada mejor que enfrentarse a problemas reales para programar las cosas, vamos a empezar un juego, asin sin más … de nombre flip & flop (algún día os contaré mi comlpeja metodologia para poner nombre a los juegos).

Será el tipico juego de cartas que hay que encontrar las parejas, algo muy sencillo para empezar y que se limitará a ver las cosas que ya sabemos hacer … dibujar sprites en pantalla, usar el touch y poco más.

Aunque tambíen aprenderemos cosas nuevas como serán:

  • Cargar varias texturas
  • Usar una camara en 3D
  • Aplicar luces
  • Sprites con varias capas
  • Sprites con una textura en cada lado

Lo de sprites con varias capas y con texturas en cada lado es algo que he puesto solo por fardar .. queda way, pero amos que solo se trata de dibujar sprites y sprites por pantalla. Enseguida veréis de que hablo.

Sigamos, para empezar debemos partir de cualquiera de los proyectos que tenemos, os recuerdo que SpriteGL iba a ser la base para casi todos los esperimentos, asi que empezaremos por ahi, y asumimos que lo teneis todo clarito.

Inicialización: Camara y Luces

Para este proyecto vamos a poner una cámara en 3D ya que nos interesa que el giro de las cartas sea real y tenga perspectiva y vamos a poner una luz para que las cartas se vayan sombreando mientras van girando.. ambas cosas son muy sencillas de añadir, aunque luego veremos que la camara 3D requiere un poco mas de cuidado.

unos cuantos #defines para EAGLView.m

Vamos a necesitar estas 3 funciones definidas, por un lado tenemos la típica función para pasar grados a radianes, y un par de funciones para generar números aleatorios, aqui teneis:

Seguimos con la camara en 3D

y listos para activar una luz

Esto va en nuestro metodo inicializar, de momento no lo pongo entero porque luego haremos mas cosas, pero por ahora solo enchufamos la luz.

Class Carta

Nos tiene que quedar una cosa clara en la cabeza, si queréis hacer un juego usar objetos, usar objetos y usar objetos!!!! se inventaron para ello … siempre, por simple que sea lo que tengáis que programar pensar en objetos. Para nuestro juego vamos a crear un objeto Carta, tendrá métodos para moverla de una posición a otra, para hacerla girar y para dibujarse a si misma … si!!! hasta el método draw hay que delegarlo en los objetos. Pronto os daréis cuenta de las ventajas que todo esto supone.

Empezamos por el h

todas las variables son claras y no necesitan explicación, fijaros que para cada carta vamos a tener sus coordenadas, sus vertices de la textura y las normales, esto es algo que se podria optimizar si fueramos a tener 500 cartas en pantalla, pero para tener 20 ó 30 objectos en pantalla no es necesario meternos a ese nivel.

y seguimos con el m, y su breve descripción

El reset será simplemente para inicializar todas las variables a su origen, ademas vamos a inicializar los vértices del sprite y las normales

El setImage lo usaremos para pasarle las texturas de las cartas … no vamos a hacer que cada carta se ponga a cargar los recursos, no no no .. los cargaremos nosotros una vez, en nuestro main, y luego cuando creamos cada carta le damos las texturas para que ellas mismas sepan autodibujarse.

El método setId es para darle a cada carta el id del sprite que va a dibujar (cuidado que id es una palabra reservada del objective)

texture4x4 y texture1x4

Los métodos texture4x4 y texture1x4 son primos de nuestro método ‘setSprite’ que ya definimos en SpriteGL, su misión es la de configurar las coordenadas de la textura para dibujar luego un sprite .. como su propio nombre indica son para configurar un sprite de 4×4 o para 1×4.

Si os suena a chino es el momento que veáis las texturas que vamos a usar:

Por un lado tenemos nuestra textura para las cartas, se trata de una imagen 256×64 pixels que vamos a dividir en 4 sprites de 64×64:

El primer sprite será la parte trasera de la carta, el segundo sprite será la parte frontal, el tercer sprite es un brillo para poner luego encima (que supongo no se notará porque es transparente jiji) y el cuarto sprite está en blanco .. no lo usamos, pero está ahi para mantener la proporción de 64×64.

Y esta es nuestra textura con todos los sprites para nuestras cartas

Al final acabaremos combinando estas 2 texturas para dibujar cada carta … de ahi viene aquella historia de dibujar un sprite en varias capas:

Traducido esto nuestro metodo Render nos queda asi:

De Vuelta a EAGLView.h

Por ahora solo hemos creado una clase Carta que se corresponde al objeto en si, ahora vamos a ver como usar estas cartas desde nuestro bucle del juego, vamos a EAGLView.h y añadimos estas lineas:

En primer lugar que no se os olvide el include

Y dentro de la interface nos creamos estas variables

nos vamos a EAGLView.m

Ahora nos vamos a nuestro método inicializar y pasamos a inicializar las cartas, empezaremos por cargar las 2 texturas, y activar el cull_face. Acordaros que en este método ya habíamos añadido las luces .. ahora seguimos iniciando más cosas:

Siguiente paso: crear las 3 cartas, inicializarlas con la textura y poner cada una en un sitio, aqui vamos a añadir una funcion para que se inicie con un sprite aleatorio, para ello usaremos la funcion RANDOM_INT que ya habiamos definido al principio:

You may also like...

3 Responses

  1. alvaro dice:

    hay forma de conseguir el codigo terminado para ver como anda o la segunda parte del manual.
    gracias.
    muy buenos tutoriales
    deje mi email por si me lo podes mandar terminado para verlo 😀

  2. neofar dice:

    Pues … tarde o temprano tendré que hacer la segunda parte, de todos modos no soy muy partidario de poner el código para descargar, más que para los archivos que requieran mucho por escribir, aquí tienes todo lo necesario para reproducir el ejemplo

  3. yotes dice:

    Hola, recien encuentro los tutoriales y solo los he visto por arriba, pero se ven muy ùtiles. Me encanta encontrar algo en castellano, gracias por tu tiempo!!

Deja un comentario

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