Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Aprende a programar videojuegos en C++ con Gosu

Jos Toms Tocino Garc e a a josetomas.tocino@uca.es

24 de Marzo de 2011

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Indice de contenidos

Introduccion

Primera parte: lo basico

Segunda parte: Gosunoid

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Indice

Introduccion

Primera parte: lo basico

Segunda parte: Gosunoid

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Introduccion
Que es Gosu? Gosu es una biblioteca de desarrollo de videojuegos 2D para C++ y Ruby. Sus principales ventajas son: Completamente orientada a objetos, facilitando el desarrollo. Multiplataforma: Windows, GNU/Linux, Mac OS, iPhone... Aceleracin grca, alcanzando un rendimiento alto. o a Muy amplia, incluye incluso soporte para juego en red. Algunas desventajas... Desarrollo algo irregular en las diferentes plataformas. Al no ser muy famosa, no est en los repositorios pero es fcil a a de instalar.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Como se desarrolla un videojuego?

Taller introductorio Lectura recomendada: http://code.google.com/p/pong-sdl-advuca/ En esencia, un videojuego es una aplicacin en la que se repiten o una serie de pasos constantemente: Primera etapa: ver qu hace el usuario, est pulsando teclas? e a Segunda etapa: hacer clculos, procesar la lgica. a o Tercera y ultima etapa: mostrar los grcos en pantalla. a Again and again, and again and again...

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Materiales del taller

Carpeta windows: Ficheros para hacer el taller en Windows con Visual Studio. Carpeta linux: Ficheros para hacer el taller en Linux por l nea de comandos. Carpeta soluciones: Soluciones a los ejercicios que vayamos haciendo.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Materiales del taller: Windows

Dentro de la carpeta windows encontraris: e TallerGosu.sln Fichero de la solucin para Visual Studio 2008 Express. Al o abrirlo, dentro estn integrados los proyectos para las dos a partes del taller. Carpeta Parte 1 Ficheros para la primera parte del taller. Trabajaremos con el chero main.cpp Carpeta Parte 2 Ficheros para la segunda parte del taller. Trabajaremos con el chero src/ventana.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Compilar en Windows

Para compilar en Visual Studio 2008 Express, seguimos estos dos pasos:
1

Tenemos que seleccionar el proyecto que queremos compilar de la lista de la izquierda con el botn derecho y seleccionar o Establecer como proyecto de inicio. A partir de aqu podemos compilar el proyecto pulsando el , botn F5 (nos preguntar si queremos generar el proyecto, o a respondemos que s ).

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Materiales del taller: Linux

Dentro de la carpeta linux encontraris: e Carpeta gosu Carpeta con la distribucin de cheros de Gosu necesarios o para compilar los proyectos. Carpeta Parte 1 Ficheros para la primera parte del taller. Trabajaremos con el chero main.cpp Carpeta Parte 2 Ficheros para la segunda parte del taller. Trabajaremos con el chero src/ventana.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Compilar en Linux

Para compilar en linux (por l nea de comandos), el proceso es muy sencillo. Estando en cualquiera de las dos carpetas(Parte 1 Parte 2), o ejecutamos make libgosu para compilar Gosu. OJO: Esto solo hay que hacerlo una vez en todo el taller. Luego, cada vez que hagamos cambios en los cheros .cpp, simplemente ejecutamos make para compilar el cdigo. o Podremos lanzarlo utilizando el comando ./programa

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Indice

Introduccion

Primera parte: lo basico

Segunda parte: Gosunoid

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Primeros pasos con Gosu

Cabeceras Unicamente tendremos que usar #include <Gosu/Gosu.hpp> #include <Gosu/AutoLink.hpp> // Solo windows Con esto ya estaremos incluyendo todos los cheros necesarios.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

La clase principal

Gosu est dividido en clases. La clase Gosu::Window representa la a ventana de juego, la clase principal de nuestro juego heredar de a ella.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

La clase principal
Constructor de Window

show()

bucle principal

buttonDown: Leer y procesar la entrada del usuario

