Galaga. Paso 01: Creación de proyecto básico

Creación de juegos desde cero: C# y SFML

Vamos a entrar ya en materia. El objetivo de esta entrada va a ser obtener el código desde el repositorio de GitHub y conocer la estructura básica del mismo.

Descarga del proyecto desde GitHub

Los pasos son muy sencillos:

  1. Arranca una Shell de git (Windows) o un Terminal (en Linux o MacOS)
  2. Mediante el comando cd  desplázate hasta la carpeta en la cual quieras que esté la carpeta del proyecto.
  3. Ejecuta el comando git clone https://github.com/aoltra/Galaga-SFML.Net.git Este comando clona el contenido actual del repositorio en la carpeta en la que e encuentres [1]

Por ejemplo, en mi caso, para  descargarme en Windows el proyecto en la carpeta c:\Users\alfredo\Documents\Visual Studio 2015\Projects, los pasos han sido:

C:\Users\alfredo\Documents\GitHub> cd  ..
C:\Users\alfredo\Documents> cd   ‘.\Visual Studio 2015\Projects’
C:\Users\alfredo\Documents\Visual Studio 2015\Projects> git clone https://github.com/aoltra/Galaga-SFML.Net.git

Si todo ha ido correctamente, en la carpeta en la que te encuentres aparecerá una subcarpeta llamada Galaga-SFML.Net[1] y, dentro de ella, todo el código del programa.

Este código acabas de descargar no debe ser modificado. Puedes consultarlo siempre que quieras, pero cualquier modificación no permitirá que puedas intercambiar entre los diferentes pasos que iremos dando a lo del curso. Si realizas una modificación la opción más práctica que tendrás es la de borrar toda la carpeta y volver a repetir los pasos anteriores para descargar todo el código de nuevo.

Sabiendo esto, posiblemente la mejor opción para seguir el curso sea la de crearse un proyecto personal donde poder experimentar lo que se va a ir comentando y, por otra parte, tener en otra carpeta el código del proyecto que ha de ser utilizado a modo de consulta.

Evidentemente, el código que te has descargado está actualizado a la última versión existente en el repositorio pero, a lo largo del curso, se irá actualizando… Si quieres estar al día sin necesidad de descargarte cada vez todo el código puedes ejecutar desde la carpeta del proyecto un git pull

C:\Users\alfredo\Documents\Visual Studio 2015\Projects> cd Galaga-SFML.Net.git
C:\Users\alfredo\Documents\Visual Studio 2015\Projects\Galaga-SFML.Net [master]> git pull



Ejecución del juego

Llegados a este punto  ya puedes cargar la solución en el Visual Studio y arrancar. Si todo ha ido bien podrás ver todo en acción todo lo que hasta el momento del clonado (o del pull) esté implementado.

Paso 1: Estructura básica

Ahora que ya has visto a donde queremos llegar, pongámonos manos a la obra.

Vamos a cargar el código correspondiente al primer paso. Para ello, otra vez desde el terminal y desde la carpeta donde está el proyecto hacemos git checkout Paso001:

C:\Users\alfredo\Documents\Visual Studio 2015\Projects> cd Galaga-SFML.Net.git
C:\Users\alfredo\Documents\Visual Studio 2015\Projects\Galaga-SFML.Net [master]> git checkout Paso001

Si volvemos al Visual Studio podremos ver que el proyecto ha cambiado. Prueba a ejecutar y ver que cual es el objetivo del primer paso. El juego consiste únicamente en un círculo azul que se puede mover a través de la ventana.

El proyecto se reduce ahora mismo a una única clase que en su función run esquematiza la estructura básica de un juego, el bucle principal.

Main loop Game

El corazón de un juego es un bucle, una repetición a priori infinita de tres acciones:

  1. Recepcionar los datos de las entradas de usuario.
  2. Calcular los nuevos estados de los elementos del mundo del juego (ya sea porque estén afectados por las entradas de usuario o simplemente porque el tiempo ha pasado)
  3. Redibujar el mundo con los nuevos estados

