Tutorial index

In this tutorial we will add input support to our game. The input framework binds keyboard keys, mouse buttons and joystick buttons to input states to make different input configurations possible.

You can download the source for this tutorial here.

First step is to include phxInput unit under the uses section.

uses
  ...
  // Input framework
  phxInput;

Then we create the input variable as well as a variable that contains the current player position.

TGame = class(TPHXApplication)
  private
    Device: TPHXDevice;
    Timer : TPHXTimer;
    Canvas: TPHXCanvas;
    Images: TPHXImageList;
    Input : TPHXInput;
 
    PlayerPosition: TVector2f;
  public
    procedure Init; override;
    procedure Update; override;
    procedure Render; override;
    procedure Shutdown; override;
  end;

Next is to create a instance of the input class and initialize the player position variable.

procedure TGame.Init;
  ...
  // Create the input
  Input:= TPHXInput.Create;
 
  // Reset the player position
  PlayerPosition.X:= 200;
  PlayerPosition.Y:= 200;  
end;

Add a call to the inputs Update function, this updates all bindings and states of the added devices.

procedure TGame.Update;
begin
  // Update the device
  Device.Update;
  // Update the timer
  Timer.Update;
  // Update the input
  Input.Update;
end;

To detect if a button is pressed we have to check if the input state is set in the States property of the input.

procedure TGame.Update;
begin
  // Update the device
  Device.Update;
  // Update the timer
  Timer.Update;
  // Update the input
  Input.Update;
 
  if isLeft in Input.States then
  begin
    // Move the player to the left with a velocity of 200 pixels per second
    PlayerPosition.X:= PlayerPosition.X - 200 * Timer.FrameTime;
  end;
 
  if isRight in Input.States then
  begin
    // Move the player to the left with a velocity of 200 pixels per second
    PlayerPosition.X:= PlayerPosition.X + 200 * Timer.FrameTime;
  end;
end;

It is also possible to check for a specific key even if its not bound to a state.

  // Check the keyboard for a key
  if Input.Keyboard[VK_TAB] then
  begin
    PlayerPosition.X:= Input.Mouse.X;
    PlayerPosition.Y:= Input.Mouse.Y;
  end;

This code moves the player to the position of the mouse while TAB is pressed.

Modify the rendering method to only draw the player.

procedure TGame.Render;
begin
  // Clear the back buffer
  Device.Clear;
 
  // Draw the image using the image index and pattern index
  Images[0].Draw(PlayerPosition.X, PlayerPosition.Y, 0);
 
  // Flush the canvas
  Canvas.Flush;
 
  // Flip the front and back buffers to show the scene
  Device.Flip;
end;

When running the application you should be able to move the player left and right

Normally when checking if the input has a state we are testing all devices that has that input binding, to check if a single device has a state we have to check that device's state instead

  // Detect if the isButton1 state is set for the mouse device
  if isButton1 in Input.Mouse.States then
  begin
    // Do something when the left mouse button is pressed
  end;

It is also possible to only trigger a action once every time a button is pressed, to do this we just have to remove the wanted input state from the States property of the input or device.

  // Only perform a action when a button is pressed
  if isButton1 in Input.States then
  begin
    // TODO: Fire bullet
 
    // Remove the state
    Input.States:= Input.States - [isButton1];
  end;

You can use the same method to remove a input state from a single device

To rebind a key we first have to remove all bound keys from the bindings and then add the new ones. The code snippet below shows how that's done

  // Remove all bindings from a state
  Input.Bindings.Remove(isButton3);
  // Bind a key to a state
  Input.Bindings.Add(isButton3, VK_F2);

It is possible to load and save the input bindings to a text file

  // Save the bindings to a file
  Input.SaveBindings('input.txt');
  // Load the bindings from a file
  Input.LoadBindings('input.txt');

The file looks like the following, first is the input state then the device and shortcut.

isLeft=1,285
isLeft=1,97
isLeft=1,306
isRight=1,286
isRight=1,100
isRight=1,308

Back to tutorial index