The Code Crab

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 5

2010-07-08T02:44:00.001-07:00

¿Que tal pequeños cangrejillos? Disculpad la tardanza de esta quinta parte del tutorial, pero me ha dado mas problemas de los que me esperaba, y además he andado algo ocupadillo. En esta parte de tutorial vamos a aprender a manejar detección de colisiones, parte fundamental de prácticamente cualquier videojuego, así que nos ponemos serios, que empieza lo difícil. Empecemos por la teoría.

Existen numerosas técnicas de detección de colisiones entre sprites (no exclusivas de XNA, son comunes en el mundo del desarrollo de videojuegos). Lo más fácil y eficiente (de cara a procesamiento y obtención de buenos resultados de performance) es utilizar rectángulos, detectando colisión cuando estos se intersecan.

El problema obvio es la imprecisión en la detección de la colisión. Según esto, un impreciso acercamiento entre los dos objetos ya supondría una colisión, como se puede ver en las imágenes anteriores.

En muy pocas ocasiones, pues, esta técnica tan simple nos valdrá. Aunque existen otras variantes más precisas, y todavía eficientes, basadas en la detección de colisiones mediante rectángulos. Una de ellas sería dividir cada uno de los sprites en rectángulos más pequeños, y englobarlos todos en uno más grande. Entonces, primero intentaríamos detectar la colisión mediante los rectángulos grandes, y solo si esta es afirmativa, intentaríamos detectar la colisión entre los rectángulos más pequeños (y estos son los que decidirían si hay colisión o no).

Como esta existen muchas variantes de la misma técnica, basadas en diferentes formas geométricas, y si bien esta técnica es mucho mas precisa que la anterior, aun puede ser más precisa, aplicando la detección de colisiones denominada “Perfecta” o Pixel a Pixel, en la cual se obtendrá precisión perfecta, activándose solo cuando se colisione a nivel de pixel.

La principal desventaja de esta técnica es que es más complicada que las anteriores, y por tanto tiene un coste computacional mucho mayor. Sin embargo en nuestro caso vamos a adoptar una solución intermedia, comprobando solo la colisión pixel a pixel solo si se detecta colisión con rectángulos. Evidentemente el rendimiento no es igual que con las técnicas más simples, pero se mejorará muchísimo.

Fuente: http://geeks.ms/blogs/jbosch/archive/2009/08/08/xna-pixel-perfect-collision-con-xna-en-base-a-un-mapa-de-colisiones-2d.aspx

Pues explicado esto, vamos al tema. Lo primero que habrá que hacer es una clase para crear enemigos. Esta parte voy rápido que no hay nada nuevo. Añadimos la imagen del enemigo como siempre (metiéndola en la carpeta content y arrastrándola al VS). Una vez esta esto, creamos la clase Enemigo1, algo así:

    class Enemigo1
    {
        private const int anchoImagen = 40;
        private const int altoImagen = 57;
        private Texture2D imagen;
        public Texture2D Imagen
        {
            get { return imagen; }
        }
        private Rectangle bounds;
        public Rectangle Bounds
        {
            get { return bounds; }
        }
        private Vector2 posicion;
        public Vector2 Posicion
        {
            get { return posicion; }
        }
        int altoVentana;
        int anchoVentana;
        public event EventHandler FueraDePantalla;
        public Enemigo1(Vector2 posicion, int altoVentana, int anchoVentana, ContentManager Content)
        {
            this.altoVentana = altoVentana;
            this.anchoVentana = anchoVentana;
            this.posicion = posicion;
            //Ya que los disparos pueden surgir en cualquier momento, y no al principio de la ejecución no tiene sentido tener un método
            //LoadContent que cargue las imágenes. En vez de eso las cargaremos en el constructor.
            imagen = Content.Load<Texture2D>("EnemigoBasico");
        }
        public void Update()
        {
            posicion.Y += 3;
            bounds = new Rectangle((int)posicion.X, (int)posicion.Y, anchoImagen, altoImagen);
            if (posicion.Y >= altoVentana)
                FueraDePantalla(this, null);
        }
        public void Draw(SpriteBatch spbtch)
        {
            spbtch.Draw(imagen, posicion, new Rectangle(0,0,anchoImagen, altoImagen), Color.White);
        }
    }

Imagino que a estas alturas sabréis por donde van los tiros. 40 y 57 son las dimensiones de la imagen. Además de los atributos de siempre vemos que tenemos un Rectangle, llamado bounds, en el que almacenamos el rectángulo que representa la imagen dibujada en pantalla y lo mantenemos actualizado (en update). Además añadimos varias propiedades para poder acceder a imagen, _posicion y bounds sin necesidad de implementar un método get (Gracias a esto se podra acceder simplemente con enemigo.Imagen o enemigo.Bounds. Este nuevo atributo, así como las diferentes propiedades también tienen que ser añadidas a las clases Nave y Disparo, pues nos hará falta para la detección de colisiones:

    class Disparo
    {
        private const int anchoImagen = 6;
        private const int altoImagen = 22;
        private Texture2D imagen;
        public Texture2D Imagen
        {
            get { return imagen; }
        }
        private Rectangle bounds;
        public Rectangle Bounds
        {
            get { return bounds; }
        }
        private Vector2 posicion;
        public Vector2 Posicion
        {
            get { return posicion; }
        }
        public event EventHandler FueraDePantalla;
        
        public Disparo(Vector2 posicion, int anchoNave, ContentManager Content)
        {
            this.posicion = posicion;
            //movemos un poco la posicion del disparo, para que salga desde el centro de la nave y no desde una esquina
            posicion.X += (anchoNave / 2);
            //lo que acabamos de centrar es la esquina superior izquierda del disparo. Así situaremos el centro alineado con el centro de la imagen
            //los 3 pixeles extra es por que la imagen del disparo no esta perfectamente centrada.
            posicion.X -= (anchoImagen / 2)+3;
            //Ya que los disparos pueden surgir en cualquier momento, y no al principio de la ejecución no tiene sentido tener un método
            //LoadContent que cargue las imágenes. En vez de eso las cargaremos en el constructor.
            imagen = Content.Load<Texture2D>("weapons");
        }
        public void Update()
        {
            posicion.Y-=5;
            bounds = new Rectangle((int)posicion.X, (int)posicion.Y, anchoImagen, altoImagen);
            if (posicion.Y <= 0)
                FueraDePantalla(this, null);
        }
        public void Draw(SpriteBatch spbtch)
        {
            spbtch.Draw(imagen, posicion, new Rectangle(0,0,anchoImagen, altoImagen), Color.White);
        }
    }

    class Nave
    {
        private Rectangle rectangulo;
        private const int anchoImagen = 42;
        private const int altoImagen = 44;
        private Texture2D imagen;
        public Texture2D Imagen
        {
            get { return imagen; }
        }
        //Este rectangulo representa la posicion dentro de la ventana, mientras que el que ya teniamos
        //representa la posición dentro de la imagen.
        private Rectangle bounds;
        public Rectangle Bounds
        {
            get { return bounds; }
        }
        private Vector2 posicion;
        public Vector2 Posicion
        {
            get { return posicion; }
        }
        private int altoVentana;
        private int anchoVentana;
        private Listdisparos;
        public List Disparos
        {
            get { return disparos; }
        }
        private int frameCounter = 0;
        private ContentManager content;
        public Nave(int altoVentana, int anchoVentana)
        {
            this.altoVentana = altoVentana;
            this.anchoVentana = anchoVentana;
            posicion = new Vector2(altoVentana - altoImagen * 2, (anchoVentana - anchoImagen) / 2);
            CrearRectangulo(anchoImagen, altoImagen * 2);
            disparos = new List<Disparo>();
        }
        public void LoadContent(ContentManager Content)
        {
            this.content = Content;
            imagen = Content.Load<Texture2D>("battleship");
        }
        public void Update()
        {
            UpdateShots();
            UpdatePosition();
            UpdateRectangle();            
        }
        private void UpdateShots()
        {
            frameCounter++;
            if (Keyboard.GetState().IsKeyDown(Keys.Z) && disparos.Count < 6 && frameCounter > 7)
            {
                Disparo s = new Disparo(posicion, anchoImagen, content);
                disparos.Add(s);
                s.FueraDePantalla += new EventHandler(FueraDePantallaHandler);
                frameCounter = 0;
            }
            disparos.ForEach(x => x.Update());        
        }
        private void UpdatePosition()
        {
            if (Keyboard.GetState().IsKeyDown(Keys.Left) && posicion.X > 5)
                posicion.X -= 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Right) && posicion.X < (anchoVentana - anchoImagen))
                posicion.X += 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Up) && posicion.Y > 5)
                posicion.Y -= 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Down) && posicion.Y < (altoVentana - altoImagen))
                posicion.Y += 5;
            bounds = new Rectangle((int)Posicion.X, (int)Posicion.Y, anchoImagen, altoImagen);
        }
        private void UpdateRectangle()
        {
            //a partir de aquí escojemos la parte de imagen que queremos dibujar y la almacenamos en rectangle,
            // en funcion de la combinaion de botones que se esten pulsando.

            if (Keyboard.GetState().IsKeyDown(Keys.Left) && Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                CrearRectangulo(0, altoImagen);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Right) && Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                CrearRectangulo(anchoImagen * 2, altoImagen);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                CrearRectangulo(anchoImagen, altoImagen);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Left) && Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                CrearRectangulo(0, 0);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Right) && Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                CrearRectangulo(anchoImagen * 2, 0);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                CrearRectangulo(anchoImagen, 0);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                CrearRectangulo(0, altoImagen * 2);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                CrearRectangulo(anchoImagen * 2, altoImagen * 2);
            }
            else
            {
                CrearRectangulo(anchoImagen, altoImagen * 2);
            }
        }
        private void CrearRectangulo(int x, int y)
        {
            rectangulo = new Rectangle(x, y, anchoImagen, altoImagen);
        }
        public void Draw(SpriteBatch spbtch)
        {
            spbtch.Draw(imagen, posicion, rectangulo, Color.White);
            DrawShots(spbtch);
        }
        private void DrawShots(SpriteBatch spbtch)
        {
            foreach (Disparo s in disparos)
            {
                s.Draw(spbtch);
            }
        }
        private void FueraDePantallaHandler(Object sender, EventArgs args)
        {
            disparos.Remove((Disparo)sender);
        }
    }

Solo muestro las partes que cambio por evitar hacer un post enorme, así que cuidado si copiáis pegáis. Con esto añadimos las nuevas propiedades, el nuevo atributo, y mantenemos actualizado este atributo. Es importante darse cuenta de la diferencia entre este rectángulo (bounds) que muestra el rectángulo ocupado por la imagen en la ventana, y el otro rectángulo que ya teníamos en Nave, que representa que parte de la imagen se va a dibujar.

