Animating for Video Games

The venerable art of animating still images has existed in some form or another since the 1800s. Today, however, new evolutionary offshoots of the artform make the industry more diverse than ever. Video Games in particular, offer a variety of opportunities and restrictions not found in previous forms of animation.

Regardless of the platform, video games offer a cornucopia of rich animation, be it in the Full Motion Video cut-scenes or the abundant in-game engine animations. FMV can be either hand drawn or CG, and is generated in much the same way one would produce content for film or video. With limited or non-existent user input, FMV sequences are mostly employed for narrative purposes. The in-game engine animations are the real source of the mediums’ potential. It is here that a talented artist is able to tell a story using body language and limited graphics.

“How a character walks (e.g. slouching sadly or bouncing happily) is telling the character’s story,” points out Sam Yip.

Sam Yip is a senior animator at Disney Interactive. His portfolio includes such games as “Pirates of the Caribbean Online,” “Saints Row,” and “Golden Eye: Rogue Agent.” A fan of both traditional animation and recent interactive mediums, he believes the major distinction between games and film lies within the mediums’ objectives. “The goal of [film] animation is to serve a story/narrative, and in video games, the animation’s goal is to serve the game play, so the game player can create his own story.”

While voice over and scripted story sequences are common place in today’s games, the artist’s task is to inject as much personality into the player’s avatar as possible. Yip reminds us that “Video game animations will have a lot of body movements such as running, walking, swinging a sword, and a lot of them will be cycled.” This is where many genre restrictions come into play. Since a player commands the character, an artist is given the task of creating believable movements that can be transitioned to at a moment’s notice. Much of this affects how anticipation is handled.

Anticipation, in both traditional and interactive animation, is how a character physically prepares for a movement. This is a simple process in film and television, since the animator has the storyboard and can prepare accordingly. In games, an animator will be asked to strike a fine balance between instantaneous character response and believable movement.

Technological limitations further challenge this process, such as an engine’s frame-rate. “The anticipations in video game animations could be just a few frames,” reiterates Yip, “if the frame rate is low and those few frames are skipped, then the player will not see the anticipation at all, which lessens the impact and believability of the animation.” This can be overcome by creative planning, and the abbreviation of movements.

Modern games use diverse animation techniques and styles, though the majority achieve 3D animation through Maya and 3DS Max software. This opens up new considerations. In traditional animation, the focus is placed on the action within the frame, yet video games allow us to view the events from nearly any angle, thus requiring a universal approach and wider attention to detail.

As with theatrical CG, the choice between MoCap and Keyframe exists. Some games require a cartoony style that only time-consuming keyed animation can reproduce, while others benefit from the tangible realism of MoCap, though an extensive cleanup process may be necessary.

Video game animation offers a plethora of exciting opportunities and hurtles. For those involved, this digital playground offers a rich and rewarding experience, creating animation that connects to the audience on a more personal level then ever before. (Most sudios also mostly hire full time, rather than by contract!) For those interested in pursuing a career in this field, Sam recommends, “Find your passion, and just do it.”

Mark Garabedian has been an animation aficionado from a young age, having worked his first job mowing lawns in Massachusetts to buy cels. An Emerson College alum, Mark is now a freelance animation writer and member of the Animation Guild, residing in Burbank, California.

Hi, I am Hina Khan, I am a student of 3D Max and CG (Computer Graphics), for more information about my work please visit at : 3dleaks.com

Gif Animator Tutorial: How to Create a Gif Animation With Turn Page-Film Video Effect in Gif Animator?

Use the Turn Page-film Video F/X in Ulead GIF animator to create a GIF animation to draw attention and sustain interest.  Where can you use such an animation?  Web pages, multimedia presentations and e-learning courses are some of the choices. 

Consider an example: Say, you’ve a sale of your e-books at fifty percent discount on your website.  To highlight this info, use a GIF animation, for example, with two objects.  The first object is a text, “SALE”.  And, the second one is again a text, “50% OFF”.  Next, apply the Turn Page-film Video F/X in GIF animator to each of the two objects.  

Set the delay time for each of the two objects and the in-between turn page-film effect frames.  What is delay time?  It’s how long a GIF Animator animation frame will display before moving to the next frame.  That’s it, your animation is ready!  Save it as a GIF file and insert it in your web page.

Step-by-Step Tutorial to Create a GIF Animation with Turn Page-Film Video F/X in GIF Animator

View the Turn Page-Film Video Effect animation.

1.  Start GIF Animator.  The Startup Wizard appears.

The Startup Wizard

………………………………………………………………………………………………………………………………………..

2.  Click Blank Animation.

For this tutorial, I’ve used a canvas size of 233X68 pixels.  If your canvas size is not the same, click the Canvas Size button on the Standard Toolbar.

Click the Canvas Size button (shown highlighted)

The Canvas Size dialog appears.

The Canvas Size dialog

Uncheck the Keep aspect ratio checkbox and set the canvas size to 233X68 pixels.  Click OK.

TIP:  Rather than use two text objects for this animation, you can also use two images.  The images should be of the same dimension for precise results.  

To insert an image:

Click File > Add Image or press the Insert key.  The Add Image dialog appears.

Select an image and click Open.

Click Frame > Add Frame or press Ctrl+Alt+F to add a new frame.

Repeat Steps A and B to insert the second image in the new frame.

Go to Step 13 to create the turn page-film video effec

………………………………………………………………………………………………………………………………………..

3.  Type the first text object:  Click the Text Tool in the Tool Panel.

Click the Text tool (shown highlighted) in the toolbar

Click the cursor anywhere on the canvas.  The Text Entry Box dialog appears.

The Text Entry Box dialog

