diff --git a/creator/images/emotes/Animation_area.png b/creator/images/emotes/Animation_area.png new file mode 100644 index 0000000..a48e593 Binary files /dev/null and b/creator/images/emotes/Animation_area.png differ diff --git a/creator/images/emotes/Avatar_File.blend b/creator/images/emotes/Avatar_File.blend index caea1ac..8ca76b1 100644 Binary files a/creator/images/emotes/Avatar_File.blend and b/creator/images/emotes/Avatar_File.blend differ diff --git a/creator/images/emotes/avatar_movement.gif b/creator/images/emotes/avatar_movement.gif new file mode 100644 index 0000000..a62cdaa Binary files /dev/null and b/creator/images/emotes/avatar_movement.gif differ diff --git a/creator/images/emotes/height_right_1.png b/creator/images/emotes/height_right_1.png new file mode 100644 index 0000000..4645664 Binary files /dev/null and b/creator/images/emotes/height_right_1.png differ diff --git a/creator/images/emotes/height_right_2.png b/creator/images/emotes/height_right_2.png new file mode 100644 index 0000000..c2f9db3 Binary files /dev/null and b/creator/images/emotes/height_right_2.png differ diff --git a/creator/images/emotes/height_right_3.png b/creator/images/emotes/height_right_3.png new file mode 100644 index 0000000..0b3314d Binary files /dev/null and b/creator/images/emotes/height_right_3.png differ diff --git a/creator/images/emotes/height_wrong_1.png b/creator/images/emotes/height_wrong_1.png new file mode 100644 index 0000000..3beefb8 Binary files /dev/null and b/creator/images/emotes/height_wrong_1.png differ diff --git a/creator/images/emotes/height_wrong_2.png b/creator/images/emotes/height_wrong_2.png new file mode 100644 index 0000000..cdc730b Binary files /dev/null and b/creator/images/emotes/height_wrong_2.png differ diff --git a/creator/images/emotes/love-grenade.gif b/creator/images/emotes/love-grenade.gif new file mode 100644 index 0000000..b4e40c0 Binary files /dev/null and b/creator/images/emotes/love-grenade.gif differ diff --git a/creator/images/emotes/whack-a-frog.gif b/creator/images/emotes/whack-a-frog.gif new file mode 100644 index 0000000..cccc86d Binary files /dev/null and b/creator/images/emotes/whack-a-frog.gif differ diff --git a/creator/wearables-and-emotes/emotes/creating-emotes.md b/creator/wearables-and-emotes/emotes/creating-emotes.md index 6733e9e..6fee55c 100644 --- a/creator/wearables-and-emotes/emotes/creating-emotes.md +++ b/creator/wearables-and-emotes/emotes/creating-emotes.md @@ -1,9 +1,16 @@ --- +date: 2022-09-01 +title: Creating Emotes description: Tips and guidelines for creating Decentraland Emotes. +categories: + - emotes +type: Document +aliases: + - /emotes/creating-and-exporting-emotes/ +url: /creator/emotes/creating-and-exporting-emotes +weight: 2 --- -# Creating Emotes - This documentation will cover the file specifications, the basics of animation in Blender, the proper way to export an Emote, and how to import one into the Builder. ### Animation Specs Chart @@ -13,25 +20,24 @@ This documentation will cover the file specifications, the basics of animation i | Max Length | 10 seconds (300 frames) | | Animations per File | 1 | | Export Format | .glb | -| Sampling Rate | 2 or 3 (if needed) | +| Sampling Rate | 1 by default (2 or 3 if needed) | | Max File Size | 1 MB | -| Max Animation Distance | 1 meter (in any direction) | -| Max Animation Height | 1 meter | -| Max Texture Size | 1024 pixels | +| Max Animation Distance | 1 meter (front/back, left/right) | +| Max Animation Height | 4 meter | -You can find a more detailed explanation of the animation specifications [**below**](creating-emotes.md#the-animation-specifications). +You can find a more detailed explanation of the animation specifications [**below**](#the-animation-specifications). ## **Resources** This documentation explains the set up for Rig 1.0, its controls, and features. -[Decentraland Blender Rig](https://raw.githubusercontent.com/decentraland/docs/main/creator/images/emotes/Avatar_File.blend) +[Decentraland Blender Rig](/images/emotes/Avatar_File.blend) -{% hint style="info" %} -If you're using Maya you can download this [Maya Rig](https://github.com/decentraland/docs-creator/blob/main/images/emotes/DCL_Maya_Rig.ma) and [picker](https://github.com/decentraland/docs-creator/blob/main/images/emotes/emoteAvatar.pkr) provided by [SparkleStudios](https://www.sparkles.studio/) ❤️. -{% endhint %} +{{< hint info >}} +If you're using Maya you can download this [Maya Rig](/images/emotes/DCL_Maya_Rig.ma) and [picker](/images/emotes/emoteAvatar.pkr) provided by [SparkleStudios](https://www.sparkles.studio/) ❤️. +{{< /hint >}} -## **Before Starting** +# **Before Starting** ## **Frame Rate** @@ -59,99 +65,100 @@ In the rig file, other than the two windows for the viewport (front and side vie With this workspace, you have everything needed to start animating! -![](../../../.gitbook/assets/workspace.png) + + These are the bottom windows. The top one is in the _**Graph Editor,**_ the middle one in the _**Dope Sheet,**_ and the bottom one is the _**Timeline.**_ The top red arrow shows the _**Only Show Selected**_ tool and the bottom one shows the _**Auto Keying**_. -{% hint style="info" %} +{{< hint info >}} **💡 Hint!** Since Blender is highly customizable, this is also a good time to set up the layout that best suits you, adding, adjusting, or removing windows. Each animator has their own preferences, so feel free to edit the layout however you want! -{% endhint %} +{{< /hint >}} -## Getting Started +# Getting Started ### **Starting Pose** In the rig file provided, there’s already an action, the _**Starting_Pose**_. Considering that all avatar actions start from the idle pose, **we really encourage starting your animation from that pose and also using it again in the last frame**. This will make for a better transition from Idle to Emote and a more fluid animation. -{% hint style="info" %} +{{< hint info >}} **💡 Hint!** If you want to do a loop animation, you don’t have to start the animation from the Starting Pose. Feel free to use the pose that makes more sense in your animation!\*\* -{% endhint %} - -## **Ground Reference and Animation Area** - -In order to avoid ground penetration during animation, a plane has been added to the file as a ground reference. Along with the animation area reference, it also helps identify the area that can be used for the animation. For reference, the samller circle on the plane has a radius of 2 meters and the larger one, 4 meters. -![Ground and animation area reference.](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/animation_area_reference.png) +{{< /hint >}} -Ground and animation area reference. +**Animation Area** -The avatar center of gravity is the CTRL_Avatar_UpperBody. The limit to move it around is 1 meter (left, right, front, back), so try to keep it inside the smaller circle during animation. Arms and legs can exceed the small circle up to the larger one. As for the height, as long as the avatar body isn’t outside the box and the root is within the area provided on the file, it should be good to go. +In the provided avatar file, you will find a collection called ***Animation_Area_Reference***. It consists of three objects that will visually help setting the animation limits: ***Animation_Area_Reference***, ***Ground_Reference*** and ***Root_Animation_Area***. -![Avatar centered.](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/animation_area_center.png) +- Animation_Area_Reference is a 4x4 cube, which is the bounding box. Avatar mesh and props should stay within this area through the whole animation. Props can be moved around freely as long as they stay within the cube area. +- Ground_Reference is a plane provided to help checking if there’s ground penetration during the animation. It also contains important info: the smaller circle, which has a diameter of 2 meters, defines the area where the avatar root can be moved. That means that, while on the ground, the avatar can only move 1 meter in each direction: front, back, left and right. +- Root_Animation_Area is a cylinder that defines the area where you can move the avatar root/center of gravity (CTRL_Avatar_UpperBody or Avatar_Hips). The cylinder is 4 meters high, which means the root can go all the way up as long as no mesh is outside of the bounding box. Avatar legs, arms and other body parts can be outside of the cylinder, as long as they are never outside of the Animation_Area_Reference. -Avatar centered. -![Max distance right.](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/animation_area_ok_right.png) +![Animation area reference.](/images/emotes/Animation_area.png) -Max distance right. +To summarize, avatar can move right, left, front amd back and long as the root stays within the cylinder, which means 1 meter in any of the four directions. -![Max distance left.](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/animation_area_ok_left.png) -Max distance left. +![Avatar movement.](/images/emotes/avatar_movement.gif) -![Max distance up.](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/animation_area_ok_up.png) +As for the height, it can go all the way up (max 4 meters) as long as the avatar stays within the bounding box. Below are some cases on avatar height done right (whole body within bounding box) and some done wrong (mesh outside of bounding box). -Max distance up. +| ![](/images/emotes/height_right_1.png) | ![](/images/emotes/height_right_2.png) | +|-----------------------------------------|---------------------------------------------| -Here are some examples of emotes that are within the boundaries. +| ![](/images/emotes/height_right_3.png) | ![](/images/emotes/height_wrong_1.png) | +|-----------------------------------------|---------------------------------------------| -![Spotlight](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/spotlight.gif) -Spotlight +![](/images/emotes/height_wrong_2.png) -![Thalia Dance](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/thalia_dance.gif) +Here are some examples of emotes that are within the animation area boundaries. -Thalia Dance +| ![](/images/emotes/whack-a-frog.gif) | ![](/images/emotes/love-grenade.gif) | +|-----------------------------------------|---------------------------------------------| -{% hint style="info" %} +{{< hint info >}} **💡 Attention!** Watch out for these boundaries because crossing them might cause gameplay issues. -{% endhint %} +{{< /hint >}} -## **Creating an Animation** +# **Creating an Animation** -The blend file has an animation clip ready to be edited: _StartingPose_Avatar_. You can duplicate and rename that animation clip as you see fit. There’s no need to create one from scratch! +The blend file has an animation clip ready to be edited: *StartingPose_Avatar*. You can duplicate and rename that animation clip as you see fit. There’s no need to create one from scratch! -On the _Browse Action_ section, simply click on _**Create A New Action**_ button to duplicate the current animation. To rename the clip, just click on the text and type something else. +On the *Browse Action* section, simply click on ***Create A New Action*** button to duplicate the current animation. To rename the clip, just click on the text and type something else. -Belnder 4.4 introduced _Slotted Actions_, the icon to the right of the _Browse Action_ section from previous versions. There’s no need to mess with that if you’re creating an emote with no prop, so you can just leave it as it is. If you’re animating the avatar, make sure the slotted action is Avatar_Animation. +Belnder 4.4 introduced *Slotted Actions*, the icon to the right of the *Browse Action* section from previous versions. There’s no need to mess with that if you’re creating an emote with no prop, so you can just leave it as it is. If you’re animating the avatar, make sure the slotted action is Avatar_Animation. -![](../../../.gitbook/assets/duplicating_animation.gif) Create a new animation by duplicating the existing one or by clicking on \_\*\*Unlink Action\*\*\_ and then \_\*\*New\*\*\_. + +Create a new animation by duplicating the existing one or by clicking on _**Unlink Action**_ and then _**New**_. ## **Browsing and Deleting Animations** In Blender, you can have multiple animation tracks in the same file. It is possible to browse them by clicking on the Browse Action dropdown menu. All animation with and F (Fake User) will be saved. To delete an animation, press Shift on the keyboard and click on the X. After doing that, the animation will show a 0 next to it, which means that it will be deleted the next time you close Blender or re-open the file. -![](../../../.gitbook/assets/deleting_animation.gif) Browsing animations: The ones with an F will be saved, and the ones with 0 will be deleted. + +Browsing animations: The ones with an F will be saved, and the ones with 0 will be deleted. -Another way of deleting animations without having to reload Blender is by changing the Display Mode from View Layer to Blender File. Expand Actions and delete any unwanted animation by right clicking on them and selecting Delete. +Another way of deleting animations without having to reload Blender is by changing the Display Mode from View Layer to Blender File. Expand Actions and delete any unwanted animation by right clicking on them and selecting Delete. -![](../../../.gitbook/assets/deleting_animation2.gif) + You can delete animations directly from Blender File under Display Mode in the outliner. -{% hint style="info" %} +{{< hint info >}} **💡 Hint!** Do not always edit the same animation track. Before making major changes, just duplicate the animation. That way you have a back up version in case you regret deleting or changing something. This is also a nice way to keep track of the progress made so far! -{% endhint %} +{{< /hint >}} -![](../../../.gitbook/assets/duplicating_animation2.gif) Duplicating animation clips. + +Duplicating animation clips. ## **Naming** @@ -166,25 +173,26 @@ Do not always edit the same animation track. Before making major changes, just d Emote overrides happen when deform bones don’t have a keyframe set in one of the parameters. Without a keyframe, that bone won’t have the information of where it should be, how much it has been rotated and scaled, leaving that channel open. The consequence is that if you play an emote in world and then trigger yours while the previous one was still playing, the information of location, rotation and scale will be overridden by the previous emote, which will cause a combination of them both. Unless this is done in purpose, it will affect your animation, sometimes with a fun result, but others with completely messed up the emote. Below is an example of an emote override. -![](../../../.gitbook/assets/01_emote_override.gif) + -To avoid that, select all layers with bones in them (which can be found in _**Object Data Properties**_ > _**Skeleton**_ > _**Layers**_). Then, in _**Pose Mode**_, leave the timeline cursor in the first frame of your animation and, with your mouse in _**Viewport Display**_, press _**A**_ to select everything. In the _**Graph Editor**_, click twice on the _**Eye**_ icon next to the armature channel to make all channels visible. With all bones selected, press _**I**_ to set a keyframe. Do the same for the last frame. +To avoid that, select all layers with bones in them (which can be found in **_Object Data Properties_** > **_Skeleton_** > **_Layers_**). Then, in **_Pose Mode_**, leave the timeline cursor in the first frame of your animation and, with your mouse in **_Viewport Display_**, press **_A_** to select everything. In the **_Graph Editor_**, click twice on the **_Eye_** icon next to the armature channel to make all channels visible. With all bones selected, press **_I_** to set a keyframe. Do the same for the last frame. -**Make sure to select the deform bones, this is especially important!** The deform bones can be found in the last bottom layer and are shown as green bones in the _**Viewport**_. +**Make sure to select the deform bones, this is especially important!** The deform bones can be found in the last bottom layer and are shown as green bones in the **_Viewport_**. -![](../../../.gitbook/assets/keyframe_bones.gif) Setting keyframes on all bones in the first and last frames prevents emote overrides. + +Setting keyframes on all bones in the first and last frames prevents emote overrides. -## **The Animation Specifications** +# **The Animation Specifications** ## **The Animation Length** The max length of an animation is **10 seconds** or **300 frames**. Remember to keyframe every control’s properties on the first and last frames. -{% hint style="warning" %} +{{< hint warning >}} ⚠️ Channels with visibility turned off in the Graph Editor won’t be keyframed, deleted, or even shown in the Action Editor. Unless it was intentionally done that way, pay extra attention to the visibility. -{% endhint %} +{{< /hint >}} -![](../../../.gitbook/assets/channel_visibility.gif) + Make channels visible before keyframing! @@ -194,7 +202,7 @@ If it is a standard emote (with no prop), the exported file can only have one an ## **Format** -Animations should be exported as .**GLB**. The file can only contain the deforming skeleton and the animation. **Mesh, controls, and any other object should not be exported**. More details on how to export can be found [**below**](creating-emotes.md#exporting). +Animations should be exported as .**GLB**. The file can only contain the deforming skeleton and the animation. **Mesh, controls, and any other object should not be exported**. More details on how to export can be found [**below**](#exporting). ## **Sampling** @@ -206,11 +214,11 @@ The drawback, however, is that the animation will start getting less and less fl Usually, a **sampling rate of 2 or 3** will do the trick. Those numbers can optimize the animation without compromising the quality. -{% hint style="info" %} +{{< hint info >}} **💡 Hint!** If the number of frames of the animation can be divided by the sampling rate, that’s a good thing! It means that the final frame will be baked, preserving the transition from end to start of the animation. -{% endhint %} +{{< /hint >}} ## **File Size** @@ -218,31 +226,31 @@ The max file size is **3 MB**. If the file is over that after exporting, try che If the emote contains any additional 3D models, the textures in these models can't exceed a size of 1024 pixels. -## **Exporting** +# **Exporting** Since we only want the armature and the animation to be exported, turn off the mesh visibility and any object other than the armature before exporting, as shown below: -![](../../../.gitbook/assets/mesh_visibility.gif) + Turn off the mesh visibility before exporting! To export, go to _File_ > _Export_ > _glTF2.0 (.glb, .gltf)_ -![](../../../.gitbook/assets/export_gltf.gif) + For the export settings, expand Include and in Limit to toggle Visible Objects. Then, expand the Data tab, expand Armature and enable Export Deformation Bones Only. -| ![](../../../.gitbook/assets/export_settings.png) | ![](../../../.gitbook/assets/export_settings_GIF.gif) | -| ------------------------------------------------- | ----------------------------------------------------- | +| ![](/images/emotes/export_settings.png) | ![](/images/emotes/export_settings_GIF.gif) | +|-----------------------------------------|---------------------------------------------| -If you need to sample the animation, expand the Animation tab, expand Sampling Animations and choose the number of samples wanted. +If you need to sample the animation, expand the Animation tab, expand Sampling Animations and choose the number of samples wanted. -| ![](../../../.gitbook/assets/sampling_rate.png) | ![](../../../.gitbook/assets/sampling_rate_GIF.gif) | -| ----------------------------------------------- | --------------------------------------------------- | +| ![](/images/emotes/sampling_rate.png) | ![](/images/emotes/sampling_rate_GIF.gif) | +|-----------------------------------------|---------------------------------------------| That’s it for exporting the animation! -## References +# References If you’re still not sure where to start or need some reference or inspiration, here are some animation clips to help you with that. These can be some nice studying material! @@ -264,6 +272,6 @@ If you’re still not sure where to start or need some reference or inspiration, [Chic.glb](https://raw.githubusercontent.com/decentraland/documentation-creators/main/images/emotes/chic.glb) -[Flag_Emote.glb](https://github.com/decentraland/docs/blob/main/creator/images/emotes/Flag_Emote.glb) +[Flag_Emote.glb](/images/emotes/Flag_Emote.glb) -[Flag_Emote.blend](https://github.com/decentraland/docs/blob/main/creator/images/emotes/Flag_Emote_Final.blend) +[Flag_Emote.blend](/images/emotes/Flag_Emote_Final.blend)