Hi everybody, 

I am starting with Pixisjs and getting a small performance issue with something that should be really simple to process: 
when I draw a triangle (moveTo, lineTo) on each mousemove event with one of the points which is the mouse position, it performs well at the beginning, but the more i follow on with mouse move, the worse get the performance. After a minute, the FPS ist really low. 

I made a pen to illustrate it:
https://codepen.io/daviddarx/pen/MLEbvE

If I clear the graphic at the beginning of each mouse move event (//graphics.clear();), the performance stays good all the time. 
But unfortunately, it given't the effect that I will reach anymore :( . 

Am I missing something? Should I try another approach to draw elements on the stage on high frequency without erasing the stage first?

Thank you a lot for your support!
David 
 

I'm working on a website, that has images that will use displacement filters for some interactivity. As soon as I add them to my container, the images get blurry, even though I've got the filters scaled to 0.

I'm on a MacBook Pro (Retina).

Here's a CodePen of the issue:
https://codepen.io/elegantseagulls/pen/NowKgG?editors=0010

commenting out line 79 will show the higher resolution images.

Any thoughts on this? Am I missing something?

Hello Everybody

Trying to make a collision detection between two object.

I have one object there is going to catch another object. Theres a new obejct to catcht every 10 seconds, and every thing goes fine when i catchs one object at time. But when theres multiple object on stage, something going wrong:

Heres what im doing:

Creating a "collector":

this.spr_Con = new PIXI.Container();
this.scene.addChild(this.spr_Con);

//Then creating the hitarea

  this.spr_hitArea = new PIXI.Graphics();
                this.spr_hitArea.beginFill("0xffffff");
                this.spr_hitArea.alpha= 0.5;
                this.spr_hitArea.drawRect(-20, 0, 40, 40);
                this.spr_Con.addChild(this.spr_hitArea);

  this.setNinja = setInterval(() => {


 this.spr_ninjaCon = new PIXI.Container();
 this.scene.addChild(this.spr_ninjaCon);

this.ninja_hitArea = new PIXI.Graphics();
                        this.ninja_hitArea.beginFill("0x000000");
                        this.ninja_hitArea.alpha= 0.5;
                        this.ninja_hitArea.drawRect(-20, -20, 40, 40);
                        this.spr_ninjaCon.addChild(this.ninja_hitArea);


}, 10); //END interval

export default class Hittest {


    constructor() {
   
    }


    checkme(a,b){

        var ab = a.getBounds();
        var bb = b.getBounds();
        return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

    }

};

  this.app.ticker.add(() => {

 if (  this.collectNinjas.length > 0) { // is there any object

   if (this.ht.checkme(this.spr_hitArea, this.ninja_hitArea)) {

console.log('intersection true');

    this.scene.removeChild(this.spr_ninjaCon);

}
}

 }); //End app.ticker

I am developing a game in which i have to click an image .after click it will flip and show prize after that i have to move this image and prize towards prize-board.during this movement i have to scale these images to fit into prize-board slot .how to solve this problem. please help

Hy everyone, 

My question is about the hitArea of a sprite. First of all I am not quite sure if I understood the definition correctly, so I would really appreciate a clear explanation about it. 

What I want to do is: I have sprites in my game and I would test collision between them, but the sprite's width and height is not perfectly accurate to its 'actual appearance' so I would reduce the hitArea to improve my collision detection algorithm (but sometimes setting the hitArea is making it worse than using just the regular .getBounds() function).

This is how I did it for the first time but collision didn't occur.

let player = new PIXI.Sprite(texture); 
player.position.set(75, app.stage.view.height / 2);
player.anchor.set(0.5);

player.hitArea = new PIXI.Rectangle(player.x, player.y, 60, 20);

Later I found out that it is because the enemy that I am checking the collision against, is not being compared to my player object, but the initial coordinates of the PIXI.Rectangle that I use to modify hitArea with.

I have found out that if I want to compare the player.hitArea of the current position of my player object to enemy.getBounds(), in my game loop I update the hitArea of player like: 

app.ticker.add( () =>{
player.x += player.velocityX;
player.y += player.velocityY;
player.hitArea = new PIXI.Rectangle(player.x, player.y, 75, 85);
};

 I feel like this is a poor solution that I have came up with. Is there a better way of always updating hitArea coordinates to the player object's current coordinates? 

Hy everyone, 

My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking). 

After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage.

if (isCollision(player.getBounds(), enemy.getBounds())) {
		app.stage.removeChild(player);
		app.stage.removeChild(enemy);
		app.ticker.stop();

		PIXI.loader.add('game-over','resources/images/game-over.png').load(ready);
		function ready(){
			let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture);
			
			app.stage.addChild(gameOver);
		}
	}

