{"id":6353,"date":"2007-04-09T11:58:00","date_gmt":"2007-04-09T11:58:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2007\/04\/09\/simple-animation-in-visual-basic-matt-gertz\/"},"modified":"2024-07-05T14:48:39","modified_gmt":"2024-07-05T21:48:39","slug":"simple-animation-in-visual-basic-matt-gertz","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/simple-animation-in-visual-basic-matt-gertz\/","title":{"rendered":"Simple Animation in Visual Basic (Matt Gertz)"},"content":{"rendered":"

Simple Animation in Visual Basic (Matt Gertz)<\/font><\/h2>\n

The basics:<\/font><\/h2>\n

You’re almost certainly used to placing controls on a form; however, you probably have an expectation that they will stay in place once you put them there.  That need not be the case, however.  Controls have X & Y positions, and you can modify them at any time during the runtime.  We can use this to create a simple animation in a windows application — let’s say, for example, an animal walking.  <\/font><\/p>\n

 <\/font><\/p>\n

First, I’ll need a two or more images of the animal in different stages of walking.  (In the attached windows application, I’ve used a couple images of cartoon sheep that I hastily drew up — forgive my lack of artistic abilities here.)  The more images you use, the smoother the animations will be.<\/font><\/p>\n

 <\/font><\/p>\n

Everything else I need is already in Visual Basic. I’ll create a new Windows Application and place an image control at the extreme right side of the form (because my sheep starts out facing left).  In the resource manager (brought up by right-clicking on the project, choosing “Properties,” and clicking on the Resources tab), I’ll add the two sheep images.  <\/span>(In the attached quick-and-dirty application, I\u2019m cheating slightly \u2013 the images are BMPs instead of GIFs, and don\u2019t support transparency.  <\/span>I compensate by making the uninteresting parts of the sheep images the same color as the form\u2019s background.)<\/font><\/p>\n

 <\/font><\/p>\n

Note on transparency in .NET:  <\/span><\/span><\/i><\/b>In .NET forms, transparency is only one level deep, with that level always being the parent form.  <\/span>So, if you put a GIF containing transparent pixels into a PictureBox, the GIF will display correctly on the form (i.e., the form background will show where the transparent bits are).  <\/span>However, if you overlap a PictureBox onto another control, the transparency effect won\u2019t stack \u2013 the transparent bits will continue to show the underlying form background, not any parts of the control \u201cin between\u201d them.  <\/span>This can look odd on the screen.  <\/span>In order to support true stackable transparency, you need to handle the OnDraw method of the controls yourself.  <\/span>That\u2019s beyond the scope of today\u2019s subject, though I might address it in a future post.<\/span><\/i><\/font><\/font><\/p>\n

 <\/font><\/p>\n

Now, I double-click the form background to generate the Form_Load event handler.  In the handler, I assign one of the sheep images to the image control — when the app runs, you’ll now see a sheep. But we don’t want the sheep to just stand there; we want it to move.  How do we do this?<\/font><\/p>\n

 <\/font><\/p>\n

There are two components to the motion in this case.  First, we need to move the image control periodically to change the location of the sheep; second, we need to cycle between the two images of the sheep to make it appear that the sheep is responsible for the motion (as opposed to it being dragged by some large unseen feline).  The sheep may be either facing left or right on each image, so there are four total states in all:<\/font><\/p>\n

 <\/font><\/p>\n

    <\/span>Enum<\/span> SheepState<\/span><\/p>\n

        <\/span>FacingLeftExtendedLeftLegs = 1<\/span><\/span><\/p>\n

        <\/span>FacingLeftExtendedRightLegs = 2 <\/span><\/p>\n

        <\/span>FacingRightExtendedRightLegs = 3 <\/span><\/p>\n

        <\/span>FacingRightExtendedLeftLegs = 4<\/span><\/span><\/p>\n

    <\/span>End<\/span> Enum<\/span><\/span><\/p>\n

 <\/font><\/p>\n

The fact that we need to change states periodically means that we’ll need to add a timer control.  I’ll set the timer to fire a tick every 100 ms.  (Unlike in my Euchre game example last month, there will be no need to deactivate the timer nor pump messages while handling the event, since we are not interrupting any other logic when the timer goes off.)  <\/span>We\u2019ll turn it on in the form\u2019s load event, and initialize the direction and speed as well:<\/font><\/p>\n

    <\/span><\/span><\/p>\n

    <\/span>Dim<\/span> counter As<\/span> Integer<\/span><\/span><\/p>\n

    <\/span>Dim<\/span> state As<\/span> Integer<\/span><\/span><\/p>\n

    <\/span>Dim<\/span> speed As<\/span> Integer<\/span><\/span><\/p>\n

    <\/span>Private<\/span> Sub<\/span> Pasture_Load(ByVal<\/span> sender As<\/span> System.Object, _<\/span><\/p>\n

ByVal<\/span> e As<\/span> System.EventArgs) Handles<\/span> MyBase<\/span>.Load<\/span><\/p>\n

        <\/span>state = SheepState.FacingLeftExtendedLeftLegs<\/span><\/p>\n

        <\/span>speed = 10 ‘ Pixels per timer tick<\/span><\/span><\/p>\n

        <\/span>SheepImg.Image = My<\/span>.Resources.sheep ‘ Initial image<\/span><\/span><\/p>\n

        <\/span>Timer1.Enabled = True<\/span><\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/font><\/p>\n

Now, the rest is simple:  in the timer event handler, we simply move the image control to the left by a few pixels, and change the image of the sheep.  We’ll also check the location of the image control; if the left side is getting close to zero, we’ll flip both images and move the control to the right instead; if the right edge of the control is near the right edge of the form, we’ll flip the images back and move the images the other direction.  In this way, the sheep will appear to walk back and forth across the form.  <\/span>I\u2019ll show two of the four states here (the other two are essentially clones of these two, the only difference being the images used):<\/font><\/p>\n

 <\/font><\/p>\n

    <\/span>Private<\/span> Sub<\/span> Timer1_Tick(ByVal<\/span> sender As<\/span> System.Object, ByVal<\/span> e As<\/span> System.EventArgs) Handles<\/span> Timer1.Tick<\/span><\/p>\n

        <\/span>Select<\/span> Case<\/span> state<\/span><\/p>\n

            <\/span>Case<\/span> SheepState.FacingLeftExtendedLeftLegs<\/span><\/p>\n

    <\/span>‘ Move the sheep to the left<\/span><\/p>\n

                <\/span>SheepImg.Left = SheepImg.Left – speed <\/span><\/p>\n

                <\/span>‘ Switch to complementary image<\/span><\/span><\/p>\n

                <\/span>SheepImg.Image = My<\/span>.Resources.sheep2 <\/span><\/p>\n

                <\/span>If<\/span> SheepImg.Left > 5 Then<\/span><\/span><\/p>\n

        <\/span>‘ Plenty of room; extend the other legs<\/span><\/p>\n

                    <\/span>state = SheepState.FacingLeftExtendedRightLegs <\/span><\/p>\n

                <\/span>Else<\/span><\/span><\/p>\n

‘ Don’t walk off the form — turn around!<\/span><\/p>\n

                    <\/span>state = SheepState.FacingRightExtendedLeftLegs <\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

            <\/span>Case<\/span> SheepState.FacingRightExtendedRightLegs<\/span><\/p>\n

                <\/span>‘ Move the sheep to the right<\/span><\/p>\n

                <\/span>SheepImg.Left = SheepImg.Left + speed <\/span><\/p>\n

                <\/span>‘ Switch to complementary image<\/span><\/p>\n

                <\/span>SheepImg.Image = My<\/span>.Resources.sheep2 <\/span><\/p>\n

                <\/span>‘ Make sure image faces right<\/span><\/p>\n

                <\/span>SheepImg.Image.RotateFlip(RotateFlipType.RotateNoneFlipX) <\/span><\/p>\n

                <\/span>If<\/span> SheepImg.Right < Me<\/span>.Width – 5 Then<\/span><\/span><\/p>\n

                    <\/span>‘ Plenty of room; extend the other legs<\/span><\/p>\n

                    <\/span>state = SheepState.FacingRightExtendedLeftLegs <\/span><\/p>\n

                <\/span>Else<\/span><\/span><\/p>\n

                    <\/span>‘ Don’t walk off the form — turn around!<\/span><\/p>\n

         <\/span>           <\/span>state = SheepState.FacingLeftExtendedRightLegs <\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

 <\/span><\/p>\n

                <\/span>‘ (Etc.)<\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>End<\/span> Select<\/span><\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/span><\/p>\n

When combined with the aforementioned other states (see the attached ZIP file for the complete code), the sheep will now walk back and forth across the screen.  This is certainly cool to look at for a minute or so, but the sheep isn’t really doing anything — it’s not really reacting to its environment in any fun way.  It “knows” what its boundaries are, though, and that’s a start.  We’ll now expand on this beginning to create another game, this one involving… gerbils.<\/font><\/p>\n

Intersections via gerbils:<\/font><\/h2>\n

My wife and I are fairly used to being awakened in the morning by cats leaping upon the bed, both of us having been long-time companions to felines throughout our lives.  Generally, the wake-up call is an invitation to congratulate the clever creature for once again having conquered the fierce and vicious catnip toy, the trophy now being proudly displayed in their mouths.  So, when William the Cat waltzed into our room one Sunday morning making the appropriate noises and with something in his mouth, I assumed it was just the start of just another bad day for Bob the Catnip Mouse.<\/font><\/p>\n

 <\/font><\/p>\n

Then I looked again, and, oh, dear… it was one of my wife’s gerbils.  Yipes!  I leaped out of bed and hastily relieved William of his tiny burden.  A quick examination revealed that the gerbil was ruffled and extremely soggy with cat saliva (and essentially catatonic with panic), but was otherwise unharmed.  It turned out that the gerbils had managed to chew through their plastic cage and were now all free-ranging on the bookshelf where the cage sat.  (Apparently, William had noticed this and had jumped up to the shelf to seize one of them.)  I grabbed a spare glass aquarium and chucked them all in there; fortunately, all were accounted for.  I then spent the rest of the day devising new cages for them that would be a little more gnaw-proof.<\/font><\/p>\n

 <\/font><\/p>\n

Now, I couldn’t let such an incident go by without immortalizing it on the computer somehow.  So, today, I’ll walk you through the creation of a “catch the gerbil” game which will add on to the basic principles noted in the “sheep” example.<\/font><\/p>\n

 <\/font><\/p>\n

The idea for this game is to catch a gerbil and put it back into its tank without dropping it on the floor.  <\/span>There are two major issues here:<\/font><\/p>\n

(1)<\/font>    <\/span><\/span><\/span>We need to drag the image representing the gerbil \u2013 this will represent more state information that we\u2019ll have to cache.<\/font><\/p>\n

(2)<\/font>    <\/span><\/span><\/span>The gerbil will need to \u201cfall\u201d if released, and where it falls to depends on what it\u2019s over \u2013 that\u2019s more state information.<\/font><\/p>\n

 <\/font><\/p>\n

For clarity\u2019s sake, I\u2019m not going animate the motion of the gerbil\u2019s legs when it crawls \u2013 you should feel free to extrapolate from the sheep example above.  <\/span>Also, instead of flipping images, I\u2019m going to use two PictureBox controls for the gerbil, each with its own reversed image.    <\/span>(You could certainly use the same control & just flip images like we did in the previous example, but I thought I\u2019d try something different this time just to show how to coordinate it.)  <\/span><\/font><\/font><\/p>\n

 <\/font><\/p>\n

My form starts out with several PictureBox controls already on it:<\/font><\/p>\n

(1)<\/font>    <\/span><\/span><\/span>A bookshelf, ostensibly hanging on the wall.<\/font><\/p>\n

(2)<\/font>    <\/span><\/span><\/span>A tank positioned to look as if it\u2019s sitting on the shelf.<\/font><\/p>\n

(3)<\/font>    <\/span><\/span><\/span>Three books \u2013 I actually use the same image for each of those three controls, but just stretch the images to make them look like different books.<\/font><\/p>\n

 <\/font><\/p>\n

The two gerbil images are placed \u201con\u201d the shelf as well, although I set them both to Enabled = False and Visible = False.  <\/span>I also include a label control which just gives feedback to the user; I won\u2019t discuss that one further in this example.  <\/span>Finally, I include to button controls which will allow me to change the speed at which the gerbils crawls.<\/font><\/p>\n

 <\/font><\/p>\n

The Z-order of the controls (the \u201cdepth\u201d of each control with respect to each other) is important.  <\/span>I want to have the gerbil crawl behind the books, but in front of the tank.  <\/span>So, I select each of the book controls, right-click, and choose \u201cBring to Front.\u201d  <\/span>I then right-click the tank control and choose \u201cSend to Back,\u201d and then repeat this for the shelf control (making the tank next-to-last).  <\/span>The gerbils will, by process of elimination, be in the middle of the Z-order.<\/font><\/p>\n

 <\/font><\/p>\n

With the form set up, the first thing I need to do is to establish the known states:<\/font><\/p>\n

 <\/font><\/p>\n

        <\/span>gerbilMovingLeftOutsideCage = 0<\/span><\/p>\n

        <\/span>gerbilMovingRightOutsideCage = 1<\/span><\/p>\n

        <\/span>gerbilFacingLeftBeingDragged = 2<\/span><\/p>\n

        <\/span>gerbilFacingRightBeingDragged = 3<\/span><\/p>\n

        <\/span>gerbilMovingLeftInsideCage = 4<\/span><\/p>\n

        <\/span>gerbilMovingRightInsideCage = 5<\/span><\/p>\n

        <\/span>gerbilFacingLeftFalling = 6<\/span><\/p>\n

        <\/span>gerbilFacingRightFalling = 7<\/span><\/p>\n

        <\/span>gerbilFellOffTheTable = 8<\/span><\/p>\n

        <\/span>gerbilNullAction = 9<\/span><\/p>\n

 <\/font><\/p>\n

Those should be pretty self-explanatory.  <\/span>I then initialize the state of the game in the form’s load event handler (for brevity\u2019s sake, I\u2019m excluding the \u201cDim\u201d statements here):<\/font><\/p>\n

 <\/font><\/p>\n

        <\/span>state = gerbilState.gerbilMovingLeftOutsideCage<\/span><\/p>\n

        <\/span>speed = 5 ‘ Pixels per timer tick<\/span><\/span><\/p>\n

        <\/span>fallRate = 8 ‘ Pixels per timer tick<\/span><\/span><\/p>\n

 <\/span><\/p>\n

  <\/span>‘ Level where gerbil is crawling outside of the tank<\/span><\/p>\n

        <\/span>shelfLevel = gerbil0.Top <\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>‘ Level where gerbil is crawling inside the tank<\/span> <\/span><\/p>\n

  <\/span>tankLevel = Tank.Top + Tank.Height – gerbil0.Height – 15 <\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>‘ Percent probability that gerbil will change direction, per tick<\/span><\/span><\/p>\n

  <\/span>reverseRate = 10<\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>‘ Percent probability that gerbil will not move at all, per tick<\/span><\/span><\/p>\n

  <\/span>freezeRate = 30<\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>Timer1.Enabled = True<\/span><\/span><\/p>\n

 <\/font><\/p>\n

If you read this carefully, you\u2019ll note that I\u2019m planning on adding some randomness to the game.  <\/span>I want the gerbil to act like a gerbil; i.e, stopping to rest some times, changing direction, etc., but with no apparent rhyme or reason.  (As far as I can tell, gerbils are totally ruled by Brownian motion.)<\/font><\/p>\n

 <\/font><\/p>\n

As with the sheep example, I need to handle the case where the gerbil is just running around on its own.  <\/span>For example, here\u2019s what happens during the timer tick when the gerbil is moving to the left outside of the tank:<\/font><\/p>\n

 <\/font><\/p>\n

        <\/span>Case<\/span> gerbilState.gerbilMovingLeftOutsideCage<\/span><\/p>\n

            <\/span>‘ Let’s figure out what the gerbil will do.<\/span><\/span><\/p>\n

            <\/span>‘ Generate a random number to see if he sits still<\/span><\/span><\/p>\n

            <\/span>If<\/span> Rnd() * 100 > freezeRate Then<\/span><\/span><\/p>\n

                <\/span>‘ He’s not sitting still.  <\/span>Move him to the left<\/span><\/span><\/p>\n

                <\/span>gerbil0.Left = gerbil0.Left – speed<\/span><\/p>\n

 <\/span><\/p>\n

                <\/span>‘ Does he want to change directions?  <\/span><\/span><\/span><\/p>\n

    <\/span>‘ If so, change which image is shown & enabled,<\/span><\/p>\n

    <\/span>‘ and the state.<\/span><\/p>\n

                    <\/span>If<\/span> gerbil0.Left <= Table.Left Or<\/span> _<\/span><\/p>\n

   <\/span>Rnd() * 100 < reverseRate Then<\/span><\/span><\/p>\n

                        <\/span>gerbil1.Left = gerbil0.Left<\/span><\/p>\n

                        <\/span>gerbil1.Top = gerbil0.Top<\/span><\/p>\n

                        <\/span>gerbil0.Visible = False<\/span><\/span><\/p>\n

                        <\/span>gerbil1.Visible = True<\/span><\/span><\/p>\n

                        <\/span>gerbil0.Enabled = False<\/span><\/span><\/p>\n

                        <\/span>gerbil1.Enabled = True<\/span><\/span><\/p>\n

                        <\/span>state = gerbilState.gerbilMovingRightOutsideCage<\/span><\/p>\n

                    <\/span>End<\/span> If<\/span><\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

 <\/font><\/p>\n

Note that, if the gerbil changes direction, I need to switch to the other PictureBox control \u2013 I set its coordinates to be the same as the previously active control, and then I switch which control is visible and enabled.  <\/span>Three of the other states (<\/font>gerbilMovingRightOutsideCage<\/span>,<\/font> gerbilMovingLeftInsideCage<\/span>,<\/font> gerbilMovingRightInsideCage<\/span>) use essentially this same logic, varying it only by the PictureBox control used (gerbil0 vs. gerbil1) and the boundaries of motion (constrained to the tank vs. constrained to the shelf).<\/font><\/p>\n

 <\/font><\/p>\n

Unlike the sheep example, though, I need to handle the case where the user drags the gerbil (which, if you think about it, gives a whole new meaning to the phrase \u201cmove the mouse\u201d).  <\/span>I want the gerbil to move smoothly with the cursor, so I\u2019ll need to figure out the position of the gerbil with respect to the cursor point, and use that offset whenever the gerbil is moved.  <\/span>The flow is:<\/font><\/p>\n

 <\/font><\/p>\n

(1)<\/font>    <\/span><\/span><\/span>When mousing-down, calculate the offset between the top left corner of the gerbil and the cursor.<\/font><\/p>\n

(2)<\/font>    <\/span><\/span><\/span>When dragging, move the gerbil to the cursor, minus the previously calculated offset.<\/font><\/p>\n

(3)<\/font>    <\/span><\/span><\/span>When releasing the gerbil, figure out where it will fall to (the stop height) and what it will be doing when it gets there (the \u201cnew state\u201d), cache that information, then switch to a \u201cfalling\u201d state.<\/font><\/p>\n

(4)<\/font>    <\/span><\/span><\/span>When done falling (i.e., when cached stop point is reached), switch to the cached \u201cnew\u201d state, and resume the game.<\/font><\/p>\n

 <\/font><\/p>\n

 <\/font><\/p>\n

I’ll highlight the code for the case where the gerbil is facing left.  <\/span>(The facing-right code would be identical, except the gerbil1 control would be used).  So, here we go:<\/font><\/p>\n

 <\/font><\/p>\n

Point 1 retrieves & caches the offsets using the MouseEventArgs passed to the handler, assuming that you\u2019re in a state where you can grab the gerbil (e.g., not when the gerbil is falling, since the gerbil would get scared and bite you):<\/font><\/p>\n

 <\/font><\/p>\n

    <\/span>Private<\/span> Sub<\/span> gerbil_MouseDown(ByVal<\/span> sender As<\/span> Object<\/span>, _<\/span><\/p>\n

ByVal<\/span> e As<\/span> System.Windows.Forms.MouseEventArgs) _<\/span><\/p>\n

Handles<\/span> gerbil0.MouseDown, gerbil1.MouseDown<\/span><\/p>\n

        <\/span>‘ Figure out where the offset into the gerbil is<\/span><\/span><\/p>\n

        <\/span>If<\/span> state = gerbilState.gerbilMovingLeftOutsideCage Or _<\/span><\/span><\/p>\n

         <\/span><\/span> <\/span>state = gerbilState.gerbilMovingLeftInsideCage Then<\/span><\/span><\/p>\n

            <\/span>offx = e.X<\/span><\/p>\n

            <\/span>offy = e.Y<\/span><\/p>\n

            <\/span>state = gerbilState.gerbilFacingLeftBeingDragged<\/span><\/p>\n

            <\/span>‘ (etc.)<\/span><\/span><\/p>\n

 <\/font><\/p>\n

Point 2 simply moves the gerbil along with the cursor, modyfing it by the offset:<\/font><\/p>\n

 <\/font><\/p>\n

    <\/span>Private<\/span> Sub<\/span> gerbil_MouseMove(ByVal<\/span> sender As<\/span> Object<\/span>, _<\/span><\/p>\n

 <\/span>ByVal<\/span> e As<\/span> System.Windows.Forms.MouseEventArgs) _<\/span><\/p>\n

 <\/span>Handles<\/span> gerbil0.MouseMove, gerbil1.MouseMove<\/span><\/p>\n

        <\/span>‘ Move the gerbil to the current cursor position with<\/span><\/span><\/p>\n

        <\/span>‘ respect to the cached offset<\/span><\/p>\n

        <\/span>If<\/span> state = gerbilState.gerbilFacingLeftBeingDragged Then<\/span><\/span><\/p>\n

            <\/span>gerbil0.Left = gerbil0.Left + e.X – offx<\/span><\/p>\n

            <\/span>gerbil0.Top = gerbil0.Top + e.Y – offy<\/span><\/p>\n

            <\/span>‘ (etc.)<\/span><\/span><\/p>\n

 <\/font><\/p>\n

Points 3 has the most complicated logic (if you can call it that), as shown in this excerpt, since we need to figure out where it will drop to and what it will do when it gets there:<\/font><\/p>\n

 <\/font><\/p>\n

    <\/span>Private<\/span> Sub<\/span> gerbil_MouseUp(ByVal<\/span> sender As<\/span> Object<\/span>, _<\/span><\/p>\n

     <\/span>ByVal<\/span> e As<\/span> System.Windows.Forms.MouseEventArgs) _<\/span><\/p>\n

     <\/span>Handles<\/span> gerbil0.MouseUp, gerbil1.MouseUp<\/span><\/p>\n

        <\/span>‘ The user released the gerbil.  <\/span>Figure out where the <\/span><\/span><\/p>\n

        <\/span>‘ gerbil is, and how far it will fall to.<\/span><\/p>\n

        <\/span>If<\/span> state = gerbilState.gerbilFacingLeftBeingDragged Then<\/span><\/span><\/p>\n

            <\/span>‘ If we\u2019re above the tank floor, then fall to <\/span><\/span><\/p>\n

‘ the tank floor so that the gerbil end up walking<\/span><\/p>\n

            <\/span>‘ on the cedar chips inside                       <\/span><\/span><\/p>\n

            <\/span>If<\/span> gerbil0.Left > Tank.Left And<\/span> _<\/span><\/p>\n

               <\/span>gerbil0.Left + gerbil0.Width < Tank.Left + Tank.Width And _<\/span><\/span><\/p>\n

              <\/span><\/span> <\/span>gerbil0.Top + gerbil0.Height <= tankLevel Then<\/span><\/span><\/p>\n

                <\/span>stopheight = tankLevel<\/span><\/p>\n

                <\/span>‘ When we’re done falling, new state should <\/span><\/span><\/p>\n

                <\/span>‘ be inside the cage<\/span><\/p>\n

                <\/span>newstate = gerbilState.gerbilMovingLeftInsideCage<\/span><\/p>\n

            <\/span>Else<\/span> <\/span><\/p>\n

‘ If we are above the shelf, then fall to the shelf<\/span><\/p>\n

                <\/span>If<\/span> gerbil0.Top < shelfLevel Then<\/span><\/span><\/p>\n

                    <\/span>stopheight = shelfLevel<\/span><\/p>\n

                    <\/span>‘ When we’re done falling, new state should be<\/span><\/span><\/p>\n

                    <\/span>‘ on the shelf outside the cage<\/span><\/p>\n

                    <\/span>newstate = gerbilState.gerbilMovingLeftOutsideCage<\/span><\/p>\n

                <\/span>Else<\/span> <\/span><\/p>\n

  <\/span>‘ We must be below the shelf, so fall off the form…<\/span><\/span><\/p>\n

                    <\/span>stopheight = Me<\/span>.Height + gerbil0.Height + 1<\/span><\/p>\n

                    <\/span>‘ When we’re done falling, new state should be<\/span><\/span><\/p>\n

                    <\/span>‘ “Oops, you goofed.”<\/span><\/p>\n

                    <\/span>newstate = gerbilState.gerbilFellOffTheTable<\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

            <\/span>End<\/span> If<\/span><\/span><\/p>\n

            <\/span>state = gerbilState.gerbilFacingLeftFalling ‘ Start falling…<\/span><\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>‘ (Etc.)<\/span><\/p>\n

 <\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/font><\/p>\n

And then back in the timer tick handler, we handle part 4, the <\/font>gerbilFacingLeftFalling <\/span>state, as well as the (not shown) corresponding state if it is facing right:<\/font><\/p>\n

 <\/font><\/p>\n

            <\/span>Case<\/span> gerbilState.gerbilFacingLeftFalling<\/span><\/p>\n

                <\/span>‘ Keep falling until we reach the stop height<\/span><\/span><\/p>\n

 <\/span><\/p>\n

                <\/span>temp = gerbil0.Top + fallRate ‘ Move gerbil down<\/span><\/span><\/p>\n

                <\/span>If<\/span> temp > stopheight Then<\/span> ‘ Don’t fall past the stop height!<\/span><\/span><\/p>\n

                    <\/span>temp = stopheight<\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

                <\/span>gerbil0.Top = temp<\/span><\/p>\n

                <\/span>If<\/span> gerbil0.Top = stopheight Then <\/span>‘ Have we fallen enough?<\/span><\/span><\/span><\/p>\n

                    <\/span>state = newstate ‘ Yes, fall is complete;<\/span><\/span><\/p>\n

 <\/span>‘ switch to cached new state<\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

 <\/font><\/p>\n

Finally, we can control the \u201caction\u201d (if I may dignify it with such a term) by handling the fast\/slow button clicks, disabling the appropriate button when it\u2019s at the slowest or fastest:<\/font><\/p>\n

 <\/font><\/p>\n

    <\/span>Private<\/span> Sub<\/span> Slow_Click(ByVal<\/span> sender As<\/span> System.Object, _<\/span><\/p>\n

      <\/span>ByVal<\/span> e As<\/span> System.EventArgs) Handles<\/span> Slow.Click<\/span><\/p>\n

        <\/span>‘ Make the gerbil go slower and more likely to sit still<\/span><\/span><\/p>\n

        <\/span>freezeRate = freezeRate + 5<\/span><\/p>\n

        <\/span>speed = (100 – freezeRate) \/ 6<\/span><\/p>\n

        <\/span>If<\/span> freezeRate = 100 Then<\/span><\/span><\/p>\n

            <\/span>Slow.Enabled = False<\/span><\/span><\/p>\n

        <\/span>End<\/span> If<\/span><\/span><\/p>\n

        <\/span>Fast.Enabled = True<\/span><\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/span><\/p>\n

    <\/span>Private<\/span> Sub<\/span> Fast_Click(ByVal<\/span> sender As<\/span> System.Object, _<\/span><\/p>\n

      <\/span>ByVal<\/span> e As<\/span> System.EventArgs) Handles<\/span> Fast.Click<\/span><\/p>\n

        <\/span>‘ Make the gerbil go faster and less likely to sit still<\/span><\/span><\/p>\n

        <\/span>freezeRate = freezeRate – 5<\/span><\/p>\n

        <\/span>speed = (100 – freezeRate) \/ 6<\/span><\/p>\n

        <\/span>If<\/span> freezeRate = 0 Then<\/span><\/span><\/p>\n

            <\/span>Fast.Enabled = False<\/span><\/span><\/p>\n

        <\/span>End<\/span> If<\/span><\/span><\/p>\n

        <\/span>Slow.Enabled = True<\/span><\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/font><\/p>\n

And our gerbil game is complete.  <\/span>OK, so maybe it isn’t Baldur’s Gate or Halo, but it does demonstrate the control you have over the objects on your forms.   <\/span>Enjoy!<\/font><\/p>\n

 <\/font><\/p>\n

Both the sheep and the gerbil examples are included below in the attached ZIP file.  Next time, I\u2019ll be continuing the game theme in a new short series, talking about creating objects on the fly as we walk around a virtual house looking for clues.  <\/span>Talk to you then!<\/font><\/p>\n

 <\/font><\/p>\n

–Matt–*<\/font><\/p>\n

gerbil.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Simple Animation in Visual Basic (Matt Gertz) The basics: You’re almost certainly used to placing controls on a form; however, you probably have an expectation that they will stay in place once you put them there.  That need not be the case, however.  Controls have X & Y positions, and you can modify them at […]<\/p>\n","protected":false},"author":258,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,195],"tags":[101,165],"class_list":["post-6353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-matt-gertz","category-visual-basic","tag-matt-gertz","tag-vb2005"],"acf":[],"blog_post_summary":"

Simple Animation in Visual Basic (Matt Gertz) The basics: You’re almost certainly used to placing controls on a form; however, you probably have an expectation that they will stay in place once you put them there.  That need not be the case, however.  Controls have X & Y positions, and you can modify them at […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/6353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=6353"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/6353\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=6353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=6353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=6353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}