Hi all.
I'm starting with PixiJS now and want to know about Render ()

In the ScratchCard example (https://pixijs.io/examples/#/demos-advanced/scratchcard.js), its possible "paint" an image in my board, its very NICE!
But, how can I watch to do some action when all image is "painted" in screen?
Can I watch this? If yes, How?

I want do an action when my image is all "painted" e other if my image is 50% "painted"

Thank You all! ❤️

Hi there,
I'm totally new to pixi.js, but somehow managed to do my first steps. Now I am stuck with a problem however.

I am trying to use pixi.js for an interactive slide show to blur the upcoming and previous images (as sprites). All works nicely, except that at the blur edge of my left blurred somehow some colors of my right blurred image seem to "spill" in. I am not sure how to describe it best. It seems to me that behind the scenes the images are merged somehow, then blurred all together and then cut off at a slightly incorrect position.

I attached a screenshot that demonstrate the issue.

Each of the sprite has its own filter (since I need to animate them independently) and the problem does not only happen between the two sprites shown in the image, but also between the other sprite pairs as well, once the slideshow moves on to the next slide.

I have tried to change all blur filter settings, padding, kernelSize, quality, blur amount, nothing seems to fix the issue.
Does anybody maybe know what the issue could be, and – more importantly, how I can fix it?

My setup is quite complex, so I don't know what are the most relevant code snippets that would help you analyze the problem. My hope is that by the visuals of it one of you could make an educated guess about what's wrong.
However, here is also the code I have in a gist, just in case:

Code

If there is any more information I can provide to help solve the problem, please let me know.

Thanks!
trych
 

Hi All,

I have a game which uses a lot of spritesheets image sequence animations. I see a very bad lag and jerk when playing for the first time for most of the animations (specially when the animation sequence is distributed in multiple sprites). I have gone thru the forum and implemented prepare plugin in the below way :

let texture = new PIXI.Texture.from(resources[k].name);

Renderer.plugins.prepare.upload(texture, this.onUploadDone.bind(this));

But it did not help. Any idea how to solve this as the lag and jerk is too bad experience.

Thanks in advance

Ayan

I'm using pixi for playable ads and currently considering to use typescript. I've barely heard about it in context of pixi before v5, but the main reason i'm thinking about it right now is that most of boilerplates on official wiki use typescript. Internet search didn't really help me to make a decision because peoples' opinion about typescript vary a lot. So is it really that useful or wide usage of ts in boilerplates is just a coincidence?

Hi there,

after having received great support here recently posting my first pixi.js issue, I now run into another problem I can't resolve.
On my page I load a mix of images and videos as sprites. The goal is to crop these sprites, which I can achieve by changing the frame with and height of the corresponding texture.
While this works flawlessly for images, when I try to do the same thing for videos, they don't get cropped, but they sort of crop but then extend their last pixel column up until the full length again.
See the sample screenshot I attached, where I tried to crop a video to half its width, but it then got extended in the way I described.

Here is my code:

const canvas = document.getElementById('mycanvas');
const app = new PIXI.Application({
  view: canvas,
  width: window.innerWidth,
  height: window.innerHeight
});

document.body.appendChild(app.view);

app.loader.add(mediaResources).load((loader, resources) => {

  let sprites = [];
  let resource, texture, frame, fw, fh;

  for(let i = 0, counter = 0; i < mediaResources.length; i++, counter++) {

    resource = resources['rs' + counter];
    if(resource.extension === "mp4") {
      texture = PIXI.Texture.from(resource.url);
      frame = texture.frame;
      fw = 1024;
      fh = 576;

    } else {
      texture = resource.texture;
      frame = texture.frame;
      fw = frame.width;
      fh = frame.height;

    }

    // crop the frame to half its width, leaving only the right half
    frame.width = fw * 0.5;
    frame.x = fw * 0.5;

    texture.updateUvs();

    sprites[i] = new PIXI.Sprite(texture);
    sprites[i].y = i * 600;
    sprites[i].x = i * 600;

    app.stage.addChild(sprites[i]);

  }

});

Am I doing something wrong or is this just the way pixi.js treats video textures? If so, is there a way to work around this and still get the result of a video sprite that is cropped?

Thanks a lot for looking into this!

 

I want my game to have a mid- or background that has the world in it, and then some foreground objects. If the player clicks on a foreground object, then that should be handled one way, but if the player clicks within the canvas without hitting a foreground object then that should be handled another way. So my question is, does Pixi provide a nice way of going about this?

What I've tried:
 

// Method 1
const world = new PIXI.Container();
world.interactive = true
world.hitArea = new PIXI.Rectangle(0, 0,
    this.app.stage.width, this.app.stage.height);
world.on('pointerdown', () =>
    console.log('hit'));

this.app.stage.addChild(world);

// Method 2
this.app.renderer.plugins.interaction.on('pointerdown',
    () => console.log('mouse is down'));

I thought that there might be a way to create a container that only fires if a child objects of a different container weren't hit (these child objects being the foreground objects), but method 1 isn't firing the callback.

Method 2 fires the callback but I'm not sure how to go from there to checking if a foreground object was hit. It occurs to me that I could have a global boolean that sets whenever a card is clicked, but that seems hacky and prone to breakage.

Ultimately I want to have a canvas that fills the entire viewport width of the browser and have an image on the canvas fill the entire width of that canvas. I'm taking advantage of pixi.js's displacement filter so that I can create a pseudo 3d effect using a depth map underneath it. The code I'm currently using is

let app = new PIXI.Application();
var w = window.innerWidth;
var h = w / ratio;
app.view.style.width = w + 'px';
app.view.style.height = h + 'px';
document.body.appendChild(app.view);
let img = new PIXI.Sprite.from("images/horses.png");
img.width = w;
img.height = h;
app.stage.addChild(img);
depthMap = new PIXI.Sprite.from("images/horses-depth.png");
depthMap.renderable = false;
depthMap.width = img.width;
depthMap.height = img.height;
img.addChild(depthMap);
app.stage.addChild(depthMap);
displacementFilter = new PIXI.filters.DisplacementFilter(depthMap, 0);
app.stage.filters = [displacementFilter];

Attached is a screenshot

Hi all!

First - thanks for the great work on PIXI. But now to my question. Is it possible to render only when there are visible changes? So not 60 times a second. I'm currently hanging on to the interaction manager and listen to almost all mouse and touch events. I also monitor DisplayObject.alpha, Sprite.tint, Sprite._onTextureUpdate, Transform.updateTransform, Transform.updateLocalTransform, Transform.onChange as well as Text.updateText and Text.text. As soon as changes are made there, I set a flag so that I can manually call the render function. Is this correct, are there easier ways? Thank you in advance!

got this weird bug when drawing lots of circles

let gameWidth = 800;
let gameHeight = 608;

const app = new PIXI.Application({
  width: gameWidth, height: gameHeight, resolution: 1, antialias: true
});
document.body.appendChild(app.view);

var circles = new PIXI.Graphics();

app.stage.addChild(circles);

let nSegmentsX = gameWidth / 16;
let nSegmentsY = gameHeight / 16;

circles.beginFill(0x5cafe2);
for (let x = 0 ;x<nSegmentsX; x++){
    for (let y = 0 ;y<nSegmentsY; y++){
        circles.drawCircle(x*16 + 8, y*16 + 8, 8);
    }
}

It only happens when drawing circles with radius 7 and above in this case, anything below that drawing is normal as you can see in picture 3

The title is a bt misleasing - it's trivial to use Graphics as a button, but, I'm having trouble with a particular setup.

My button class is a PIXI.Container which has a PIXI.Graphic child. The interactivity and listener are attached to the Graphic (I do this so I can control the shape of the hit area, and use any Sprite I need.) Again this works fine, but when I capture the click I need to get a reference to the Container and this is the part that is proving difficult.

When I look at the event target from the lick I get a refernce to the canvas - I can't see a way to get a reference to the Graphic or Container...

Can anyone advise?

Hey all, I'm building a mobile site, where the homepage utilizes pixi.

When I navigate away from the homepage via js (but still within the same HTML page - no page reload) I want to basically clean up PIXI and all objects I've created within it and flag those items for garbage collection.  

Is there a global PIXI.destroy() method that anyone knows of that would help out for this scenario?  Or is this more of a manual process, where I've got to crawl through all of my created textures and call their destroy method?

Any tips are greatly appreciated.

I'm using Pixi 5 legacy and I notice that in Canvas mode, resolution affects texture sizes, see the examples:

I'm making a "center light" using 4 square sprites and a center radial gradient sprite. I make it this way so the sizes can be dynamic.

Both the green sprite and the red one have the same height. In this case I'm using a 8x8 white, tinted texture for the red sprite.

If I use a base 10 (10x10, 100x100) texture, the effect almost disappears, scaling correctly:

Also, if I use 1x1 texture,  the sprite becomes invisible with a resolution other than 1 (at least smaller than 1).

Is this normal? How can I avoid it?

Hello,

I know this question has been already answered and posted. But I am having a problem trying to achieve this "scratchard effect"

https://pixijs.io/examples/#/demos-advanced/scratchcard.js

I have it working nice, with a superb brush and drawing nicely from last postiion to new one, when I have one image over another and I apply a mask. It works flawlessly. No complaints at all.

The problem is when I want to have this overlay as "standalone" scratchable overlay. What I mean is I want to cover a few sprites, with this overlay and scratch this surface/overlay and draw what it is under it.

I am used to PIXIJS 4, and even upgraded to version 5 to try to use BLENDER_MODES.ERASE but it does not work in any way.

Is there anyway to:

• Access overlay sprite texture
• Paint with the brush so we add ALPHA to the "selected pixels"?

In this way i think it does not matter what's below the overlay/scratchable image, as we will draw "holes" on it and see through the sprite.

Cheers

Hi everyone,

so i have a question about how i can make my particles emitter to move from point to point and is it possible to do this. 

I have an exact example of what i need. 

Can someone give me a simple code example ? Thanks.

Hello,

Im trying to change the background image of a game built using pixijs. Im just wondering what is the best way to do it ?.  Currently im using the below method but the problem is i have to redraw all the other child elements after i change the background. Thank you

const parent = app.view.parentNode;
    var imagePath = "images/"+image;

    var landscapeTexture = PIXI.Texture.fromImage(imagePath);


    var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 0, parent.clientWidth, parent.clientHeight));

    background = new PIXI.Sprite(texture2);
    app.stage.addChild(background)

