Creating an animated character. Creating an animated character Computer game character

21
Mar
2008


Genre: Animated Characters
developer: Oska Software
Medicine: Not required
Platform: Win XP/VISTA
System requirements: Funny animated characters, mostly cute girls, who will live on your desktop. At short intervals they will perform various funny actions, but you can also trigger any action by clicking on the character with the mouse cursor.
(cartoons - the characters pleasantly occupy and entertain while the computer is doing some kind of operation. They don’t interfere when you’re working.)
Description: I searched for a long time, downloaded for a long time, found it and posted it. Thanks to the site http://www.nautilus-position.narod.ru/ (http://nautilus.fastbb.ru)
First you need to install DeskMates (basic) + FatB, then, if desired, everything else. In argive 2D and 3D Animation, as well as live characters

Add. information: First you need to install DeskMates (basic) + FatB


27
Apr
2009

Year of manufacture: 2009
Genre: Postcards
Developer: Samodelka
Number of pictures: 1915
Image resolution: 100px × 100px; 500px × 600px; 400px × 297px, etc.
Picture format:
Description: Postcards for all occasions. From jokes to wishes for a good night's sleep. There are also postcards for the holidays - April 1, March 8, Cosmonautics Day, Happy New Year and much more.
Add. information:


14
Sep
2012

Animated cards

Year of manufacture: 2012
Genre: Postcards
Number of files: 2477
Resolution: 200x286 to 6056x4592
Format: GIF, JPG
Description: A huge number of postcards (static and animated) for a variety of holidays. There are postcards in different languages. ,


29
Aug
2010

Animated avatars!

Year of manufacture: 2008-2010
Genre: Avatars
Number of files: 6220
Resolution: From 22x22 to 150x150
Format: .gif
Description: A bunch of different animated avatars on different topics (fantasy, cartoons, anime, jokes, symbols, road signs, emoticons, from movies, flowers, etc.) The number of avatars is constantly increasing, but the examples remain old! If anyone sees a repetition, please write the name of the file. And I apologize for the fact that the folder “Cartoons and Anime 100x100” is in the archive. Otherwise, you won't be able to upload the torrent. --------


03
Dec
2010

DreamScene Animated Wallpaper

Year of manufacture: 2009

Number of files: 58

Format: wmv, mpg
Platform: Windows Vista, 7 58 animated high quality desktop wallpapers! They fit perfectly and simply fascinate with their beauty and splendor!
Installation: 1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one dream there, click to launch it right click mouse, select Set as Desktop Background. 6. N...


06
Dec
2010

Animated Wallpaper DreamScene "Space"

Year of manufacture: 2010
Genre: Animated desktop wallpaper
Number of files: 22
Resolution: 1280x720, 1920x1080
Format: exe, wmv
Platform: Windows Vista, 7 Collection of magnificent space footage (screensavers).
Installation: 1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one dream there, to launch it, right-click and select Set as Desktop Bacrground. 6. Just throw new dreams to install...


07
Dec
2010

Animated Wallpaper DreamScene "Miscellaneous"

Year of manufacture: 2010
Genre: Animated desktop wallpaper
Number of files: 11
Resolution: 1280x720, 1920x1080
Format: exe, wmv, mpg

Installation: 1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one dream there, to launch it, right-click and select Set as Desktop Bacrground. 6. Just throw new dreams for installation into the same...


08
Dec
2010

Animated Wallpaper DreamScene "Sexy"

Year of manufacture: 2010
Genre: Animated desktop wallpaper
Number of files: 27
Resolution: 1280x720
Format: exe, wmv
Platform: Windows Vista, 7 Collection of magnificent footage (screensavers).
Installation: 1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one dream there, to launch it, right-click and select Set as Desktop Bacrground. 6. To install new dreams, just throw them in the same Windows folder Dre...


09
Jan
2010

Year of manufacture: 2010
Genre: animated wallpaper
Number of files: 140
Developer: DreamScene
Developer's website: www.vistadreams.org/
Interface language: Russian
Platform: vista.7
System requirements:
Processor: Pentium IV
Memory: 512 RAM
Video card: 256 MB Free space on
HDD: 2.83 GB
Resolution: 1280x720
Format: wmv medicine: present
Description: girls space nature waterfalls sea 3D installation1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one...


07
Dec
2010

Animated Wallpaper DreamScene "Nature"

Year of manufacture: 2010
Genre: Animated desktop wallpaper
Number of files: 45
Resolution: 1280x720, 1920x1080
Format: exe, wmv
Platform: Windows Vista, 7 Collection of magnificent footage (screensavers).
Installation: 1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one dream there, to launch it, right-click and select Set as Desktop Bacrground. 6. To install new dreams, just drop them into the same folder...



