Gottlieb's Reel Animation Guide    
Reel animation is graphics intensive but once you've created an animation you can add it to your library and use it over and over again.

 


The first thing you need is a good picture of something you want to animate. If you have a real picture to start with you can use that. The best picture is shot at eye level straight up the table, like you were really playing the pin. For example, if a bumper is on the right side of the table don't shoot the picture straight at the bumper because that will change the perspective when you put it on the VP table.

If you are animating an object that is used on different sides of the table you will need to make a different animation for each, unless they are at the center of the table near the back, otherwise you will notice the difference in perspective. You can't just flip the images since the light and shadow sides will be reversed.

If you don't have a real image to use, or the real image is crap, use VP to create the image then take a screen shot. If the object has jagged edges you can clean up the image, averaging or redrawing the edges to blend it in to the background.

 

 


The next thing you need to do is cut the image out of your picture. Zoom in close with MSPaint and black out anything that isn't the image you want to animate. Use a color that is NOT in the image to make it easier to identify the edges. Then divide the image into the parts that move and don't move. You will have to draw by hand the areas that are hidden.

 

 


Now for the animation to move smoothly you must make sure that EVERY frame is the same size. If the object moves left and right then the frame must be as wide as it moves left and right. Once you have the initial frame image, cut and paste it across as many frames as you want to animate. Make sure the images do NOT overlap! Now you can start animating the frames. In this bumper example, the first frame the metal ring is not visible. In the second frame cut and paste the ring so that it is just hanging below the top of the round bumper plastic, then cut and paste it slightly lower in the next frame, and so on. Make sure the ring is in the same position horizontally but lower vertically, otherwise the ring will look like its moving side to side. Once the rings are animated then you need to replace the bumper cap that was drawn over. Cut and paste the bumper cap over top each bumper you are animating to cover the parts of the ring that should not be visible.

 

 


Next you'll want to cleanup the images. As you can see in the previous picture the ring has a sharp edge which does not look nice. Blend in the edges with the surrounding colors. In this example there are only 4 animation frames. The bumper is normally off except when hit. All four frames are identical in size and the moving metal ring has been blended into the surrounding colors. When you save the animation image you may want to change the pink background to black or white. In certain resolutions the pink is not transparent.

 

 


Now to add the animation to VP. First import the animation image and set the Transparency color the same as the image background color. Then create an EMReel object on the backdrop where the real pop bumper is located. Give it a name, select ReelImage from the drop down, check the Background Transparent box, colors are not important nor is font. The digit range starts with 0 (zero) so if you have 4 animation frames the last frame would be 3. Select the name of the animation Image from the drop down, and uncheck Use Image Grid (unless you are using an animation with LOTS of frames!)

 

 


For animation purposes there is only 1 (one) Reel since there is only 1 object. The width and height should be proportional to the actual frame size, but the Reel Width and Height will vary depending on where the object is on the table. If the animated object is near the back, make the Width and Height proportionally smaller, and if its near the front make them larger. You want NO space around the reels. Then you'll need to move the reel to the exact location where the actual bumper appears on the table. This is hard to judge and you will have to play/stop/adjust the image several times until it looks right on the table. The Motor Steps you don't care about since you are not spinning the reel, and the Interval should be set low. The Timer should not be enabled, but you do want to set an interval of 30 or so since you will want to use the reel's built in timer to animate the reel.

 

 


On the table the bumper should have NO overhang since this the shape of the bumper drawn by VP will not match the shape of your animated bumper. You will create the "shape" of the bumper to hide the ball when it passes behind or under using walls.

 

 


This wall as you can see is oval shaped since the play angle makes the round bumper look oval shaped. The height and thickness is approximately the same as the lower part of the bumper plastic. I use an obvious bright color like yellow for the top and sides because you want to make sure that the shape of the wall is EXACTLY the same as the reel image, otherwise the ball will appear to pass through the bumper. Start with a large wall that is visible behind the reel image on all sides, then move each point in slowly until the wall is exactly the same shape as the bumper.

Here is what it looks like when you play the table. You want to adjust the size and shape of the walls so they exactly hide the reel image, like the bumper on the left.

 

 


This wall matches the shape of the upper circle of the pop bumper. It doesn't have to be any higher than the lower wall, it just has to match the shape of the bumper to block the ball image when it passes below or behind.

To animate the bumpers in the script your code would look like the following:

 

Sub breel1_timer
dim emv ' a local variable

     ' you would need to declare bumpn1 at the beginning of the script
     ' bumpn1 is the frame counter for the animation for bumper1
     ' each bumper has its own frame counter

     emv=bumpn1

     ' if past frame 3 display the previous frames in reverse order

     if emv>3 then emv=6-emv

     ' draw the reel frame

     breel1.setvalue(emv)

     ' animation sequence 1-6 goes like 1(bumper lit) 2 3 2 1 0(bumper unlit)

     bumpn1=bumpn1+1

     ' if last frame then turn off timer

     if bumpn1=6 then breel1.timerenabled=false

End Sub

Sub Bumper1_Hit()

     playsound "jet2"

     addscore 100

     ' Set the next reel frame to be displayed (1=bumper lit)

     bumpn1=1

     ' This starts the timer for the reel to animate the frames

     breel1.timerenabled=true

End Sub


Each animated bumper would have its own Bumper Hit and Timer routines and each has its own frame counter like bumpn1, bumpn2, etc.

 

