topical media & game development
mobile-query-three-plugins-minecraft-examples-spritesheet.htm / htm
<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle.js"></script>
<script src="../tquery.spritesheet.js"></script>
<body><script>
var world = tQuery.createWorld().boilerplate().start();
tQuery.createCube().addTo(world)
.setBasicMaterial().color(0x000000).wireframe(true).back();
world.tRenderer().setClearColorHex(0x444444,1);
//world.tCamera().position.z = 2;
// Now we need to init the spritesheet.
// The image is contains 3 explosions of 17 sprites each.
// one explosion per line, each line containing 17 sprites.
// each sprite is 32 pixels by 32.
var spritesheet = tQuery.createSpritesheet({
url : 'images/items/explosion.png',
imgW : 32*17,
imgH : 32*3,
spriteW : 32, // the width of each sprite
spriteH : 32 // the
});
// wait for the spritesheet to be loaded
spritesheet.bind('load', function(){
// build all the meshes for one explosion
var meshes = [];
for(var i = 0; i < spritesheet.nSpriteX(); i++){
var mesh= spritesheet.createMesh(i, 0).addTo(world);
meshes.push(mesh)
}
// create a loop which make only one mesh visible
world.loop().hook(function(delta, now){
// make all sprite invisible by defaults
meshes.forEach(function(mesh){
mesh.visible(false);
})
// Now we find out which sprite is currently visible. It
// depends on the animation speed and which is it now.
var animSpeed = 25;
var nSpriteX = spritesheet.nSpriteX();
var meshIdx = Math.floor(now*animSpeed) % nSpriteX;
// Now that we know which sprite is visible, let's make it so :)
meshes[meshIdx].visible(true);
})
})
</script></body>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.