- Home /
How to animate a texture
Hey, I'm pretty much new to Unity and I'm using the free version.
I have made a series of about 40 pictures of water moving. For example:
alt text
(Not sure if they're the best examples out of the lot)
Now, I've got my plane and I've found a script online (unity community)
#pragma strict
var uvAnimationTileX = 24; //Here you can place the number of columns of your sheet.
//The above sheet has 24
var uvAnimationTileY = 1; //Here you can place the number of rows of your sheet.
//The above sheet has 1
var framesPerSecond = 10.0;
function Update () {
// Calculate index
var index : int = Time.time * framesPerSecond;
// repeat when exhausting all frames
index = index % (uvAnimationTileX * uvAnimationTileY);
// Size of every tile
var size = Vector2 (1.0 / uvAnimationTileX, 1.0 / uvAnimationTileY);
// split into horizontal and vertical index
var uIndex = index % uvAnimationTileX;
var vIndex = index / uvAnimationTileX;
// build offset
// v coordinate is the bottom of the image in opengl so we need to invert.
var offset = Vector2 (uIndex * size.x, 1.0 - size.y - vIndex * size.y);
renderer.material.SetTextureOffset ("_MainTex", offset);
renderer.material.SetTextureScale ("_MainTex", size);
}
Now to my question, how can I turn these PNG's into one animation and put it onto my water plane so I can get realistic looking water without using the pro feature.
Sorry for the length question,
Thanks in advance, CMNatic
Not sure where you are having a problem. Note if you don't want to put all of these textures into a single texture, you can animate the individual images using this script:
http://wiki.unity3d.com/index.php/Texture_swap_animator
You will drag and drop the textures (in order) into the 'frames' array in the Inspector.
It worked like a charm! Thanks so much for your answers. Can I be cheeky? :D
I've got it working but it's understandably all dis-configured, is there anyway that I can scale all the frames so that they look nice and proper on any size plane?
Thanks in advanced, C$$anonymous$$Natic
Answer by Owen-Reynolds · Jan 22, 2014 at 04:15 PM
That code is (I think) for animating a spritesheet. That's a standard trick, invented long before Unity. You can look up examples and how to make and use them anywhere. Then, those top two lines about TileX and TileY should make complete sense, including what you need to change them to.
@Owen Reynolds - The source is from the wiki, and you are right it is animating a spritesheet:
http://wiki.unity3d.com/index.php?title=Animating_Tiled_texture
Answer by listener · Jan 22, 2014 at 04:52 PM
Like Owen said, it's spritesheet animation. Basically rough steps would be:
Combine all images and make spritesheet x by y
Assign spritesheet texture to object you want to use
Offset texture by x amount and by y amount
For example you have 40 images you can make spritesheet 6x7 last row will have only 4 images. Since Unity UV goes from 0 to 1 your X offset will be 1/6=0.166 and Y offset 1/7= 0.142 So now you just offset by .166 till the last image then increment Y offset by .142 and call this routine X times per second.
Here is simple example in Documentation