Help with Blurred Text Effect and Replicating CSS' "Background Position"

[KamiFightingSpirit]

Hey, I'm hoping someone can point me in the correct direction on creating these two effects. 

My first effect I want to have is equivalent to CSS' blur effect. I have text that is fading in and fading out, it looks much better in CSS as I can control both blur and alpha, is there some way to do this in WEB GL / PIXI? I am using PIXI.Text for my text object.

 

The second effect I want to recreate is the CSS' Background Position. Basically, I have a solar systems consisting of planets and I want the planets to be in orbit. I am in 2D space and in CSS I can use the CSS' background position to give the appearance that the planets are rotating. My goal is to give the appearance of the planets rotating, however that can be done (as opposed to just recreating the background position effect)

 

Thanks for everyone's help so far! I have learned so much from you guys already!

[themoonrat]

For your first request, it can be achieved by creating a Blur filter on the text. Now tween the strength of the blur whilst also tweening the alpha for the text, and you should have the effect you require.

For the latter: do you have an example that you could show please to help visualise the effect?

[KamiFightingSpirit]

Thanks! I thought it may be a filter, I will go investigate further.

As for the latter request, here is an example where someone used the Background Position to create a "rotating" effect on a 2D object:

https://codepen.io/robdimarzo/pen/LMOLer

 

and a second example: 

https://codepen.io/jcoulterdesign/pen/ZxXbeP

 

Edited March 9, 2020 by KamiFightingSpirit

[KamiFightingSpirit]

What I have been trying to do is use  a texture frame, applying the texture to PIXI.Graphic (circle) and then update the frame. However, I haven't been able to get it to work. Is this possible or am I barking up the wrong tree?

 

My code:

let sunTexture = new PIXI.Texture.from("./assets/sunShrunk.jpg");

//Texture.frame (x, y, width, height)

sunTexture.frame = new PIXI.Rectangle(0, 0, 200, 250);

 

let sunGraphic = new PIXI.Graphics();

sunGraphic.x = renderer.width / 2;

sunGraphic.y = renderer.height / 2;

stage.addChild(sunGraphic);

//Setting the line style lineStyle(width, color)

sunGraphic.lineStyle(1);

sunGraphic.beginTextureFill(sunTexture); // can have sunGraphic.beginTextureFill(sunTexture, 0xff00ff, 1); to color the planet

//draw the circle (x, y, radius)

sunGraphic.drawCircle(0, 0, 100);

//because we are using fill we call endFill.

sunGraphic.endFill();

 

//adds in a ticker manually (determines frame rate etc I think)

const ticker = new PIXI.Ticker();

//adds the animation function into the ticker

ticker.add(animate);

//starts the ticker

let textureTicker = 0;

ticker.start();

function animate() {

    textureTicker += 0.1;

    sunTexture.frame.width = 200 + textureTicker;

    sunTexture.updateUvs();

    renderer.render(stage);

}

 

update();

 

Also, a small question, how do you create a PIXI.Texture and pass in a set frame? Do you have to have a variable set to a rectangle already or is there a way to do it without having a separate line for creating a PIXI.Rectangle?

[ivan.popelyshev]

yeah, Graphics wont acknowledge updateUV's because those UV's are already backed in vertex buffer. However, you can force it to re-calc it! 

put "graphics.geometry.invalidate" just after your "updateUvs()"

For hacks like that , you really should look in source code. Just trying stuff is OK, but you have also to trace it down why its not working.

 

Edited March 10, 2020 by ivan.popelyshev

[KamiFightingSpirit]

1 hour ago, ivan.popelyshev said:

yeah, Graphics wont acknowledge updateUV's because those UV's are already backed in vertex buffer. However, you can force it to re-calc it! 

put "graphics.geometry.invalidate" just after your "updateUvs()"

For hacks like that , you really should look in source code. Just trying stuff is OK, but you have also to trace it down why its not working.

 

Thanks Ivan, unfortunately, for someone my level looking through the source code is often difficult (it raises more questions than it answers). I mostly have to rely on just trying stuff (or asking as many questions as I can get away with) although I really am trying to find the most efficient way to progress my learning.

"Just trying stuff "is pretty bad too as I my path is me reading through the api docs (which I am getting more and more used to although they also raise so many questions...) until I see something that intuitively makes sense as a solution.

Edited March 10, 2020 by KamiFightingSpirit

[ivan.popelyshev]

> which I am getting more and more used to although they also raise so many questions

