osarel / pixi-drawable-textinput

Create your own PIXI TextInput

Pixi-Drawable-TextInput

You need to create a text input with pixi but you don't want to use the dom of the canvas, this plugin allows you to draw your own text input

Documentation

Documentation link

Installation :

You can install pixi drawable text input with standard npm

npm install pixi-drawable-textinput

Or with yarn

yarn add pixi-drawable-textinput

Use :

Simple text input

import * as PIXI from "pixi.js";
import TextInput, {InputOption} from "pixi-drawable-textinput";
const app = new PIXI.Application({
  width: 400,
  height: 200,
  backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

var option = new InputOption();
option.style = { fontSize: 12 };
option.value = "A simple text input";
var input = new TextInput(option);
app.stage.addChild(input);

Test online

Complexe text input

import * as PIXI from "pixi.js";
import TextInput, {InputOption, InputCursorStyle} from "pixi-drawable-textinput";
const app = new PIXI.Application({
  width: 800,
  height: 400,
  backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
var option = new InputOption();
option.backgroundColorFocus = { color: 0xcffbff, aplha: 1 };
option.backgroundColor = { color: 0xe02f5e, aplha: 1 };
option.multiLine = true;
option.maxLength = 100;
option.roundedBorder = 40;
option.borderWidth = 5;
option.style = {
  fontFamily: "Arial",
  fontSize: 36,
  fontStyle: "italic",
  fontWeight: "bold",
  fill: ["#ffffff", "#00ff99"], // gradient
  stroke: "#4a1850",
  strokeThickness: 5,
  dropShadow: true,
  dropShadowColor: "#000000",
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6
  };
option.height = 60;
option.width = 400;
option.value = "A complexe text input";

option.cursorStyle = new InputCursorStyle();
option.cursorStyle.distance = 0;
option.cursorStyle.colorBlind = { color: 0xff0000, alpha: 1 };
option.cursorStyle.colorLow = { color: 0x00ffff, alpha: 0.5 };
option.cursorStyle.width = 10;
option.cursorStyle.speedSwap = 200;
var input = new TextInput(option);

app.stage.addChild(input);

Test online

to-do list

The project is open to any new proposal and correction pull request and issues I will take the necessary measures to advance the project

V1.0.32

• Fix cursor do not display

V1.0.3

• Update documentation
• Fix import
• Fix package

V1.0.2

• Add development test server
• Fix placeholder
• Fix alpha cursor
• Update height component for multiline
• Fix input out of field
• Create a documentation
• Fix cursor field empty

Futur

• Add mobile support
• Cursor up when key up and down when key down

pixi-drawable-textinput's Issues

Wrong dist path

Hello again.
In 1.0.32 version there is a reduntant folder in dist folder:

and in package.json
"main": "dist/TextInput.js"

so webpack shows This dependency was not found

and by the way, you have the misprint in examples:
option.backgroundColorFocus = { color: 0xcffbff, aplha: 1 };
option.backgroundColor = { color: 0xe02f5e, aplha: 1 };

should be "alpha"

Excuse for troubling

Cursor not visible

Hello.

Cursor stay invisible and not blinking. It appears only if option.multiLine = true; and text wraps on second line

Feature: stretch box horizontally not vertically when longer text is written

I need textinput that will stretch horizontally not vertically. I mean when user is writing text, then textbox will become wider and wider (and height won't change). Height of the box will change only if user press-es enter. Is it possible to do something like this?