pongstylin

PIXI Extract

Recommended Posts

I'm having a surprising amount of difficulty using the extract plugin to render a container object.  Does it support filters?  Anytime I apply a filter to the top-level container or any nested containers, it results in shifting the position of the contents down and right (resulting image getting truncated as well) and the desired color effect appears to be missing.  I'm using PIXI v5.2.1

Edited by pongstylin

Share this post


Link to post
Share on other sites

Extract and things like "generateTexture" often have new bugs. 
when it happens, its better do the following:

1. Move your container into another container that has no filters. If you generate texture of something that has parent - sorry, no guarantees, debug it yourself.

2. take bounds of the container with "container.getBounds()".

3. pass those bounds to "renderer.generateTexture(myContainer, bounds)". Maybe move container that way its left-top corner is in (0,0)

4. use extract plugin on resulting texture

5. destroy the texture.

Forum and pixijs github issues have many copies of the issue and every time we helped , posted extra examples. You can search for those threads.

I'm sorry you encountered that problem after we fixed it like hundred times. Maybe if you update to 5.3.0 it will just work.

Yes, you have to look inside extract and do all those things on your own, because currently i dont have time to help people with such issues.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

Actually, you did have the time to help me with my issue.  I was already trying to position the top-level container using bounds with poor results.  But placing the top-level filtered and positioned container inside another vanilla container worked like a charm.  (I wish I thought of that before posting).  And the filters are indeed applying the correct coloring, so I must've missed something before.  I didn't end up using your advice on generateTexture, though.  I'm just using extract directly.  Perhaps your advice is the equivalent of positioning my filtered container using bounds.

Share this post


Link to post
Share on other sites

Hello,
I am having similar issues and I cannot make it work even on a simple example. I am trying to extract image with filter applied and I always get an empty image as a result.
I tried different approaches, extracting the sprite, generating texture of the sprite and extracting it, putting it into some vanilla container and extracting, and also extracting the whole stage, but always the same result.  Everything works fine without the filter applied.  Is there something that I am doing wrong?

Below is the simple example code that did not work on Pixi Playground, the rendering works fine, it is just the extracting that is not working.

/**
* This is the default playground.
* You should see a bunny spinning in the right preview pane.
* Feel free to use this as a starting point for you own playground!
*/

// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

// Load the bunny texture
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png')
    .load(startup);

function startup()
{
    var bunny = new PIXI.Sprite(app.loader.resources.bunny.texture);

    // Center the sprite's anchor point
    bunny.anchor.set(0.5);
    bunny.filters=[new PIXI.filters.BlurFilter()]

    // Move the sprite to the center of the screen
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    const photoContainer = new PIXI.Container();

    photoContainer.addChild(bunny);

    app.stage.addChild(photoContainer)


    const texture = app.renderer.generateTexture(photoContainer, photoContainer.getBounds())

    console.log(app.renderer.extract.base64(texture));

    console.log(app.renderer.extract.base64(photoContainer));

    console.log(app.renderer.extract.base64(bunny));
    
    console.log(app.renderer.extract.base64(app.stage))
}

 

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.