Texture SRT Animation

This page uses sample data to describe basic settings for texture SRT animations.

Texture SRT Animation

This section covers Scale, Rotate and Translate animations of a texture UV.

Taking the first letter from each transformation, this is called an "SRT animation."

Texture SRT animations can be created and edited on the CurveEditor panel of CreativeStudio.

For details on the CurveEditor panel, click here.

Description of Curve Editor Panel Axes

Settings made for the vertical axis and horizontal axis on the CurveEditor panel are used to create texture SRT animations as follows.

Texture SRT animation settings vary greatly depending on how the texture coordinates being used are calculated.
The method used to calculate texture coordinates can be changed using texture settings on the Material panel.

The description in this tutorial is based on the method of calculating texture coordinates used by Maya.

For details on the texture coordinate systems used by other 3DCG tools, click here.

Animation Vertical axis and horizontal axis of CurveEditor Description of Setting
Scale Vertical axis The size of the texture UV is set using X and Y.
X: The scale of X (U) increases when the curve heads in the negative direction. Its scale decreases when the curve heads in the positive direction.
Y: The scale of Y (V) increases when the curve heads in the negative direction. Its scale decreases when the curve heads in the positive direction.
Horizontal axis Number of frames (number of frames to animate the texture)
Rotate Vertical axis Rotates counterclockwise around the texture center when negative, and rotates clockwise when positive.
Horizontal axis Number of frames (number of frames to animate the texture)
Translate Vertical axis The translate of the texture UV is set using X and Y.
X: Moves the texture to the left when the curve heads in the negative direction, and moves it to the right when the curve heads in the positive direction.
Y: Moves the texture down when the curve heads in the negative direction, and moves it up when the curve heads in the positive direction.
Horizontal axis Number of frames (number of frames to animate the texture)

Sample Configuration

This page uses ToyButterfly sample data to confirm texture SRT animation settings.

  1. Loading sample data
  2. Checking the CurveEditor panel
  3. Creating and editing texture SRT animations

Loading sample data

On the CreativeStudio menu, select File > Open > Intermediate file and open toy_mt.cres.

" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyButterfly/ToyButterfly.cres "

Butterfly in wooden frame

In the ToyButterfly sample, a butterfly is seen to flutter around inside a wooden frame.

The texture pattern animation is configured by applying UV translate and rotate to the butterfly texture.

Confirm that the butterfly is animated to flutter around by pressing the Play button at the bottom right of the CreativeStudio main window.

Checking the CurveEditor panel

SRT animations are created on the CreativeStudio CurveEditor panel.

Select the ButterflyBtfryC material displayed in the Contents panel to open the CurveEditor panel.

Figure 1 Select the Material on the Content Panel

Texture Animation 01

On the CreativeStudio menu, select Window > CurveEditor to open CurveEditor. CurveEditor will open in a separate window as shown in Figure 2.

Figure 2 CurveEditor Panel

Butterfly in wooden frame

Setting parameters for which a curve is set are displayed in bold in the graph tree view of the CurveEditor panel.

An animation is configured for the setting parameters given in Table 1 in ToyButterfly sample data.

Table 1 Parmeter Settings for Which a Curve is Set in ToyButterfly Sample Data

Setting Content
TextureMappers[0].Texture A texture pattern animation is set.
TextureCoordinators[0].Rotate A texture UV rotate animation is set.
TextureCoordinators[0].Translate A texture UV translate animation is set using X and Y.

Creating and editing texture SRT animations

Here, we will actually edit an SRT animation using ToyButterfly.

We will confirm how translate and rotate animations are edited using the existing curves.

As for the scale animation, we will actually create a new animation using the CurveEditor panel.

Editing a translate animation

A translate animation is set for X (horizontal translate) and Y (vertical translate). This animation causes the butterfly to fly from its resting place, flutter about irregularly, and then return.

Selecting TextureCoordinators[0].Translate in the graph tree view on the CurveEditor panel will display the translate animation curve shown in Figure 3 in the graph view.

Figure 3 Translate Animation Curve

Translate animation for butterfly in wooden frame

Select the graph view and press the A key. The display will be arranged to show all keys currently set.

The translate animation is set using the above curve.