class Ventana : public Gosu::Window{ public: Ventana() : Gosu::Window(800, 600, false){ } ~Ventana(){ /* destructor */ }

update: Actualizacin del mundo (clculos, inteligencia artif., etc)

draw: Redibujado de los elementos en pantalla

Juego terminado? S

NO

close()

void // } void // } void // } };

update(){ Lgica del juego o draw(){ Dibujado de grficos a buttonDown(Gosu::Button B){ Pulsaciones de teclas

Destructor de Window

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Constructor de Gosu::Window

class Ventana : public Gosu::Window{ public: Ventana() : Gosu::Window(800, 600, false){ Ventana hereda de Gosu::Window. En el constructor del padre, indicamos ancho, alto y si queremos pantalla completa.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Metodos de Gosu::Window

void update(){ // Aqu debe ir la lgica del juego o } void draw(){ // Aqu se deben pintar los grficos a } void buttonDown(Gosu::Button boton){ // Este mtodo se lanza cuando se pulsa un botn e o }

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Abriendo y cerrando la ventana

Para abrir una ventana de juego usaremos el mtodo show(): e int main(){ Ventana V; V.show(); } Para cerrar nuestra ventana, podemos usar el mtodo close(), e por ejemplo al pulsar cualquier botn: o void buttonDown(Gosu::Button B){ close(); }

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Primera tarea

Abrir el chero main.cpp

Linux: en la carpeta Parte 1. Para compilar, ejecutar make libgosu y luego make. Para ejecutar, ./programa Windows: en el proyecto Parte 1

Crear una clase Ventana derivada de Gosu::Window tal y como hemos explicado. Hacer que se muestre la ventana y que se cierre al pulsar una tecla. La solucin la tenis en el chero o e soluciones/Parte 1/main paso1.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Graficos en Gosu

Los grcos son una de las piezas a ms importantes de un juego. a Cada objeto Gosu::Window tiene un mtodo graphics() que e devuelve el destino donde todos los elementos grcos (imgenes a a y fuentes) se van a pintar.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Imagenes en Gosu
En Gosu las imgenes se representan con la clase Gosu::Image. a Gosu::Image * miImagen = new Gosu::Image(graphics(), L"rutaDeImagen.png"); Y se dibujan as (dentro del mtodo Ventana::draw): e miImagen -> draw(posX, posY, posZ); Es posible escalar las imgenes y tintarlas utilizando un color: a miImage -> draw(posX, posY, posZ, escalaX, escalaY Gosu::Color(255, 255, 0, 0)); // Tinte rojo

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Apuntes sobre las rutas

Si os habis jado, las rutas de los cheros se indican utilizando e wstring, que se indican poniendo una L delante: wstring ruta = L"rutaFichero.png"; Para que el juego pueda encontrar las imgenes, hay que anteponer a la salida de la funcin Gosu::sharedResourcePrefix(), que nos o devuelve el directorio en el que est el ejecutable: a wstring directorio = Gosu::sharedResourcePrefix() wstring rutaCompleta = directorio + L"rutaFichero.png";

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Segunda tarea

Aadir a la clase Ventana un atributo Gosu::Image * n imagen. En el constructor de la Ventana, cargar la imagen imagen.png en el atributo que hemos denido. En el mtodo draw de Ventana, pintar la imagen en las e coordenadas que queris. a La solucin la tenis en el chero o e soluciones/Parte 1/main paso2.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Textos en Gosu

Los textos
tambin son importantes e
para transmitir mensajes.

Utilizaremos la clase Gosu::Font para cargar una fuente y luego escribir un texto con ella. Funciona igual que Gosu::Image.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Cargando y mostrando fuentes

Las fuentes se cargan igual que las imgenes, con la diferencia de a que hay que aadir el tamao y si queremos negritas o no: n n Gosu::Font * miFuente = new Gosu::Font( graphics(), directorio + L"nombreFuente.ttf", 30, // El tama~o de la fuente en pxeles n 0); // 0 indica que no queremos negritas Para escribir, el mtodo tambin se llama draw: e e miFuente -> draw(posX, posY, posZ, L"Este es el texto que aparecer"); a

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Tercera tarea

Aadir a la clase Ventana un atributo n Gosu::Font * fuente. En el constructor de la Ventana, cargar la fuente arial.ttf en el atributo que hemos denido, con un tamao de 60 n p xeles. En el mtodo draw de Ventana, pintar un mensaje con la e fuente que acabamos de cargar usando su mtodo draw. e La solucin la tenis en el chero o e soluciones/Parte 1/main paso3.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Interactuando con el usuario

El mtodo buttonDown se ejecutar cuando el usuario pulse un e a botn, que recibimos como parmetro. Podemos reaccionar ante o a eso para, por ejemplo, cambiar el valor de una variable. void buttonDown(Gosu::Button B){ if (B == Gosu::kbEscape){ close(); }else{ otraTecla = true; } } //... private: bool otraTecla;

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Leyendo la posicion del raton

Adems, la clase Gosu::Window nos ofrece un mtodo input() a e que nos devuelve un objeto que nos da informacin sobre la o entrada del usuario, como por ejemplo la posicin del ratn: o o input().mouseX(); input().mouseY();

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Cuarta tarea

Aadir a la clase Ventana un atributo entero: int contador n e inicializarlo a 0 en el constructor. Comprobar en el mtodo buttonDown si se ha pulsado la tecla e escape (cuyo cdigo es Gosu::kbEscape). En ese caso, cerrar o la aplicacin (usando close()). o Si se ha pulsado otra tecla, aumentar el contador. Cuando el contador sea mayor que 5, cambiar el mensaje que escribimos en la tarea anterior. La solucin la tenis en el chero o e soluciones/Parte 1/main paso4.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Indice

Introduccion

Primera parte: lo basico

Segunda parte: Gosunoid

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Gosunoid
Es un clon del clsico a Arkanoid, que a su vez fue un clon del juego Breakout de Atari. La idea es acabar con todos los bloques.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Recursos que utilizaremos

Figura: media/pala.png - Pala que controla el jugador

Figura: media/bola.png - Bola

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Recursos que utilizaremos

Figura: media/bloque.png

Utilizaremos una misma imagen para pintar todos los bloques, ya que el mtodo draw de la clase Gosu::Window nos permite indicar e un color con el que tintar el bloque.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Recursos que utilizaremos

Figura: media/fuentelcd.ttf - Fuente tipo LCD

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Organizacion del proyecto

En Linux Carpeta include Ficheros de cabecera (.h) Carpeta src Ficheros de cdigo fuente: main.cpp y ventana.cpp o Carpeta obj Ficheros temporales. Carpeta media Recursos (imgenes y tipos de letra .ttf). a Makele Script para compilar, solo hace falta escribir make.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Organizacion del proyecto

En Windows Carpeta include Ficheros de cabecera (.h) Carpeta src Ficheros de cdigo fuente: main.cpp y ventana.cpp o Carpeta ArchivosTemporales Ficheros de cdigo objeto. o Carpeta Ejecutable Aqu se genera el .exe Parte 2.vcproj Fichero del proyecto

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Trabajaremos con el chero src/ventana.cpp.

Como tenemos poco tiempo, trabajaremos con el proyecto ya comenzado en lugar de empezar de cero. Iremos rellenando las partes que faltan hasta que funcione por completo. Las partes que faltan por rellenar estn marcadas con la a siguiente l nea: // @@RELLENAME@@ El cdigo completo lo encontraris en o e soluciones/Parte 2/ventana.cpp

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Overview del proyecto

La clase principal es Ventana, que deriva de Gosu::Window. Tiene los mtodos t e picos que hemos comentado antes:
update() draw() buttonDown()

Tiene los siguientes elementos grcos: a

Imagen para la pala, la bola, y el fondo. Imagen genrica para los bloques. e Fuente para el marcador de puntos.

El enumerado tipoEstado indica los dos posibles estados del juego:

ESTADO INICIAL, cuando la bola est sobre la pala. a ESTADO MOVIMIENTO, cuando la bola est en movimiento. a El estado se guarda en la variable estadoActual.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Estado inicial

Parece que faltan unas cuantas cosas para que esto salga adelante...

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Problema 1: que pasa con el fondo?

Parece que el fondo no se est pintando, habr que ver qu pasa a a e en el mtodo draw de nuestra clase Ventana... e Escribe el cdigo necesario para que se pinte el fondo en las o coordenadas (0,0,0)

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Problema 2: bloques de... colores?

Los bloques parece que estn de luto. Se dibujan en pantalla, s a , pero parece que no con el color adecuado. F jate en el mtodo draw de la clase Ventana, hay una variable e bloqueColor que guarda el color asociado al bloque, pero no parece que se utilice luego en ningn lado. u Modica el cdigo que pinta los bloques para que acepte el o atributo de color bloqueColor

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Problema 3: quiero ver mis puntos!

No hay nada ms triste que un marcador de puntos sin puntos. a Parece que se nos ha olvidado cargar la fuente para mostrar el marcador. En el constructor de la clase Ventana, aade el cdigo necesario n o para cargar en el atributo fuente una nueva Gosu::Font que cargue el archivo "media/fuentelcd.ttf" a un tamao de 33 n p xeles y sin negritas.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Problema 4: la pala no se mueve!

Aunque aparentemente todo pinta bien, la pala no sigue al ratn al o moverse, siempre se queda ja en la misma posicin. Esto no pinta o nada bien! Tal vez puedas conseguir leer la posicin horizontal del ratn y o o asignrsela a la variable mouseX dentro del mtodo update de a e Ventana.

Introducci n o

Primera parte: lo b sico a

Segunda parte: Gosunoid

Esto ha sido todo, hamijos!

Gracias por venir :)