search

azerion / phaser-input

Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
MIT License
203 stars 64 forks source link
inputfield keyboard keyboard-events phaser phaser-plugin

readme

Phaser Input

Phaser Input is a plugin for Phaser that allows you to use html input fields as Phaser object inside your Phaser game. It fills the blanks of CanvasInput (that only works on a canvas renderer) and appends it with full Phaser support! The best part is that it will also work on mobile devices!

Key features:

Imporant From here on this library will be published and updated under @azerion/phaser-input at NPM, the old phaser-input will no longer be maintained. If you are comming from v1 you can read the migration guide at the bottom

Getting Started

First you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy.

npm install @azerion/phaser-input --save-dev

Next up you'd want to add it to your list of js sources you load into your game

<script src="https://github.com/azerion/phaser-input/raw/master/node_modules/@azerion/phaser-input/build/phaser-input.js"></script>

After adding the script to the page you can activate it by enabling the plugin:

game.add.plugin(PhaserInput.Plugin);

Usage

Adding a InputField

The simplest way of adding a input field is:

var input = game.add.inputField(10, 90);

Ofcourse there are options available that can be used to style the input. They can be passes as an object as the third parameter.

var password = game.add.inputField(10, 90, {
    font: '18px Arial',
    fill: '#212121',
    fontWeight: 'bold',
    width: 150,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 6,
    placeHolder: 'Password',
    type: PhaserInput.InputType.password
});

Using zoom

Zooming is easy to enable on an input field, it can be passed to the InputField as a setting. But there are some caveats:

First of all, it's only meant for mobile. Second; it modifies the scale and pivot of the world, and that might interfere with your resize.

Also, when the keyboard is shown, sometimes a resize event will be triggered.

Ideally you use a custom resize event, check for the static property PhaserInput.KeyboardOpen and don't resize when it's set to true.

Using keyboard open/close signals

Current version includes two event dispatchers that notify when a device keyboard is opened or closed.

You can add listeners which trigger events based on this feedback.

PhaserInput.onKeyboardClose.addOnce(function() {
    this.resizeBackgroundImage();
});

Capture input events

By default, input event will not bubble up to other elements This is controlled by an InputField property called blockInput. When set to false, the input event will trigger on the input element and move up to other elements listening for the event.

e.g. An in-game sprite might be listening for keyboard events (W, A, S, D). If set to false, typing in input field will not trigger keyboard events for the sprite. So the sprite will not move when typing into input field.

Toggle Enter key

InputField has a property (focusOutOnEnter) that controls whether the input field will lose focus on pressing Enter. If set to true, pressing enter will end focus on the field (default is true).

Current Limitations

Properties

Browser Support

Tested on:

Migrating from v1

the API of the objects is the same as before but the namespace changed. We decided to remove the Fabrique namespace, and house the plugin in it's own (PhaserInput). so: Fabrique.Plugins.Input becomes: PhaserInput.Plugin

and all other references of Fabrique.Plugins can be replaced with PhaserInput. If you are still unsure how or what, both the example and this readme have been adjusted to work with the new namespace.

FAQ

I Don't see the cursor blinking!

This is most likely due to you adding the input field to a custom Phaser object. According to the Phaser docs the update function needs to be called manually in these cases.

So add the following to your object and the cursor should work :)

update: function () {
    this._inputField.update();
},

How do I focus on the element?!

Normally the element is only focused trough user interaction (due to mobile limitations) you can get around this by manually calling the focus method yourself:

var input = game.add.inputField(10, 90);
//start with focus on the element
input.startFocus();

//and then end the focus
input.endFocus();

Please note that this will not work on mobile wihtout a user interaction

Can I change the width later on in the code?

Well thanks for asking, yes you can!

var input = game.add.inputField(10, 90);
input.width = 200;

Well then, is it also possible to set the value in code?

Yes you can! The Inputfield has a setText function you can call to set any value you want!

var input = game.add.inputField(10, 90);
input.setText("My custom text");

Credits

phaser-input is inspired by CanvasInput

Disclaimer

We at Azerion just love playing and creating awesome games. We aren't affiliated with Phaser.io. We just needed some awesome input boxes in our awesome HTML5 games. Feel free to use it for enhancing your own awesome games!

Phaser Input is distributed under the MIT license. All 3rd party libraries and components are distributed under their respective license terms.