Freckles

Problem with modules using PIXI

Recommended Posts

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 };

 

Share this post


Link to post
Share on other sites

"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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.