Jump to content

PIXI InputBox


Recommended Posts


Please don't kill me for my stupid question, may be i'm wrong in a core approach becase i'm noob in webdev and animation.

I'm trying to build a webpage based on canvas animation (created in DragonBones) using PIXI.js. The canvas is stretching by width\height of it's parent div, so my background and objects are scaled\stretched too.

I want to put an inputText on the canvas, not as DOM inside a div on the canvas, so user can enter login\password in it.

I found a CanvasInput https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input and this example (https://codepen.io/jdnichollsc/pen/waVMdB?editors=0010) based on Phaser, but don't understand how to use it with PIXI.

var myCanvas = document.getElementById("cvs")
this.app = new PIXI.Application({view: myCanvas});
var input = new CanvasInput({canvas: ???????});  // an exeption if canvas: myCanvas
this.app.stage.addChild( ?????? ); // don't understand what to write here

In codePen example they do:

var bmd = this.add.bitmapData(400, 50);
var myInput = this.game.add.sprite(x, y, bmd);
myInput.canvasInput = new CanvasInput({ canvas: bmd.canvas }); // add instance of CanvasInput to Sprite property?

How to implement that code in PIXI? How to create Sprite with empty texture? and how to setup CanvasInput canvas on it? I was trying with no luck

let graphics = new PIXI.Graphics();
graphics.drawRect(0, 0, 500, 500);
let texture = this.app.renderer.generateTexture(graphics);   
let sprite = new PIXI.Sprite(texture);  // can't figure out how to create it in a proper way
let cvs = this.app.view;
var input = new CanvasInput({
canvas: texture
      // or
      // canvas: sprite.texture
      // or
      // canvas: cvs

Or maybe that CanvasInput not compatible with PIXI v4 ?  Also tried that : https://github.com/SebastianNette/PIXI.Input  and can't able to make it work

I wonder why in 2018 there is no Input examples with PIXI in whole internet. I want to learn, but have nobody for ask a question.

I've also read that topic 

 where TickleMeElmo said Other way and in my opinion, better way, would be to just build a new text input for pixi. Add event listener for key up event and filter out all unwanted keystrokes, add registered key to stored string and just display that string as PIXI.Text. This way it's also quite easy to later on add some fancy stuff to the input. 

I think that i would be difficult for me to make a blink cursor for example  or tab for 2 inputs... Anyway i will explore https://github.com/limikael/PixiTextInput to understand main approach

Please, give me an advice how to equal my problem. Thanks, and sorry for my bad english

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...