VB Lecture Notes - Animation

Objective #1: Animate graphics on a form with For loops.

• A For loop causes a section of code to execute multiple times. For example the following For loop would cause 5 message boxes to show up on the screen one after another
  
  For J = 1 To 5
     MessageBox.Show("Hello World")
  Next
  
  
• The variable J is often used in a For loop. Each time the computer gets to the Next keyword, it goes back to the top of the loop. Each pass through the loop is called an iteration. So the loop above iterates 5 times because the variable J goes from 1 to 5.
  
  
• You can achieve animation by simplying changing a picture box's Top or Left property within a loop.
  
  For example, the picPlayer horizontally across a form to the left:
  
  For J = 1 To 5
     picPlayer.Left = picPlayer.Left - 10
  Next
  
  or
  
  For J = 1 To 5
     picPlayer.Left -= 10
  Next
  
  making use of the -= operator.
  
  
• You can create a pause with the statement
  
  Threading.Thread.Sleep(1000)
  
  where the parameter in the parentheses is the number of milliseconds. This statement makes the computer to stop for 1000 milliseconds (which is 1 second) each time it iterates the loop.
  
  You may need to include the line of code
  
  Me.Refresh()
  
  to refresh the screen so your animation is not glitchy.
  
  
• So the following loop would make picPlayer animate horizontally across the form to the left a total of 50 pixels since 5 iterations x 10 pixels = 50 total pixels
  
  For J = 1 To 5
        picPlayer.Left -= 10
        Me.Refresh()
        Threading.Thread.Sleep(50)
  Next
  
  
• The following loop would animate the picPlayer horizontally across the form to the right a total of 50 pixels since 5 iterations x 10 pixels = 50 total pixels
  
  For J = 1 To 5
        picPlayer.Left += 10
        Me.Refresh()
        Threading.Thread.Sleep(50)
  Next
  
  You can not use the Right property in this situation since the Right property is "read-only".
  
  
• The following loop would animate the picPlayer vertically up the form:
  
  For J = 1 To 5
        picPlayer.Top -= 10
        Me.Refresh()
        Threading.Thread.Sleep(50)
  Next
  
  Remember that the y-axis goes from 0 at the top to 300 at the bottom so you actually need to subtract instead of add to move upwards.
  
  
• The following loop would animate the picPlayer vertically down the form:
  
  For J = 1 To 5
        picPlayer.Top += 10
        Me.Refresh()
        Threading.Thread.Sleep(50)
  Next
  
  You cannot use the Bottom property in this situation since the Bottom property is "read-only".
  
  
• By changing the amount pixels that you add or subtract (10 in this example) and by changing the numeric parameter in the Sleep method (50 in the example above), you can change the speed of the animation.
  
  
• You can change the distance of the animation by changing the amount of pixels that you add or subtract (10 in the examples above) and by changing the top boundary number of the For loop (5 in the examples above.)
  
  For example, as a result of the following loop, the picture box would move a total of 100 pixels to the right because it moves 10 pixels per loop iteration and there are 10 loop iterations overall. Since 10 * 10 is 100, the picture box moves 100 pixels.
  
  For J = 1 To 10
        picPlayer.Left += 10
        Threading.Thread.Sleep(50)
  Next
  
  Or if you use the loop
  
  For J = 1 To 20
        picPlayer.Left += 5
        Threading.Thread.Sleep(50)
  Next
  
  then the picture box would move a total of 100 (20 * 5) pixels again but it would move in smaller increments of 5 pixels each but a greater number of times (20 iterations) resulting in a slower animation but it would appear more smooth.
  
  If you change the upper boundary of the For loop to 10, then the picture box would move 5 pixels a total of 10 times for a grand total of 20 * 10 = 200 pixels as in this example
  
  For J = 1 To 10
        picPlayer.Left += 20
        Threading.Thread.Sleep(50)
  Next
  
  
• A student suggested that the following code can be used in the mnuMouseGo_Click method of the Maze1 assignment to reduce the flickering of graphics:
  
  DoubleBuffered = True
  SetStyle(ControlStyles.OptimizedDoubleBuffer, True)?