Part 5 – Key input

JavaScript is usually event driven. This means that you can subscribe for events and provide some methods that will be invoked when the event happens. For example you can subscribe for key down and key up events.

When writing a game it is often more interesting to know the current state of a key each frame. For this reason KickJS wraps the event driven model and exposes a state based model.

There are basically 3 types of key states in KickJS:

• isKey: returns true when a key is held down
• isKeyDown: returns true in the first frame where the key is pressed
• isKeyUp: return true in the first frame where the key is released

The documentation for KeyInput is available here: http://www.kickjs.org/api/classes/kick.core.KeyInput.html

Let’s take a look at some code:

 var RotatorComponent = function(config){
     var rotationEuler = [0,0,0],
         thisObj = this,
         keyInput,
         transform,
         time,
         currentSpeed = 0;

     this.rotationSpeed = config.rotationSpeed;
     this.keyCode = config.keyCode;


     this.activated = function(){
         var gameObject = thisObj.gameObject,
             engine = gameObject.engine;
         time = engine.time;
         transform = gameObject.transform;
         keyInput = engine.keyInput;
     };

     this.update = function(){
         var deltaTime = time.deltaTime;
         if (keyInput.isKey(thisObj.keyCode)){
             // accelerate
             currentSpeed += config.rotationSpeed*deltaTime;
         } else {
             // de-accelerate
             currentSpeed = Math.max(0,currentSpeed-config.rotationSpeed*deltaTime);
         }
         // apply current rotation
         rotationEuler[2] += deltaTime*currentSpeed;
         transform.localRotationEuler = rotationEuler;
     };
 };

 // init engine (create 3d context)
 var engine = new kick.core.Engine('3dCanvas');

 // create a game object in [0,0,0] facing down the -z axis
 var cameraObject = engine.activeScene.createGameObject();
 cameraObject.transform.position = [0,0,5];
 // create a orthographic camera
 var camera = new kick.scene.Camera({
     perspective: false,
     left:-5,
     right:5,
     top:5,
     bottom:-5
 });
 cameraObject.addComponent(camera);

 // create material
 var shader = engine.project.load(engine.project.ENGINE_SHADER_UNLIT);
 var material = new kick.material.Material({
     shader: shader
 });

 // create meshes
 var meshes = [engine.project.ENGINE_MESH_TRIANGLE, engine.project.ENGINE_MESH_CUBE];
 var keyCodes = ["1","2"];
 var rotationAcceleration = [0.0002,0.00032];

 for (var i=0;i<meshes.length;i++){
     var gameObject = engine.activeScene.createGameObject();
     gameObject.transform.position = [-2.0+4*i,0,0];
     var meshRenderer = new kick.scene.MeshRenderer();
     meshRenderer.mesh = engine.project.load(meshes[i]);
     meshRenderer.material = material;
     gameObject.addComponent(meshRenderer);
     gameObject.addComponent(new RotatorComponent(
     {
         rotationSpeed:rotationAcceleration[i],
         keyCode:keyCodes[i].charCodeAt(0)
     }));
 }