Hi, i am curious what is best way to make collision. At this moment is make it this way: i have all elements with collision in an array and i iterate through it and calculate distance this way:

This calculations make a sphere. We can do it this way to get a square or rectangle:

I think this is not the best method, because lets imagine we have 1000 things with collision. We have to calculate their distance 1000x1000 = 1000000 times per frame.

My second thought is a 2d array that pretends to be map. If object is on x=200 and y=200 we can assign it like this map[200][200] = 1. And then another object check is that place is free (there will be 0 then). Its good when the object is 1 pixel wide and high. For larger objects it could be harder to implement.

How are you doing this?

Hi, 

I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0

We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process.

the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out.

here is the code for drawing the horizontal and vertical lines:

draw(keepCurrentGridSpacing?: boolean) {
        this.clear();
        this.removeChildren();

        let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin);
        let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin);

        if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) {
            this.updateBackgroundSquareSizeBasedOnScale();
        }

        let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x);
        let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x);
        let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y);
        let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y);

        let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize);
        let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize);

        let endX = toX;
        let endY = toY;
        let width = endX - startX;
        let height = endY - startY;
        this.beginFill(0xFFFFFF);
        var color: any = PixiConstants.backgroundColor;
        this.lineStyle(backgroundLineSize, color);
        this.drawRect(startX, startY, width, height);

        // Draw Horizontal and Vertical Lines
        var i: number;
        for (i = startY; i <= endY; i += this.backgroundSquareSize) {
            this.moveTo(startX, i);
            this.lineTo(endX, i);
        }
        for (i = startX; i <= endX; i += this.backgroundSquareSize) {
            this.moveTo(i, startY);
            this.lineTo(i, endY);
        }

        // Draw Axis
        this.beginFill(0xFFFFFF);
        this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor);
        this.moveTo(startX, 0);
        this.lineTo(endX, 0);
        this.moveTo(0, startY);
        this.lineTo(0, endY);

        this.stage.animate();
    }

