Input Bindings in Kaplay: Simplify Game Controls Across Devices

Kaplay's input bindings offer a seamless way to handle game controls, allowing developers to unify input methods across keyboards, gamepads, and more. With the ability to dynamically change bindings and even trigger virtual inputs, Kaplay provides flexibility and control customization for a better gaming experience.

Input bindings in Kaplay enable you to define a generic event, such as jump, and map it to multiple input methods, including keyboard keys, gamepad buttons, and more.

 

Here's how you can leverage Kaplay for seamless input management: 

kaplay({
    buttons: {
        jump: {
            keyboard: ["space", "up"],
            gamepad: ["south"],
        },
    },
});

 You can then listen to the jump event using handlers like.

 

onButtonPress("jump", () => { player.jump(); });
onButtonDown("jump", () => { player.jump(); });
onButtonRelease("jump", () => { player.jump(); });

Dynamic Binding Updates

Easily get or set bindings dynamically based on game requirements, such as configuration changes or new levels:

// Get the current keyboard bindings for "jump"
const jumpKeyBindings = getButton("jump").keyboard;

// Update the "jump" binding for the keyboard
setButton("jump", { keyboard: ["w"] });

Simulating Inputs Virtually

Need to trigger an action programmatically? Use pressButton() and releaseButton() to simulate button actions, perfect for cutscenes or mobile games.

pressButton("jump");  // Simulates pressing the "jump" button
releaseButton("jump"); // Simulates releasing the "jump" button

With these powerful features, Kaplay input bindings make game controls more flexible, customizable, and developer-friendly. Whether you’re building for PC, console, or mobile, you can ensure a smooth player experience with unified control handling.

 

Step 1: Create a KAPLAY project input-bindings-demo by executing below command.

 

npx create-kaplay input-bindings-demo

 

Upon successful execution of above command, you can see a project structure looks like below.

 

 

Step 2: Update src/main.js file with below content.

 

main.js

import kaplay from "kaplay";

// Initialize Kaplay with input bindings
const k = kaplay({
  buttons: {
    jump: {
      keyboard: ["space", "up"],
      gamepad: ["south"],
    },
  },
});

// Constants for game configuration
const GRAVITY = 1000;
const PLAYER_INITIAL_POSITION = [120, 80];
const JUMP_FORCE = 400;
const MOVE_SPEED = 300;
const GROUND_HEIGHT = 100;

// Initialize gravity for the game world
k.setGravity(GRAVITY);

// Load assets
k.loadRoot("./"); // Base path for assets
k.loadSprite("bean", "sprites/bean.png"); // Player sprite
k.loadSound("jumpSound", "sounds/jump.mp3"); // Jump sound effect

// Create the player object
const player = k.add([
  k.pos(...PLAYER_INITIAL_POSITION), // Set initial position
  k.sprite("bean"), // Use the "bean" sprite
  k.body(), // Enable physics for the player
  k.area(), // Define collision area for interactions
]);

// Function to handle jumping
const handleJump = () => {
  k.play("jumpSound", {
    volume: 0.5, // Set sound volume
    speed: 1.5, // Play sound at faster speed
  });
  player.jump(JUMP_FORCE); // Apply jump force
};

// Function to handle horizontal movement
const handleMovement = (direction) => {
  player.move(direction * MOVE_SPEED, 0); // Move left (-1) or right (1)
};

// Bind input events to actions
player.onButtonPress("jump", handleJump); // Trigger jump on "jump" button press
player.onKeyDown("left", () => handleMovement(-1)); // Move left on "left" key
player.onKeyDown("right", () => handleMovement(1)); // Move right on "right" key

// Add the ground object to the game world
const ground = k.add([
  k.rect(k.width(), GROUND_HEIGHT), // Ground spans the width of the game
  k.pos(0, k.height() - GROUND_HEIGHT), // Position at the bottom of the screen
  k.area(), // Define collision area
  k.outline(3), // Add an outline for visibility
  k.color(109, 99, 19), // Set ground color (brown-like)
  k.body({ isStatic: true }), // Make the ground static (immovable)
]);

 

Step 3: Create sounds folder in public folder and add jump.mp3 file to it. You can download this file from below location.

https://github.com/harikrishna553/frontend/tree/main/gaming/kaplay/sounds/add-sounds/public/sounds

 

Step 4: Execute below commands from project root folder to run the Application.

 

npm install
npm run dev

Launch the url ‘http://localhost:3001/’ in a browser to play with the Application. You can press either space or up arrow button to see the jump behavior.

 

You can download the Application from this link.

Previous                                                    Next                                                    Home