tech-rex-keyboard

A reusable Phaser UI components library featuring a keyboard input system and layout manager using Rex.

Description

tech-rex-keyboard provides an interactive HTML input overlay system for Phaser games. It enables native HTML input fields to be positioned precisely over Phaser game objects, with support for:

• Responsive positioning based on game canvas scaling
• Text fitting to specified box dimensions
• Mobile keyboard handling (portrait/landscape)
• Live value sanitization (numeric decimal input)
• ScaleManager integration for safe resizing

Installation

npm install tech-rex-keyboard

Usage

Basic Usage

import { Controller_input } from 'tech-rex-keyboard';

// In your Phaser scene:
preload() {
    // Load your assets
}

create() {
    // Create an input zone (e.g., a rectangle or sprite)
    const inputZone = this.add.rectangle(x, y, width, height, 0x000000, 0);
    
    // Create a text object to display the input value
    const inputText = this.add.text(x, y, '0.00', { 
        fontSize: '24px',
        fontFamily: 'Arial'
    });
    
    // Initialize the input controller
    const inputController = Controller_input(inputZone, inputText, this);
}

API

Controller_input(input, InputText, gScene)

Creates an interactive input overlay for Phaser games.

Parameters:

| Parameter | Type | Description | |------------|------|-------------| | input | Phaser.GameObjects.GameObject | The interactive game object (zone, sprite, etc.) that triggers the input | | InputText | Phaser.GameObjects.Text | The text object to display the input value | | gScene | Phaser.Scene | The Phaser scene instance |

Returns:

An object with the following methods:

| Method | Description | |--------|-------------| | hideKeyboard() | Programmatically closes the keyboard and finalizes the input |

Features

Text Fitting to Box

The fitTextToBox function ensures input text fits within a specified maximum width:

function fitTextToBox(text, textObject, maxWidth) {
    // Binary search algorithm to find the longest text that fits
    // Returns the fitted text string
}

• Supports suffix-based fitting -Preserves original text state
• Returns the longest fitting text

Responsive Positioning

The input overlay automatically:

• Calculates position relative to game canvas
• Accounts for Phaser scale manager transformations
• Updates position on every postupdate tick
• Handles both portrait and landscape orientations

Input Sanitization

• Accepts only numeric input (0-9)
• Allows single decimal point
• Formats output as decimal with 2 decimal places
• Handles negative values (defaults to 0.00)

Mobile Keyboard Handling

• Locks container height in landscape mode to prevent layout shifts
• Sets active input Y position for ScaleManager
• Freezes canvas resizing during editing
• Scrolls viewport to top-left to prevent layout shifts

Example: Numeric Input Field

import { Controller_input } from 'tech-rex-keyboard';

class GameScene extends Phaser.Scene {
    create() {
        // Create input background
        const inputBg = this.add.rectangle(400, 300, 200, 50, 0x333333);
        inputBg.setInteractive({ useHandCursor: true });
        
        // Create input text
        const inputText = this.add.text(400, 300, '0.00', {
            fontSize: '32px',
            fontFamily: 'Arial',
            color: '#ffffff'
        }).setOrigin(0.5);
        
        // Initialize controller
        const input = Controller_input(inputBg, inputText, this);
        
        // Store reference if needed
        this.inputController = input;
    }
    
    // To programmatically hide keyboard:
    hideInput() {
        if (this.inputController) {
            this.inputController.hideKeyboard();
        }
    }
}

License

MIT License

Copyright (c) 2024 TECHTEAM

Keywords

• Phaser
• HTML5 Game
• UI Components
• Keyboard Input
• Rex