Skip to content

Commit

Permalink
deploy: ae88aa7
Browse files Browse the repository at this point in the history
  • Loading branch information
Luca3317 committed Dec 11, 2024
1 parent 75b70ea commit e8e78fd
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 208 deletions.
2 changes: 1 addition & 1 deletion index.json
Original file line number Diff line number Diff line change
Expand Up @@ -982,7 +982,7 @@
"manual/tmpanimator_gettingstarted.html": {
"href": "manual/tmpanimator_gettingstarted.html",
"title": "Getting started with TMPAnimator | TMPEffects documentation",
"keywords": "Getting started with TMPAnimator After adding TMPEffects to your project, add a TMPAnimator component to a GameObject with a TMP_Text component (either TextMeshPro - Text or TextMeshPro - Text (UI)). Applying your first animation Write some placeholder text in the TextMeshPro's component textbox. Analogous to TextMeshPro's built-in rich text tags (e.g. <color>, <s>), you can add animations to your text by simply adding animation tags. Try adding <wave> before your placeholder text, and then hitting the Toggle Preview button in the TMPAnimator's inspector. In the scene and game view, you should now see that your text is being animated. It should look something like this: Your browser does not support the video tag. Warning If the <wave> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use the default database by toggling Use default database in the TMPAnimator inspector's Animations foldout. ⚠️ If the <wave> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use the default database by toggling Use default database in the TMPAnimator inspector's Animations foldout. You can close the animation using </wave> . Only text between the opening and closing tag is animated. Modifying the animation Optionally, you can pass various parameter to animation tags. For example, the <wave> tag supports amplitude and uniformity , among others. You could modify the tag like so: <wave amplitude=10 uniformity=0.5> , which should result in something like this: Your browser does not support the video tag. Try to play around with these two values to get something you like! Theres a lot more customization you can apply for almost all animation tags; a complete overview of all tags and their respective parameters can be found in Built-in animations . Stacking animations First, close the <wave> if you haven't already. After the closing tag, add another tag, <palette> , as well as some text after this tag that will be animated by it. Your text should look like this now: \"<wave> *Text* </wave> <palette> *More text* </palette>\", although you will notice the last closing tag is completely optional in this case. The animated text should look like this: Your browser does not support the video tag. If you now remove the closing </wave> tag, the second text will be animated by both tags (assuming the Animations override toggle in the Animator settings foldout is set to false, which it will be by default). It should look something like this: Your browser does not support the video tag. In this manner, you can stack a (theoretically) limitless amount of animations. Of course, there's no guarantee all combinations will mesh well together 😉 If you switch the Animations override toggle in the TMPAnimator's inspector to true, the second text will be animated as before. This toggle only defines the default behavior of animation tags; you can decide whether a tag should override the previous tags individually by adding the override parameter to a tag, like so: <palette override=true> . All animation tags support this parameter. Late animations / second pass Another parameter supported by all animation tags is late , and is used like so: <wave late> . If set, the animation will be applied in a second pass within the TMPAnimator, meaning it will be applied after all animations that do not have this parameter. You will not need this parameter in the large majority of cases. It is useful primarily for when you need the mesh data of the character to consider the changes made by the other animations. For example, the flashlight effect shown below needs the late parameter to work correctly, as it operates on the vertex positions of the characters. If it was applied before the wave animation, the flashlight would use the incorrect, initial vertex positions. Your browser does not support the video tag. More information about how animations work (and how to create your own) can be found in Creating Animations ."
"keywords": "Getting started with TMPAnimator After adding TMPEffects to your project, add a TMPAnimator component to a GameObject with a TMP_Text component (either TextMeshPro - Text or TextMeshPro - Text (UI)). Applying your first animation Write some placeholder text in the TextMeshPro's component textbox. Analogous to TextMeshPro's built-in rich text tags (e.g. <color>, <s>), you can add animations to your text by simply adding animation tags. Try adding <wave> before your placeholder text, and then hitting the Toggle Preview button in the TMPAnimator's inspector. In the scene and game view, you should now see that your text is being animated. It should look something like this: Your browser does not support the video tag. Warning ⚠️ If the <wave> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use the default database by toggling Use default database in the TMPAnimator inspector's Animations foldout. ⚠️ If the <wave> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use the default database by toggling Use default database in the TMPAnimator inspector's Animations foldout. You can close the animation using </wave> . Only text between the opening and closing tag is animated. Modifying the animation Optionally, you can pass various parameter to animation tags. For example, the <wave> tag supports amplitude and uniformity , among others. You could modify the tag like so: <wave amplitude=10 uniformity=0.5> , which should result in something like this: Your browser does not support the video tag. Try to play around with these two values to get something you like! Theres a lot more customization you can apply for almost all animation tags; a complete overview of all tags and their respective parameters can be found in Built-in animations . Stacking animations First, close the <wave> if you haven't already. After the closing tag, add another tag, <palette> , as well as some text after this tag that will be animated by it. Your text should look like this now: \"<wave> *Text* </wave> <palette> *More text* </palette>\", although you will notice the last closing tag is completely optional in this case. The animated text should look like this: Your browser does not support the video tag. If you now remove the closing </wave> tag, the second text will be animated by both tags (assuming the Animations override toggle in the Animator settings foldout is set to false, which it will be by default). It should look something like this: Your browser does not support the video tag. In this manner, you can stack a (theoretically) limitless amount of animations. Of course, there's no guarantee all combinations will mesh well together 😉 If you switch the Animations override toggle in the TMPAnimator's inspector to true, the second text will be animated as before. This toggle only defines the default behavior of animation tags; you can decide whether a tag should override the previous tags individually by adding the override parameter to a tag, like so: <palette override=true> . All animation tags support this parameter. Late animations / second pass Another parameter supported by all animation tags is late , and is used like so: <wave late> . If set, the animation will be applied in a second pass within the TMPAnimator, meaning it will be applied after all animations that do not have this parameter. You will not need this parameter in the large majority of cases. It is useful primarily for when you need the mesh data of the character to consider the changes made by the other animations. For example, the flashlight effect shown below needs the late parameter to work correctly, as it operates on the vertex positions of the characters. If it was applied before the wave animation, the flashlight would use the incorrect, initial vertex positions. Your browser does not support the video tag. More information about how animations work (and how to create your own) can be found in Creating Animations ."
},
"manual/tmpanimator_sceneanimations.html": {
"href": "manual/tmpanimator_sceneanimations.html",
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -2586,7 +2586,7 @@
"output": {
".html": {
"relative_path": "manual/tmpanimator_gettingstarted.html",
"hash": "YNjVUvGygxnnJXrRz5C0hjJtIgTq/lTwlpL8aqGvPx8="
"hash": "s+Vq0b9A+FO0d/5vASZb8lswZaqE7VniH7ykB/WkgFU="
}
},
"is_incremental": false,
Expand Down
2 changes: 1 addition & 1 deletion manual/tmpanimator_gettingstarted.html
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ <h2 id="applying-your-first-animation">Applying your first animation</h2>
Your browser does not support the video tag.
</video>

<div class="WARNING"><h5>Warning</h5><p>If the <mark style="color: lightgray; background-color: #191a18">&lt;wave&gt;</mark> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use
<div class="WARNING"><h5>Warning</h5><p><span class="emoji" shortcode="warning">⚠️</span> If the <mark style="color: lightgray; background-color: #191a18">&lt;wave&gt;</mark> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use
the default database by toggling <mark style="color: lightgray; background-color: #191a18">Use default database</mark> in the TMPAnimator inspector&#39;s <mark style="color: lightgray; background-color: #191a18">Animations</mark> foldout.</p>
</div>
<p><span class="emoji" shortcode="warning">⚠️</span> If the <mark style="color: lightgray; background-color: #191a18">&lt;wave&gt;</mark> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use
Expand Down
Loading

0 comments on commit e8e78fd

Please sign in to comment.