Input in PIXI

[Freckles]

From what I've read I need PIXI text input plugin to use that feature. I need to write input text module as I don't want to use plugins. I'd be thankful if you help me out to understand if

• I can use HTML tags in Pixi.js somehow (Everything's build up on canvas, and I haven't seen any example this far that does so, maybe I'm missing sth)
• if not could you provide some resources that can help me figure it out?
• Are there any finished components I can use or do I need to write anything from scratch? (not only input related but also buttons and stuff like that)

Thanks in advance!

[ivan.popelyshev]

>  I need to write input text module as I don't want to use plugins

> Are there any finished components I can use or do I need to write anything from scratch?

There's no textEdit in vanilla PixiJS because we have enough problems with plain text already, and there are so many ways to do it - in this particular case we cant choose the default one. That's why its in plugins.

PixiJS is not a black box. All plugins have source. If you want to produce something on your own - Then do it! Just do it!

Yes, it would be good if there will be an article "how to make your own pixi text plugin from scratch step-by-step" and its bad. It means - if you do it - please make that article, we can help 

As for collections of source code that can help you:

https://github.com/pixijs/pixi.js/wiki/v5-Resources#text--input

And I think there was a TextEdit at https://github.com/pixijs/pixi-ui

[ivan.popelyshev]

The key of making such plugin:

1. decide whether its DOM-based or canvas-based

2a. in case of DOM - learn how to position element according pixi transform, there are plugins that do it, even in vanilla pixi - accessability module.

2b. in case of canvas2d - figure out how to make keyboard inputs for it because pixi doesnt have handlers for it - its a renderer, why should we have it?

[Freckles]

18 hours ago, ivan.popelyshev said:

The key of making such plugin:

1. decide whether its DOM-based or canvas-based

2a. in case of DOM - learn how to position element according pixi transform, there are plugins that do it, even in vanilla pixi - accessability module.

2b. in case of canvas2d - figure out how to make keyboard inputs for it because pixi doesnt have handlers for it - its a renderer, why should we have it?

OK I know it's a renderer. Not complaining at all 

I just wanted to figure out how to go further in pixi.js. Thank you for the information 

I've googled but didn't really get what accessability module is in vanilla pixi (I mean whatever I found doesn't really seem to be what I was looking for). I've found this https://github.com/brean/PIXI.DOM.Sprite  plugin. Not sure yet if it's compatible with the current version of Pixi.

Thanks for your time. I'd be very grateful if you go into details a little bit more 'cause I kinda feel lost. Finding some examples would be awesome too!

[ivan.popelyshev]

> I've googled but didn't really get what accessability module is in vanilla pixi

I'm not sure how to activate() it myself, I didnt use it ever. It just has piece of code to light up active element with TAB key.

Here: https://github.com/pixijs/pixi.js/blob/dev/packages/accessibility/src/AccessibilityManager.ts#L385

Pixi is not react: stackoverflowing will get you only basic answers. You have to dig inside sources of both main lib and plugins in wiki to get samples of code.

We are guys like you, we write this code by experience. Yes, ThreeJS has better folder for examples, but even there you have to look in sources and search there very often.

[Freckles]

ok, thank you

I'll try to solve the problem

[Dougi]

I've just done this with an html text input overlay.  Using Angular.

Process is declare widget_textInputsList and populate with instances of PixiTextInput so that you can have as many text inputs as you like on screen at any one time.

Use ngFor to loop these onto the page with fixed positions, setting the top, left, width and height css properties from the class instances of PixiTextInput.

Use a click catching background to provide a whiting effect when the text box is focussed (optional).

You'll need to tweak this for sure, but maybe a start point

Variable declarations:

  widget_textInputsList: PixiTextInput[]; // put as many text inputs into this text input list as you like
  widget_textInputContainerClickCatcher_visible: boolean = false;
  widget_textInputContainer_top: number;
  widget_textInputContainer_left: number;
  widget_textInputContainer_width: number;
  widget_textInputContainer_height: number;

CSS:

#widget_textInputContainerClickCatcher{
    position: fixed;
    background-color: rgba(255, 255, 255, .5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.widget_textInputContainer{
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Then creating a list of class instances with text input properties needed:

export class PixiTextInput{
    public x: number;
    public y: number;
    public width: number;
    public height: number;
    public placeholder: string;
    public value: string;
    public isFocus: boolean;
    constructor(x: number, y: number, width: number, height: number, placeholder: string, value: string){
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height ? height : 38; 
        this.placeholder = placeholder;
        this.value = value;
    }
}

Create the list of text input class instances:

    this.widget_textInputsList = [
      this.GetWidgetTextInput(x, y, width, height, "e.g. Workspace 1", "This is the current text value")
    ];

And the functions:

// Pass height null for default height
  GetWidgetTextInput(x: number, y: number, width: number, height: number, placeholder: string, value: string) : PixiTextInput{    
    let k: PixiTextInput = new PixiTextInput(x, y, width, height, placeholder, value);
    return k;
  }

  SetTextInputIsFocussed(textInput: PixiTextInput) : void{
    this.widget_textInputContainerClickCatcher_visible = false;
    if(textInput){
      if(!textInput.isFocus){
        this.ClearAllTextInputFocuss();
        textInput.isFocus = true;
        this.widget_textInputContainerClickCatcher_visible = true;
      }  
    }else{
      this.ClearAllTextInputFocuss();
    }    
  }

  ClearAllTextInputFocuss() : void{
    this.widget_textInputsList.forEach(ti => {
      ti.isFocus = false;
    });
  }

And the html

    <div>
        <div id="widget_textInputContainerClickCatcher" *ngIf="widget_textInputContainerClickCatcher_visible" (click)="SetTextInputIsFocussed(null)"></div>
        <div 
            class="widget_textInputContainer"
            *ngFor="let t of widget_textInputsList"
            [ngStyle]="{
                'top': t.y + 'px',
                'left': t.x + 'px',
                'width': t.width + 'px',
                'height': t.height + 'px'
            }"
            (click)="SetTextInputIsFocussed(t)"
            >
            <input type="text" class="form-control" [(ngModel)]="t.value" [placeholder]="t.placeholder">
        </div>
    </div>

You'll most li