Problem with modules using PIXI

[Freckles]

import { UnderlineText } from './underlineText.js';

let Application = PIXI.Application,
loader = PIXI.Loader.shared,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite,
text = PIXI.Text;

let app = new Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
transparent: false,
resolution: 1,
autoDensity: true
});

document.body.appendChild(app.view);

let underLine = new UnderlineText(null, [100, 385], null, null);

app.stage.addChild(underLine);

//app.loader.onError.add((error) => console.error(error));

Above is my index.js file. I have the module called UnderLineText. It doesn't work properly as it shows underline but not the text itself. It does count the width of the text, thus displaying the line underneath but I don't know how to make the text visible. Any ideas what I did wrong? 

P.S. I'm using PIXI js and I'm a newbie.

class UnderlineText extends PIXI.Graphics {
    constructor(text, points, textFontSize, textColor) {
        super();

        let t = this.textFontSize = textFontSize || 12;
        let s = this.lineWidth = 1;
        let c = this.textColor = textColor || "0xFFFFFF";
        let ut = this.text = text || "Ողջույն";

        let textStyle = {
            fontFamily: 'Arian AMU',
            fill: c,
            fontSize: t
        }
        
        let newText = new PIXI.Text(ut, textStyle);
        this.points = points;
        points[0] = newText.position.x;
        points[1]= newText.position.y;
        this.lineStyle(s, c);
        this.moveTo(points[0], points[1] + 13);
        this.lineTo(points[0] + newText.width, points[1] + 13);
    }
}

export { UnderlineText };

 

[ivan.popelyshev]

you didnt add newText as a child.

[Freckles]

18 minutes ago, ivan.popelyshev said:

you didnt add newText as a child.

Could you please tell me how to add, the way I tried didn't work

Edited April 27, 2020 by Freckles

[ivan.popelyshev]

"this.addChild(newText)"

However I dont understand why do you think "newText.position" already set. Its (0,0) after creation. You should do something like "this.position.set(points[0], points[1])" , and specify graphics coords relative yo the elements, no "points[0], points[1]" needed there, just usual relative coords (0, 13) - (newText.width, 13)

Seems that you have problems with good old Flash stage tree and its transforms. What is position, scale, rotation and how its passed from parents to children. If i set parent position (10,10) will child "position" will also be like that? The only demo pixi has is https://pixijs.io/examples/#/demos-basic/container.js , so you have to read tutorials for other renderers like Adobe Flash to understand that  Even CSS transforms can help you (except pixi doesnt have css width/height for containers). Its something general people usually know already from their other experiences.

[Freckles]

4 minutes ago, ivan.popelyshev said:

"this.addChild(newText)"

However I dont understand why do you think "newText.position" already set. Its (0,0) after creation. You should do something like "this.position.set(points[0], points[1])" , and specify graphics coords relative yo the elements, no "points[0], points[1]" needed there, just usual relative coords (0, 13) - (newText.width, 13)

Seems that you have problems with good old Flash stage tree and its transforms. What is position, scale, rotation and how its passed from parents to children. If i set parent position (10,10) will child "position" will also be like that? The only demo pixi has is https://pixijs.io/examples/#/demos-basic/container.js , so you have to read tutorials for other renderers like Adobe Flash to understand that  Even CSS transforms can help you (except pixi doesnt have css width/height for containers). Its something general people usually know already from their other experiences.

Thanks a lot, your answer was really helpful