sebastiannette / pixi.input

Canvas Input Elements

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.

pixi.input's Issues

Input center

Hi !
Thanks for this amazing tool !

I have a probleme i can't center the text of an input.

Do you have code it ? or it's me who doing it wrong ?

var input = new PIXI.Input({
    align: "center",
    font:{
        align: "center",
    }
});

what's the status of this?

Hey, I've just came across this as a solution for input text in pixi. doesnt work on latest pixi. what's the status? are you giving support? Is this deprecated?

focus out when clicked out of object

When I used this 'pixi.input.js', textbox of PIXI.Input doesn't work at 'focus out'.
If I click out of canvas(ex : javascript console), it works. but in the canvas, 'focus out' didn't happen.
So I added some codes, it is crude, but 'focus out' operates well.
insert these lines to pixi.input.js 1123 ("extend(PIXI.Input.prototype, { ~~~ onMouseDown")
(document's 'mousedown' is later than pixi object's 'mousedown'.)

        this.clicked = true;
        if (this.focused == undefined) {
            this.focused = true;
            var func = (e) => {
                if (this.clicked == false) {
                    this.blur();
                    this.focused = undefined;
                    document.removeEventListener('mousedown', func);
                }
                this.clicked = false;
            };
            document.addEventListener('mousedown', func);
        }

center text doesn't work in pixi v3

Hi SebastianNette,

Thanks for the great lib, I've used it extensively in a project but now realize the align: center option doesn't work for pixi v3 and I can't figure out why.

My code is simple enough, but whether I use 'left', 'right' or 'center', the display is always 'left'

newInputField = new PIXI.Input({width: 440, height: 30, padding: 5, backgroundColor: "#7B7B7B", borderWidth: 0, borderRadius: 9, outline: 0, align: "center", text: {font: "18px Helvetica", fill: "#fff", align: "center"}});

Please let me know what I might be doing wrong, or if there is some easy way to fix this, thank you!