I played around with setting the coordinates of the sprite too to see if the image may be out of the stage but it did not solve the issue.

Hy everyone, 

My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking). 

After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage.

if (isCollision(player.getBounds(), enemy.getBounds())) {
		app.stage.removeChild(player);
		app.stage.removeChild(enemy);
		app.ticker.stop();

		PIXI.loader.add('game-over','resources/images/game-over.png').load(ready);
		function ready(){
			let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture);
			
			app.stage.addChild(gameOver);
		}
	}

I played around with setting the coordinates of the sprite too to see if the image may be out of the stage but it did not solve the issue.

I'm trying to create a Sprite using PixiJS v4 (or v5?) but feeding a texture from a Webcam (a MediaStream) into it. It doesn't seem to be possible.

An old 2017 thread has a link to an example that should work. Unfortunately 1) this example doesn't work anymore, likely because of HTML change since then and 2) even if it worked, the solution also seems pretty convoluted (copying frame by frame?) so I'd like to avoid something like that if possible.

On my case, I've tried creating a <Video> element and setting a source from that...

const stream; // This is a MediaStream that comes from navigator.mediaDevices.getUserMedia()
const video = document.createElement("video");
video.autoplay = true;
video.srcObject = stream;
document.documentElement.appendChild(video);

This works well, since we can set the srcObject (not the src) of a <Video> to a stream and it works magically.

But the problem arises when I try adding that to Pixi. I can do this:

const texture = Texture.fromVideo(video, SCALE_MODES.LINEAR, true, false);
const sprite = new Sprite(texture);