Ahora que esta todo preparado, lo primero que hay que hacer es mostrar los enemigos por pantalla. Esto lo manejaremos en la clase Game1 de momento (En la próxima parte del tutorial se hará una pequeña reestructuración).

        public class Game1 : Microsoft.Xna.Framework.Game
        {
            private GraphicsDeviceManager graphics;
            private SpriteBatch spriteBatch;
            private Nave nave;
            private Fondo fondo;
            private int frameCounter = 0;
            private List<Enemigo1> enemigos;

            public Game1()
            {
                graphics = new GraphicsDeviceManager(this);
                enemigos = new List<Enemigo1>();
                Content.RootDirectory = "Content";            
            }
	...
            protected override void Update(GameTime gameTime)
            {
                // Cuidado con esto, no usamos mando.
                if (Keyboard.GetState().IsKeyDown(Keys.Escape))
                    this.Exit();
                fondo.Update();
                nave.Update();
                UpdateEnemigos();
                base.Update(gameTime);
            }
            private void UpdateEnemigos()
            {
                frameCounter++;
                if (frameCounter > 60)
                {
                    Random r = new Random();
                    Enemigo1 e = new Enemigo1(
                        new Vector2(r.Next(graphics.PreferredBackBufferWidth), -57),
                        graphics.PreferredBackBufferHeight,
                        graphics.PreferredBackBufferWidth,
                        Content
                        );
                    enemigos.Add(e);
                    e.FueraDePantalla += new EventHandler(FueraDePantallaHandler);
                    frameCounter = 0;
                }
                enemigos.ForEach(x => x.Update());  
            }
            private void FueraDePantallaHandler(Object sender, EventArgs args)
            {
                enemigos.Remove((Enemigo1)sender);
            }
            protected override void Draw(GameTime gameTime)
            {
                GraphicsDevice.Clear(Color.Black);

                spriteBatch.Begin();
                fondo.Draw(spriteBatch);
                nave.Draw(spriteBatch);
                foreach (Enemigo1 e in enemigos)
                {
                    e.Draw(spriteBatch);
                }
                spriteBatch.End();

                base.Draw(gameTime);
            }

Añadimos a los atributos una lista de enemigos, que luego instanciamos en el constructor, además de un int para contar los frames (ahora veréis para que). Después, en Update, añadimos UpdateEnemigos, que hará varias cosas. Lo primero será aumentar frameCounter para así saber cuando pasan 60 frames.

Si el contador es mayor que 60 procederemos a añadir un nuevo enemigo (Con esto evitamos añadir sabedioscuantos enemigos por segundo). Para ello, instanciamos un objeto Random, y creamos un enemigo con una coordenada X aleatoria (Con la anchura de la pantalla de máximo) y –57 de coordenada Y para que entre poco a poco a la pantalla. Añadimos este enemigo recién creado a la lista enemigos, controlamos el evento FueraDePantalla (De igual manera que lo hacemos con los disparos, para borrar los enemigos que se salgan de la pantalla). Por ultimo ponemos el contador de frames a 0.

Después, fuera del If (esto se tiene que ejecutar siempre, no solo cada 60 frames) se invocara a Update de todos los enemigos. Una vez más no utilizamos foreach por que es posible que se dispare FueraDePantalla y que cambie enemigos, lo que haría que un foreach diese un error en tiempo de ejecución, pero la expresión lambda utilizada en esencia hace lo mismo.

Tras esto podemos probar a ejecutar y veremos que ya tenemos una serie de enemigos en pantalla cada X tiempo. ¿Va cogiendo forma no?. Ahora que ya está todo preparado podemos empezar con la detección de colisiones, manejada una vez mas desde Game1 temporalmente:

            protected override void Update(GameTime gameTime)
            {
                // Cuidado con esto, no usamos mando.
                if (Keyboard.GetState().IsKeyDown(Keys.Escape))
                    this.Exit();
                fondo.Update();
                nave.Update();
                UpdateEnemigos();
                UpdateColisiones();
                base.Update(gameTime);
            }
	...
            private void UpdateColisiones()
            {
                //eliminamos cualquier enemigo que haya colisionado contra cualquier disparo en la pantalla
                bool colision = false;
                Enemigo1 enemigoABorrar = null;
                Disparo disparoABorrar = null;

                foreach (Enemigo1 e in enemigos)
                {
                    foreach (Disparo d in nave.Disparos)
                    {
                        if(ColisionEnemigoDisparo(e, d))
                        {
                            //si hay colision ponemos el tag a true, almacenamos el disparo y el enemigo y rompemos el primer bucle
                            colision = true;
                            enemigoABorrar = e;
                            disparoABorrar = d;
                            break;                            
                        }
                    }
                    //si el tag esta activo rompemos el segundo bucle
                    if (colision)
                        break;
                }
                //si el tag esta activo borramos el enemigo y el disparo
                if (colision)
                {
                    enemigos.Remove(enemigoABorrar);
                    nave.Disparos.Remove(disparoABorrar);
                }
            }
            private bool ColisionEnemigoDisparo(Enemigo1 e, Disparo d)
            {
                //Si los rectangle de e y de d se intersectan comprobamos la colision.
                if(e.Bounds.Intersects(d.Bounds))
                    return ColisionPixel(d.Imagen, e.Imagen, d.Posicion, e.Posicion);
                return false;
            }

            public static bool ColisionPixel(Texture2D texturaA, Texture2D texturaB, Vector2 posicionA, Vector2 posicionB)
            {
                bool colisionPxAPx = false;

                uint[] bitsA = new uint[texturaA.Width * texturaA.Height];
                uint[] bitsB = new uint[texturaB.Width * texturaB.Height];

                Rectangle rectanguloA = new Rectangle(Convert.ToInt32(posicionA.X), Convert.ToInt32(posicionA.Y), texturaA.Width, texturaA.Height);
                Rectangle rectanguloB = new Rectangle(Convert.ToInt32(posicionB.X), Convert.ToInt32(posicionB.Y), texturaB.Width, texturaB.Height);
                //almacenamos los datos de los pixeles en las variables locales bitsA y bitsB
                texturaA.GetData(bitsA);
                texturaB.GetData(bitsB);
                
                //almacenamos las coordenadas que delimitaran la zona en la que trabajaremos
                int x1 = Math.Max(rectanguloA.X, rectanguloB.X);
                int x2 = Math.Min(rectanguloA.X + rectanguloA.Width, rectanguloB.X + rectanguloB.Width);

                int y1 = Math.Max(rectanguloA.Y, rectanguloB.Y);
                int y2 = Math.Min(rectanguloA.Y + rectanguloA.Height, rectanguloB.Y + rectanguloB.Height);

                for (int y = y1; y < y2; ++y)
                {
                    for (int x = x1; x < x2; ++x)
                    {
                        if (((bitsA[(x - rectanguloA.X) + (y - rectanguloA.Y) * rectanguloA.Width] & 0xFF000000) >> 24) > 20 &&
                            ((bitsB[(x - rectanguloB.X) + (y - rectanguloB.Y) * rectanguloB.Width] & 0xFF000000) >> 24) > 20)
                        {
                            //Se comprueba el canal alpha de las dos imagenes en el mismo pixel. Si los dos son visibles hay colision.
                            colisionPxAPx = true;
                            break;
                        }
                    }

                    // Rompe el bucle si la condicion ya se ha cumplido.
                    if (colisionPxAPx)
                    {
                        break;
                    }
                }

                return colisionPxAPx;
            }

Añadimos a Update otro método en el cual manejaremos las colisiones. Como ya mencionamos anteriormente no se puede eliminar la lista que se este iterando dentro de un iterador foreach, pero esta vez no podremos usar una expresión lambda, así que utilizaremos un tag y unas variables locales para saber cuando se encuentra una colisión y borrar tanto el disparo como el enemigo después de salir del bucle.

En el método colisión enemigo disparo, usado por el método anterior, comprobamos si hay una colisión rectangular, y en caso de que sea así pasamos a ver si hay colisión pixel a pixel. En caso de que sea así devolvemos true y si no devolvemos false.

En cuanto al método estático ColisionPixel, almacenamos los datos de los pixeles en los arrays bitsA y bitsB, buscamos los limites del espacio que vamos a manejar, con las coordenadas x1, x2, y1 y y2. Con todo esto recorremos los arrays bitsA y bitsB con dos bucles for en los cuales comprobamos en cada iteración el canal Alpha de transparencia de las dos imágenes en un punto concreto. Por esto en caso de que ninguna de las dos imágenes sea transparente en cualquier punto significa que hay colisión, por lo que devolveremos true.

Con esto la detección de colisiones esta completa, y lo podemos ver ejecutando el juego, aunque no se aprecie en la captura :P La colisión de los enemigos con las nave la pondremos mas adelante, cuando se añadan las vidas y la pantalla de gameover. No obstante esto empieza a coger forma ya, ¿no? Podéis bajar el código hasta ahora en el siguiente enlace: http://www.megaupload.com/?d=OE6KUY4S

En la próxima entrega del tutorial menú, pantalla de pausa y pantalla de gameover. No os lo perdáis y ¡Sed buenos cangrejos!

EDIT: He cambiado algunas cosas en el código respecto a la parte 5 del tutorial original con la intención de obtener un código más limpio. Quite todas las _ de las variables, y me asegure de que todas las propiedades estaban en mayúscula. A parte de esto también cambie algunos puntos donde se accedía a las variables mediante las propiedades desde dentro de la misma clase.

Para los que hagan el tutorial a partir de ahora (22/09/2010) no lo notarán, pues ya esta actualizado, pero los que ya han hecho el tutorial que se bajen mi código, ya que esta corregido. Es posible que se me colase alguna errata, en tal caso hacédmelo saber.

GameLab 2010: Tercer día

2010-07-03T04:39:00.001-07:00

Un día más en The Code Crab hemos asistido al GameLab 2010, y aquí estoy resumiendo el día. Lo primero es decir que hoy viernes, ultimo día, la feria concluía a las 2 del mediodía, y por tanto había menos actividades que los otros días, y una vez más no hay nada nuevo que probar por lo que me centrare en las charlas. Además de esto no he podido asistir a todas las charlas, por lo que resumiré las que pude ver.

A primera hora hubo una mesa redonda sobre las nuevas plataformas, y el modo en que afectan estas a los creadores. Por desgracia no pude asistir, pero mi sorpresa fue grande al ver que la siguiente conferencia, iPad, una oportunidad para los creadores, no fue en realidad una conferencia como indicaba el programa, sino otra mesa redonda en la que apenas se mencionó el iPad. De hecho no asistí a la primera mesa redonda, pero el titulo que tenia encaja definitivamente mucho mas en la mesa redonda que vi (Y no me equivoque de charla yo, que pregunté y todo).

En esta improvisada mesa redonda pudimos ver a Xavier Carrillo, Director General de Digital Legends Entertainment, el supuesto ponente, junto con Gonzo Suárez y Igor Pusenjak (No estoy seguro al 100% de que eran ellos, pues como reitero una vez más esta mesa redonda estaba fuera del programa). Se habló de los nuevos medios, y de la importancia de los juegos sociales, descubiertos mediante facebook. ¿Que nos deparara el futuro? Desde luego hay que aprovechar al máximo todos los nuevos medios, cambiando radicalmente la formula tradicional del desarrollo de los videojuegos.

Tras esta mesa redonda, hubo otra sobre las diferentes plataformas en el mercado de los juegos móviles, pero tras el desastre(esto es mi opinión, claro) de la supuesta conferencia del iPad no estaba de humor para otra mesa redonda, así que no asistí.

Tras esto Juancho Carrillo, Lead Designer de Tonika Games, junto con Roberto López Yeste y Richard Brown nos ofrecieron una interesante conferencia en la cual se nos presento PlayEnglish.

Tras un rato de publicidad de Sony (y es que tenemos muy claro que los chicos de Sony se encantan a si mismos) nos mostraron el trailer que podéis ver encima (nada exclusivo, es el anuncio de TV).

Este juego es bastante innovador, según nos contaron, pues pese a ser un juego educativo esta más centrado en la diversión que en el aprendizaje, haciendo así que el aprender ingles sea progresivamente, de forma natural y divertida. El jugador tendrá que encarar una serie de pruebas, dignas de cualquier aventura gráfica, en las cuales tendrá que aplicar conocimientos de ingles y adquirir conocimientos nuevos de forma practica. Además de esto el juego cuenta con varios niveles de dificultad, y se centra en las partes que dan problemas al jugador, ofreciendo una experiencia personalizada.

Todo esto hace de PlayEnglish un juego bastante interesante y digno de probar, para de paso repasar esos Phrasal Verbs que tanto dolor de cabeza nos dieron en su día. Tras esto se declaro en exclusiva que el próximo desarrollo del estudio iba a ser… Patito Feo, que pese a lo mal que pueda sonar, seguro que es un gran éxito (orientado a un publico mas concreto claro).

Por ultimo, la ultima conferencia fue de la mano de Gilberto Sánchez, Director Editorial de Virtual Toys, estudio responsable de títulos como Horsez y Imagina Ser. La conferencia hablaba del proceso intermedio que hay entre la finalización de un juego y la publicación del mismo, y se dejo claro que hacer un buen juego solo es un 40% del trabajo.

Tras un rato hablando de temas de publicidad, mercados, y demás cosas aburridas, se nos anuncio que el estudio ahora mismo estaba trabajando en Torrente Online 2, el cual dispone de muchas novedades frente al primero, y cuya beta ya estará disponible el próximo 19 de julio.

Con esto (y con un sorteo de una ps3 y una psp go) concluye el GameLab 2010. En cuanto mis impresiones generales del evento, creo que este año se ha batido un record de visitas, pues ha estado algo más orientado al publico que otras veces, más pensado para diseñadores y empresas.

La presencia de Sony no dejo nada que desear, ofreciéndonos varias novedades como el 3D, el Castlevania LOS, el nuevo SingStar, el Gran Turismo 5 y PlayStation Move, pero sin embargo la presencia de Nintendo fue bastante ligera, en cuanto a que tenia cosas para probar pero ninguna novedad, mientras que Microsoft ni siquiera patrocinaba, solo colaboraba, por lo que ofreció conferencias interesantes pero nada para probar. Con esto quiero decir, que GameLab se está convirtiendo en un pequeño E3, y vamos por buen camino, pero aun no es suficiente, y si Nintendo y Microsoft hubiese colaborado tanto como lo hizo Sony el evento hubiese sido mucho mejor.

En cuanto a las conferencias (y esto es, una vez más, mi opinión, y no un hecho universal), una vez mas se mezclan conferencias muy interesantes, como presentaciones en exclusiva de juegos (Como Castlevania o Kinect), con otras que se repiten año tras año sin ninguna clase de novedad, como una serie de mesas redondas. En mi opinión para seguir avanzando el GameLab debe centrarse más en las novedades. Conferencias sobre diferentes plataformas, presentaciones de juegos, nuevas tecnologías y que nos depara el futuro. Todo esto lo hubo este año, pero por desgracia, solo fue entorno al 50% de las conferencias, siendo el resto bastante menos interesantes.

Por tanto en mi opinión, GameLab, algún año será un pequeño E3 en Asturias, pero aún nos queda un largo camino por recorrer. Sin embargo, ese día cada vez esta más cerca, estoy seguro de que el próximo año estará aún mejor, ¡Lo esperamos con impaciencia Lobo!. Tras la vuelta a la normalidad me pondré a trabajar de nuevo en el tutorial de XNA, así que estad atentos. ¡¡Sed unos cangrejos pacientes!!

GameLab 2010: Segundo día

2010-07-01T08:57:00.001-07:00

Un día más en The Code Crab hemos asistido al GameLab 2010, y aquí estoy ofreciendo mi experiencia de nuevo. Dado que no hubo nada más nuevo que poder probar, por desgracia. Por esto hoy me centraré más en las conferencias.

A primera hora, Alon Shtruzman, vicepresidente de Playcast Media, nos ha ofrecido una conferencia sobre los videojuegos sin consola y la importancia de los medios, así como la influencia que estos tienen en el contenido. Como ya sabréis es un tema importante estos días, debido al lanzamiento no hace tiempo de OnLive.

El ponente ha previsto un importante cambio en el mercado de los videojuegos, especialmente los casual, abriendo camino para los juegos en la nube o juegos sin consola. Todo este cambio de mercado, según Alon, viene dado por la reciente proliferación de los juegos sociales y familiares, siendo el paso a los juegos sin consolas el próximo paso lógico, acercando más aún los juegos a nuestro salón y al de todo el mundo.

Tras esta interesante charla he asistido a una serie de conferencias sobre XNA, de varias horas de duración que era en paralelo con otras charlas que me perdí. Por desgracia para mi, el 80% de las charlas eran similares a unas que se habían dado en mi facultad hace unos meses. El propósito de las charlas es la presentación de Windows Phone 7, así como una introducción al desarrollo de videoconsola para este valiéndose de XNA, pero que os voy a contar de XNA ya a estas alturas :)

