topical media & game development

talk show tell print

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.