Which is, I pass the <Video> instance (since I don't have a url) to the texture. But it doesn't work; Pixi itself is kinda silent, but them I get an initial Chrome render error:

[.WebGL-0000017A07139680]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips

And additional errors on every frame:

[.WebGL-0000017A07139680]RENDER WARNING: texture bound to texture unit 8 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

Despite what the error says, I don't think it has anything to do with the bounds of the texture. Even if I grab a 256x256 texture from the camera, it stops working.

For comparison, if I just set the <Video> src to a normal file...

const video = document.createElement("video");
video.src = "myvideo.mp4";
document.documentElement.appendChild(video);

...then the above code works fine and I'm able to create a Texture from a <Video> tag.

I've tried a different approach, creating a video URL out of a media stream (which, technically, should work):

const stream; // This is a MediaStream that comes from navigator.mediaDevices.getUserMedia()
const videoURL = URL.createObjectURL(stream);
const texture = Texture.fromVideo(videoURL, SCALE_MODES.LINEAR, true, false);
const sprite = new Sprite(texture);
this.addChild(sprite);

But I get a nasty error on the "URL.createObjectURL" line:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

So, anyway.

Does anyone know of a way to create a texture from a webcam input in PixiJS?

Hi,

I'm quite new to web development, so I'm quite lost regarding to make VS Code Intellisense work for PixiJS. I'm currently using Webpack 2 and I'm able to run PixiJS examples, but only because I've included this in my index.html file:

I have a huge sprite that contains many sub sprites, I want to add mosaic to a specific area of this sprite. I have tried the PixelateFilter but it takes effect on the whole sprite.

The attachment is what I want (see top-right corner)

Last week I finished a paint brush tool (like in the good old MS paint ) and in order to get it running quite fast I am using a renderTexture print basically a path of  circles such that it looks like  a line. As soon as the user releases the pan-move, the tool emits the path (array of coordinates) which in turn gets rendered via the drawPolygon method of a pixi graphics (it looks much nicer and I is more performant than using circles again in a graphic).  I totally avoid using beginFill()... basically only using the lineStyle before drawing the polygon. However, it seems that this is more or less only a border-decoration  and cannot handle pointer-events (to let the user select these polylines and maybe remove them). Are there any solutions to this problem?  A quickfix would be a trail of lineTo movements but  since there is no lineCap, this looks pretty ugly

Thanks in advance

Made anything cool with pixi.js? Post it up here and share it with the world!

Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it!

To get the ball rolling, here are some pixi.js projects that exist out on the internets:

games:

http://www.goodboydigital.com/runpixierun/

http://www.theleisuresociety.co.uk/fightforeveryone/

http://flashvhtml.com/

experiments:

http://gametest.mobi/pixi/morph/

http://gametest.mobi/pixi/balls/

http://www.goodboydigital.com/pixijs/bunnymark/

Hi guys!

New with PIXI and have some troubles with loading audio with PIXI.loader.

startButton.on("pointerdown", function(){
            changeLanguage('eng');
            startAnimationBoard();
        });
espButton.on("pointerdown", function(){
            changeLanguage('esp');
            startAnimationBoard();
        });

function changeLanguage(lang){
            if( lang == 'esp'){
                
                sound.add('sceneLogo', './objects/mp3/esp/1.mp3')
                .add('scenePlay', './objects/mp3/esp/2.mp3')
                .add('sceneBalance', './objects/mp3/esp/3.mp3')
                .add('sceneHello', './objects/mp3/esp/4.mp3')
                .add('sceneInteractive', './objects/mp3/esp/5.mp3')
                .add('sceneAirport', './objects/mp3/esp/6.mp3')
                .add('sceneDownload', './objects/mp3/esp/7.mp3')
                .add('sceneData', './objects/mp3/esp/8.mp3')
                .add('scenePerson', './objects/mp3/esp/9.mp3')
                .add('sceneFinal', './objects/mp3/esp/10.mp3')
                .load();
            }
            else if(lang == 'eng'){
                sound.add('sceneLogo', './objects/mp3/eng/1.mp3')
                .add('scenePlay', './objects/mp3/eng/2.mp3')
                .add('sceneBalance', './objects/mp3/eng/3.mp3')
                .add('sceneHello', './objects/mp3/eng/4.mp3')
                .add('sceneInteractive', './objects/mp3/eng/5.mp3')
                .add('sceneAirport', './objects/mp3/eng/6.mp3')
                .add('sceneDownload', './objects/mp3/eng/7.mp3')
                .add('sceneData', './objects/mp3/eng/8.mp3')
                .add('scenePerson', './objects/mp3/eng/9.mp3')
                .add('sceneFinal', './objects/mp3/eng/10.mp3')
                .load();
            }
        }

Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms.

Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all.

Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets.

Thank you!

P.S. : iOs versions 10.1.x and 12.1.x

Hello all,

I played a little bit with Pixijs, started a small game (added a char, some floor tiles, collision, movement, a node server which provides all level and char information by Json etc.).

So now the basics are running and I need some advice to go further:
I've seen different GUI tools like pixi-ui and EZGUI, but the github repos are quite old and I don't know if they are still supported, and much more important if they are compatible with pixi v5? 

At the moment I try to do everything in basic typescript, to keep dependencies quite small, which is fine so far. I thought to use Angular on top, but I don't see the advantage at the moment to use angular or react here. 

So my questions are:
1 .are  the above mentioned GUI tools still up-to-date/compatible with pixi V5? Or are there any alternatives? 

2. Concerning frameworks like Angular etc: I see that you can use it to create DOM elements in front of the canvas, but I tend to add everything to the canvas itself and don't use any extra DOM elements . Are there are any suggestions concerning handling/performance/use cases where extra frameworks make sense etc. (for sure it is easier to add DOM elements instead of elements in canvas...)

I have no problem to create some basic elements (button, textbox etc.) myself, but I think this work has already be done and I want to safe time, but at the moment I've lost the overview a little bit which makes sense or not. 

Any idea/advice would be helpful even as I know that it depends on game type!

Regards Moguai
 

I have a few shaders I've created using Pixi 5.0.0-beta.3. To get the correct 0...1 UV for a position I'd normally do this, since vTextureCoord is not normalized:

uniform vec2 u_resolution; // Manually passed
uniform vec4 filterArea; // Automatically passed

vec2 getUV(vec2 coord) {
	// Return correct UV for sprite coordinates
	return coord * filterArea.xy / u_resolution;
}

void main() {
	vec2 uv = getUV(vTextureCoord);
	gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}

This doesn't seem to work anymore, though - filterArea is always empty.

Unfortunately vTextureCoord is also not on the 0...1 range - if I try drawing a diamond...

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
vec2 uv = vTextureCoord;
if (uv.x + uv.y > 0.5 && abs(uv.x - uv.y) < 0.5 && uv.x + uv.y <= 1.5) {
	// If within diamond, turn purple
	gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
}

...I get this (notice the incorrect scale):

So, what's the way to calculate a 0...1 UV in Pixi 5.0?

I've tried checking the diff between versions, but it's not very clear what has changed there. I've tried using outputFrame, inputSize, and inputPixel (I've seen that in some other examples) but to no avail.

