1. Home
  2. Learning
  3. Getting More Creative
  4. How To Make Animated Textures

How To Make Animated Textures

Animated textures can add a lot of life to materials and allow for some pretty unique effects when used well.

How to make a scrolling texture

Scrolling textures are good for moving water, clouds, and anything constantly moving in one direction.

  • Frames/Cell controls how many frames each cell lasts. This value is based on 30fps, so if this value is set to 30, each cell will last 1 second.
    • To make the animation go faster enter a lower value.
    • To make the animation go slower enter a higher value.
  • Offset is a pixel offset of the texture in X (along the width) and Y (along the height).
  • Direction is how many pixels the image scrolls per frame.
    • You can also use this to change the speed of the animation.
    • To make the animation go faster enter a larger negative or positive number.

Example

Texture Used (256 x 256)

 

Texture Animation Settings

 

Result

 

How to make a cycling texture

Cycling textures are like flipbook animations. So a poof of smoke, a candle burning, or anything that can be animated with frames.

  • Number of Cells is how many frames you want in your animation.
  • Start Cell is which cell the animation starts from.
  • Frames/Cell controls how many frames each cell lasts. This value is based on 30fps, so if this value is set to 30, each cell will last 1 second.
    • To make the animation go faster enter a lower value.
    • To make the animation go slower enter a higher value.
  • Cell Size is the size in pixels of each frame.
    • The sizes must be powers of  two (see ‘Notes on texture dimensions’ below)
  • Offset is a pixel offset of the texture in X (along the width) and Y (along the height).

Example

Texture Used (256 x 256)

 

Texture Animation Settings

 

Result

 

Notes on texture dimensions

For performance purposes textures are stored and rendered at specific dimensions that are based on the power of two. The texture animation system is also based on power of two dimensions. Because of this it is good practice to use textures that are power of two dimensions and understand how textures are resized by IMVU when they are not power of two dimensions. Furthermore, you must use power of two values for the Cell Size when making Cycling texture animations.

What are power of two dimensions?

The power of two dimensions for IMVU are textures with width or height of  2, 4, 8, 16, 32, 64, 128, 256, or 512 pixels.

The rules for animated textures

  • Any dimension (width or height) will be bumped up to the next power of two with a maximum of 512 and any dimension above 512 will be set to 512, except as described below for square and non square textures.
    • Examples:
      • 100 x 120 becomes 128 x 128
      • 100 x 473 becomes 128 x 512
      • 100 x 1024 becomes 128 x 512
  • Square textures with dimensions greater than 128 x 128 will be set to 256 x 256.
    • Examples:
      • 200 x 200 becomes 256 x 256
      • 473 x 473 becomes 256 x 256
      • 1024 x 1024 becomes 256 x 256
  • Non square textures with width and height greater than 256 will be set to either 256 x 512 or 512 x 256.
    • Examples:
      • 300 x 320 becomes 256 x 512
      • 300 x 1024 becomes 256 x 512
      • 320 x 300 becomes 512 x 256
      • 1024 x 300 becomes 512 x 256

For more info on power of two and texture resolution check out the tutorial on Texturing Optimization and Best Practices

 

More info on texture animation

For more a more in-depth explanation of texture animation, check out our Learning Session 4

Updated on July 21, 2023

Was this article helpful?

Related Articles

Discuss this!
Ask questions and get answers in our Creator Discussions.
BROWSE DISCUSSIONS