13
Dec
2010

Animated Wallpaper DreamScene “Miscellaneous” No. 7

Year of manufacture: 2010
Genre: Animated desktop wallpaper
Number of files: 30
Resolution: from 720x480 to 1920x1200
Format: exe, wmv
Platform: Windows Vista, 7 Collection of magnificent footage (screensavers).


13
Dec
2010

Animated Wallpaper DreamScene “Miscellaneous” No. 6

Year of manufacture: 2010
Genre: Animated desktop wallpaper
Number of files: 31
Resolution: from 720x480 to 1920x1080
Format: exe, wmv
Platform: Windows Vista, 7 Collection of magnificent footage (screensavers).
Installation: 1. Run DreamScenes Enabler 1.2.exe as administrator 2. Click Enable 3. Click Finish 4. Restart your computer. 5. Go to the C:WindowsWebWindows DreamScene folder, there will already be one dream there, to launch it, right-click and select Set as Desktop Bacrground. 6. Just throw new dreams for installation into that...


It's an easy way to create animated, interactive user interface designs; as it turns out, you can easily animate almost anything (not just interfaces) with it.

Your first character animation

We will create this friendly ball

First you need to create a vector character in Sketch. You can use my ready-made example (along with the principle example) - download the sources.

Once the character is drawn (I use Sketch), make sure you group all the objects together so you can easily move them around in Principle (you can also group them in Principle, it's up to you). In this example, I grouped left/right arm, left/right leg, body, shadow on the ground, and flag. We'll move these objects into Principle to create our animation.


Grouping Layers in Sketch

Once you have drawn and grouped your character in Sketch, open Principle and select “Import”. The character's artboard will be imported into Sketch. After importing, you will have a new artboard inside Principle.


Our imported character from Sketch

Select the artboard and duplicate it 4 times. Connect each artboard to the next one, and the last one to the first one, using “Auto”. This is what will generate the animation. Each layer on each artboard will animate with the layer of the same name on the next artboard.


Connect each artboard to the next

Once all the artboards are connected, select the arms, legs, torso and other grouped elements that you would like to change on artboards 2 and 4. In the example below, you will see that the 1st and 3rd artboards are the same, and in the 1st and On the 4th artboard, the positions of the objects are slightly different. This creates a seamless animation loop. If you wanted, you could make just 2 artboards, this would be an even simpler option, but we are not looking for easy ways :)


Final animation

That's it, now let's record the animation.

Recording Animation

Principle has a built-in recording tool. However, when previewing, the animation loops. Unfortunately, Principle does not provide simple way to start and stop the animation at the right time. Therefore, it is quite difficult to record a perfectly looping animation. But I found a solution. I record one full animation cycle as a GIF, then import the gif into Photoshop (or any other gif editor) and remove the frames so that the last one becomes equal to the first. Resave the gif and you have a great “cycle”!

What's next?

This is an example of a simple and fast animation. I'm sure the addition more frames, as well as careful movement and alignment of character parts, can really bring the character to life better. Principle offers a ton of options for animation, and in this post I've covered the most basic options. If you create your own characters, share them in the comments - it will be very interesting to see the result.

Shares tips that will help you create high-quality animation faster and more efficiently.

Anyone can be taught use 3D application for creating animations and manipulating curves, IK or blendshapes. But this does not make him an animator, since real animation consists of many components.

Tip #1: Blocking Key Poses

Focus on important character movements, keeping the "whole animation picture" in mind

When it comes to animation, don't try to work out every character's movement instantly. If you constantly focus on one moment, you won't see the whole picture, creating unnatural-looking animation.

In animation, every movement must be harmonious, so it is very important to see the whole picture, focusing on key poses.

Tip #2: Copy-paste keys

In some cases, for example, when working on walking or running cycles, it does not make sense to separately work on mirror poses. Therefore, you can cheat and, for example, simply copy and paste the keys from your left foot to your right. At the same time, remember that first of all you are doing this to speed up the work process itself.

Tip #3: Use a reliable rig

Good 3D animation depends not only on the talent of the animator, but also on the quality of the rig he uses. A quick basic rig will allow you to create basic animations. Therefore, the rig must be customized to suit your specific, highly specialized needs. Unprofessional rigging will only cause you unnecessary problems. Also, the animator should not be able to edit constraints and other systems, since this will simply “kill” the rig.