Those are best docs of all pixi time. We had to make a requirement to jsdoc everything that people bring in pixi. Its not enough and that's why we have forum and me here

> Thanks Ivan, unfortunately, for someone my level looking through the source code is often difficult.

The first step is to use separate IDE window on pixijs sources (vscode or idea/webstorm) , and learn the key that gives you ability to search for a particular class. It becomes easier through time, that perk also helps in case you look in other projects repos! Of course that doesnt mean you'll get 100% answers with it, but at least you'll see small stuff that contradicts documentation. For difficult quesions, forum is the best place for sure

[KamiFightingSpirit]

Having some issues with updating the texture frame after converting my graphic into a sprite in order to be able to use the anchor method. I did this via the following:

    //Create textures

    let sunTexture =

        PIXI.Loader.shared.resources["./assets/sunShrunk.jpg"].texture;

    sunTexture.frame = new PIXI.Rectangle(0, 0, 200, 250); //Texture.frame (x, y, width, height)

    let sunGraphic = new PIXI.Graphics();

    sunGraphic.lineStyle(0);

    sunGraphic.beginTextureFill(sunTexture); // can have sunGraphic.beginTextureFill(sunTexture, 0xff00ff, 1); to color the planet

    sunGraphic.drawCircle(0, 0, 50);

    sunGraphic.endFill();

    let testTexture = app.renderer.generateTexture(sunGraphic);

 

    let sunSprite = new PIXI.Sprite(testTexture);

    sunSprite.anchor.set(0.5, 1.0);

    isometryPlane.addChild(sunSprite);

 

However, now that it is a sprite it is no longer updating the texture frame... Is there a way to use a graphic as a sprite texture and still update the texture frame? 

This is my code for my ticker that I was using to update the graphics frame.

    let textureTicker = 0;

    let step = 0;

    app.ticker.add(delta => {

        textureTicker += 0.1;

        sunTexture.frame.width = 200 + textureTicker;

        sunTexture.updateUvs();

        sunGraphic.geometry.invalidate();

     );

}

Edited March 12, 2020 by KamiFightingSpirit

[ivan.popelyshev]

No. Why do you need to generate texture there? Do you want to spawn 1000 of those planets?

[KamiFightingSpirit]

No, only a few. I am trying to setup a solar system with about 9 planets and a sun.

I wanted sprites as the anchor property allows for easy "rotation" around the sun. I didn't know an alternative way of how to go about getting circular sprites with my texture background.

I wanted to have my graphic frame update in order to give the appearance that the planets are "rotating" on their planetary axis.

Edited March 12, 2020 by KamiFightingSpirit

[ivan.popelyshev]

There cant be anchor in graphics because graphics is not rectangular and bounds can be weird.

Two ways:

1. use Pivot

2. draw planet circle that way its center is in (0,0)

Edited March 12, 2020 by ivan.popelyshev

[KamiFightingSpirit]

Thanks

 

Edited March 12, 2020 by KamiFightingSpirit

[KamiFightingSpirit]

If I adjust the scale of a container via:

container.scale.y = 0.5;

 how can I figure out the math behind making a child of that container appear "normal" (i.e. not affected by its parent x and y scale differential)? Is there any simple guide that explains how these things relate? Preferably explained in a way that a noob can understand. ?

Edited March 13, 2020 by KamiFightingSpirit

[ivan.popelyshev]

Make scale 2 or read the hack in pixijs wiki. From mobile, cant link it

Why exactly do you need it?

Edited March 13, 2020 by ivan.popelyshev

[ivan.popelyshev]

https://github.com/pixijs/pixi.js/wiki/v5-Hacks#ignore-parent-scale--rotation

[KamiFightingSpirit]

On 3/10/2020 at 3:14 AM, ivan.popelyshev said:

yeah, Graphics wont acknowledge updateUV's because those UV's are already backed in vertex buffer. However, you can force it to re-calc it! 

put "graphics.geometry.invalidate" just after your "updateUvs()"

For hacks like that , you really should look in source code. Just trying stuff is OK, but you have also to trace it down why its not working.

 

On this, for some reason if I don't have an image size of 1024*512 Microsoft Edge won't continuously update the image and will instead just blur the image (repeating the same pixels on the texture update?)

Not sure if you have encountered this before, but if anyone has any ideas could you help me understand what could be going on? 

[ivan.popelyshev]

Nope, no idea, need more info

Edited May 25, 2020 by ivan.popelyshev