C# Tutorial – Create 4 Way Sprite Movement Animation Using .Net, Windows Form and Visual Studio

Lets make something fun. How about a simple animation where you get to animate a single character walking around the screen in all 4 directions and we will get to do this only using C# and Visual Studio. Well it can sound sort of confusing at first but we have figured out how to do this in style. In this tutorial you will find the answers to all of those questions. We will break down how to make a simple animation only using C# and we will be importing out images and loading them inside of the program and animate them using a custom function. This type of animation is very popular for Zelda games and some top down isometric games. We will recreate just the movement and demonstrate it using windows forms and visual studio. Lets get started.

 

Lesson objectives –

  1. Create a 4 way movement animation using sprites and c# programming
  2. Load player movements from a folder and save them to a list
  3. use the list to display specific images when a specific movement is triggered in the program
  4. Use arrow keys to move the player object
  5. Use paint and timer event to move and animate the player object
  6. Create custom functions to limit the movements and show only the corresponding images as animations
  7. Slow down the animation to make it looks more suitable for the application

Video Tutorial –

 

Download Images and Background here

Get C# 4 Way Movement and Item Pick Up Project on GitHub

Once you’ve completed this tutorial, you can do the part 2 of this tutorial on How to Randomly Spawn Items and Pick them up in the game.

Source Code –

 

namespace _4_Way_Movement_with_Sprite_Images_MOO_ICT
{
    public partial class Form1 : Form
    {
        // created by mooict.com
        // for educational purpose only
        Image player;
        List playerMovements = new List();
        int steps = 0;
        int slowDownFrameRate = 0;
        bool goLeft, goRight, goUp, goDown;
        int playerX;
        int playerY;
        int playerHeight = 100;
        int playerWidth = 100;
        int playerSpeed = 8;
        public Form1()
        {
            InitializeComponent();
            SetUp();
        }
        private void KeyIsDown(object sender, KeyEventArgs e)
        {
            if (e.KeyCode == Keys.Left)
            {
                goLeft = true;
            }
            if (e.KeyCode == Keys.Right)
            {
                goRight = true;
            }
            if (e.KeyCode == Keys.Up)
            {
                goUp = true;
            }
            if (e.KeyCode == Keys.Down)
            {
                goDown = true;
            }
        }
        private void KeyIsUp(object sender, KeyEventArgs e)
        {
            if (e.KeyCode == Keys.Left)
            {
                goLeft = false;
            }
            if (e.KeyCode == Keys.Right)
            {
                goRight = false;
            }
            if (e.KeyCode == Keys.Up)
            {
                goUp = false;
            }
            if (e.KeyCode == Keys.Down)
            {
                goDown = false;
            }
        }
        private void FormPaintEvent(object sender, PaintEventArgs e)
        {
            Graphics Canvas = e.Graphics;
            Canvas.DrawImage(player, playerX, playerY, playerWidth, playerHeight);  
        }
        private void TimerEvent(object sender, EventArgs e)
        {
            if (goLeft && playerX > 0)
            {
                playerX -= playerSpeed;
                AnimatePlayer(4, 7);
            }
            else if (goRight && playerX + playerWidth < this.ClientSize.Width)  
            { 
               playerX += playerSpeed; 
               AnimatePlayer(8, 11); 
            } 
            else if (goUp && playerY > 0)
            {
                playerY -= playerSpeed;
                AnimatePlayer(12, 15);
            }
            else if (goDown && playerY + playerHeight < this.ClientSize.Height) 
            { 
               playerY += playerSpeed; AnimatePlayer(0, 3); 
            } 
            else 
            { 
               AnimatePlayer(0, 0); 
            } 
            this.Invalidate(); 
            lblMovement.Text = "Movements: " + steps; 
       } 
       private void SetUp() 
            { 
               this.BackgroundImage = Image.FromFile("bg.jpg"); 
               this.BackgroundImageLayout = ImageLayout.Stretch; 
               this.DoubleBuffered = true; 
               // load the player files to the list 
               playerMovements = Directory.GetFiles("player", "*.png").ToList(); 
               player = Image.FromFile(playerMovements[0]); 
       } 
      private void AnimatePlayer(int start, int end) 
            { 
               slowDownFrameRate += 1; 
             if (slowDownFrameRate == 4) 
             { 
                steps++; 
                slowDownFrameRate = 0; 
             } 
             if (steps > end || steps < start)
            {
                steps = start;
            }
            player = Image.FromFile(playerMovements[steps]);
      }
    }
}

 




Comment on this tutorial and let us know how you got on -