Hi in this tutorial we will make a very cute looking small application using windows forms, c# and visual studio. The purpose of this application is to animate small crystal hearts using separate images in windows form and spawn them as animated particles that travel from bottom of the screen to the top.  Animating objects with separate images has its benefits of giving more control the animators to time the animation and also to save some memory in the process. Instead of loading one large file to the program and showing that animation its more effective to load smaller static files and changing them dynamically in the program so it looks like a animation. This is what we will accomplish in this tutorial. We will load different static images of this animated heart and then show that individually on the screen at a set interval so making it look like a smooth animation. Plus point here is we will not just animate one heart image on the screen we will animate 50 at the same time and they will be moving across the screen smoothly.

Lesson Objective –

1. Create a sprite animated particle application in windows form and c#
2. load sprites from a folder and animate them using paint and timer event
3. use object oriented programming to create a heart class and specify the instructions for each object inside of the class
4. Spawn the hearts outside of the form and animate them moving to top of the screen
5. Relocate the hearts when they reach top of the screen to animate again

Video Tutorial

Download the heart images and the background here

Source Code Form 1 –

    
    namespace Heart_Animation_with_PNG_Win_Forms_MOO_ICT
{
    public partial class Form1 : Form
    {

        // create by mooict.com 2022
        // for educational purpose only
        
        Random rand = new Random();
        List hearts = new List();

        public Form1()
        {
            InitializeComponent();
            SetUpForm();
        }


        private void SetUpForm()
        {
            this.BackgroundImage = Image.FromFile("images/bg.jpg");
            this.BackgroundImageLayout = ImageLayout.Stretch;

            for (int i = 0; i < 50; i++)
            {
                Heart newHeart = new Heart();
                newHeart.PositionX = rand.Next(10, this.ClientSize.Width - 100);
                newHeart.PositionY = this.ClientSize.Height + rand.Next(300, 1200);
                hearts.Add(newHeart);
            }


        }

        private void TimerEvent(object sender, EventArgs e)
        {
            foreach (Heart newHeart in hearts.ToList())
            {
                newHeart.AnimateHeart();

                newHeart.PositionY -= newHeart.SpeedY;


                if (newHeart.PositionY < -100)
                {
                    newHeart.PositionY = this.ClientSize.Height + rand.Next(200, 500);
                    newHeart.PositionX = rand.Next(10, this.ClientSize.Width - 100);
                }


            }


            this.Invalidate();
        }

        private void FormPaintEvent(object sender, PaintEventArgs e)
        {
            Graphics Canvas = e.Graphics;


            foreach (Heart newHeart in hearts.ToList())
            {
                Canvas.DrawImage(newHeart.heart, newHeart.PositionX, newHeart.PositionY, newHeart.width, newHeart.height);
            }
        }
    }
}
        
   

Source Code Heart Class –

    
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.Drawing;

namespace Heart_Animation_with_PNG_Win_Forms_MOO_ICT
{
    internal class Heart
    {

        // create by mooict.com 2022
        // for educational purpose only

        public int PositionX;
        public int PositionY;
        public int SpeedY;
        public int height;
        public int width;
        public Image heart;

        Random rand = new Random();
        int frames;


        public Heart()
        {
            heart = Image.FromFile("images/1.png");
            height = 85;
            width = 105;

            SpeedY = rand.Next(2, 10);
        }

        public void AnimateHeart()
        {

            if (frames < 11)
            {
                frames += 1;

                heart = Image.FromFile("images/" + frames + ".png");

            }
            else
            {
                frames = 0;
            }

        }
    }
}