topical media & game development

talk show tell print

mobile-query-three-plugins-pacman-examples-pacmaze.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <script src="../tquery.pacman.js"></script>
  <body><script>
  require([ 'tquery.skymap'
          , 'tquery.simplemaze'
          , 'tquery.controls'
          , 'tquery.keyboard'
          , 'tquery.fog'
          , 'tquery.controls'
          , 'tquery.pproc'
  ], function(){
          var world        = tQuery.createWorld().boilerplate().start();
  
          // add pacman
          var playerContainer        = tQuery.createObject3D().addTo(world)
          var pacman        = tQuery.Pacman.create().addTo(playerContainer)
          world.loop().hook(function(delta, now){
                  pacman.rotateY(0.02)
          })
          
          tQuery.Pacman.create('eyes').addTo(world)
                  .translateZ(-3)
  
          world.addEffectComposer()
                  .bloom(0.2)
                  //.sepia()
                  .motionBlur(0.5)
                  //.film(0.2, 0.5, 648, false)
                  .vignette()
                  //.screen()
                  .finish();
  
          world.tRenderer().setClearColorHex( 0x000000, 1 );
  
          // put some lights        
          // tQuery.createAmbientLight().addTo(world)
          //         .color(0x444444)
          tQuery.createDirectionalLight().addTo(world)
                  .position(1,0.5,0)
                   .color(0xff8866)
                   .intensity(2)
          tQuery.createDirectionalLight().addTo(world)
                  .position(-1,0,0)
                   .color(0x4444aa)
                   .intensity(0.5)
                  
  //                .intensity(0.1)
          tQuery.createPointLight().addTo(playerContainer)
                  .color(0xaaCCaa)
                  .distance(6)
                  .positionY(2)
                  .intensity(2)
  
          // add the fog
          //world.addFogExp2({density: 0.1});
          
          // add a skymap
          //tQuery.createSkymap('skybox').addTo(world);
  
          
  
          world.removeCameraControls();
  
          var cameraContainer        = tQuery.createObject3D().addTo(world)
          tQuery(world.tCamera()).addTo(cameraContainer)
                  .position(0,0,0).rotation(0,Math.PI,0)
  
          var cameraMounts= [];
  
          var mount3D        = tQuery.createObject3D().addTo(playerContainer)
                  .position(tQuery.createVector3(0, 3, 1).setLength(30))
          mount3D.get(0).lookAt(tQuery.createVector3())
          cameraMounts.push(mount3D)
          
          var mount3D        = tQuery.createObject3D().addTo(playerContainer)
                  .position(tQuery.createVector3(0, 3, 3).setLength(6))
          mount3D.get(0).lookAt(tQuery.createVector3(0, 0.5, 0))
          cameraMounts.push(mount3D)
          
          var mount3D        = tQuery.createObject3D().addTo(playerContainer)
                  .position(tQuery.createVector3(0, 3, 5).setLength(4))
          mount3D.get(0).lookAt(tQuery.createVector3(0, 0.5, -1))
          cameraMounts.push(mount3D)
          
          var mount3D        = tQuery.createObject3D().addTo(pacman)
                  .position(tQuery.createVector3(0, 1.5, -3).setLength(3))
          mount3D.get(0).lookAt(tQuery.createVector3(0, 0.5, 2))
          cameraMounts.push(mount3D)
  
          var mount3D        = tQuery.createObject3D().addTo(pacman)
                  .position(tQuery.createVector3(0, 1.5,  3).setLength(3))
          mount3D.get(0).lookAt(tQuery.createVector3(0, 0.5, 0))
          cameraMounts.push(mount3D)
  
          
          var mountIdx        = 1;
          cameraContainer.addTo(cameraMounts[mountIdx])
          tQuery.keyboard().domElement().addEventListener('keydown', function(){
                  var nMounts        = cameraMounts.length;
                  var keyboard        = tQuery.keyboard();
                  if( keyboard.pressed('1') )        mountIdx += -1;
                  if( keyboard.pressed('2') )        mountIdx += +1;
                  mountIdx        = (mountIdx + nMounts) % nMounts;
                  var mount        = cameraMounts[mountIdx];
                  cameraContainer.addTo(mount)                
          });
          
          var maze        = tQuery.createSimpleMaze({
                  map        : [
  '*******************',
  '*        *        *',
  '* ** *** * *** ** *',
  '* ** *** * *** ** *',
  '*                 *',
  '* ** * ***** * ** *',
  '*    *   *   *    *',
  '**** *** * *** ****',
  '**** *       * ****',
  '**** * ** ** * ****',
  '*      *   *      *',
  '**** * ***** * ****',
  '**** *       * ****',
  '**** * ***** * ****',
  '*        *        *',
  '* ** *** * *** ** *',
  '*p *           * p*',
  '** * * ***** * * **',
  '*    *   *   *    *',
  '* ****** * ****** *',
  '*                 *',
  '*******************',
                  ],
                  // map        : [
                  //         '*********',
                  //         '*   *   *',
                  //         '*  ** ***',
                  //         '*       *',
                  //         '***     *',
                  //         '*       *',
                  //         '*********'
                  // ],
                  enableCeiling        : false
          }).addTo(world)
          var maze3D        = maze.object3D();
  
          // TODO should that be done by default
          // - i think so
          // - maybe i just pass THREE.* to the tQuery at the end        
          // - what if not all the elements are of the same time ? a console assert is triggered
          tQuery.Object3D.registerInstance('elevateType', function(){
                  var tNodes        = this.get();
                  return tQuery(tNodes);
          })
  
          //var texture        = THREE.ImageUtils.loadTexture('images/BluePaintedTiles.png')
          var texture        = THREE.ImageUtils.loadTexture('../../assets/images/wood.jpg')
          //var texture        = THREE.ImageUtils.loadTexture('../../assets/images/plywood.jpg')
          //var texture        = THREE.ImageUtils.loadTexture('../../assets/images/water.jpg')
          tQuery('.wall', maze3D).elevateType()
                  .scaleYBy(0.4)
                  .setPhongMaterial()                        
                          .map(texture)
                          .envMap(tQuery.createCubeTexture('mars'))
                          .reflectivity(0.4)
                          .bumpMap(texture)
                          .bumpScale(0.02)
                          .back()
  
  //        var texture        = THREE.ImageUtils.loadTexture('images/PaddedOrangeWall.png')
          var texture        = THREE.ImageUtils.loadTexture('../../assets/images/water.jpg')
  //        var texture        = THREE.ImageUtils.loadTexture('../../assets/images/plywood.jpg')
  //        var texture        = THREE.ImageUtils.loadTexture('../../assets/images/rocks.jpg')
  //        var texture        = THREE.ImageUtils.loadTexture('../../assets/images/wood.jpg')
          texture.wrapS        = THREE.RepeatWrapping;
          texture.wrapT        = THREE.RepeatWrapping;
          texture.repeat.set(maze.mapWidth()/8, maze.mapDepth()/8);
  //        texture.repeat.set(maze.mapWidth(), maze.mapDepth());
  
          tQuery('.ground', maze3D).elevateType()
                  .setPhongMaterial()
                          .map(texture)
                          .envMap(tQuery.createCubeTexture('mars'))
                          .reflectivity(0.6)
                          .bumpMap(texture)
                          .bumpScale(0.05)
                          .back()
  
          // to fix z-fighting with pacman shadow
          maze3D.positionY(-0.003)
          
          var material        = tQuery.createSpriteMaterial()
                  .map('images/lensflare0_alpha.png')
                  .fog(true)        // FIXME .fog() doesnt seem to work
          maze.forEach(function(tileX, tileZ, value){
                  if( value !== ' '.charCodeAt(0) )        return;
                  tQuery.createSprite().addTo(world)
                          .addClass('plainPill')
                          .translateY(0.5)
                          .material(material)                
                          .positionX(tileX + 0.5 - maze.mapWidth()/2)
                          .positionZ(tileZ + 0.5 - maze.mapDepth()/2)
          })
  
          var material        = tQuery.createMeshPhongMaterial()
                  .color(0x00ffff)
                  .color(0xffff00)
                  .envMap(tQuery.createCubeTexture('swedishRoyalCastle'))
                  .bumpMap('../../assets/images/water.jpg')
                  .bumpScale(0.005)
          maze.forEach(function(tileX, tileZ, value){
                  if( value !== 'p'.charCodeAt(0) )        return;
                  var object3D        = tQuery.createSphere().addTo(world)
                          .addClass('energyPill')
                          .material(material)
                          .scaleBy(1/3)
                          .translateY(0.5)
                          .positionX(tileX + 0.5 - maze.mapWidth()/2)
                          .positionZ(tileZ + 0.5 - maze.mapDepth()/2)
                  world.loop().hook(function(delta, now){
                          var angle        = 0.5 * delta * Math.PI * 2; 
                          object3D.rotateY(angle)
                  })
          })
  
          // very minimal controls
          var playerControls        = {
                  update        : function(delta, now){
                          var position        = playerContainer.position().clone();
                          var keyboard        = tQuery.keyboard();
                          var speed        = 3 * delta;
                          
                          if( keyboard.pressed('left') )        position.x -= speed
                          if( keyboard.pressed('right') )        position.x += speed
                          if( keyboard.pressed('up') )        position.z -= speed
                          if( keyboard.pressed('down') )        position.z += speed
                          
                          var coord        = position.clone()
                          coord.x                += maze.mapWidth()/2;
                          coord.z                += maze.mapDepth()/2;
  
                          var playerW        = 0.5 - 0.01 /* kindof epsilon */
                          var colliding        = false
                          if( maze.getCoord(coord.x+playerW, coord.z+playerW) === '*'.charCodeAt(0) )        colliding = true;
                          if( maze.getCoord(coord.x+playerW, coord.z-playerW) === '*'.charCodeAt(0) )        colliding = true;
                          if( maze.getCoord(coord.x-playerW, coord.z+playerW) === '*'.charCodeAt(0) )        colliding = true;
                          if( maze.getCoord(coord.x-playerW, coord.z-playerW) === '*'.charCodeAt(0) )        colliding = true;
  colliding = false;
                          if( colliding === false )        playerContainer.position(position)
                  }
          }
  
          // wrapper for this controls
          tQuery.createControlsWrapper({
                  controls        : playerControls
          }).start()
  })
  </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.