También se anuncio el Imagine Mobile, el cual es un concurso interesante que presenta una gran oportunidad, os aconsejo que si tenéis tiempo participéis.

Después de comer al fin llego el momento que todo el mundo estaba esperando, la presentación de Castlevania Lords of Shadow. El juego, se presento en exclusiva en el GameLab solo presentado antes en el E3. Como ya he mencionado antes también hay disponible una demo, a la que tuve la suerte de probar (un par de veces :).

Este juego ha sido diseñado por Mercury Steam, un estudio español anteriormente pequeño, en colaboración con Kojima. El ponente, Enric Álvarez, declaró que cuando recibieron la llamada de Kojima no se lo creían. La conferencia comenzó mostrándonos el vídeo de presentación, ya mostrado en el E3, que podéis ver a continuación.

¿Habéis notado la canción de Vampire Killer al final del vídeo?

Tras este vídeo, Enric declaro que se intento cuidar al máximo los detalles para procurar una máxima inmersión por parte de los jugadores, con cosas como una gran banda sonora, y una ambientación oscura y sangrienta, de acuerdo con los estándares de los juegos clásicos de la saga, pero con gráficos de ultima generación, así como un arte gráfico impresionante.

Tras varias declaraciones se procedió a enseñarnos dos niveles del juego inéditos (Nada que ver con la demo, que ofrecía un tutorial y dejaba ver un sistema de combate similar a God of War).

En el primero de ellos, vemos una de las partes iniciales del castillo en el cual se deja entrever diferentes aspectos del juego, como un mapa abierto, y un elaborado componente de exploración. Tenemos 2 barras de magia, una roja para hechizos de ataque y otra azul para hechizos defensivos, a parte de los clásicos objetos, y combinaciones entre objetos y magias.

Enric nos prometió una gran cantidad de secretos, con los cuales podremos obtener entre otras cosas mejoras de salud y magia, y para muchos de los cuales tendremos que volver a una parte anterior del castillo después de conseguir algún poder.

En cuanto a los enemigos, vemos una gran diferencia al pasar de un enemigo a otro, convirtiendo la lucha en algo dinámico. Tras todo esto, se llego a un jefe final, el carnicero del castillo, y vemos que la dificultad, al menos en los jefes, es bastante elevada, ¡Enric no se lo pasó hasta el tercer intento y valiéndose de trampas!

Después observamos la torre del reloj, lo que nos permitió observar un elaborado plataformeo, el cual cambia a lo largo del juego, evitando así una experiencia monótona. Si nos caemos mientras escalamos la torre volveremos a un punto inmediatamente anterior pero perdiendo algo de vida, y por un error de Enric hemos visto el doble salto (con alas, estilo Alucard).

En conclusión, el nuevo Castlevania parece, por fin, una gran adaptación de la saga al entorno 3D, con un juego muy innovador, atractivo y entretenido, pero fiel a los orígenes al mismo tiempo.

Una vez concluida esta sorprendente presentación, pudimos ver en acción a Kinect (o Proyect Natal, como se conocía hasta ahora), de la mano de David Darnés, Productor de Ubisoft Barcelona, aunque por desgracia no lo pudimos probar, excepto un par de afortunados.

Tras un poco mas de la cantidad de publicidad de Ubisoft recomendada por las autoridades sanitarias, se presento Kinect junto con Motion Sports, un juego lanzado junto al dispositivo de la mano de Ubisoft, evidentemente.

Motion Sports ofrece una serie de pequeños juegos de deportes (no me suena de nada esto tampoco), ideales para jugar con amigos, y la principal innovación es el uso de Kinect, por lo que no hace falta ninguna clase de controlador, se controla todo con la voz y el movimiento.

En la demo estaban disponibles los juegos de rugby y esquí, y parecía funcionar bastante bien en general, aunque tenía algunos problemas con los brazos. Además parece fácil salirse del radio, parando el juego. Esto puede suponer alguna molestias para juegos moviditos, pero nada serio.

Tras estas dos geniales conferencias, el evento continuó con una conferencia sobre Basket Dudes y el modelo de micro pagos, de la mano de Fernando Piquer, Fundador y CEO de Bitoon Entertainment, en la cual se nos dejo claro que el modelo se centra en ofrecer una experiencia completa de juego a todos los usuarios, estén dispuestos a pagar o no, pero ofreciendo una serie de ventajas a los jugadores que paguen.

Por último, Daniel Sánchez-Crespo, Director General y Jefe de Diseño de Novarama (Empresa desarrolladora del exitoso juego Invizimals) expuso una interesante charla sobre la manera de innovar en el sector del desarrollo de videojuegos.

Después de esto nos presento en exclusiva Invizimals Shadow Zone, la continuación del exitoso juego Invizimals, del cual no consigo encontrar imágenes y aún no hay trailer, pero pudimos observar muchas novedades con respecto al primero, en cuanto a nuevos Invizimals, nuevas maneras de capturar y un nuevo sistema de rankings online. Por cierto, que Invizimals se estrenará pronto en USA, seguro que es un gran éxito, igual que aquí :)

Una vez más me detendré antes de lo que me gustaría por que vuelvo a llevar escrito más de lo que debería (Si es que me emociono con el Castlevania). Mañana concluiré con el ultimo día del GameLab, una vez mas resumiendo las conferencias a las que pueda asistir. ¿Que os parece el lavado de cara del blog? Yo creo que sobretodo ahora se lee mejor independientemente de la resolución usada.

Gracias por leer The Code Crab una vez más, y ¡Sed unos cangrejos pacientes!, ¡Mañana más!

Gracias a Sara por el cangrejo una vez más :)

PD: Perdón por la calidad de las fotos, las hago con mi móvil y sacar fotos a un proyector no es la mejor idea.

GameLab 2010: Primer día

2010-06-30T09:09:00.000-07:00

Hoy ha sido el primer día del GameLab 2010, la feria internacional del videojuego y el ocio interactivo. El evento se celebra en Gijón, dentro del palacio de congresos, en el interior del recinto ferial.

He podido observar tras recoger mi acreditación que este año hay más gente que otros años, y hay mayor cantidad de asistentes informales y menos empresas. Esto se debe a que como mencionaron en el acto de presentación, por primera vez este año se ha intentado orientar a todo tipo de asistentes, y no sólo a desarrolladores.

Una vez dentro lo primero que observamos es la zona de Sony, que no deja nada que desear. En ella he podido probar muchas cosas interesantes, gran cantidad de las cuales aún no están en el mercado.

