Back to Tutorials

Tutorial 3 - Interacting With the Player

If you'd like, you can download the source for this tutorial here. See Tutorial 1 for basic engine setup, and Tutorial 2 for the origination of this tutorial.

Getting Keyboard Input

Since we're basically starting with what was done for Tutorial 2, I'll spare you the run up. By this time, you should be familiar with setting up the index file, the game class, and the game object. So, I'll just break into the changes that had to be made.

To get input from the player we need to load the KeyboardInputComponent and establish two of the methods on our HostObject which will respond to keyboard events. To the top of the gameObject.js file, add the following line to load the component.

// Load the keyboard input component
Engine.include("/components/component.keyboardinput.js");

Further down into the file, after the constructor for example, add the two keyboard event handlers. Keyboard event handlers are passed five arguments. Of these, we're only interested in the first, which represents the keyCode from the DOM KeyboardEvent object. The key codes we need are found in the EventEngine reference.

		/**
		 * Handle a "keydown" event from the KeyboardInputComponent.
		 * @param keyCode {Number} The key which was pressed down.
		 */
		onKeyDown: function(keyCode) {
			switch (keyCode) {
				case EventEngine.KEYCODE_LEFT_ARROW:
					this.moveVec.setX(-4);
					break;
				case EventEngine.KEYCODE_RIGHT_ARROW:
					this.moveVec.setX(4);
					break;
				case EventEngine.KEYCODE_UP_ARROW:
					this.moveVec.setY(-4);
					break;
				case EventEngine.KEYCODE_DOWN_ARROW:
					this.moveVec.setY(4);
					break;
			}
			return false;
		},

		/**
		* Handle a "keyup" event from the KeyboardInputComponent.
		* @param keyCode {Number} The key which was released
		*/
		onKeyUp: function(keyCode) {
			switch (keyCode) {
				case EventEngine.KEYCODE_LEFT_ARROW:
				case EventEngine.KEYCODE_RIGHT_ARROW:
					this.moveVec.setX(0);
					break;
				case EventEngine.KEYCODE_UP_ARROW:
				case EventEngine.KEYCODE_DOWN_ARROW:
					this.moveVec.setY(0);
					break;
			}
			return false;
		},

Changing How the Object Moves

Since we're no longer generating movement without user input, we'll change the way movement is calculated by adding the movement vector to our object's position. We'll need to make some small changes to our constructor, and add a field for the movement vector we're addressing in the code above.

	moveVec: null,			// The movement vector

	constructor: function() {
		this.base("GameObject");

		// Add the component to move the object
		this.add(Transform2DComponent.create("move"));

		// Add the component which handles keyboard input
		this.add(KeyboardInputComponent.create("input"));

		// Start at the center of the playfield
		var start = Tutorial3.getFieldBox().getCenter();
		start.sub(Point2D.create(25, 25));

		// Set our object's shape
		this.shape = Rectangle2D.create(0, 0, this.width, this.height);

		// Position the object
		this.setPosition(start);

		// Set the velocity to zero
		this.moveVec = Vector2D.create(0,0);
	},

You can see that we've added the KeyboardInputComponent which will enable the handling of keyboard events. Additionally, we've changed the starting position to the center of the playfield and we're initializing our movement vector to "at rest".

Now we update the move() method to update the position of our game object based on the movement vector which has been set via the keyboard events.

		/**
		 * Calculate and perform a move for our object.  We'll use
		 * the field dimensions from our playfield to determine when to
		 * "bounce".
		 */
		move: function() {
			var pos = this.getPosition();

			// Determine if we hit a "wall" of our playfield
			var fieldBox = Tutorial3.getFieldBox().get();
			if ((pos.x + this.width > fieldBox.r) || (pos.x < 0)) {
				// Stop X movement and back off
				this.moveVec.setX(0);
				if (pos.x + this.width > fieldBox.r) {
					pos.setX(fieldBox.r - this.width - 1);
				}
				if (pos.x < 0) {
					pos.setX(1);
				}
			}
			if ((pos.y + this.height > fieldBox.b) || (pos.y < 0)) {
				// Stop Y movement and back off
				this.moveVec.setY(0);
				if (pos.y + this.height > fieldBox.b) {
					pos.setY(fieldBox.b - this.height - 1);
				}
				if (pos.y < 0) {
					pos.setY(1);
				}
			}

			pos.add(this.moveVec);
			this.setPosition(pos);
		},

Wrapping Up

Well, there ya have it... We've modified the game in Tutorial 2 to create movement via the keyboard, rather than just generating the movement. Give it a try below. Use the arrow keys on the keyboard move the object around the playfield. As always, open up the code and mess with things to see what your results are and continue to evolve your understanding of The Render Engine.

Back to Tutorials