Animating Tiled texture

From Unify Community Wiki
(Difference between revisions)
Jump to: navigation, search
m (Text replace - "</csharp>" to "</syntaxhighlight>")
m (Text replace - "<javascript>" to "<syntaxhighlight lang="javascript">")
Line 15: Line 15:
  
 
== JavaScript - AnimatedTextureUV.js ==
 
== JavaScript - AnimatedTextureUV.js ==
<javascript>
+
<syntaxhighlight lang="javascript">
 
var uvAnimationTileX = 24; //Here you can place the number of columns of your sheet.  
 
var uvAnimationTileX = 24; //Here you can place the number of columns of your sheet.  
 
                           //The above sheet has 24
 
                           //The above sheet has 24

Revision as of 20:47, 10 January 2012

Author: Joachim Ante

Description

This script animates a texture containing tiles of an animation. You can give it a framerate to determine the speed of the animation and set how many tiles on x, y there are.

Usage

Attach this script to the object that has a material with the tiled texture. To avoid distortion, the proportions of the object must be the same as the proportions of each tile (eg 1:2 for the sheet below).

Here is an example of how to lay out a texture for it (Thanks to BigBrainz for providing it): Torchanimation 135.png

JavaScript - AnimatedTextureUV.js

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);
}</javascript>
 
== CSharp - SpritSheet.cs ==
This is just a CSharp version of the AnimatedTextureUV.js above.
<syntaxhighlight lang="csharp">public class SpriteSheet : MonoBehaviour 
{
	public int _uvTieX = 1;
	public int _uvTieY = 1;
	public int _fps = 10;
 
	private Vector2 _size;
	private Renderer _myRenderer;
	private int _lastIndex = -1;
 
	void Start () 
	{
		_size = new Vector2 (1.0f / _uvTieX , 1.0f / _uvTieY);
		_myRenderer = renderer;
		if(_myRenderer == null)
			enabled = false;
	}
	// Update is called once per frame
	void Update()
	{
		// Calculate index
		int index = (int)(Time.timeSinceLevelLoad * _fps) % (_uvTieX * _uvTieY);
    	if(index != _lastIndex)
		{
			// split into horizontal and vertical index
			int uIndex = index % _uvTieX;
			int vIndex = index / _uvTieY;
 
			// build offset
			// v coordinate is the bottom of the image in opengl so we need to invert.
			Vector2 offset = new Vector2 (uIndex * _size.x, 1.0f - _size.y - vIndex * _size.y);
 
			_myRenderer.material.SetTextureOffset ("_MainTex", offset);
			_myRenderer.material.SetTextureScale ("_MainTex", _size);
 
			_lastIndex = index;
		}
	}
}
Personal tools
Namespaces

Variants
Actions
Navigation
Extras
Toolbox