The best rig is one that allows the animator to animate without thinking about things that are unnecessary to him. It’s so cool when you just take a character and move him in a scene, key, without thinking about all sorts of technical things, when you don’t have to write to the rigger every 5 minutes, asking why the character’s hand was blown to the floor of the screen.

Tip #4: Make the PTTs Work

Animation isn't just about keys. Only with their help it is quite difficult to control the animation. Also, if you put keys in every frame, the scene will become overloaded, the animation will be very difficult to edit, and the character’s movements will be unnatural.

Before you freak out about unnatural animation, experiment with animation curves and tangents. Each key has a PTT switch that can be adjusted and can also be used to control intermediate frames.

Tip #5: Let the app do the work for you

Even if you are working in the most expensive 3D application latest version, you still do animation the traditional way. Moving joints and assigning keys is quite a labor-intensive task, so let the program do the work for you.

This is especially true for secondary animation, since dynamics can be used to render a character's hair, clothing, or tail. This will be calculated automatically, allowing you to focus on the key animation.

Tip #6: Use a proxy model to make your viewport easier

When working on key movements, it is better to use a low-pole proxy model instead of a high-pole model.

A high-pole model can hang a viewport because it must deform and move in the scene using a skeleton or other complex deformers. This becomes especially noticeable if you are playing an animation in real time.

When working on key poses and basic movements, hide the high-pole model and animate a lightweight proxy. This can be either a simplified version of the character or a pair of cubes with the desired proportions. This approach will allow you to carefully develop basic movements that you can then apply to the high-pole model.

Tip #7: The 3 Pillars of Good Animation: Preparation, Action and Reaction

Plan your animation based on the 3 phases: preparation, action and reaction

When working with sequences or animation in general, don't forget about the 3 important phases: anticipation, action and reaction. Almost every movement contains some portion of each of these phases.

For example, before you jump, you bend your knees, or move your arm back before throwing something. This is the preparation phase. A jump or throw is an action. The reaction is bending your knees or moving your arms after landing. The same approach applies to facial animation. To achieve a comical effect, you can exaggerate all movements or facial expressions.

Tip #8: See What Happens Through the Character's Eyes

Don't be afraid to record yourself on camera

The best reference for an animator is video. The ability to constantly view it, pause it, or play it in slow motion will allow you to work out the character’s movements in great detail.

And this is not new. Serious animation studios always film the characters' voice actors as they read the text. This video is then passed on to an animator, who will use the actor's behavior and facial expressions to animate the characters.

This approach is not available to all of us, since we do not have the unlimited capabilities of a film studio. However, we can get up from our chair and at least record a video of how we walk or behave. Try to recreate the scene you are working on yourself, no matter how difficult or difficult it seems to you. This will help you deal with blocking faster and create better animations.

Tip #9: Use a mirror

Your best reference is yourself

Once you've finished animating the character's body, move on to his face. It's best to animate the face at the end. This is a very important part of animation. At this stage, you need to create natural facial expressions that will convince the viewer that the character is really experiencing certain emotions.

Buy yourself a small mirror and look at yourself while you work, make a couple of faces at yourself in it. To create high-quality animation, you need good references, and what reference could be better than yourself?

Tip #10: Reuse Animation

An animation library will help you work faster and more efficiently

This advice applies to all areas of the CG industry. It can also be used in animation.

Creating a high-quality walking or running cycle will take more than one or even two hours of work, so having created it once, use it in subsequent projects. Focus on key poses, then work on them in more detail, making them more varied, and thereby making the character unique.

And finally. Remember that the face needs to be animated last

It was mentioned earlier how important it is to work on the character as a whole, by blocking, defining key poses, then refining them. But this only applies to the animation of the characters' bodies, since facial expressions should be done as a last resort.

In this tutorial we want to talk about the main stages of creating animated characters using Flash programs using the example of developing a character in the game “Learn by Playing” and an avatar for a Web site.

Computer game character

According to the scenario of the game “Learn by Playing,” all actions in it are performed by the main character Kolobok (Fig. 1), who moves around the field (Fig. 2) in search of a diamond.

The point of this game is that the player must choose the path to the goal (diamond), calling by name the objects located to the right, left, above and below the square where Kolobok stands, thus moving the character up and down, to the right -left. For example, in order for Kolobok to move one cell down, in the menu in Fig. 2 you need to select the word “orange”. By choosing the right names in the menu, the player can lead the character to the treasured diamond.

The same principle forms the basis of several themed games. So, in Fig. Figure 3 shows a version of the game dedicated to the study of fractions 1.