private updateBackgroundSquareSizeBasedOnScale(){
        let canvasWidth = this.stage.canvas.getCanvasParentWidth();
        let canvasHeight = this.stage.canvas.getCanvasParentHeight();
        let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y);
        let ratio = max / this.backgroundSquareSize;
        if (ratio < 10) {
            while (max / this.backgroundSquareSize < 10) {
                if (this.backgroundSquareSize == 100) {
                    // Smallest grid size allowed is 1 meter
                    break;
                }
                this.backgroundSquareSize /= 2;
            }
        } else if (ratio > 20) {
            while (max / this.backgroundSquareSize > 20) {
                this.backgroundSquareSize *= 2;
            }
        }
    }

i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.

Hi!

I'm looking to start with Pixi, and i thought it would be fun to look if i can play around with the Slots from the Examples . Now when i look at the code provided i think i understand de part where the 5 reels are build and filled with 4 random symbols each. The part i don't understand is how it works when spinning the slots it looks like the reels are filled with infinite random symbols.

Can someone explain to me in wat part of the code this effect is happening?

Code can be found here: https://pixijs.io/examples/#/demos-advanced/slots.js

Luffy

Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile.

I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites.

It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object.

Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays.

The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite?

I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now:

https://github.com/pixijs/pixi.js/issues/2163

I just found the following with a possible alternative using multiply blending:

https://github.com/pixijs/pixi.js/issues/3735

To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this?

Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture?

Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.

Hello All -- Looking forward to learning a lot from the people on these forums! How can I get the following to work?

I am trying to get a container to rotate around it's center, much like is seen here: http://scottmcdonnell.github.io/pixi-examples/index.html?s=basics&f=container-pivot.js&title=Container Pivot

However, I can't seem to figure out the math behind placing the container on the screen and then the amount that you must offset it in order to have the pivot rotate in the center.

My setup is I have a screen with width: 1536 and height: 722

I have a container with width: 384 and height: 361

I have centered the container in the center by using the following:

  container.position.x = 576;
 container.position.y = 180.5;

I tried to then set my pivot with the following:

container.pivot.set(384 / 2, 361 / 2);

My thinking that the local center of the container would be half of its width and half of its height, but then this repositions the container and it is no longer centered.

My animate function is as follows FYI:

 app.ticker.add(animate);
      let delta = 0;
      function animate() {
        delta += 0.1;
        container.rotation += 0.01;
}