Changelog

[19.10.2014] Added Bitmap support.

PIXI.Input

Canvas based input elements rendered on a PIXI stage.

DEMO: http://mokgames.com/playground/pixi.dom/

How to use

Simply load the pixi.input.js file after your pixi.js file.

<script src="pixi.js"></script>
<script src="pixi.input.js"></script>

Creating an Text Input

var input = new PIXI.Input();
stage.addChild(input);

Creating an password Input

var input = new PIXI.Input({ type: "password" });
stage.addChild(input);

Creating a Button

var button = new PIXI.Button({ value: "Button", onmouseup: function() { /* do something */ } });
stage.addChild(button);

Creating a Select Box

var select = new PIXI.Select({ 
  options: {
      test1: "I'm a select box!",
      test2: "Test 2",
      test3: "Test 3",
      test4: "Test 4",
      test5: "Test 5"
  },
  selected: "test2"
});
stage.addChild(input);

Reading values

console.log(input.value);
console.log(select.value);

Customizeable!

var options = {
    readonly: false,
    maxlength: null,
    placeholder: "",
    placeholderColor: "#bfbebd",
    selectionColor: "rgba(179, 212, 253, 0.8)",
    value: "",
    type: "text",
    onsubmit: function() {},
    onkeydown: function() {},
    onkeyup: function() {},
    onfocus: function() {},
    onblur: function() {},
    onmousedown: function() {},
    onmouseup: function() {},
    width: 170,
    height: null,
    padding: 5,
    borderColor: "#000",
    borderWidth: 1,
    borderRadius: 3,
    backgroundImage: null,
    backgroundColor: "#fff",
    backgroundGradient: null,
    boxShadow: "1px 1px 0px rgba(0, 0, 0, 0.1)",
    innerShadow: "0px 0px 4px rgba(0, 0, 0, 0.4)",
    valign: "middle",
    align: "center",
    outline: 0,
    text: {
        font: "14px Arial",
        fill: "#000",
        align: "left",
        stroke: "#000",
        strokeThickness: 0
    }
};
var input = new PIXI.Input(options);

Example for an Input with bold red font, without innerShadow, and onsubmit event.

var input = new PIXI.Input({
  text: { font: "bold 12px Arial", fill: "#f00" },
  innerShadow: "none",
  onsubmit: function() {
    console.log("submitting.. input.value = " + input.value);
  }
});

Define your own themes

PIXI.InputObject.Style("pink", {
  selectionColor: "#fff",
  backgroundGradient: [
      [ 0.00, "rgba(252,236,252,1)" ],
      [ 0.50, "rgba(251,166,225,1)" ],
      [ 0.51, "rgba(253,137,215,1)" ],
      [ 1.00, "rgba(255,124,216,1)" ]
  ],
  align: "center",
  innerShadow: "none",
  text: { font: "bold 10pt Arial", fill: "#000" }
});

var button = new PIXI.Button({ 
    value: "Click me!", 
    style: "pink", 
    width: 100, 
    onmouseup: function() { 
      // do stuff
    }
});

Use Bitmap fonts!

var input = new PIXI.Input({
  type: "text",
  text: { bitmap: true, font: "35px Desyrel" }
});
stage.addChild(input);

Contribution

This is still an early stage for our input elements and there are many things to do! If you want to contribute to this project, please send a Pull Request. And don't start publishing your own versions of this plugin, or else many different versions might be around, which is just confusing.

TODO:

Cleaning the code base
Closer orientation to PIXI coding style
Merge Text/Background to one single texture for faster rendering of not focused inputs
Better support for Cocoon.js and other non HTML wrappers
Fixing the keyboard raise on mobile devices
Better control over Select box design
Better support for PIXI v2
Support for Phaser
Checkboxes
Radio Buttons
Avoiding to recreate textures if input's use the exact same background.
bower/grunt/etc, all the things we need in this rep.
Bitmap Font support
Typescript definition
And much more. I will post my thoughts on this later.

SebastianNette / PIXI.Input