topical media & game development

talk show tell print

mobile-query-three-plugins-minecraft-examples-items.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle.js"></script>
  <script src="../tquery.spritesheet.js"></script>
  
  <body><script>
          // In the previous post, we played with minecraft like characters.
          // They looks cool and pixely. 
          // Most of all, they are definitly easy to model and use.
          // Additionnaly minecraft made 2d assets popular, and this is 
          // what we gonna talk about in this post. 
  
          // I like the fact to reuse 2d assets. 
          // They are easier to design than 3d ones. 
          // Many already exists for free.
          // [opengameart](http://example.com)
  
  
  	// ## World setup        
          // create the world
          var world        = tQuery.createWorld().boilerplate().start();
  
          // here we create a cube of 1 by 1, it will serve as measure to
          // compare the size of the object we inject in the scene
          tQuery.createCube().addTo(world)
                  .setBasicMaterial().color(0x000000).wireframe(true).back();
          
          // Now that we got the basic setup, we initialize the spritesheet itself.
          // A spritesheet is an image containing several other images. 
          // Some parameters need to be setup such as the url of the spritesheet
          // image or its size.
          // As we got the idea with minecraft, let's start by the items in minecraft.
          // You know all those little panels, buttons or tools to dig. 
          // TODO add a pointer to the proper wiki page
          // In our case, this is a image 256x256 containing small sprites of 16x16.
          var spritesheet        = tQuery.createSpritesheet({
                  url        : 'images/items/items.png',
                  imgW        : 256,
                  imgH        : 256,
                  spriteW        : 16,
                  spriteH        : 16
          });
          // now we bind the 'load' event, thus we gonna be warned when the 
          // spritesheet image is loaded. When it is ready to use, the function
          // is called.
          spritesheet.bind('load', function(){
                  console.log("image loaded");
                  // now we get one sprite in the spritesheet. We pick 
                  // the one at ```x = 10``` and ```y = 2``` and add it 
                  // to the world. 
                  spritesheet.createMesh(2,4).addTo(world);
  
                  if( false ){
                          for(var x=0; x < 16; x++){
                                  for(var y=0; y < 16; y++){
                                          for(var j=0; j < 1; j++) {
                                                  var item        = spritesheet.createMesh(x, y)
                                                  // if this spot is empty, do nothing
                                                  if( item === null )        continue;
                                                  // set a random position
                                                  var positionX        = (Math.random()*2-1)*15;
                                                  var positionY        = (Math.random()*2-1)*15;
                                                  var positionZ        = (Math.random()*2-1)*15;
                                                  item.position(positionX, positionY, positionZ);
                                                  // add it to the worldPP
                                                  item.addTo(world);
                                          }
                                  }
                          }                
                  }
          })
          
  
  </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.