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) })); }