Positioning sprite sheet correctly on to PlaneGeometry

Questions
, ,
1

Basically i am trying to position this texture:

 // global
var annie; 


var runnerTexture = new THREE.ImageUtils.loadTexture( '/G/resources/deathx/ange-min.png' );
annie = new TextureAnimator( runnerTexture, 10, 5, 96, 100 ); 
// texture, #horiz, #vert, #total, duration.

 var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide, transparent: true } );
var runnerGeometry = new THREE.PlaneGeometry(20, 10, 1, 1);
var runner = new THREE.Mesh(runnerGeometry, runnerMaterial);
runner.position.set(0,0,10);
scene.add(runner);

onto this:
var runnerGeometry = new THREE.PlaneGeometry(20, 10, 1, 1);

but i can’t seem to position it right and i am seeing fine lines that play instead of the full image (the width is wrong)
my sprite size is:

76800x400 (96 png images)

three resizes it also can to 16384x85 which i don’t want
here is the TextureAnimator function also:

function TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) 
{	
	// note: texture passed by reference, will be updated by the update function.
		
	this.tilesHorizontal = tilesHoriz;
	this.tilesVertical = tilesVert;
	// how many images does this spritesheet contain?
	//  usually equals tilesHoriz * tilesVert, but not necessarily,
	//  if there at blank tiles at the bottom of the spritesheet. 
	this.numberOfTiles = numTiles;
	texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
	texture.repeat.set( 1 / this.tilesHorizontal, 1 / this.tilesVertical );

	// how long should each image be displayed?
	this.tileDisplayDuration = tileDispDuration;

	// how long has the current image been displayed?
	this.currentDisplayTime = 0;

	// which image is currently being displayed?
	this.currentTile = 0;
		
	this.update = function( milliSec )
	{
		this.currentDisplayTime += milliSec;
		while (this.currentDisplayTime > this.tileDisplayDuration)
		{
			this.currentDisplayTime -= this.tileDisplayDuration;
			this.currentTile++;
			if (this.currentTile == this.numberOfTiles)
				this.currentTile = 0;
			var currentColumn = this.currentTile % this.tilesHorizontal;
			texture.offset.x = currentColumn / this.tilesHorizontal;
			var currentRow = Math.floor( this.currentTile / this.tilesHorizontal );
			texture.offset.y = currentRow / this.tilesVertical;
		}
	};
}

animate:
annie.update(1000 * delta);

I am trying to re-create the running man in this example but using my own sprite instead: Texture Animation (Three.js)

2

Sprite sheet:

(zoom in to see properly)

3

First of solution is separate texture to parts. But need change code of animation which replace texture defineted on which frame to show.
Second solution - video texture.

4

I have a png image sequence also … but i don’t need to seperate the sprite sheet i dont think? as the code already works for sprite sheets and not single image sequence pngs i believe my issue is with positioning …? / covering the plane with 1 image at a time from the sprite…

video texture is definitely not an option because of alpha transparency and poor codec support across browser

5

Maximum texture resolution into browser is 16384. I don’t know another solution instead separating texture.

6

Ahhh i see i didn’t know that how could i go about using an image sequence ? any examples ?

edit: i found this and it looks promising 💃 SpriteMixer for easy sprite animations

7

He cant separate texture

8

Ok so I’ve ended up using this SpriteMixer for easy sprite animations

and changed the sprite sheet into a 11 row by 10 column box everything works perfectly I 1000% recommend using the above for any sprite work