Animating Tiled texture

From Unify Community Wiki
(Difference between revisions)
Jump to: navigation, search
(Removing all content from page)
m (Reverted edits by Joseph05408 (Talk); changed back to last version by Ippo-))
Line 1: Line 1:
 +
[[Category: Concepts]]
 +
[[Category: MonoBehaviour]]
 +
[[Category: JavaScript]]
 +
[[Category: Graphics]]
 +
[[Category: Texture]]
 +
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):
 +
[[Image:torchanimation_135.png]]
 +
 +
== JavaScript - AnimatedTextureUV.js ==
 +
<javascript>
 +
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>

Revision as of 19:27, 19 October 2009

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

<javascript> 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>

Personal tools
Namespaces

Variants
Actions
Navigation
Extras
Toolbox