Graphics and Animation in Visual Basic

Written by Mike James

Article Index
Graphics and Animation in Visual Basic
Bouncing and spinning
Flashing animation

Page 3 of 3

Bouncing and spinning

This example is a very simple animation - it just bounces a spinning ball around the screen. This is quite an ambitious program and it introduces some new ideas, techniques and Visual Basic instructions.

Obviously the movement is going to be created by a timer which updates the position of the "ball" every so many milliseconds. So the first thing to do is place a Timer on the form, set Interval to 100 and Enabled to true.

Two variables are needed - vx and vy - to store the horizontal and vertical velocities respectively and these need to be declared as properties:

Dim vx, vy As Integer

To initialise these to a suitable starting velocity we need to use the FormLoad event which you can guess occurs everytime the Form is loaded:

Private Sub Form1_Load(
  ByVal sender As System.Object, 
  ByVal e As System.EventArgs) 
  Handles MyBase.Load
 vx = 10
 vy = 10
 End Sub

Obviously the values that you use will alter how fast the ball moves but notice that vx and vy are the distance the ball moves for each tick of the timer. Next we need to define the tick event handler for the timer. The image of the ball is going to be loaded into Picture1.

To create the rotation effect we have three ball images each rotated by 90 degrees:

balls

The idea is that the Tick event handler will load each image in turn and we will use a counter to work out which one to load.

Private Sub Timer1_Tick(
    ByVal sender As System.Object, 
    ByVal e As System.EventArgs) 
                Handles Timer1.Tick
 Static count
 PictureBox1.SetBounds(
    PictureBox1.Left + vx, 
    PictureBox1.Top + vy, 0, 0)
 If (PictureBox1.Top + PictureBox1.Height)
                   > Height Then vy = -vy
 If PictureBox1.Top < 0 Then vy = -vy
 If (PictureBox1.Left + PictureBox1.Width) 
                   > Width Then vx = -vx
 If PictureBox1.Left < 0 Then vx = -vx
 count = (count + 1) Mod 3
 Select Case count
  Case 0
   PictureBox1.Image = 
              Image.FromFile("Ball1.png")
  Case 1
   PictureBox1.Image = 
              Image.FromFile("Ball2.png")
  Case 2
   PictureBox1.Image = 
              Image.FromFile("Ball3.png")
 End Select
End Sub

The first instruction moves the ball by adding the velocities to its current position. The four IF statements at the start test for the ball going out of the Form. If it does go out of Forms area then its velocity in the appropriate direction is reversed - i.e. if it goes out of the left or right hand side the horizontal velocity is reversed. This is a standard way of creating a bouncing ball.

After this the counter is incremented modulo 3 and tested for which of the possible three ticks we have reached.The counter counts in the sequence 0,1,2,0,1,2,0 and so on. The Select statement is new but you can see the general idea is that it selects which instuction to carry out depending on the value of counter.

Each tick loads a different graphics file. That's all there is to it and the ball will rotate and bounce around the screen for ever!

This is a simple demonstration of animation and how objects like Timers and PictureBoxes work together to create such effects. It most certainly isn't a perfect program. In paraticular it loads the graphics files each and every time they are used! This slows things down and is very ineffiecent. A better program would load the graphics files just once, probably in the Form Load event handler and then use them as needed.

As you can see there is a lot more to learn!

To access the complete project including the graphics once you have registered, click on CodeBin.

This is the fifth chapter of the ebook Master Visual Basic 2010.

Bouncing and spinning

See also: