Skip to content
Mixing table for easy sprite animations in Three.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
libs Delete g Jun 10, 2019
textures adds a mixer to the texture animator Jun 11, 2019
LICENSE Create LICENSE Jun 12, 2019
SpriteMixer.js remove the textureLoader from the the ActionSprite 'contructor' -> th… Jun 12, 2019
index.html make index load the texture before to call ActionSprite() Jun 12, 2019
tiles_texture.jpg add an exemple texture with a proper name Jun 15, 2019


Based on
Working example here :

Mixing table to play sprite animations in Three.js

The aim is to make visual effects in Three.js games simple : give a path to the texture including the frames of your animation, give the parameters of the animation, and you get an extended THREE.Sprite object, that you can use as a normal Sprite object, but also animate with SpriteMixer's functions.

How to use

Instantiate :

var spriteMixer = SpriteMixer();

Create a actionSprite :

new THREE.TextureLoader().load("texture.png", (texture)=> {
  actionSprite = spriteMixer.ActionSprite(texture, 3, 3, 9, 60);

ActionSprite(texture:THREE.Texture, tilesHoriz:integer, tilesVert:integer, numTiles:integer, tileDispDuration:integer)
	- texture : texture containing all the frames of the animation in a grid.
	- tilesHoriz : number of frames on the horizontal direction.
	- tilesVert : number of frames on the vertical direction.
	- numTiles : total number of frames. As you can see in the exemples,
	  it does not necessarily equal tilesHoriz*tilesVert, for instance
	  if the last frames are empty.
	- tileDispDuration : display duration of ONE FRAME, in milliseconds.

Update in your animation loop:

function loop() {
	renderer.render(scene, camera);

	var delta = clock.getDelta();
        // delta provided by THREE.Clock

Animate your actionSprite :

// make the sprite visible and play it only once

// play the sprite animation in a loop

// stop the action and reset

// pause the action without reset

// let the action finish its current animation, then stop it

// resume the action if it was paused before its end

actionSprite.clampWhenFinished = true;
// make the action stop on last frame when it finishes, reset if false

actionSprite.hideWhenFinished = true;
// set the object.visible = false at last frame if true

The texture including tiles must be in this format : exemple of tiles texture Frames go from top-left to bottom-right. Last frames can be empty.

You can’t perform that action at this time.