1 The program contains 12 topics for study (“Shape. Color. Number”, “Seasons”, “Clocks”, “Birds”, “Animals”, “Calculus”, “Geometric Figures”, “Roman Numerals”, “Fractions” ", "Artist's Palette", " English language", "Musical notation").

Alexander Prokhorov, Mikhail Morozov, Dmitry Bystrov, Elena Andrianova, Andrey Vyaznikov took part in the creation of the game. More detailed information about the game can be obtained at: http://computergames.com.ru/54/7217.html.

As follows from the above scenario, one of the tasks during the development of the game was the creation of the character Kolobok and the animation of his movements.

As an example, the animation of the Kolobok's movements from top to bottom is shown: animation 1.

At the first stage, sketches of the hero’s appearance are created (Fig. 4), as well as sketches of his movements and main actions (Fig. 5).

At the same time, sketches are made that show how the character will look in different game themes. In particular, in Fig. 6. shows a sketch for the topic “Astronomy”, and in Fig. 7 sketch for the topic “Fractions”.

In this case appearance The kolobok is determined not only by aesthetic, but also by technical considerations - how to create a character so that he can be easily animated.

In Fig. 8 it is clear that the character consists of individual elements.

2 this work performed by Elena Adrianova.

This allows you to specify the movement of each element (arms, legs, eyebrows, eyes, etc.) separately. Thus, instead of repeatedly redrawing the character in different positions, it is enough to set automatic animation of the elements that make up it.

Let's take a closer look at what our hero is made of. The "Parts" folder shown in Fig. 9, contains 12 elements (mostly movie clips) that make up Kolobok. For example, left leg Symbol 4d (Fig. 9), right hand Symbol 7d (Fig. 10), etc.

At the same time, individual elements, such as Symbol 12d (Fig. 11), already contain animation movements of the eyebrows and eyes and also consist of separate elements.

In particular, the movie clip Symbol 12d consists of separate components: eyebrows (Symbol 34) (Fig. 12), left eye (Fig. 13). In turn, the movie clip depicting the left eye is based on the “eye” movie clip (Fig. 14).

Thus, the hero is, as it were, assembled from individual parts of the designer.

In order to show how the individual elements that make up the Kolobok move while walking, let’s turn to the figure, which shows the walking cycle in Onion Skinning mode (tracing paper). From Fig. 15 it can be seen that while walking, not only his arms and legs move, but almost all the elements of which he consists. In this case, all elements are animated in the automatic motion animation mode (Motion Tweening) and only the hands (or rather, the lines that connect the hands to the body) are animated in the automatic Shape Tweening animation mode (in Fig. 8, this animation is set in the layers Layer 5 and Layer 7).

In Fig. Figure 16 shows how animation is created when the character moves to the left. This involves many of the same common elements used when animating a character's downward movement.

Kolobok’s movements are animated similarly when moving to the right and up.

In order to diversify the character's movements, various periodically repeated gestures are added. For example, Kolobok puts his hand to his forehead while walking or, looking at the viewer, shakes his finger (Fig. 17).

The main movement options for Kolobok can be seen in this video.

Some character gestures appear in response to player actions. For example, when the player thinks for a long time, the bun begins to yawn. If the answer is incorrect, the character frowns in displeasure, etc.

In order to better understand how this character is animated, you can refer to the source fla file.

Avatar for the site

Often a character that interacts with a visitor helps bring a Web site to life. The simplest example is testing on a website, in which, in addition to verbal comments (or instead of them), the result of the answer is assessed by displaying the mood of the avatar.

Let's look at an example of creating such a character.

On initial stage those moods of the hero that should be involved in the script were selected, and the artist made the corresponding sketches (Fig. 18).

Next, the images were finished in Photoshop. At the same time, a template was created with constant facial contours, into which the features necessary to convey a given mood were inserted. At the same time, the complexion also changed (Fig. 19).

After this, the following interactive video was made in Flash. In this video, we reflected only six frames, that is, we used only part of the images shown in Fig. 18. But in order to understand the principle, this is quite enough. Let's take a closer look at how to create such a video.

In the first frame we place the image of the face “sad” on command File => Import=> Import to stage, and then convert it to vector form using the command Modify=> Bitmap=> Trace Bitmap.

Then, in relation to the first frame, we write a line of code stop(); fig. 20.

This code indicates that the program should not advance to the next frame until the user performs some control action.

So, the top button will contain the code shown in Fig. 21.

The second and subsequent frames are created using the Insert Keyframe command. This command creates on each input frame all the elements from the previous frame, so all we have to do is replace the picture with the next facial expression.

For a more detailed look at this video, you can refer to the original