La primera de ellas y la mas llamativa es el poder probar PlayStation Move, con un juego de eye toy play o algo parecido, así como un juego de varios deportes (No nos suena de absolutamente nada). No estaba mal, era algo parecido a los juegos de minijuegos típicos de la wii. El sistema move es definitivamente mas preciso que la consola de nintendo, pero personalmente yo no he notado tanta diferencia como sony nos prometía, aunque quizás otros juegos lo exploten mejor, por lo que no hablare demasiado antes de tiempo.

También llamaba la atención el 3D de PS3, el cual me ha resultado bastante satisfactorio, dando la misma sensación que en el cine, aunque evidentemente no es lo mismo en una tele que en una pantalla de cine. De todos modos funciona genial, y pese al ligero mareo al empezar a usarlo, una vez se acostumbran tus ojos la sensación de profundidad esta muy lograda.

La tercera gran sorpresa que tuvimos fue una demo de Castlevania Lord of Shadows. Tras una larga cola he podido jugar la demo completa, y he de decir que la demo ofrecida deja ver un sistema de combate que no tiene nada que envidiar a God of war, por no hablar de la ambientación y de la historia que tiene al ser un Castlevania. En mi opinión, si el resto del juego mantiene la exploración y el plataformeo de los Castlevania clásicos va a ser un juego estupendo.

Además de esto en la sala de Sony podemos encontrar juegos que aún no han salido como Gran Turismo 5 y el SingStar nuevo (con guitarra), y otros que ya están en venta como Heavy Rain, God of War 3 y Play english para la psp.

Por desgracia, la parte de Nintendo no estaba ni por asomo tan bien como la de Sony, no hemos podido ver la 3DS, ni nada nuevo, sólo una exposición de Shigueru Miyamoto, donde pudimos probar algunos juegos nuevos como el Mario Galaxy 2 y el Smash Bros Brawl y algunos juegos clásicos, como el donkey kong y el super mario bros, pero por desgracia nada que aun no se haya lanzado aún.

En cuanto a la presencia de Microsoft, aún no hay nada, aunque se que mañana organizarán algunos talleres y otras actividades, y corren rumores de que se podrá ver Kinect (Proyect Natal) antes de terminar la feria. Esperemos que sea cierto.

También encontramos otras zonas donde podemos probar juegos en el iPad, así como un sensor que mide las ondas cerebrales para saber tu concentración y tu relajación, de la mano de la empresa Neurosky.

En cuanto a las conferencias del primer día, empezamos con una feria sobre la situación actual de los juegos online (MMO), un poco orientada a empresas, a la cual asistí durante solo un rato, por lo que no me entere mucho.

Tras esto, tuvimos al fin la inauguración de la feria, donde nos explicaron que el desarrollo de videojuegos es un sector en aumento en España, que no tiene tantas ventajas como otros sectores, pese a su importancia, pero que poco a poco va ganándose el reconocimiento que merece. También se explico que es el primer intento para abrir la feria al publico global y no sólo para desarrolladores, ya mencionado anteriormente.

Después de esto, se pasó a una mesa redonda, donde varios ponentes, como Gonzo Suárez y Enric Álvarez, hablaron de la situación internacional del desarrollo de videojuegos en España a nivel Histórico.

Después de comer, tuvo lugar la charla que a mí, personalmente, más me ha llamado la atención: Controladores mentales, de la mano del vicepresidente de Neurosky. Se habló de las diferentes generaciones de controladores, siendo los controladores tradicionales la primera generación y los controladores cinéticos, como Wii, Move y Kinect, la segunda generación. Siguiendo este orden según las generaciones avanzan se va estrechando la distancia entre el juego y el cuerpo del jugador.Por ello, la tercera generación de controladores de los videojuegos serían los sensores biológicos. Podemos ver un ejemplo de esto en el futuro sensor para la wii, Wii Vitality Sensor. Neurosky ofrece un sensor, bastante cómodo y accesible que detecta el estado del cuerpo, en concreto, la concentración, la tranquilidad y el parpadeo. Esto es una herramienta enormemente potente a la hora de hacer videojuegos bastante creativos, pudiendo medir en un juego de terror si el jugador esta asustado, por poner un pequeño ejemplo.

Tras esto, hubo varias charlas más, sobre los modelos de desarrollo adecuados para lanzar un juego de móvil exitoso, una charla sobre la administración como fuente de apoyo al desarrollo de proyectos de ocio interactivo, y otra sobre los juegos online, descargables vs juegos en la web.

No me entretengo más, siento no haber explicado tanto como me gustaría algunas charlas, pero ya es un post bien largo y además tengo algo de prisa. Mañana actualizaré las charlas que se den más a fondo ya que no tendré que volver a explicar las distintas salas.

En cuanto al tutorial de XNA lamento mi tardanza, pero la detección de colisiones me está dando

más problemas de lo que me esperaba, os prometo que en cuanto acabe el GameLab subo la quinta parte. ¡Sed buenos cangrejos!

PD: Gracias a Sara por el cangrejo ;)

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 4

2010-06-22T11:57:00.001-07:00

Hoy en The Code Crab vamos a poner un fondo animado para nuestro futuro superventas. La técnica que vamos a seguir es bien sencilla: Tendremos una imagen que tenga el mismo ancho que la pantalla pero mucho mas alta, y la empezaremos a dibujar por abajo, subiendo poco a poco, hasta llegar a la parte superior que será similar a la parte inferior. Cuando pasa esto volvemos a la parte de abajo y ya tenemos efecto de scroll.

Dado que XNA solo soporta imágenes de resolución X x Y, donde ni X ni Y rebasan los 2000 y pico pixeles (no se cuantos exactamente) es posible que para un scroll largo haga falta dividir el fondo en diferentes imágenes. No vamos a dar un ejemplo de ese caso, pero que sepáis que sería exactamente lo mismo pero un poco mas complicado. Lo más importante es que si tenemos 3 imágenes A, B y C, para hacer una transición fluida de una a otra la ultima parte que se dibuje de una tiene que ser equivalente a la primera de la siguiente, esto es, el final de A y el principio de B coinciden, el final de B y el principio de C coinciden y el final de C y el principio de A coinciden.

