Thursday, July 14, 2011

C++ .NET Programming - How To Make A Simple 2D Animation Using Timer on Windows Forms Application

On my last post (How To Draw 2D Objects on Windows Forms Application), 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.
1. Make a new Visual C++ CLR Windows Forms Application Project. Click "File" - "New" - "Project...". Choose "Visual C++" - "CLR" - "Windows Forms Application" and name your Solution "Simple2DAnimationUsingTimer".



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.



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;
  ...
  ...
}

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);
 }
5. Next, let's make the code inside Form1 Paint event to draw the rectangle based on rectanglePos onto your Form window.

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);
}
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.

Copy the following code:
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();
}


7. Then, let's change some properties of the Form.
 

8. Then, let's add a button to close this form.
 

9. Let's put some code inside this button.

private: System::Void button1_Click(System::Object^  sender, System::EventArgs^  e) {
    this->Close();
}
10. Okay, now try to run your program, and it should be like this:



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,, ^o^

No comments:

Post a Comment

Please leave your comment here

Back to top