Animating Flippers

Animating flippers is no different than pop bumpers, lights, or buttons, but it does require a bit more work as far as matching the shape and position of the flippers. The best way to make sure they match is to change the flipper speed in VP so the flippers go very slowly, and take screen shots of the flippers in each position. Then make a bitmap that has them in sequence. Make sure each frame is the same size and is from the exact same coordinates otherwise the flipper will look like its wobbling around. Then take a picture or screen shot from a real pin from exactly the same angle as drawn in VP. If you don't have a real pin to animate the flipper angle then use Photoshop to adjust the perspective, rotate the flipper image, size, etc to match the various angles and shapes of the VP flippers. Sometimes you just have to draw the thing from scratch to get it right. Tables that have zipper flippers are even more work because you have twice as many flipper angles and positions to deal with.

Create, size, and position the EMReels for both flippers the same way you did the reels for pop bumpers. You will create two timer routines to control the flippers. The main difference in the timer routine is the animation count can go forwards or backwards. The timer routines are tied into the flipper keycodes. When you press a flipper you want the flipper timer to be started and the flipper animation count increment to be 1. When you release the flipper you want to start the timer again, but change the animation count increment to -1 so it goes back down. When the flipper reaches the top or bottom you stop the timer. I found the timer interval of 10 to be about right to match flipper speed but yours may vary.

I'm not going to explain this in greater detail because either you'll understand what I'm saying and know what to do or the examples wouldn't help you anyways. VP is a great tool for people with some graphics and programming skills, but making a nice animating bumper or flipper isn't as easy as dropping an image in the editor and cut and paste some code. It takes a lot of trial and error and tweaking to get it to look real. I hope this gives you some idea how its done!

 

Problems to Expect

Reels don't work well when placed next to 3D objects on the table. For example putting an animated pop bumper reel next to a light may cause a dark ring around the light, even though the area in the pop bumper is transparent. Another problem is overlapping reels/decals. As long as the areas overlapping are transparent there is no problem. But if you have one bumper obscured by another, you will find it easier to cut the obstructed bumper into separate reels. For example if the visible part of the obstructed bumper is an L shape, cut the images into a rectangle and a square and make 2 reels. You will have to time them together in the Hit and Timer routines.

Sometimes the two objects are so intertwined that it is best to make one big animated image with both objects in various combinations of animations. This is harder to time. You may want to cheat and only have frames for each one animating seperately so both don't move at the same time, or have 3 animation sequences with each moving by itself and one sequence with both moving. It's not impossible, I've had to do it a few times.

 

Reel Limitations

The reel control has some limitations. For one you can't enter more than 200 frames (0-199) in the control, but for all practical purposes the real limit is 192 (0-191) because for some reason it doesn't display the ones after 191 properly.

Transparent reels don't display properly in 16 bit mode. The transparent area shows up as pink or white or whatever color you used for transparency.

In very high resolutions the dimensions of the screen are not all the same proportion and each video card supports different resolutions. VP tries to scale the table to the resolution but sometimes it makes the table look really wide or really thin. VP does not size the reels the same way when they are drawn so they may not be in the correct place on the table or cover the objects correctly. Even decals can look corrupted in high resolutions.

Reels are based on text boxes and are affected by font sizes. Depending on the resolution and the person's video card the text (and graphics) in the reels may look larger or smaller on other people's machines.

If you have an animation where each frame is fairly large and you try to make an animated reel that is very small out of it, it may not animate properly, the background may not appear transparent, or it may not be displayed at all. You will have to make the animation frames smaller. This may occur when you are trying to use the same animation image for several objects on the screen. The closer reels you will make larger so they appear closer, and the ones that are further back you would make smaller. You may have to make a separate animation image for the close ones and another for the far ones.

And if you mess up just ONE of the frames, make it larger or smaller than the rest, the whole sequence will not be displayed properly. If you are animating a sequence of 10 frames and each frame is 32 pixels, then the last pixels MUST be 319. Take the number of pixles per frame (32) multiply by the number of frames (10) and subtract one since the first pixel is zero (0) for 0-319.

Another problem appears to be related to graphics cards. If you create an animation with frames that are not divisible by 8, on some graphics cards you will see a faint gray or black line on the right edge. Making all of your frame widths divisible by 8 will usually clear this up. Also get a friend with a different video card to test it for you. It may look perfect on your card but not theirs. The problem occurs when you import the images. If an image isn't displayed right on your friend's pc have them reimport the image and save it. If the new version looks good on both machines then it's probably fixed.

Also watch out for transparent holes in the animation. If you set your transparent background color to black, make sure black isn't used in the solid areas or they will appear as holes.

And finally I have found that if you try to make a really long or really tall animation with several frames it may not display properly. If the animation has 2 or 3 frames it seems to work. I've animated objects that are as tall as the playfield, but they only have 2 or 3 frames. But if you want to animate a long DMD or a tall scoreboard you should break it up into separate pieces. This will also reduce the size of the animation image since each frame will not have the same image displayed over and over again.

 

Conclusion

I hope this helps you get started making animated reels. The same principles apply to animated lights, rollovers, targets, you name it. Round targets look great when they bounce when hit. Drop targets look real when they move back and fall down instead of disappear. Lights that are off, dim, lit or change colors can also be made with reels.