topical media & game development
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.