Una vez tenemos claro lo que queremos hacer, necesitamos saber la resolución de nuestra ventana para preparar la imagen. Para ello, como recordareis, tenemos las propiedades PreferredBackBufferHeight y PreferredBackBufferWidth de graphics. Aunque si queréis se pueden alterar, yo no lo voy a hacer, voy a dejar la resolución por defecto. Como no la altero, voy a imprimir estos datos por pantalla, para saber que resolución tiene nuestra ventana:

 protected override void Initialize()
       {
           Console.WriteLine(graphics.PreferredBackBufferHeight + "x" + graphics.PreferredBackBufferWidth);
           _fondo = new Fondo(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
           _nave = new Nave(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
           this.Window.Title="Space Burst";
           base.Initialize();           
       }

Con esto, ejecutamos nuestro proyecto, y no ha cambiado nada, pero si vamos a la ventana de resultados veremos algo así:

No os olvidéis de borrar la línea ahora que ya sabéis el tamaño de la ventana. Con esto ya sabemos la resolución de la ventana, 480x800, con lo que ahora necesitamos una imagen loquesea x 800 donde los primeros y los últimos 480 px sean iguales. A partir de una imagen real del espacio, algo de photoshopeo cutre (se me da fatal) y algo de paciencia, yo he conseguido esto, aunque si os apetece podéis haceros vuestro propio fondo.

Con esto, tenemos ya un fondo de 1700x800 con el principio y el final igual (Hay que pinchar en la imagen para verla completa). Lo metemos en la carpeta y lo agregamos a los recursos del proyecto, como venimos haciendo con todas las imágenes. Tras esto ya estamos preparados para crear la clase Fondo (esta es bastante sencillita):

 private const int anchoImagen = 800;
       private const int altoImagen = 1700;
       private int altoVentana;
       private Texture2D imagen;
       private Rectangle rectangulo;
       public Fondo(int altoVentana, int anchoVentana)
       {           
           rectangulo = new Rectangle(0, altoImagen - altoVentana, anchoVentana, altoVentana);
           this.altoVentana = altoVentana;
       }

En cuanto a las propiedades, a estas alturas no os sorprenderá mucho, así que iré rápido. Guardamos el ancho y el alto de la imagen, así como el alto de la ventana (para saber cuanto tiene que medir el rectángulo) que será pasado en el constructor. También almacenamos un rectángulo con la sección de la imagen que se dibujara, empezando por la parte inferior de la imagen y un Texture2D con la imagen en sí.

        public void LoadContent(ContentManager Content)
       {
           imagen = Content.Load("spaceBackgr");
       }
       public void Update()
       {
           rectangulo.Y -= 1;
           if (rectangulo.Y <= 0)
               rectangulo.Y = ((altoImagen - altoVentana) -15);
       }
       public void Draw(SpriteBatch spbtch)
       {
           spbtch.Draw(imagen, new Vector2(0, 0), rectangulo, Color.White);
       }

En cuanto a los métodos, tendremos los 3 tradicionales de XNA que ya conoceréis. LoadContent y Draw son iguales que en Nave, por lo que no merece mucho la pena pararse (en cuanto a Draw la única diferencia es que lo dibujamos en (0,0), ya que queremos que ocupe toda la pantalla).

Lo importante aquí (relativamente, pues es bastante simple en realidad) es el método Update, en el cual disminuimos en 1 la coordenada Y de rectángulo, para subir hacia arriba el rectángulo y crear un efecto scroll. A mi personalmente me gusta el efecto que queda al disminuir en 1 cada Update, pero si se aumenta el numero aumentara la velocidad del scroll. Eso queda a gusto de cada uno. También controlamos que si Y es 0 o menos, volvemos al principio, volviendo a mostrar la parte de abajo de la imagen, que como ya mencioné anteriormente debería ser igual. Ese –15 extra se debe a que si ponemos las coordenadas iniciales sin mas se apreciara un rebote, dado a que la imagen se esta moviendo constantemente, y que probablemente la parte de arriba y la de abajo no sean exactamente iguales pixel a pixel. A base de prueba y error para el caso de esta imagen he sacado que el numero apropiado son 15 px, pero si usáis otra imagen esto cambiara.

Ahora que ya tenemos lista la clase Fondo, solo nos queda agregar una instancia en la clase principal Game1, y las invocaciones a todos los métodos necesarios:

    public class Game1 : Microsoft.Xna.Framework.Game
   {
       GraphicsDeviceManager graphics;
       SpriteBatch spriteBatch;
       Nave _nave;
       Fondo _fondo;

       public Game1()
       {
           graphics = new GraphicsDeviceManager(this);
           Content.RootDirectory = "Content";           
       }

       protected override void Initialize()
       {
     //Recordar comentar la siguiente linea
           //Console.WriteLine(graphics.PreferredBackBufferHeight + "x" + graphics.PreferredBackBufferWidth);
           _fondo = new Fondo(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
           _nave = new Nave(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
           this.Window.Title="Space Burst";
           base.Initialize();           
       }

       protected override void LoadContent()
       {
           // Create a new SpriteBatch, which can be used to draw textures.
           spriteBatch = new SpriteBatch(GraphicsDevice);
           _fondo.LoadContent(Content);
           _nave.LoadContent(Content);
       }

       protected override void UnloadContent()
       {
           // TODO: Unload any non ContentManager content here
       }

       protected override void Update(GameTime gameTime)
       {
           // Cuidado con esto, no usamos mando.
           if (Keyboard.GetState().IsKeyDown(Keys.Escape))
               this.Exit();
           _fondo.Update();
           _nave.Update();

           base.Update(gameTime);
       }

       protected override void Draw(GameTime gameTime)
       {
           GraphicsDevice.Clear(Color.Black);

           spriteBatch.Begin();
           _fondo.Draw(spriteBatch);
           _nave.Draw(spriteBatch);
           spriteBatch.End();

           base.Draw(gameTime);
       }
   }

Es importante recordar, que como se menciono anteriormente, para que la imagen A se dibuje por encima de la imagen B, hay que dibujar primero B y luego A. Por tanto, el Fondo debe ser lo primero en dibujarse, o sino tapara el resto de objetos. Por lo demás, nada nuevo.

Tras ejecutar vemos el efecto obtenido. ¿Que os parece? Yo creo que no esta mal, queda un poco raro la nave pixelada con la imagen real del espacio, pero bueno, siempre podéis cambiar vuestro fondo por otro :P

Podéis descargaros el código fuente del tutorial hasta este momento en el siguiente enlace: http://www.megaupload.com/?d=RB2TYYLJ

Con esto concluye esta parte del tut orial. En la siguiente parte nos ponemos serios, introduciendo enemigos y detección de colisiones, no os lo perdáis. ¡Sed buenos cangrejos!

PD: ¡¡Gracias a Sara por el aporte del cangrejo!!

Etiquetas de Technorati: programación,juegos,xna,windows,xbox,C#

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 3

2010-06-19T07:40:00.001-07:00

Bueno, tras un pequeño intervalo de tiempo volvemos con el tutorial sobre XNA, pues ya va siendo hora que nuestra navecita pueda disparar. Lo primero que necesitamos es un sprite del disparo. En mi caso voy a utilizar este, pero bueno, este es un país libre.

Para introducirlo en el proyecto tenemos que repetir lo que ya aprendimos en la primera parte del tutorial. Copiamos la imagen a la carpeta del proyecto y la arrastramos a Content en el VS.

Una vez que tenemos la imagen dentro de Content necesitaremos crear una nueva clase que almacene toda la información de cada disparo, como por ejemplo la clase Disparo.

¿Que atributos necesita esta clase? Necesita los siguientes:

	private const int anchoImagen = 6;
        private const int altoImagen = 22;
        private Texture2D imagen;
        private Vector2 _posicion;
        public event EventHandler FueraDePantalla;

Como podéis ver, ya que Disparo va a representar a un Sprite que se moverá por la pantalla tiene atributos bastante similares a Nave, excepto por el Rectangle (Los disparos no tendrán animación). El único atributo nuevo es el evento FueraDePantalla, que se disparará cuando el disparo se salga de la pantalla, para avisar a la clase que contenga los disparos (Estarán almacenados dentro de una lista en Nave) de que debe borrar el disparo. ¿Por que? Es sencillo, si a lo largo del juego vamos añadiendo cada vez mas disparos, aunque se salgan de la pantalla seguirán existiendo, por lo que estarán consumiendo recursos inútilmente. Este evento se disparará en el método Update que definiremos mas adelante. En cuanto al resto de atributos, son equivalentes a los de Nave, si tenéis dudas podéis mirar atrás.

Necesitamos un constructor acorde con estos atributos, algo parecido a esto:

	public Disparo(Vector2 posicion, int anchoNave, ContentManager Content)
        {
            _posicion = posicion;
            //movemos un poco la posicion del disparo, para que salga desde el centro de la nave y no desde una esquina
            _posicion.X += (anchoNave / 2);
            //lo que acabamos de centrar es la esquina superior izquierda del disparo. Así situaremos el centro alineado con el centro de la imagen
            //los 3 pixeles extra es por que la imagen del disparo no esta perfectamente centrada.
            _posicion.X -= (anchoImagen / 2)+3;
            //Ya que los disparos pueden surgir en cualquier momento, y no al principio de la ejecución no tiene sentido tener un método
            //LoadContent que cargue las imágenes. En vez de eso las cargaremos en el constructor.
            imagen = Content.Load("weapons");
        }

En el constructor vemos como se inicializa la posición del disparo en función de la posición de la nave (pasada por parámetro) Además utilizamos el ContentManager pasado para inicializar la imagen. Recordad que no hay que poner terminación. Más tarde habrá que modificar la clase nave para que almacene ContentManager, y así poder pasar el parámetro al crear los disparos.

Además de esto necesitaremos un método Update que haga avanzar el disparo y un método Draw que lo dibuje por pantalla:

	public void Update()
        {
            _posicion.Y-=5;
            if (_posicion.Y <= 0)
                FueraDePantalla(this, null);
        }
        public void Draw(SpriteBatch spbtch)
        {
            spbtch.Draw(imagen, _posicion, new Rectangle(0,0,anchoImagen, altoImagen), Color.White);
        }

Como se puede observar en el método Update disminuimos 5 puntos el eje Y de la posición. Variando esto se podrá modificar la velocidad de los disparos (Recordad que la posición se expresa en pixeles). Además de esto si la posición se hace menor que 0 lanzara el evento antes mencionado, que será manejado por Nave para borrar el disparo.

En cuanto a Draw, nada nuevo.

Tras esto ya tenemos lista la clase Disparo. Deberemos añadir una lista de disparos a los atributos de Nave y inicializarla en el constructor:

        private Rectangle rectangulo;
        private const int anchoImagen = 42;
        private const int altoImagen = 44;
        private Texture2D imagen;
        private Vector2 posicion;
        private int altoVentana;
        private int anchoVentana;
        private List<Disparo> disparos;
        private int frameCounter = 0;
        private ContentManager _content;
        public Nave(int altoVentana, int anchoVentana)
        {
            this.altoVentana = altoVentana;
            this.anchoVentana = anchoVentana;
            posicion = new Vector2(altoVentana - altoImagen * 2, (anchoVentana - anchoImagen) / 2);
            CrearRectangulo(anchoImagen, altoImagen * 2);
            disparos = new List<Disparo>();
        }
        public void LoadContent(ContentManager Content)
        {
            this._content = Content;
            imagen = Content.Load<texture2d>("battleship");
        }

Como podemos ver hay varias cosas nuevas. En cuanto a la lista antes mencionada, podemos ver que se inicializa en el constructor. También almacenamos el ContentManager que obtenemos en el método LoadContent por que lo necesitaremos para inicializar los disparos.

En cuanto al int frameCounter, lo utilizaremos para que no se pueda disparar demasiado rápido. Me explico. Si no ponemos ninguna clase de restricción de este estilo al crear los disparos, si mantenemos pulsado el botón se creara un disparo cada vez que se pulse el botón Update. Esto serán una cantidad enorme de disparos. Si tenemos un contador, que cada vez que se llame a Update se le suma 1, y que cada vez que creamos un disparo se ponga a 0 podemos decir que si el contador esta mas bajo que 7 no se cree ningún disparo, haciendo así que los disparos se creen mucho mas lentos. Yo he puesto 7, pero el numero se puede alterar al gusto, claro. Esta técnica es indispensable aplicarla a cualquier botón que se utilice que no sean los de movimiento.

Una vez explicado esto, veremos como queda nuestro método Update tras manejar los disparos:

        public void Update()
        {
            UpdateShots();
            UpdatePosition();
            UpdateRectangle();            
        }
        private void UpdateShots()
        {
            frameCounter++;
            if (Keyboard.GetState().IsKeyDown(Keys.Z) && disparos.Count < 6 && frameCounter > 7)
            {
                Disparo s = new Disparo(posicion, anchoImagen, _content);
                disparos.Add(s);
                s.FueraDePantalla += new EventHandler(FueraDePantallaHandler);
                frameCounter = 0;
            }
            disparos.ForEach(x => x.Update());        
        }

Como se puede ver, hemos añadido un método mas a Update donde se manejan los disparos. Lo primero que se hace es aumentar frameCounter, tras lo cual si la tecla está pulsada, hay menos de 6 disparos y framecounter está a 7 o más crearemos un nuevo disparo. Lo de la limitación de 6 disparos en la pantalla es totalmente opcional, depende del poder que le queráis dar a vuestra nave :).

Una vez se cumplen todas estas condiciones se crea un nuevo disparo, se añade a la lista y frameCounter se pone a 0. Además de esto también empezamos la escucha del evento, con lo cual, una vez se dispare el evento FueraDePantalla se invocará automáticamente al método FueraDePantallaHandler, que definiremos ahora, en el cual se eliminara el disparo que ha enviado el evento por que este se ha salido de la pantalla.

En cuanto a la última línea del método es una expresión lambda que básicamente recorre disparos y llama a Update de cada disparo. Lo más intuitivo sería hacer un foreach para que realice esto, pero dado que durante la ejecución del bucle puede cambiar el tamaño de disparos, si usamos foreach saltara una excepción, mientras que usando esta expresión Lambda no pasara. Otra solución sería recorrer la lista manualmente valiéndose de un bucle convencional como for.

En cuanto al manejador de eventos que borrara los disparos sobrantes, será algo tan sencillo como esto:

	private void FueraDePantallaHandler(Object sender, EventArgs args)
        {
            disparos.Remove((Disparo)sender);
        }

Por ultimo, solo nos queda llamar al método Draw de cada disparo dentro del método Draw de Nave:

        public void Draw(SpriteBatch spbtch)
        {
            spbtch.Draw(imagen, posicion, rectangulo, Color.White);
            DrawShots(spbtch);
        }
        private void DrawShots(SpriteBatch spbtch)
        {
            foreach (Disparo s in disparos)
            {
                s.Draw(spbtch);
            }
        }

Tras esto, podemos probar a ejecutar el programa, y veremos que nuestra nave ya esta dotada de un armamento temible.

Y eso es todo por hoy. Podéis bajaros el código fuente de lo que tenemos hasta ahora en el siguiente enlace: http://www.megaupload.com/?d=SQ0VIX0T

En la próxima parte del tutorial veremos como añadir a nuestro juego un fondo animado con scroll. No os lo perdáis y ¡¡Sed unos cangrejos pacientes!!

Etiquetas de Technorati: programación,juegos,xna,windows,xbox,C#

Noticias

2010-06-18T02:56:00.000-07:00

Hoy en the code crab aprovecharemos para anunciar varias cosas. La primera de todas es que (por fin) he terminado la carrera, por lo que ya soy un Ingeniero informático en toda regla ^^. Gracias a esto tendré mucho más tiempo para dedicar al blog, por lo que ya mismo me pongo a trabajar en el tutorial de XNA, que se que estáis ansiosos de más.

En otra línea de sucesos, aprovecho para anunciar que asistiré al GameLab 2010, una feria del videojuego que se celebra en mi provincia (Asturias), por lo que tendré la oportunidad de asistir. Intentare realizar resúmenes de las conferencias a las que asista y ponerlas en el blog, aunque no prometo nada de la calidad, pues soy informático y no periodista. No me hace mucha gracia que se me entremezcle las entradas del GameLab con las de XNA (Que parece que va para largo), pero para compensar, tras terminar todas las partes del tutorial, las recopilare en un PDF y subiré el archivo en una entrada.

Pues no os aburro más con esta entrada sin contenido. La tercera parte del tutorial saldrá en unos días (esta vez sí), ¡Sed unos cangrejos pacientes!

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 2

2010-06-08T06:50:00.001-07:00

Un día después, en The Code Crab, continuamos lo que hemos dejado a medias.

Tenemos nuestra navecita, que ya se ve en la pantalla (preciosa ella), y nuestro código perfectamente organizado, con una clase Game1 que llama a los respectivos métodos de cada objeto que tiene (es decir de la nave de momento) y con una clase nave que maneja todo lo relativo a la navecita. Es hora de implementar el Update de la clase Nave para poder moverla por la pantallita, pero antes necesitaremos preparar unos cuantos atributos mas:

        private const int anchoImagen = 42;
        private const int altoImagen = 44;
        private Texture2D imagen;
        private Vector2 posicion;
        private int altoVentana;
        private int anchoVentana;
        public Nave(int altoVentana, int anchoVentana)
        {
            this.altoVentana = altoVentana;
            this.anchoVentana = anchoVentana;
            posicion = new Vector2(altoVentana - altoImagen * 2, (anchoVentana - anchoImagen) / 2);
            CrearRectangulo(anchoImagen, altoImagen * 2);
        }

Añadimos 4 enteros: en anchoImagen y altoImagen almacenaremos el tamaño en pixels de la imagen, lo cual simplificara bastante las cosas a la hora de mostrarlo por pantalla (y de paso si cambias de imagen no te tienes que volver loco buscando todos los 42 y 44 que pusiste). En height y width almacenamos el tamaño de la ventana en pixels, el cual ya pasábamos como parámetro, pero esta vez lo almacenamos, pues lo necesitaremos para que la nave no se salga de la pantalla.

Con todo esto ya estamos listos para implementar Update, donde manejaremos la nave en función de las teclas que se pulsen:

        public void Update()
        {
            UpdatePosition();            
        }
        private void UpdatePosition()
        {
            if (Keyboard.GetState().IsKeyDown(Keys.Left) && posicion.X > 5)
                posicion.X -= 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Right) && posicion.X < (anchoVentana - anchoImagen))
                posicion.X += 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Up) && posicion.Y > 5)
                posicion.Y -= 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Down) && posicion.Y < (altoVentana - altoImagen))
                posicion.Y += 5;
        }

