Sprite Animation - Problem with image progression

Question

Hey all,

First off, thanks to everyone who's active and answering on this site. Many hours of work saved through these forums - greatly appreciated.

So what I'm trying to accomplish is a simple 2.5D sidescroller game for the sake of learning Unity/javascript more in depth. I'v been successful in most areas so far - character can move left/right, near/far, jump, etc. I've also got sprite sheets functioning properly for the most part.

Where I run into the problem is getting the sprite sheet to play ONLY a specific range of images, and NOT the entire sheet. I have 25 total images on my sprite sheet. The first image is a box describing the action of the animation, with the following 24 frames being the animation. I'd like the sprite to SKIP the first frame, and play the remaining 24. That means skip frame 1, and play 2-25.

Here's the function that handles the U/V offset to animate the sprite:

 function aniSprite (columnSize, rowSize, colFrameStart, rowFrameStart, totalFrames, framesPerSecond)
 {
     var index : int = Time.time * framesPerSecond;            //Time control FPS
     index = index % totalFrames;
     
     var size = Vector2 (1.0 / columnSize, 1.0 / rowSize);    //Establishes X/Y coordinate values for texture scale
         
     var u : int = index % columnSize;
     var v : int = index / columnSize;
     var offset = Vector2 ((u + colFrameStart) * size.x, (1.0 - size.y) - (v + rowFrameStart) * size.y);    //Establish time dependent X/Y coordinates for the texture offset
 
     renderer.material.mainTextureOffset = offset;        //Applies offset value to texture
     renderer.material.mainTextureScale     = size;            //Applies scale value to texture
 }

And here's an excerpt of the code I have that calls the above script to perform that animation function:

             //Idle
             if (velocity.x == 0 && velocity.z == 0)            //If player is not moving...
             {
                 renderer.material = aniMav [0];                //...changes to specified material (sprite sheet)...
                 aniPlay.aniSprite (5, 5, 1, 0, 24, 24);        //...call aniSprite script to perform function.
             }

If you notice, the aniPlay.aniSprite function is followed by (5, 5, 1, 0, 24, 24). As far as I'm concerned, this means the sprite sheet is 5 columns wide, 5 rows down, column start = 1, row start = 0, 24 total frames @ 24 FPS. But it's just not working properly. It ends up skipping every image that resides in the first column (so if my sprite sheet is 5x5, it skips 1, 6, 11, 16, and 21).

I'm wondering if this is a problem with the modular function %? Any help is greatly appreciated. Thank you for sticking around for the entire post :)

-Clopay

Answer 1

I've got it!

Here's the code from before:

 function aniSprite (columnSize, rowSize, colFrameStart, rowFrameStart, totalFrames, framesPerSecond)
 {
     var index : int = Time.time * framesPerSecond;        //Time control FPS
     index = index % totalFrames;
 
     var size = Vector2 (1.0 / columnSize, 1.0 / rowSize);  //Establishes X/Y coordinate values for texture scale
 
     var u : int = index % columnSize;
     var v : int = index / columnSize;
     var offset = Vector2 ((u + colFrameStart) * size.x, (1.0 - size.y) - (v + rowFrameStart) * size.y);    //Establish time dependent X/Y coordinates for the texture offset
 
     renderer.material.mainTextureOffset = offset;   //Applies offset value to texture
     renderer.material.mainTextureScale     = size;         //Applies scale value to texture
 }

And here's my updated code:

 function aniSprite (columnSize, rowSize, startFrame, endFrame, framesPerSecond)
 {
     var index : int = Time.time * framesPerSecond;            
     index = index % (endFrame - startFrame) + startFrame;           //This is new!!
     
     var size = Vector2 (1.0 / columnSize, 1.0 / rowSize);
     
     var u : int = index % columnSize;                    
     var v : int = index / columnSize;                        
     var offset = Vector2 (u * size.x, (1.0 - size.y) - (v * size.y));     //This is new!!
     
     renderer.material.mainTextureOffset = offset;            
     renderer.material.mainTextureScale     = size;                
 }

Basically, what I changed is the way the code handles the frames. Instead of having to input a starting frame and a total frame amount, you input a starting frame and an ending frame. The sprite animation loop begins on the specified start frame, plays through to the end frame, and starts back on the beginning frame. It's actually a bit less code, too.

Hope this helps anyone out there with a similar problem!

-Clopay

Sprite Animation - Problem with image progression

1 Reply

Your answer

Follow this Question

Related Questions