El Demo del Día: Animación usando Sprites en Windows Forms

Animación usando Sprites en Windows Forms

El Demo de hoy es una animación en Windows Forms usando un sprite o archivo con una secuencia de imagenes. Los sprites permiten reducir el numero de accesos a archivos para una aplicación que trabaja con imagenes, sobre todo es muy usado en los juegos.

Paso 1: Archivo con el Sprite a Animar

En este ejemplo tenemos un archivo llamado "Caminante.jpg" que tiene 3 filas x 6 columnas, es decir 18 cuadros, pero en este caso solo hay 14 imágenes diferentes. La primera fila tiene 6 imágenes con posiciones hacia la derecha y la segunda fila tiene 6 imágenes con posiciones hacia la izquierda.
El archivo tiene una dimensión de 624 x 450 pixeles por lo que cada imagen seria de 104 de ancho por 150 de alto.

Paso 2: Diseño del Formulario Windows Forms en .NET

Debemos crear una Aplicación en C# para Windows Forms llamada: "Animacion_Sprite" y renombrar el formulario a "frmCaminante".
Primero agregar un control PictureBox llamado "picCaminante" de tamaño "50x50", luego 2 controles RadioButton: "rbDerecha" y "rbIzquierda".
Finalmente, agregar un Timer llamado: "tmrAnima" con la propiedad Enable en "true" y el Interval en "100" milisegundos, tal como se muestra en la figura:

Paso 3: Código del Formulario en C# .NET

Escribir el siguiente código en el formulario, la función cargarImagen esta asociada al evento "load" del formulario y la función "animarCaminante" esta asociado al evento "Tick" del Timer. Además la función "caminarDerecha" esta asociada al radio button "rbDerecha" y la función: "caminarIzquierda" esta asociada al radio button "rbIzquierda".

    public partial class frmCaminante : Form
    {
        Bitmap bmp;
        Rectangle rect;
        int posX,posY,x,c;

        public frmCaminante()
        {
            InitializeComponent();
        }

        private void cargarImagen(object sender, EventArgs e)
        {
            bmp = new Bitmap("Caminante.png");          
        }

        private void animarCaminante(object sender, EventArgs e)
        {
            rect = new Rectangle(posX, posY, 104, 150);
            picCaminante.Image = bmp.Clone(rect, bmp.PixelFormat);
            if (rbDerecha.Checked) animarDerecha();
            if (rbIzquierda.Checked) animarIzquierda();
        }

        private void animarDerecha()
        {
            posX += 104;
            c++;
            picCaminante.Left = x;
            if (x <= this.Width) { x += 10; }
            else { x = -picCaminante.Width; }
            if (c == 5)
            {
                c = 0;
                posX = 104;
            }
        }

        private void animarIzquierda()
        {
            posX += 104;
            c++;
            picCaminante.Left = x;
            if (x>-picCaminante.Width) { x -= 10; }
            else { x = this.Width; }
            if (c == 5)
            {
                c = 0;
                posX = 104;
            }
        }

        private void caminarDerecha(object sender, EventArgs e)
        {
            if (rbDerecha.Checked)
            {
                c = 0;
                posX = 104;
                posY = 0;
            }
        }

        private void caminarIzquierda(object sender, EventArgs e)
        {
            if (rbIzquierda.Checked)
            {
                c = 0;
                posX = 104;
                posY = 150;
            }
        }
    }

Paso 4: Ejecución del Formulario Windows Forms

Después de escribir el código de arriba, crear el archivo: "Caminante.jpg" en la carpeta bin/Debug de la aplicación y ejecutar pulsando F5. Por defecto la animación se inicia a la derecha, para cambiar seleccionar el radio button.

Descarga:
Demo04_Animacion_Sprite