Que es todo esto, os preguntareis. Pues bien, es bastante sencillo. Con el método estático Keyboard.GetState() obtenemos el estado actual del teclado, y con el método IsKeyDown(Keys.X) sabemos si una tecla X esta pulsada o no. Una vez sabemos esto es fácil intuir que lo que hacemos es cambiar la posición en función de que tecla se pulse, aumentando X si se pulsa derecha, reduciéndolo si se pulsa izquierda, aumentando Y si se pulsa abajo y reduciéndolo si se pulsa Up. Yo tengo puesto un aumento/disminución de 5, pero si cambiáis el numerito estaréis cambiando la velocidad de la nave.

En cuanto a la otra condición se trata de comprobar que la imagen no se salga de los bordes (Para esto necesitábamos el tamaño de la ventana). Cuando se comprueba que no se salga de los bordes inferior y derecho, hay que restarle al tamaño de la ventana el tamaño de la imagen por un motivo simple: La posición que le indicamos a la imagen es la coordenada de su esquina superior izquierda, por lo que si dejamos que esta coordenada llegue a ser el ancho o el alto de la ventana, la imagen se saldrá de la pantalla.

Tras esto si probamos a ejecutar, ya podemos mover nuestra nave (divertido, ¿No?), pero aquí falta algo. Para que tener varias imágenes distintas para la nave en función de hacia donde se este moviendo si no lo utilizamos. Pues bien, vamos a ello. Una vez mas lo primero que hay que hacer será añadir un nuevo atributo para representar el estado.

¿Como representamos el estado de la nave? Podemos usar prácticamente cualquier cosa, siempre que tengamos claro lo que estamos usando, como un string o incluso un int, pero la opción mas sencilla sera almacenar un objeto Rectangle con la sección de la imagen que dibujaremos, para no tener que complicarnos la vida en el Draw. También tendremos que modificar el constructor para inicializar la variable:

       private Rectangle rectangulo;
       private int ancho = 42;
       private int alto = 44;
       private Texture2D imagen;
       private Vector2 posicion;
       private int height;
       private int width;
       public Nave(int height, int width)
       {
           this.height = height;
           this.width = width;
           posicion = new Vector2(height-alto*2, (width-ancho)/2);
           estado = Estado.Normal;
       }

Ya que nuestra imagen es una cuadricula de cuadros 42x44, tenemos que fijarnos en que imagen queremos dibujar según hacia donde este la nave avanzando. Si enumeramos las diferentes imágenes que tenemos vemos que de 1 a 3 son las diferentes imágenes retrocediendo (Sin propulsión), de 4 a 6 son las imágenes avanzando (Mucha propulsión) y de 7 a 9 son las imágenes normales (Poca propulsión). Entonces ¿Como hacemos que nuestra imagen cambie según en que dirección avance la nave?.

Es fácil, ¿Recordáis los parámetros de SpriteBatch.draw? El primer parámetro es la imagen a dibujar, el siguiente las coordenadas donde se debe dibujar, y el tercero un objeto Rectangle que indique que parte de la imagen se dibujara, cuyo constructor pide como parámetros la coordenada de donde tiene que empezar a coger la imagen (esquina superior izquierda, como siempre) y la altura y la anchura de esta. La altura y la anchura serán siempre las mismas, mientras que la coordenada variara en función de que imagen queremos. Como sabemos la dirección en la que avanza la nave es fácil saber estas coordenadas utilizando múltiplos de la anchura y altura, ya que es una cuadricula (Por ejemplo, si queremos la coordenada de la imagen 3 tiene que ser (anchura*2, 0), mientras que para la imagen 8 sería (anchura, altura*2)). Lo único que nos hace falta es almacenar estas coordenadas en la variable rectangulo, definida anteriormente, y actualizarla en función de que teclas se estén pulsando.

Con esto tenemos una variable estado en la cual almacenamos que sección de la imagen queremos dibujar. Tras esto, lo que tenemos que hacer es añadir mas cosas al método Update, para que en función de hacia que dirección se este moviendo cambie el rectángulo:

        public void Update()
        {
            UpdatePosition();
            UpdateRectangle();            
        }
        private void UpdatePosition()
        {
            if (Keyboard.GetState().IsKeyDown(Keys.Left) && posicion.X > 5)
                posicion.X -= 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Right) && posicion.X < (anchoVentana - anchoImagen))
                posicion.X += 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Up) && posicion.Y > 5)
                posicion.Y -= 5;
            if (Keyboard.GetState().IsKeyDown(Keys.Down) && posicion.Y < (altoVentana - altoImagen))
                posicion.Y += 5;
        }
        private void UpdateRectangle()
        {
            //a partir de aquí escojemos la parte de imagen que queremos dibujar y la almacenamos en rectangle,
            // en funcion de la combinaion de botones que se esten pulsando.

            if (Keyboard.GetState().IsKeyDown(Keys.Left) && Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                CrearRectangulo(0, altoImagen);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Right) && Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                CrearRectangulo(anchoImagen * 2, altoImagen);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                CrearRectangulo(anchoImagen, altoImagen);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Left) && Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                CrearRectangulo(0, 0);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Right) && Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                CrearRectangulo(anchoImagen * 2, 0);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                CrearRectangulo(anchoImagen, 0);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                CrearRectangulo(0, altoImagen * 2);
            }
            else if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                CrearRectangulo(anchoImagen * 2, altoImagen * 2);
            }
            else
            {
                CrearRectangulo(anchoImagen, altoImagen * 2);
            }
        }
	private void CrearRectangulo(int x, int y)
        {
            rectangulo = new Rectangle(x, y, anchoImagen, altoImagen);
        }

Ya que también necesitamos saber si la nave se esta desplazando en diagonal no podemos usar los if utilizados para modificar la posición, y por esto mismo es muy importante el orden de los if (Pues no podemos comprobar si la nave esta Retrocediendo hasta que no hayamos comprobado que no este retrocediendo hacia la derecha ni hacia la izquierda, pues en ambos casos si comprobamos si esta retrocediendo antes obtendremos un falso positivo).

Tras esto ya tenemos actualizado el estado de la nave, y sabemos que parte de la imagen debemos dibujar. Ahora solo resta dibujar el Sprite, con lo que tendremos que modificar el método Draw de la clase nave, quedándonos así:

	public void Draw(SpriteBatch spbtch)
        {
            spbtch.Draw(imagen, posicion, rectangulo, Color.White);
        }

Tras todo esto, y como ya invocábamos a todos los métodos en la parte anterior del tutorial (Incluso Update que antes no hacía nada, si me habéis hecho caso) ya debería funcionar todo correctamente, y nuestra preciosa nave se podrá mover con libertad por la pantalla sin salirse y con una animación bastante chula.

Ya va cogiendo forma el juego, ¿No? Con esto termina la segunda parte del tutorial, estad atentos para la tercera parte, la haré en unos días. Podéis descargaros el código fuente de la aplicación hasta ahora en el siguiente enlace: http://www.megaupload.com/?d=LN7C0R0J

Eso es todo por hoy, espero que os este gustando el megatutorial. Hasta otra y ¡¡Sed buenos Cangrejos!!

Etiquetas de Technorati: programación,juegos,xna,windows,xbox,C#

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 1

2010-06-06T09:38:00.001-07:00

Antes de nada quiero disculparme por la ausencia de las ultimas semanas, he estado demasiado ocupado como para poner ninguna entrada, pero ya estoy de vuelta, y empiezo fuerte.

En las próximas entradas, vamos a trabajar sobre XNA, un entorno de desarrollo proporcionado por Microsoft para el desarrollo de juegos 2D y 3D. Tiene un montón de ventajas, pero en mi opinión la mas importante es la portabilidad del código a la hora de trasladar un juego entre las diferentes plataformas soportadas (PC, XBox 360 y Windows Phone). Evidentemente no es lo mismo trabajar con la pantalla de un móvil que con una tele, pero las diferencias en cuanto a código se reducen a eso y a los controles del juego.

Quiero mencionar que este tutorial esta orientado tanto a gente que nunca ha programado videojuegos como a gente que nunca ha utilizado XNA. Solo se requieren conocimientos básicos de C#, e intentare ir paso por paso y explicarlo todo con detalle.

Para este tutorial, dividido en varias partes, vamos a desarrollar un juego para Windows (Un juego de naves en 2D), pero no es nada difícil trasladar este código a cualquiera las plataformas anteriormente mencionadas. ¿Que necesitamos para empezar a programar en XNA game studio? Pues simplemente, un visual studio y una versión de XNA Game Studio compatible con este. Yo voy a utilizar VS 2010 y XNA GS 4.0 por ser las ultimas versiones de ambos, pero las diferencias en cuanto al código deberían ser mínimas.

¿Donde conseguimos XNA Game Studio? Muy fácil, aquí mismo: http://creators.xna.com/es-ES/downloads

Una vez tenemos todo instalado podemos comenzar a programar. Lo primero que haremos será crear un nuevo proyecto de XNA para Windows Games.

Tras esto veremos que nos autogenera ya bastantes cosas. La clase principal es la que nos habrá llamado Game1 y tiene los siguientes métodos:

Initialize se llama al principio de la ejecución del juego. En principio lo utilizaremos para crear instancias de los objetos que vamos a necesitar y para cambiar cosas como el titulo de la ventana.
LoadContet se llama después de Initialize. Este método creara una instancia de SpriteBatch, la cual usaremos para dibujar cosas por pantalla mas adelante. Además es aquí donde debemos cargar las imágenes de nuestro juego.
Update se llamara varias veces por segundo a lo largo de la ejecución del juego, y aquí deberemos insertar la lógica del juego.
Draw se llamara varias veces por segundo también y se encargara de dibujar cosas por pantalla valiéndose del antes mencionado SpriteBatch. Es importante tener en cuenta de que si una cosa se dibuja mas tarde que otra, la que mas tarde se dibuje quedara por encima de la otra.

