Help.I need to paste my sprite into this blue rectangle:)

[koroloff]

const playground = document.querySelector('.video');
const option = {
    width: 706,
    height: 524,
    transparent: true,
};

const app = new PIXI.Application(option);
playground.appendChild(app.view);
app.stage.interactive = true;

const container = new PIXI.Container();
app.stage.addChild(container);

const videoSprite = PIXI.Sprite.from('https://ak3.picdn.net/shutterstock/videos/1025738153/preview/stock-footage-in-technology-research-facility-female-project-manager-talks-with-chief-engineer-they-consult.mp4');
//container.addChild(videoSprite);
videoSprite._height = 524;
videoSprite._width = 706;
videoSprite.x = 3;
videoSprite.y = 9;


const displacementSprite = PIXI.Sprite.from('https://www.kkkk1000.com/images/learnPixiJS/sprite.png');
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.padding = 10;
displacementSprite.position = videoSprite.position;

app.stage.addChild(displacementSprite);
videoSprite.filters = [displacementFilter];

displacementFilter.scale.x = 8;
displacementFilter.scale.y = 12;

app.ticker.add(() => {
    displacementSprite.x++;
    if (displacementSprite.x > displacementSprite.width) { displacementSprite.x = 10; }
});



const graphics = new PIXI.Graphics();
container.addChild(graphics);

const path = [ 15, 60, 690, 0, 706, 524 , 0 , 470];

graphics.lineStyle(0);
graphics.beginFill(0x3500FA, 1);
graphics.drawPolygon(path);
graphics.alpha = 0.5;

graphics.addChild(videoSprite)

Hello everyone, I'm a newbie. I use Pixi v5 2 day. I'm trying to insert PIXI.Sprite into the PIXI.Graphics, and it does not work. Tell me what I'm doing wrong. the sprite is in this blue rectangle

 

 

 

[ivan.popelyshev]

Welcome to the forums!

DisplacementFilter demo is one of our entrance points for web-developers. For that kind of coders, modifying example is a problem , because they are usually trying to jump from a cliff to learn swimming Yes, displacement is cool, but if you dont know other things - you'll be stuck like this.

You described your case not clear enough, there a several ways of doing what you asked that give different results. Adding something as a child doesn't mean it renders inside of it, you need to make a mask instead:

container.addChild(graphics);
container.addChild(videoSprite);
videoSprite.mask = graphics;

If it gives different result than you want to , please explain what exactly do you want, preferably with  a photoshop screenshot. 

Also take into account that PixiJS scene is actually very close to Adobe Flash one. Most of those things exist similar to Flash.

Mask example is here: https://pixijs.io/examples/#/masks/graphics.js

Edited March 1, 2020 by ivan.popelyshev

[koroloff]

Thanks for the quick response. I need to make the video non-standard. The blue square that I described is in fact where to insert the video ?

[ivan.popelyshev]

Well it just cuts parts of video, it doesnt transform the quad. I'm glad that its ok for you

[koroloff]

 

but as I understand it, you can transform the video without cropping?:)

[ivan.popelyshev]

https://pixijs.io/examples/#/plugin-projection/quad-homo.js

Requires https://github.com/pixijs/pixi-projection/ plugin. 

You had problems with basic mask, so i think it will probably take several hours for you to disassemble that example and get what you want without bugs, including how to actually add a plugin to your app. Be patient, and ask help when you will be spent

Edited March 2, 2020 by ivan.popelyshev

[koroloff]

Thanks for the examples, I will try now. I cut everything now, but there is a nuance, the mask added a gray filter on the video 

Now i try your new examples -)

[ivan.popelyshev]

that's strange, it shouldn't do that. try to switch off filters

[koroloff]

2 hours ago, ivan.popelyshev said:

https://pixijs.io/examples/#/plugin-projection/quad-homo.js

Requires https://github.com/pixijs/pixi-projection/ plugin. 

You had problems with basic mask, so i think it will probably take several hours for you to disassemble that example and get what you want without bugs, including how to actually add a plugin to your app. Be patient, and ask help when you will be spent

I did it, thank you so much for the guides !!! If it does not, tell me please

const videoSprite = new PIXI.projection.Sprite2d (PIXI.Texture.from ('https://ak3.picdn.net/shutterstock/videos/1025738153/preview/stock-footage-in-technology-research- facility-female-project-manager-talks-with-chief-engineer-they-consult.mp4 '));

when creating a 2D sprite with a video, can it be looped?

[ivan.popelyshev]

Its all about texture, sprite just shows it. Texture changes every frame and is being uploaded to videomemory. You can control the flow through HTML video element.

Texture.from() calls detection function that creates this object:

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts

Then its wrapped in Texture & BaseTexture, basically resource is in "texture.baseTexture.resource"

Sprite2d and Sprite care only about Texture itself, not about what it has inside. You can access video element from resource and do whatever you want

Edited March 2, 2020 by ivan.popelyshev

[koroloff]

let videoHome = document.createElement("video");
videoHome.preload = "auto";
videoHome.autoplay = true;
videoHome.loop = true;              
videoHome.src = "https://ak3.picdn.net/shutterstock/videos/1025738153/preview/stock-footage-in-technology-research-facility-female-project-manager-talks-with-chief-engineer-they-consult.mp4";
let videoForSprite = PIXI.Texture.from(videoHome);

const videoSprite = new PIXI.projection.Sprite2d(videoForSprite); 

i received an error, what i did wrong?)

[koroloff]

oh, i add this and it work!!!! THANKS!!! It was hard for me , because i newbie.. !!!!

videoHome.crossOrigin = "anonymous";

Edited March 2, 2020 by koroloff

[koroloff]

 

I know that I'm probably tired, but you are guiding me on the right path, thank you so much for that !! but there is still a question, how to get rid of the canvas curves when transforming 2d video?

[ivan.popelyshev]

That's a simple question with hard answers. Options:

1. Through texture filtering - add a transparent edge to a video - requires modification of video

2. Add a FXXAFilter on it

Of course there are more ways to do that, maybe someone can post how to modify VideoResource that it adds transparent edge automatically, I'm not feeling well to do that now.

Edited March 3, 2020 by ivan.popelyshev