Sign in to follow this  
KamiFightingSpirit

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

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by KamiFightingSpirit

Share this post


Link to post
Share on other sites

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(00200250);
 
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(00100);
//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?

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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(00200250); //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(0050);
    sunGraphic.endFill();
    let testTexture = app.renderer.generateTexture(sunGraphic);
 
    let sunSprite = new PIXI.Sprite(testTexture);
    sunSprite.anchor.set(0.51.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 by KamiFightingSpirit

Share this post


Link to post
Share on other sites

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 by KamiFightingSpirit

Share this post


Link to post
Share on other sites

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 by KamiFightingSpirit

Share this post


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

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.