Si probamos a ejecutar veremos una pantalla en azul.

No es gran cosa, pero es el comienzo de nuestro juego. Lo primero que debemos notar es que ese fondo azul no nos sirve (si alguien quiere hacer un juego de una piscina quizás sirva, pero nosotros vamos a hacer un juego de naves) así que cambiaremos el color de fondo por negro. Para ello habrá que modificar el método Draw:

protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.Black);

        // TODO: Add your drawing code here

        base.Draw(gameTime);
    }

Con esto el fondo de nuestra aplicación ya será negro. En partes posteriores de este tutorial se explicara como cambiar el fondo e incluso animarlo. El próximo paso para que la ventana sea mas adecuada a nuestras necesidades es cambiar el titulo. Esto lo insertamos dentro del método Initialize:

protected override void Initialize()
    {
        // TODO: Add your initialization logic here
        this.Window.Title="Space Burst";
        base.Initialize();        
    }

Tras esto la ventana ya esta preparada para nuestro juego, con un fondo negro y Space Burst de titulo, el próximo exitazo de ventas esta preparado para arrancar :P. Ahora toca preguntarnos que es lo que falta en nuestro juego? Es un juego de naves, así que es bueno tener alguna. Yo voy a utilizar la siguiente imagen, que es un sprite con varias posiciones de una nave

Para añadir la imagen a nuestro proyecto la copiamos en la carpeta del proyecto y la añadimos (arrastrándola mismamente) a Content de nuestro proyecto. Esto será una especie de proyecto a parte para los que usen XNA GS 4.0 o una carpeta en caso de usar versiones anteriores.

Ahora crearemos la clase Nave. Podríamos poner todo dentro de la clase Game1, pero el código resultante no sería nada elegante. Añadimos la nueva clase al proyecto Click derecho>Añadir>Clase y comenzamos con nuestra nave. Antes de nada y para evitar futuros problemillas añadiremos los diferentes imports necesarios:

using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Input;

¿Que atributos necesitamos que tenga? Pues vamos a ir poco a poco, así que empezaremos con 2: un objeto Texture2D donde se almacenara la imagen y un objeto Vector2 donde se almacenara la posición.


        private Texture2D imagen;
        private Vector2 posicion;

Además de esto, tendremos que añadir a la clase nave los métodos importantes de la clase Game1: LoadContent, Update y Draw, y así en la clase Game1 solo tendremos que llamar en cada método a los métodos correspondientes de todos los objetos que tengamos en la pantalla.

Debemos crear la instancia de posición dentro del constructor de la clase y la de imagen dentro de LoadContent. Como algo opcional podremos pasar al constructor de nave el ancho y alto de la ventana, para saber donde dibujar inicialmente la nave y que no quede demasiado descentrada:

 public Nave(int altoVentana, int anchoVentana)
    {
        posicion = new Vector2(altoVentana-100, (anchoVentana)/2);
    }
    public void LoadContent(ContentManager Content)
    {
        imagen = Content.Load<Texture2D>;("battleship");
    }
    public void Update()
    {

    }

El parámetro ContentManager es necesario para cargar imágenes, y lo pasamos al invocar el método desde la clase principal. Hay que notar que el nombre de la imagen se escribe sin terminación. Esto es importante, por que sino no te encontrara tu imagen. También añadimos ya el método Update de la clase nave, aunque aún no haga nada.

Aprovecho para explicar el sistema de coordenadas utilizado por XNA. Las medidas son en pixeles y al contrario que el sistema cartesiano el eje (0,0) esta situado en la parte superior izquierda de la ventana. Así por ejemplo si tenemos una ventana de 800x600 el punto (800, 600) sería la esquina inferior derecha, (800, 0) sería la esquina superior derecha y (0, 600) la esquina inferior izquierda.

Tras esto implementamos el método Draw de Nave, que dibujara la imagen en la posición adecuada:

public void Draw(SpriteBatch spbtch)
{
 spbtch.Draw(imagen, posicion, new Rectangle(42, 88, 42, 44), Color.White);
}

Que es todo esto, os preguntareis. Lo primero es el parámetro, el objeto SpriteBatch anteriormente comentado, que se encarga de dibujar cosas por pantalla. Lo utilizamos para llamar al metodo Draw. Pide varios parámetros: con imagen le pasamos la imagen que debe dibujar, con posición le pasamos donde debe dibujarla (hasta ahí espero que lo entendáis bien), pero ¿que es ese Rectangle? Pues muy sencillo. Nuestra imagen tiene varias imágenes de la nave en diferentes posiciones, y ese Rectangle indica que parte de la imagen hay que dibujar. En caso de que la imagen fuese una sola no haría falta este parámetro. Los números que necesita para crearse son las coordenadas donde empieza a dibujar, x e y por ese orden, y el ancho y alto de la imagen. Nuestra imagen consta de 9 imágenes de 42x44, así que con esos parámetros debería dibujar la imagen central.