Select 50 for the text size in the Size field.  Click the B button to type the text in Bold.  Type the text, SALE in the text editor.  Click OK.  The text appears on the first frame.

Type the text size and text and select a text style
 

The text you typed appears on the canvas in frame 1
………………………………………………………………………………………………………………………………………..

4.  Click the Pick Tool in the Tool Panel.  Click the Center Both button in the Alignment Toolbar to center the text both horizontally and vertically.

Click the Pick Tool (shown highlighted) in the Tool Panel

Click the Center Both button (shown highlighted)
………………………………………………………………………………………………………………………………………..

5.  Type the second text object:  Click Frame > Add Frame or press Ctrl+Alt+F to add a new frame.

Click Frame > Add Frame

Click the “eye” square to the right of the image object (rectangle) in the Object Manager Panel to show the rectangle (if not already showing).

Type the text, “50% OFF” using the text tool , and center the text, as outlined in Steps 3 and 4.

Click the “eye” square in the Object Manager Panel and type the text

………………………………………………………………………………………………………………………………………..

6.  Click the rectangle object in the Object Manager Panel.  Make sure the eye icon is displaying in the first square next to the rectangle.  If not, click it.

Click the rectangle object in the Object Manager Panel

………………………………………………………………………………………………………………………………………..

7.  Select a foreground color for the rectangle:  Click the foreground color swatch in the Tools Panel to select a different color for the rectangle (if you wish to change its default white color).  The Ulead Color Picker dialog appears. 

The Ulead Color Picker dialog

Pick a color that contrasts well with the text color.  Click OK.
………………………………………………………………………………………………………………………………………..

8.  Click the Fill Tool in the Tools Panel and then click the rectangle object in the design window.  GIF Animator fills the rectangle with the selected color.

Fill a color for the background of the text

………………………………………………………………………………………………………………………………………..

9.  Add a Neon effect to the first text object:  Click the first frame in the Frame Panel to select it.  Use the Pick Tool, and in the design window click the text object to select it.

Select the text “SALE” in the design window

………………………………………………………………………………………………………………………………………..

10.  Double-click the selected text object and from the context-sensitive menu, click Neon.

Double-click the text and select Neon from the menu

The Neon Settings dialog appears.

The Neon Settings dialog
………………………………………………………………………………………………………………………………………..

11.  Check the Neon checkbox.  Click OK.  GIF Animator adds the neon effect to the text.
………………………………………………………………………………………………………………………………………..

12.  Add the Neon effect to the second text object:  Click the second frame in the Frame Panel.  Use the Pick Tool, and in the design window click the text object to select it.

Click the second frame in the Frames panel to add the neon effect

Repeat Steps 10-11 to add the neon effect.

The neon effect added to the contents of the second frame

………………………………………………………………………………………………………………………………………..

13.  Click the first frame in the Frame Panel to select it.

………………………………………………………………………………………………………………………………………..

14.  In the main menu, click Video F/X > Film > Turn Page-film.  The Add Effects dialog appears.

Click Video F/X > Film > Turn Page-film

The Add Effects dialog

Click OK.  GIF Animator adds fifteen effects frames between the first frame and the last frame.

GIF Animator adds the effects frames in the frames panel

………………………………………………………………………………………………………………………………………..

15.  Play the animation:  Click the Play Animation button in the Frames panel.  The animation starts and loops continuously.  Click the Stop Animation button to stop the animation.
………………………………………………………………………………………………………………………………………..

16.  The animation works a bit fast, right?  To make the first and the last frames pause for more time, right-click the first frame and from the context-sensitive menu, select Frame Properties.  The Frame Properties dialog appears.

Select Frame Properties

The Frame Properties dialog

To delay the first frame for one second, type 100 in the Delay field.  Remember, the value you type in that field is one-hundredth of a second.  So, 100 equal 100/100, which is one second.

Click OK.
………………………………………………………………………………………………………………………………………..

17.  Set the delay time for the last frame also to one second, as above.

Play the animation:  Click the Play button in the Frames Panel.  If the timing is OK, go to next step.  Otherwise, repeat Steps 16-17.
………………………………………………………………………………………………………………………………………..

18.  To apply the Turn Page-film video effect to the Last Frame, click it.

Repeat Step 14, but in the Add Effects dialog, to the turn the page opposite to that of the First Frame, click the relevant page direction arrow button.

………………………………………………………………………………………………………………………………………..

19.  Play the animation:  Click the rewind button and then the play button.

View the Turn Page-Film Video Effect animation.

Written by S Viswakumar
Professional Content Writer and E-Learning Developer

More Animal Video Articles

Wild Animals Video

If you are searching for a wild animals video, then you will come across a range of interesting videos in various high street shops as well as online stores such as Amazon and other suitable locations.

Animal pictures are very popular with individuals of all ages, which is why so many people enjoy watching a wild animals video when they can view their favorite animals in their natural habitat and educate themselves about their survival in the wild.

If you are interested in seeing wild animals in action, there are plenty of websites such as youtube that provide free clips of wild animals video that you can watch in your own time. There are also some cartoons and funny videos of animals as well as those of educational value.  It’s also possible to acquire a variety of wild animal pictures that can be purchased in various locations online.

There are plenty of items apart from dvd’s and videos that have wild animal pictures on them such as useful household and leisure products. They include books, clothing, games, stationery, bedding, posters, curtains and other type of products, which are available to purchase in the high street as well as several stores online.  It is up to you to a search to get an idea of what type of items are available to suit your requirements.

If you are considering purchasing products, it is recommended that you conduct a thorough research of the different types of items available so that you can choose the ideal type of wild animal video to suit your preferences.

Written by Andrea25

Related Animal Video Articles