AssemblyScript Keyboard Input with Vector Engine

May 7, 2021

Note: For this tutorial, I'm going to assume that you've either read the Intro Vector Engine Tutorial, or watched the video version of the intro tutorial. If not, I would recommend starting with those because I'm not going to cover basics like setting up your environment and such.

Vector Engine has an Input class that you may have already seen if you have read the Mouse Input Tutorial. This tutorial will be using it to check which keys are down on the keyboard and display the key you press to the screen. The code is pretty straightforward, so this tutorial is not a particularly long one.

Imports

You will need to start by importing Char, DisplayString, Input and KEY from vectorengine. The Char class is used to display a single large character in the center of the canvas. The DisplayString class is used to display a "press a key" message on the canvas. The Input class is used to check what key is currently being pressed. KEY is an enumeration of the keys the player can press.

  import { Char, DisplayString, Input, KEY } from 'vectorengine';

Initialization

After importing the classes we need from vectorengine we will need to initialize our Input class and create some objects for displaying to the screen:

  Input.init();
  const str: DisplayString = new DisplayString("press a key", 0.0, 0.6, 0.05, 0xff_ff_00_ff);
  const c: Char = new Char();
  c.scale = 0.5;
  c.color = 0xff_ff_ff_ff;

The first thing the above code does is call Input.init(); to initialize input memory. Vector Engine requires this line in any game that would like to use keyboard or mouse input. I initialize a DispalyString object called str to display the message "press a key" to the canvas. I create an object called c with a type of Char to display the key a user is pressing on the keyboard. I then set the scale and color of the c variable.

The Game Loop

The gameLoop function loops over every key in the Input class checking to see if a key is pressed. If a key is pressed, the character code of the c object is set to the value of the pressed key.

  export function gameLoop(delta: i32): void {

    c.charCode = KEY.SPACE;

    for (var i: i32 = 0; i < 100; i++) {
      if (Input.GetKey(i)) {
        c.charCode = i;
      }
    }

    c.render();
    str.render();
  }

After setting c.charCode to KEY.SPACE there is a for loop that loops over all of the key values calling Input.GetKey to check each key value. If the key is pressed, c.charCode is set to the key value. The last thing this code does is call render on the c and str objects.

You can check out the final version of this application here. Or look at the final version of the code here.

(app | code)