Tras esto solo queda crear una instancia de Nave y llamar a los métodos necesarios en la clase Game1:

    public class Game1 : Microsoft.Xna.Framework.Game
   {
       GraphicsDeviceManager graphics;
       SpriteBatch spriteBatch;
       Nave _nave;

       public Game1()
       {
           graphics = new GraphicsDeviceManager(this);
           Content.RootDirectory = "Content";           
       }

       protected override void Initialize()
       {
           // TODO: Add your initialization logic here

           _nave = new Nave(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
           this.Window.Title="Space Burst";
           base.Initialize();           
       }

       protected override void LoadContent()
       {
           // Create a new SpriteBatch, which can be used to draw textures.
           spriteBatch = new SpriteBatch(GraphicsDevice);
           _nave.LoadContent(Content);
       }

       protected override void UnloadContent()
       {
           // TODO: Unload any non ContentManager content here
       }

       protected override void Update(GameTime gameTime)
       {
           // Cuidado con esto, no usamos mando.
           if (Keyboard.GetState().IsKeyDown(Keys.Escape))
               this.Exit();
           _nave.Update();

           base.Update(gameTime);
       }

       protected override void Draw(GameTime gameTime)
       {
           GraphicsDevice.Clear(Color.Black);

           spriteBatch.Begin();
           _nave.Draw(spriteBatch);
           spriteBatch.End();

           base.Draw(gameTime);
       }
   }

Como veréis, en el método LoadContent pasamos a Nave la anchura y la altura de nuestra ventana. En Update hay que tener cuidado, puesto que al menos a mi, en el código autogenerado comprobaba que estuviese pulsado el botón Atrás dentro de un gamepad (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed), y como probablemente nosotros usaremos teclado, tenemos que cambiar eso por la tecla escape, como se puede ver en el código. Además de esto llamamos al método Update de nave que aunque no haga nada, pronto lo hará. También llamamos a _nave.Draw dentro del metodo Draw principal, pasando como parametro el SpriteBatch.

Tras todo esto, si probamos a ejecutar, veremos algo similar a esto:

Aún no se mueve, ni hace nada, pero que esperabais, Roma no se construyo en un día. ¿Ha sido largo? No mucho. ¿Ha sido difícil? para nada.

Con esto concluyo esta titánica entrada que se me ha alargado bastante mas de lo que esperaba. Muy pronto sacare la segunda parte, para que nuestra navecita ya pueda hacer cosas. ¡Sed unos cangrejos pacientes!

Etiquetas de Technorati: programación,juegos,xna,windows,xbox,C#

Ejecutando Hilos, comparativa Java y C#

2010-05-16T04:08:00.001-07:00

Hoy en The Code Crab vamos a ver como se ejecutan hilos, comparando el código en C# para ello con el código en Java. No obstante, no vamos a profundizar mucho en el tema, para mas información consultad las siguientes fuentes:

Pues sin mas preámbulos, empecemos con C#.

Ejecutar un metodo en un hilo paralelo es muy sencillo. Lo primero es que no se nos debe olvidar la instrucción using: “using System.Threading;”. Una vez tenemos el using definido correctamente debemos hacer el método que queremos que se ejecute en un hilo separado. No tiene por que ir en una clase separada, ni llevar nada especial, simplemente un método normal y corriente:

 public void HelloThread()
     {
         while (true)
         {
             Console.WriteLine("Hola desde el hilo " + Thread.CurrentThread.ManagedThreadId);
             Thread.Sleep(300);
         }
     }

Tras esto definiremos e invocaremos los hilos. Puede ser en cualquier método que se ejecute que tenga acceso al método que acabamos de definir. En mi caso, estoy haciendo un programa simple de ejemplo así que pondré el código en el constructor:


public Program()
     {
         //Creamos y lanzamos un hilo
         Thread thr1 = new Thread(HelloThread);
         thr1.Start();
         //Creamos y lanzamos un segundo hilo
         Thread thr2 = new Thread(HelloThread);
         thr2.Start();
         //Esperamos 5 segundos a que hagan cosas
         Thread.Sleep(5000);
         //Cerramos el primer hilo
         thr1.Abort();
         //Join une el hilo con el principal, haciendo así que se espere a que termine ordenadamente
         thr1.Join();
         //Cerramos y esperamos por el segundo hilo
         thr2.Abort();
         thr2.Join();
         Console.WriteLine("Programa terminado ordenadamente");
     }

Compilamos, ejecutamos, y … tachaaaaaaaaaan, funciona!

Ha sido fácil, ¿verdad? Mucho, diría yo. Ahora veremos como seria hacer en Java este mismo programa.

Lo primero que tenemos que hacer es crear una clase que herede de Thread, implementando el método run, donde habrá que poner la lógica del hilo:

public class ThreadClass extends Thread {
private boolean thrbool = true;
public void run(){
//Repetimos el bucle hasta que thrbool este puesto a false
while(thrbool){
System.out.println("Hello from thread "+super.getId());
//Hay que hacer try catch para poder usar thread.sleep()
try{
 Thread.sleep(300);
}catch(Exception e){}
}
}
//Metodo para poner thrbool a false
//Se podria utilizar el metodo .stop para forzar a cerrarse el hilo
//Pero esta deprecated, asi que mejor terminarlo todo ordenadamente
public void stopThread(){
thrbool = false;
}
}

Tras esto debemos hacer una clase principal que instancie los hilos:

public class MainClass{
public static void main(String args[]){
//Creamos y arrancamos 2 hilos diferentes
ThreadClass thr1 = new ThreadClass();
ThreadClass thr2 = new ThreadClass();
thr1.start();
thr2.start();
try{
Thread.sleep(5000);
}catch(Exception e){}
//Hacemos que se cierren ordenadamente.
thr1.stopThread();
thr2.stopThread();
}
}

Tenemos el método stop() equivalente a Abort() de C#, pero esta deprecated, así que deberíamos crear nuestro propio método para cerrar el hilo. Tras esto ya tenemos nuestro programa funcionando con diferentes hilos.

EDIT: Dado que Java no permite herencia multiple, el uso de la clase base Thread no esta aconsejado, puesto que si queremos utilizar en otro hilo una clase que ya hereda de algo no podriamos. La solución a esto es implementar la interfaz Runnable, siendo por lo demas exactamente igual que heredar de Thread.

¿Que os ha parecido? Siendo sincero, es bastante fácil de hacer en ambos lenguajes, pero definitivamente en caso de tener que escoger definitivamente es mas fácil en C#, pues lo mas intuitivo es lanzar un método cualquiera en un hilo distinto, sin necesidad de crear una clase a parte. Así que esa es mi conclusión. ¡¡Hasta otra y sed buenos cangrejos!!

Guía simple: Drag-and-Drop en Windows Forms

2010-05-09T13:23:00.001-07:00

Hoy en The Code Crab vamos a empezar a picar un poco de código, que siendo un blog de programación como que ya va tocando. Vamos a implementar Drag-and-Drop paso a paso, de forma sencilla con un pequeño ejemplo que os podréis descargar, pero no será nada difícil añadirlo a vuestro programas grandes.

Drag-and-Drop es una propiedad que tienen algunas interfaces graficas que permite mover objetos de un lugar a otro tan solo arrastrándolos con el ratón.

En mi caso utilizare visual studio 2010, pero esto funciona en cualquier versión de VS sin ningún problema (os dará problemas los archivos de solución quizás, pero el código en principio no). Con esto abrimos el VS, creamos un nuevo proyecto (Aplicación de windows forms en c#) y creamos una interfaz grafica simple para el ejemplo, que constara de dos listBox, aunque con un par de transformaciones el código debería funcionar sin muchos problemas para otros contenedores similares.

Es importante que busquéis en las propiedades de los listBox la propiedad enableDrop y que la pongáis a True, sin esto el programa no funcionara. Después de esto nos metemos a modificar el código (Ver->Código)

Aquí tendremos que crear varios métodos para hacer funcionar el Drag-and-Drop. Necesitaremos dos métodos para poder coger objetos de un listBox y otros dos para poder soltar objetos en un listBox. Como queremos que se pueda cojer objetos de ambos vamos a implementar los 4 métodos una vez para cada listBox. No los repetiré por aquí pero si tenéis alguna duda podéis consultar el código que hay al final.

El primer método se llama Mouse Down, y es el evento que se dispara al pulsar sobre un elemento del listBox. Hace falta para poder sacar objetos de un componente.


 /// 
       /// Evento disparado cuando se pincha sobre un objeto de un listBox, se empieza el drag and drop
       /// 

       private void listBox1_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
       {
           int indexOfItem = listBox1.IndexFromPoint(e.X, e.Y);
           //se almacena la posición donde esta colocado el objeto que vamos a mover
           if (indexOfItem >= 0 && indexOfItem < listBox1.Items.Count)
           {
               //Escojemos que tipo de Drag and Drop queremos. Mi consejo es usar Copia aunque quieras mover, y quitar los objetos
               //manualmente una vez que se pose el objeto, así evitaremos que si el usuario suelta el objeto fuera de un listBox,
               //este se pierda.
               listBox1.DoDragDrop(listBox1.Items[indexOfItem], DragDropEffects.Copy);
           }
       }

El siguiente método se dispara cuando se suelta un objeto en el mismo componente que se cogió, provocando así una reorganización. Se llama DragOver

 
 /// 
       /// Evento disparado al soltar un objeto en el mismo sitio donde se ha cojido
       /// 

       private void listBox1_DragOver(object sender, System.Windows.Forms.DragEventArgs e)
       {

           indice =
               listBox1.IndexFromPoint(listBox1.PointToClient(new Point(e.X, e.Y)));
           //Cambiamos el objeto seleccionado de posición, en funcion de donde se suelte
           listBox1.SelectedIndex = indice;
 }

Con esto concluyen los eventos para cojer objetos de un listBox. Ahora vamos con los necesarios para soltar un objeto en un componente, empezamos con DragDrop, evento que se dispara al soltar un objeto en un listBox


 /// 
       /// Evento disparado al soltar un objeto en un listBox distinto al que se cojio
       /// 

       private void listBox1_DragDrop(object sender, System.Windows.Forms.DragEventArgs e)
       {
           //Podemos cambiar el formato en funcion del objeto que tengamos en listBox.Items, pero hay que tener cuidado
           //por que aunque items acepte cualquier objeto, no hay formatos de Drag and Drop para todo.
           listBox1.Items.Remove(e.Data.GetData(DataFormats.Text));
           if (indice >= 0 && indice < listBox1.Items.Count)
           {
               //Si se solto en la parte alta se pone el objeto donde corresponde
               listBox1.Items.Insert(indice, e.Data.GetData(DataFormats.Text));
           }
           else
           {
               //Sino se pone en el fondo
               listBox1.Items.Add(e.Data.GetData(DataFormats.Text));
           }
           //quitamos el objeto en el listBox2, para conseguir manualmente el efecto mover (explicado anteriormente)
           listBox2.Items.Remove(e.Data.GetData(DataFormats.Text));
       }

Y por ultimo hacemos un método mas, DragEnter, disparando cuando se entra con el ratón a un listBox arrastrando un objeto


       /// Evento disparado al arrastrar un objeto dentro del listBox
       /// 
       public void listBox1_DragEnter(object sender, System.Windows.Forms.DragEventArgs e)
       {

           // Cambiamos el cursor del raton para indicar que el objeto arrastrado se puede soltar aquí
           e.Effect = DragDropEffects.Copy;

       }

Para que nuestro programa funcione bien debemos tener estos métodos 2 veces, uno para listBox1 y otro para listBox2, con cuidado de cambiar las referencias a estos. Tras esto solo nos queda añadir los eventos a las listBox, que lo haremos en el constructor de la clase, después de la llamada al método InitializeComponent();


//No hay que olvidarse de agregar todos los metodos que hicimos o no servira de nada
           listBox1.MouseDown += new System.Windows.Forms.MouseEventHandler(listBox1_MouseDown);
           listBox1.DragOver += new System.Windows.Forms.DragEventHandler(listBox1_DragOver);
           listBox1.DragDrop += new System.Windows.Forms.DragEventHandler(listBox1_DragDrop);
           listBox1.DragEnter += new System.Windows.Forms.DragEventHandler(listBox1_DragEnter);

           listBox2.MouseDown += new System.Windows.Forms.MouseEventHandler(listBox2_MouseDown);
           listBox2.DragOver += new System.Windows.Forms.DragEventHandler(listBox2_DragOver);
           listBox2.DragDrop += new System.Windows.Forms.DragEventHandler(listBox2_DragDrop);
           listBox2.DragEnter += new System.Windows.Forms.DragEventHandler(listBox2_DragEnter);

Y voila, tras todo esto ya tenemos nuestro programa funcionando con Drag-and-Drop. ¿No ha sido tan difícil, no?

Podéis descargar aquí el código fuente en caso de que os halla quedado alguna duda: http://www.megaupload.com/?d=GM4O9V65

Pues eso es todo por hoy, muchas gracias por leerme y ¡Sed buenos cangrejos!

Utilizando librerías dll desde C++

2010-05-08T04:06:00.001-07:00

Bueno, aquí vamos con mi primer post, y para ir a contracorriente no vamos a empezar precisamente con algo fácil. Toca manejarse con C++, ese lenguaje maligno que tiene la habilidad en convertir lo sencillo en complicado (No es mi lenguaje favorito como habréis adivinado).

Pues en este post vamos a aprender como utilizar desde C++ una librería de linkado dinámico, mas conocidas como dlls. En cualquier otro lenguaje hacer esto es el pan de cada día, por ejemplo en C# basta con ir al apartado referencias, click derecho, agregar referencia y ya está. Sin embargo en C++ no es tan sencillo.

Para este ejemplo utilizaremos Visual Studio 2010, que esta nuevito y recién salido del horno, y no os preocupes si usáis una versión anterior que explicare las diferencias. Y para los aventados, se que utilizar una dll compilando desde línea de comandos no es nada difícil, pero tengo la extraña manía de utilizar IDEs (Lo se, soy terrible).

Bueno, pues para empezar, por algún motivo C++ no solo utiliza el archivo dll como otros lenguajes, necesitamos el archivo lib asociado y además los archivos .h de todas las clases que compone el dll. Sabiendo esto, creamos nuestro proyecto en Visual Studio, en caso de que no lo tengamos ya y vamos a la carpeta del proyecto. Para tener a mano todo esto que necesitamos crearemos aquí dos carpetas, import y lib, y metemos los archivos .h de la libreria en import y el archivo .lib en la carpeta lib.

¿Y que hacemos con el archivo dll? Pues la mejor opción será meterlo en una carpeta donde el Linker no tenga problemas para encontrarlo, la mejor opción es C:\Windows\System32 donde se encuentran los dll que utilizan otros programas.

Tras esto abrimos el Visual Studio, y una vez abrimos el proyecto, vamos a Herramientas->Opciones (Tools->Options en ingles) y aquí en proyectos y soluciones buscamos Directorios de VC++(VC++ Directories):

Ups, ¿Que es esto? Me explicare. Aquí podremos encontrar las opciones de configuración de directorios en versiones mas antiguas de VS, pero por algún motivo en VS 2010 nos encontramos con esto. Puedes pulsar ? todo lo que quieras que no sale ninguna ayuda, y la hoja de propiedades que menciona, yo personalmente no la encuentro por ningún lado. ¿Donde esta esto entonces?

En el explorador de soluciones, hacemos click derecho en el proyecto y entramos en propiedades, y ahí lo encontramos (¿Que sentido tiene quitar una cosa para dejarla en otro sitio? Aunque no tenia sentido quitarla para empezar, en fin…):

Aquí en Include Directories y en Library Directories añadimos nuestras carpetas Include y lib respectivamente, separándolas de lo que ya hay por ; y intentando no cargarnos nada.

Tras esto buscamos en la misma pantalla Vinculador->Entrada(Linker->Input):

Aquí añadimos en Dependencias Adicionales(Aditional Depencences) el nombre de nuestro archivo .lib (solo el archivo, sin ruta) y una vez mas separándolo con ; y con cuidado de no cargarnos nada. Le damos a aceptar y ¡Voila! Si todo ha ido bien nuestro programa ya debería compilar y ejecutar (¡No os olvidéis de poner los include!)

¿Conclusiones? Pues yo personalmente creo que esto es algo básico que debería ser muchísimo mas sencillo, y aunque explicado parezca hasta evidente os reto a intentar esto solos sin seguir ningún tutorial (Incluso podéis probar a buscar en google, que lo que yo me encontré no hizo mas que liarme).

En cuanto a lo de el Visual Studio 2010 de quitar una pantalla de configuración, cambiarla por una hoja de propiedades aparentemente inexistente y sin embargo dejar la pantalla de configuración si se accede desde otro sitio… En fin, corramos un estúpido velo, lo dejare a vuestro criterio.

Un saludo, y ¡Sed buenos cangrejos!

Etiquetas de Technorati: c++,cpp,dll,programación,libreria

Hello World

2010-05-06T06:39:00.001-07:00

Últimamente me he tenido que enfrentar a serios problemas en cuanto a la programación, el principal de ellos el desarrollo de mi proyecto de fin de carrera.

Con esto me he dado cuenta de la cantidad de cosas que están mal documentadas en cuanto a la programación: Apis insuficiente, blogs con pocos detalles y hablando de versiones de lenguajes realmente atrasadas y posts en foros que hablan y hablan pero no resuelven la duda que preguntan al principio.

Tras esto me dio por pensar que quizás debiera poner mi grano de arena al mundo de la programación haciendo mi propio blog dedicado a este tema, y actualizarlo con los problemas que me hayan encontrado los cuales sean difíciles de encontrar por internet.

En este blog se trataran varios lenguajes de programación, pero probablemente me centre en C# y Java, viendo ocasionalmente cosas de C++, C, Ruby y Python. Si con mis posts consigo ayudar a alguien, mi blog habrá cumplido su cometido. ¡Hola Mundo!