Frame Axes to be animated Description of Setting
0 ~ 53 X (horizontal translate) The butterfly texture does not move from its start position because there are no changes to settings during these frames.
Y (vertical translate) The butterfly texture does not move from its start position because there are no changes to settings during these frames.
54 ~ 94 X (horizontal translate) The butterfly texture moves to the left because the curve is heading in the negative direction.
Y (vertical translate) The butterfly texture moves down because the curve is heading in the negative direction.
95 ~ 159 X (horizontal translate) In the end, the butterfly returns to the animation start position because the curve has turned positive.
This setting results in an animation where the butterfly continues moving to the right and returns to its starting position in the end.
Y (vertical translate) After the curve first heads negative, it is again made to head positive, and returns to the animation start position in the end.
This setting results in an animation where the butterfly moves up and down and returns to its starting position in the end.

The behavior of translate animations varies depending on the method used to calculate texture coordinates set on the material Properties panel.

Editing animations on the CurveEditor panel

Here, we will actually edit the translate animation using the CurveEditor panel.

Change settings

Selecting the curve to be edited in the graph tree view on the CurveEditor panel or selecting the the range of keys to be edited on the graph view will cause the curve to turn yellow, indicating that it can be edited.

Sample Configuration
Move the key located in Frame 53 for the Y-axis (vertical translate) of TextureCoordinators[0].Translate to Frame 30. This changes the translate start timing for the butterfly in the vertical direction only.

Figure 4 Y-axis Curve of TextureCoordinators[0].Translate

Editable Curve Image

Confirm that the translate animation for the butterfly changes in the preview window when keys are edited.

Editing a rotate animation

An animation that changes the orientation of the butterfly according to its direction of movement has been set for the rotate animation.

Selecting TextureCoordinators[0].Rotate in the graph tree view on the CurveEditor panel will display the rotate animation curve shown in Figure 4 in the graph view.

Select the graph view and press the A key. The graph view will be arranged to show all keys.

Figure 5 Rotate Animation Curve

Rotate animation for butterfly in wooden frame

The rotate animation is set using the above curve.

Frame Description of Setting
0 ~ 53 During this period, the butterfly texture continues to fly straight because the vertical axis value remains 0.
54 ~ 73 The curve heads in the negative direction.
This setting causes the butterfly to rotate and face toward the left. At this time, the translation animation causes the butterfly to move toward the lower left.
74 ~ 99 From here, the curve heads in the positive direction.
This setting causes the butterfly to rotate and face toward the right. At this time, the translation animation causes the butterfly to move toward the upper right.
100 ~ 159 From here, the curve repeatedly heads positive and negative according to the direction of movement of the butterfly.
Sample Configuration

If the keys of the curve are all reversed, the butterfly will rotate in the opposite direction of its direction of movement.

Creating a scale animation

Now, we will try creating an actual scale animation.

We will create an image of the butterfly in the ToyButterfly sample flying around in the same position (height).

We will use a scale animation to make the butterfly appear to fly toward the viewpoint.

Select TextureCoordinators[0].Scale in the graph tree view on the CurveEditor panel.

X and Y can be displayed by opening TextureCoordinators[0].Scale.

Figure 6 The Curve for TextureCoordinators[0].Scale

Scale animation for butterfly in wooden frame

X and Y shown here are the U and V of the texture.

At this point, nothing is happening in the graph view. Press the S key to create keys as shown in Figure 6 below.

Because the scale animation for ToyButterfly will animate X and Y at the same timing, the shape of the curves is the same.

For details on Curve Editor shortcut keys, click Here.

Figure 7 Scale Animation Curve

Scale animation for butterfly in wooden frame

The flow of the curve to be created is given below.

Frame Description of Setting
0 ~ 50 The key value remains 1 for both X and Y. The texture UV scale does not change because no changes have been made to the curve.
51 ~ 120 A key of 0.5 is created in Frame 120 for both X and Y. The curve heads in the negative direction.
This setting causes the scale of the texture UV of the butterfly to increase each frame. It reaches its largest size in frame 120.
By making the texture UV larger, the flying buttefly is made to appear to fly toward the viewpoint.
121 ~ 200 A key of 1 is created in Frame 170 for both X and Y. The curve heads in the positive direction.
This setting causes the scale of the texture UV of the butterfly to decrease each frame. It reaches the same scale as when it started in frame 170.
The flying butterfly is seen to return to its original position.

Curve Creation Hint
Use the copy function when creating multiple curves.
Ctrl+C : Copies the curve selected on the CurveEditor panel.
Ctrl+V : Pastes the copied curve.

Once a curve has been created, the animation is played by CreativeStudio.

Unlike before the curve was created, by applying a scale animation to the texture UV of the flying butterfly, it now appears to fly toward the viewpoint.

Sample Configuration

Moving the key in Frame 120 to any other position on the CurveEditor panel allows you to change the size of the butterfly and the timing at which it grows larger.


CONFIDENTIAL