En nuestro ejemplo. el bucle se va a repetir mientras que la ventana del juego esté abierta

// Game Loop
while (_window.IsOpen)
{
	// Procesamos eventos
	_window.DispatchEvents();

	update();
	render();
}

La explicación del código es bastante sencilla. En el constructor configuramos las características básicas de nuestro juego. Para ello, apoyándonos en clases que nos proporciona SFML.Net creamos la ventana principal (RenderWindow) y un círculo (CircleShape) de radio 40 y de color Cyan que estará posicionado inicialmente en la posición 100,100[2] y que hará las veces de jugador.

Por último registramos los delegados. De una manera muy básica, podríamos decir que un delegado no es ni más ni menos que una función que se ejecutará cuando un determinado evento se produzca[3]. Para asociar el delegado al evento (lo que se denomina suscribirlo),  utilizamos la sintaxis evento += new Delegado(función_que_se_ejecuta). Así en nuestro ejemplo, cuando se genere el evento Closed (que se generará cuando se cierre la ventana), se llamará a la función OnClose función que tiene que tener la estructura indicada por el delegado EventHandler, en este caso devolver un void y tener un parámetro de tipo object y otro de tipo EventArgs.

_window.Closed += new EventHandler(OnClose);

El método de window DispatchEvent, simplemente permite que los eventos se lancen ya que lo que hace es recibirlos desde la librería original en C++ y pasarlo a Evento C#, que será los que procesaremos con los delegados.

La función update se va a encargar de calcular los nuevos estados de los elementos del mundo. En este caso sólo tenemos un elemento: el círculo, el jugador. Su estado depende únicamente de las entradas de usuario. Cada vez que se pulse una de las teclas de desplazamiento, el  jugador se moverá 1 pixel en ese sentido. La forma de hacerlo es sencilla: la posición del jugador (un vector) será la posición anterior más (o menos) 1 en la dirección indicada.

// actualiza el estado del mundo
private void update() {
	SFML.System.Vector2f movement = new Vector2f(0f, 0f);

        // desplaza 1 px en el sentido que haya indicado la pulsación del teclado
	if (_IsMovingUp)
		movement.Y -= 1f;
	if (_IsMovingDown)
		movement.Y += 1f;
	if (_IsMovingLeft)
		movement.X -= 1f;
	if (_IsMovingRight)
		movement.X += 1f;
	_player.Position += movement;
}

Por último, la función Draw redibuja el mundo de nuevo. Para ello borra completamente la ventana (Clear), dibuja el jugador (Draw) y lo muestra (Display). Puede parecer extraño, pero las tarjetas gráficas ya optimizan este tipo de funcionamientos. Con Display lo que realmente se hace es cambiar de búffer a visualizar (técnica del doble búffer: se muestra un búffer mientras se dibuja en el otro). Hay que tener en cuenta que en un juego siempre pasan cosas, aunque el jugador esté quieto en un sitio, luego lo habitual es renderizar siempre que se pueda. No es como en las aplicaciones habituales donde sólo se redibuja si algo cambia, es decir, por peticiones, bajo demanda.

[1] Si quieres trabajar con la versión de Java, el comando es git clone https://github.com/aoltra/Galaga-JSFML.git  . Recuerda que está versión va a ir muy retrasada con respecto a la de C#

[2] El origen del sistema de coordenadas es la esquina superior izquierda, con X crecientes hacia la derecha e Y hacia abajo

[3] Para ser más realista, un delegado indica como tienen que ser (qué parámetros y qué salida) las funciones que pueden ser llamadas cuando se produzca un evento.

Tags: , , , , , ,

Compartir en Facebook Compartir en Twitter

2 Comentarios a “Galaga. Paso 01: Creación de proyecto básico”

  1. Creación de juegos desde cero con SFML y C# | Uhuru Labs dice:

    […] Paso 01. Creación del proyecto básico […]

  2. Galaga Paso 02: Velocidad constante | Uhuru Labs dice:

    […] « Galaga. Paso 01: Creación de proyecto básico […]

Dejar un comentario

XHTML: Puedes usar estos tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>