How To Make A 2D Animation using Timer with C++ .NET

Animating objects on Windows Forms is simple with the help of Timer class

On my last post (How To Draw 2D Primitive Objects on Windows Forms Application using C++ .NET), we’ve learned about how to draw some 2D objects on Form and Panel. That’s not difficult right? But now, in this post, we’ll learn about how to move that objects. Of course it’ll be very boring if that objects didn’t move. So, let’s get started! Don’t forget that I’m using Microsoft Visual Studio 2008 Professional Edition in this tutorial.

Step 1

Make a new Visual C++ CLR Windows Forms Application Project. Click FileNewProject…. Choose Visual C++CLRWindows Forms Application and name your Solution Simple2DAnimationUsingTimer.

Creating a new project
Creating a new project

Step 2

Then, make a Timer Object inside your Form. Go to the property, change the Interval to 50 (It means that it’ll be active every 50 milliseconds) and change Enabled to true.

Activating Timer object
Activating Timer object

Step 3

Now, let’s go to the code! first, make a Point object that represents the position (Top Left) of the 2D object. In this case, let’s try to make a rectangle. Let’s call it rectanglePos. Then, we make rectangleSpeed to represents the speed of that rectangle when it’s moving.

namespace Simple2DAnimationUsingTimer {  
  
  using namespace System;  
  using namespace System::ComponentModel;  
  using namespace System::Collections;  
  ...  
  ...  
  ...  
  ...  
  
  private: System::ComponentModel::IContainer^  components;  
  
  private:  
  /// <summary>  
  /// Required designer variable.  
  /// </summary>  
  
  //create a Point represents the position of rectangle  
  Point rectanglePos;  
  
  //create a Point to represents the X speed and Y speed of the rectangle  
  Point rectangleSpeed;  
  ...  
  ...  
}  

Step 4

Next step, let’s initialize this rectanglePos with (0, 0) value and rectangleSpeed with (4, 4) value inside Form1(void) constructor.

public:  
Form1(void)  
{  
  InitializeComponent();  
  //  
  //TODO: Add the constructor code here  
  //  
  
  //initialize the start position of rectangle  
  rectanglePos = Point(0, 0);  
  
  //initialize the speed X and speed Y of the rectangle  
  rectangleSpeed = Point(4, 4);  
}  

Step 5

Next, let’s make the code inside Form1 Paint event to draw the rectangle based on rectanglePos onto your Form window.

Opening Paint event
Opening Paint event

Copy the following code inside Form1_Paint().

private: System::Void Form1_Paint(System::Object^  sender, System::Windows::Forms::PaintEventArgs^  e) {  
  Graphics^ g = e->Graphics;  
  
  //make it High Quality  
  g->SmoothingMode = Drawing2D::SmoothingMode::HighQuality;  
  
  //draw a rectangle with the position based on rectanglePos  
  //with 50 px width and 50 px height  
  g->FillRectangle(Brushes::LightGreen, rectanglePos.X, rectanglePos.Y, 50, 50);  
  g->DrawRectangle(Pens::Blue, rectanglePos.X, rectanglePos.Y, 50, 50);  
}  

Step 6

Now, let’s put some code inside timer1_Tick() to animate (or, actually, it’s only to move) the rectangle. The speed of rectangle move is based on rectangleSpeed. And of course, I’ve put a simple collision detection between rectangle and the wall of Form.

private: System::Void timer1_Tick(System::Object^  sender, System::EventArgs^  e) {  
  //the rectangle postion move every 50 millisecods (based on Interval)  
  //It'll move 4 px every 50 milliseconds  
  rectanglePos.X += rectangleSpeed.X;  
  rectanglePos.Y += rectangleSpeed.Y;  
  
  //if it hits the left of the form  
  if(rectanglePos.X <= 0)  
  {  
    rectanglePos.X = 0;  
    //reverse the direction  
    rectangleSpeed.X *= -1;  
  }  
  //if it hits the right of the form   
  //(50 is the width of rectangle)  
  else if(rectanglePos.X + 50 > this->Width)  
  {  
    rectanglePos.X = (this->Width - 1) - 50;  
    //reverse the direction  
    rectangleSpeed.X *= -1;  
  }  
  
  //if it hits the top of the Form  
  if(rectanglePos.Y <= 0)  
  {  
    rectanglePos.Y = 0;  
    //reverse the direction  
    rectangleSpeed.Y *= -1;  
  }  
  //if it hits the bottom of the form   
  //(50 is the height of rectangle)  
  else if(rectanglePos.Y + 50 > this->Height)  
  {  
    rectanglePos.Y = (this->Height - 1) - 50;  
    //reverse the direction  
    rectangleSpeed.Y *= -1;  
  }  
  
  //refresh the Form so it'll redraw the rectangle with the new position  
  this->Refresh();  
}  

Step 7

Finally, try to run your program, and it should be like this:

Bouncing box animation result
Bouncing box animation result

Okay, I think that’s all I got to tell. If you want to make more rectangles or you want to add some circles, just add some Pos and Speed. You can make it by using array or List (try googling if you don’t get it). Okay, hope this simple tutorial gives you some inspirations. See you on my next Post.

Downloads

Download completed project


Cover Photo by Icons8 team on Unsplash.