Any help in the right direction is appreciated!

Hello,

What I have done so far, Thanks to this awesome library.

Developing a children's book with Pixi.js and cordova. I just want to reach out to the pros to get some input on my approach on things. Current approach is depending on the type i am resizing all the sprites stretching it positioning where they should be all using body.clientHeight body.clientWidth and some math. All non interactable sprites is as big as the background most of if is transparency to avoid playing around with positioning not sure if this is good.... All working in order as expected, everything looked stretched though. All this I'm doing is without consideration of how do deal with retina and pixel density. 

I attached one of the frame of a sprite. As you can see the frame takes the whole layout. 

Should I be doing this any different? The artist draws on photoshop on a canvas 2048 x 1536 pixels should i be setting the pixi application width height to that?. Whats the approach to maintain aspect without stretching and maybe just get a black bar on either vertical or horizontal side and center the image. Supporting retina?

Thanks in advance.

What would be the best way to go about making containers/objects draggable without having to add the code for every single individual object/container

I've been researching, but hitting a roadblock. I know it likely would utilize bubbling/interaction manager in some way to do so with listeners.
 

Hey guys!

I need to have my site working in Safari 9 and IE11 but I've noticed that there is ES6 code in the pixi.js bundle. Has anybody else encountered this?

Looks like it's coming from the mini-signals dependency.

I have tried adding pixi.js and mini-signals to my include config for babel-loader but it's still not being transpiled.

Any ideas of a solution?

Hi all,

I'm working on an avatarbuilder and would like to use Spine for the animations. The avatar is made up of several parts (head, body, arms etc) that can be changed in order to get the desired combination. Now, I've been looking at using skins, but I'm not sure if I'm going the right direction. Since it's not a complete skin that needs to be swapped, but just a part of it.

The avatarbuilder will be made in Haxe using Pixi and Spine.

My main questions are:

1) Would it be possible to use skins in order to only change the head, or the body for instance?

2) Am I moving in the right direction using the skin feature of Spine?

Thanks in advance!

Maarten

Hey,

      Could anybody help me with setting up a design resolution for mobile browsers coz I'm messed up with these size issues on mobile.