Con este tutorial, quiero abrir un tema que desde hace tiempo me interesa bastante. Ya el otro día os recomendé un libro sobre desarrollo de juegos, pero en esta serie de tutoriales vamos a verlo de una forma más práctica pensando en la aplicación de estos conceptos en el próximo Windows Phone 7.
En el tutorial partiremos de la base de que has leído mis tutoriales de introducción a Silverlight. Y usaremos como base una librería que creé en su día para realizar una demo técnica: GameFX.
Ver juego
Tradicionalmente en Silverlight tendríamos dos formas de trabajar: creando controles de usuario con animaciones y basándonos en las interacciones del usuarios con dichos controles para la actualización del juego. El segundo te da mas flexibilidad a la hora de crear lógicas de inteligencia y colisión, pero, si estáis interesados en la primera, aquí tenéis una serie de 10 vídeos donde muestran como desarrollar un juego desde cero con Silverlight.
Entonces la idea es la siguiente:
Primero creamos los controles: enemigos, personajes, fondos, etc.
Lo segundo es comenzar el bucle de actualización y pintado
En el de actualización, cambiamos las posiciones de nuestros controles, creamos nuevos, etc. en función del estado del teclado
Finalmente en el de pintado añadimos y quitamos los controles que hayan sido creados o eliminados
Para la realización de la librería GameFX me basé en el modelo de programación de XNA para el diseño del modelo de programación.
Como veis la clase Game nos proporciona lo que decíamos antes: los métodos de carga, descarga, actualización y pintado.
¿Por donde debemos empezar?
Antes de nada debemos pensar qué tipo de juego queremos hacer, como se va a interactuar con él y que recursos va a tener: sonido, gáficos, etc.
Al menos tenemos que tener unos ejemplos de gráficos para ir viendo como se va moviendo.
Una vez lo tengamos claro, debemos crear los ficheros con esos recursos. Por ejemplo, para el jugador, crearemos el fichero Player.xaml:
<UserControl
xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
x:Class=»Demo.Player»
Width=»128″ Height=»128″>
<Image Margin=»0″ Source=»Content/player.png» Stretch=»Fill»/>
</UserControl>
Como veis en la carpeta Content es donde he decidido guardar el contenido.
Una vez ya tengamos varios ficheros, XAML, con nuestros sprite ya podemos empezar con el juego.
Empezando a hacer el juego
Una vez que ya estemos listos para empezar a programar el juego, debemos de nuestro proyecto Silverlight, eliminar el fichero App.xaml ya que el propio juego ya se encarga de la gestión de la aplicación.
Acto seguido debemos crear un fichero XAML, nosotros le llamaremos DemoGame.xaml, que vamos a derivar de nuestra clase Game. En las propiedades del proyecto debemos ponerlo como objeto inicial (Startup Object).
<GameFx:Game xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns:GameFx=»clr-namespace:GameFx;assembly=GameFx»
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
x:Class=»Demo.DemoGame» «>
<GameFx:Game.Resources»>
</GameFx:Game.Resources»>
</GameFx:Game»>
Y del lado del código C# debemos implementar los 4 métodos, siendo lo más importantes estos:
void LoadContent() { }
void Update(GameTime gameTime) { }
void Draw(GameTime gameTime) { }
A nivel de clase debemos declarar las variables de los recursos, como por ejemplo el jugador:
Player player;
Y en el método LoadContent debemos instanciarlo:
Player player;
public override void LoadContent() {
player = new Player();
}
Actualizando el estado
En el método Update debemos en función del estado del teclado, el objeto KeyboardState nos permite saber el estado del teclado:
public override void Update(GameTime gameTime)
{
if (KeyboardState.ContainsKey(Key.Down))
{
if (KeyboardState)
{
if ((double)player.GetValue(Canvas.TopProperty) + player.ActualHeight < GameSurface.ActualHeight - 10)
{
player.SetValue(Canvas.TopProperty, (double)playter.GetValue(Canvas.TopProperty) + 4.0);
}
}
}
}
Dibujando los sprites
Por último en el método Draw debemos añadir y quitar del juego aquellos objetos que se vayan creando o muriendo. En nuestro ejemplo solamente tenemos a nuestro jugador, que solo es necesario mostrarlo la primera vez.
bool firstTime = true;
public override void Draw(GameTime gameTime) {
if (firstTime) {
GameSurface.Children.Add(player);
firstTime = false;
}
}
Resumen
Tan solo hemos mirado como usar la librería GameFX que estoy programando, pero en caso de ser necesario tan solo se debería crear un bucle que llame a los métodos Update y Draw secuencialmente. Esta librería tan solo quiere ayudar a no repetir cosas que nos harían falta en todos los juegos que hagamos.
En próximas entregas veremos como añadir enemigos, detectar colisiones, etc. Para ver el estado actual del juego:
Ver juego
Nota: Hay muchas cosas que está en la librería GameFX que todavía no están implementadas como el ContentManager. Para futuras versiones la idea es descargar el contenido bajo demanda en vez de tener los ficheros en el propio paquete de Silverlight.