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
