Jump to content

Applying displacement filter on Pixi.text element shifts the text outside bounding box and crops it


khandev
 Share

Recommended Posts

const app = new PIXI.Application({
    resizeTo: window
});

document.body.appendChild(app.view);

let text = new PIXI.Text('SwiftLearn IT Solutions',{
    fontFamily : 'Arial',
    fontSize: 40,
    fontWeight: 800,
    fill : 0xffffff,
    align : 'center'
});
text.anchor.set(0.5);

let container = new PIXI.Container();
container.pivot.set(-window.innerWidth/2, -window.innerHeight/2);

let dispImg = new PIXI.Sprite.from('disp.png');
let disp = new PIXI.filters.DisplacementFilter(dispImg);

dispImg.anchor.set(0.5);

app.stage.interactive = true;
container.interactive = true;

app.stage.addChild(dispImg);
app.stage.addChild(container);
container.addChild(text);

text.filters = [disp];

The text gets shifted to the bottom right a tad which makes it overflow its bounding box. Can be seen from the attached image. What am I doing wrong?

disp.jpg

 

Edited by khandev
Link to comment
Share on other sites

11 hours ago, ivan.popelyshev said:

add padding to displacement filter

also, that doesnt look like displacement texture )

Thank you very much, Ivan. Padding worked perfectly. :D

I am just curious about why you said it doesn't look like a displacement texture? I was using it to distort the text by attaching its position with the mouse coords.


Another observation:
The displacement texture is a simple 200x200 black bg with a white blurred circle in between (attached in my original post). But even when the mouse cursor is very far at the top, there is still some displacement applied to the text. Image attached. How to make it so that the displacement occurs only then the 200x200 disp.jpg displacement texture is over the text as it is mapped to the cursor coordinates? As you yourself doubted the displacement texture, could you please share some good practices about how a displacement texture in PIXI.js should actually be?

Thanks,

Regards

Untitled.jpg

Edited by khandev
Additional info
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.

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

  • Recently Browsing   0 members

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