Image Graphics in Three.js Games

‹prev | My Chain | next›

Up tonight, I would like to add some sweet graphics to my simple fruit Three.js Physijs jumping game. My graphics skills begin and end with crayons, so I draw a fruit monster (uploaded to http://gamingJS.com/images/purple_fruit_monster.png:

And do the same for fruit (uploaded to http://gamingJS.com/images/fruit.png):

Three.js's MeshBasicMaterial accepts image settings, so this seems a good place to start:

  player = new Physijs.BoxMesh(
    new THREE.CubeGeometry(20, 50, 1),
    new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture('/images/purple_fruit_monster.png')
    })
  );

I am coding this in my copy Mr Doob's Amazing Code Editor at http://gamingjs.com/code-editor/, so I do not have to worry about CORS.

Aside for some noise on the side of the image, that seems to work:

Until my purple fruit monster falls below the blue horizon:

The image is PNG with alpha transparency around the monster. This does not seem to be working. Perhaps all that I need to add is the transparency flag to the material:

  player = new Physijs.BoxMesh(
    new THREE.CubeGeometry(40, 50, 1),
    new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture('/images/purple_fruit_monster.png'),
      transparent: true
    })
  );

The result is an improvement. The transparency is visible, but the edge noise remains:

In the end, I opt for an empty material for the player object proper:

  player = new Physijs.BoxMesh(
    new THREE.CubeGeometry(40, 50, 1),
    new THREE.Material
  );

The player will interact with the rest of the scene, but will be invisible. To see where the player is, I add a plane with the image attached:

  var player_material = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture('/images/purple_fruit_monster.png'),
    transparent: true
  })
  var player_picture = new THREE.Mesh(new THREE.PlaneGeometry(40, 50), player_material); 
  player_picture.rotation.x = Math.PI/2;
  player.add(player_picture);

Which does the trick:

After doing the same for my fruit, I have awesome game play and sweet graphics:

That seems a fine place to call it a night.


Day #507