Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either.

// The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet}
// containing the animation definitions:


 PIXI.loader.add("assets/spritesheet.json").load(setup);

 function setup() 
{
   let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet;
   animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]);
 }
 

Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help.

EDIT: I attached some pictures that showcase my issue.

Hi!

Does anyone know know if Pixi's HTML accessibility layer scales automatically when Pixi's canvas is scaled?

hi..

i don't know corrent reason yet..

touchevent is good on chrome and expolore..

but safari is not

some touchevent  is gone...

somebody know about this?

chrome, explorer, edge, firefox supports pointer events which handles mouse events and touch events. But safari and firefox for android doesn't support these events, so we need to fallback to mouse events and touch events. I problem I still face is that if I pinch zoom the pixi canvas on browser which supports pointer events - everything works fine, but if I do pinch zooming on safari on iOS or firefox for android - they should use touch events, but the whole page is being zoomed not the canvas element as expected. 

UPDATE:  i used Rectangle instead of PIXI.Rectangle.  Problem solved.

Hello.  I am following along with a tutorial https://github.com/kittykatattack/learningPixi

I was able to run Pixi successfully in an Angular 6 app using steps I describe here:https://old.reddit.com/r/pixijs/comments/9dzdme/how_to_use_pixi_js_with_angular_6/

I was able to sucessfully load sprites without spritesheets using this code: https://www.paste.org/95084

When attempting to load sprites with spritesheets using this code

  ngOnInit() {

    this.app = new PIXI.Application({ // this creates our pixi application
      width: 800,
      height: 600,
      backgroundColor: 0x1099bb
    });
    this.pixiContainer.nativeElement.appendChild(this.app.view);
    
    
    PIXI.loader
      .add([
        'assets/images/chicken.png',  // load sprite textures
        'assets/images/chicken-spritesheet.png'
      ])
    .on("progress", this.loadProgressHandler)
    .load(this.setup.bind(this));
  }

  loadProgressHandler(loader, resource) {
    console.log(`loaded ${resource.url}. Loading is ${loader.progress}% complete.`);
  }

  setup() {                     // runs when textures are done loading
    console.log(`loading complete.`);
    
    // prepare the spritesheet
    let texture = PIXI.utils.TextureCache["assets/images/chicken-spritesheet.png"];  //Create the `tileset` sprite from the texture
    let rectangle:Rectangle = new Rectangle(0, 0, 16, 16); //Create a rectangle object that defines the position and size of the sub-image you want to extract from the texture
    texture.frame = rectangle;  //Tell the texture to use that rectangular section
  
    //Create the sprite from the texture
    let bunny = new Sprite(texture);
}

I encounter an error: 

ERROR in ./node_modules/pixi.js/lib/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\core\renderers\webgl\filters\spriteMask'
ERROR in ./node_modules/pixi.js/lib/core/sprites/webgl/generateMultiTextureShader.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\core\sprites\webgl'
ERROR in ./node_modules/pixi.js/lib/extras/webgl/TilingSpriteRenderer.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\extras\webgl'
ERROR in ./node_modules/pixi.js/lib/filters/alpha/AlphaFilter.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\filters\alpha'
ERROR in ./node_modules/pixi.js/lib/filters/colormatrix/ColorMatrixFilter.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\filters\colormatrix'
ERROR in ./node_modules/pixi.js/lib/filters/displacement/DisplacementFilter.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\filters\displacement'
ERROR in ./node_modules/pixi.js/lib/filters/fxaa/FXAAFilter.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\filters\fxaa'
ERROR in ./node_modules/pixi.js/lib/filters/noise/NoiseFilter.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\filters\noise'
ERROR in ./node_modules/pixi.js/lib/loaders/bitmapFontParser.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\loaders'
ERROR in ./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js
Module not found: Error: Can't resolve 'path' in 'C:\...\first-app\node_modules\pixi.js\lib\mesh\webgl'
i ｢wdm｣: Failed to compile.

Here is the full code: https://github.com/autemox/first-pixi-angular-6-app/blob/master/src/app/app.component.ts

Does anyone have any guidance for me?  I'm not sure what is wrong.  Thank you.

G.App = new PIXI.Application({forceCanvas: true, width: w, height:h, transparent: true});

console.log(G.App.renderer.type);

This always prints "1"  for WebGL.  and not "2" for canvas.  Why isn't canvas being used here?  I'm using the latest v5 version of Pixi.js

Hello everyone
What is the most powerful and performance way to extends a PIXI class?
Example from my side, I need the native PIXI.Container class but with more methods and properties, and here's how i proceed.
 

PIXI.ContainerData = (function () {
    class ContainerData extends PIXI.Container {
        constructor() {
            super();
            this.Sprites = {};
            // others custom proprety for game obj
        };
        get d() { return this.Sprites.d }; // return diffuse sprites
        get n() { return this.Sprites.n }; // return normals sprites //TODO: spine normal are arrays

    };
    
    ContainerData.prototype.createJson = function(dataValues) {
        
    };

    ContainerData.prototype.asignJson = function(dataValues) {

    };

//END
return ContainerData;
})();

I also know another way to extends functional prototyping.
example:

function ContainerData() {
    PIXI.Container.call(this);
    this.initialize();
};
ContainerData.prototype = Object.create(PIXI.Container.prototype);
ContainerData.prototype.constructor = ContainerData;


ContainerData.prototype.initialize = function () {
    this.Sprites = {};
};

I wondering about the cleanest and most efficient techniques to properly extend a class pixi?
But especially on the most optimal way, knowing that JS need scan all the prototypes from the bottom to the top!

The first technique worries me a little because in my console, Is look like that all the prototypes are cloned by reference and duplicate!

So, i am interested in different techniques and advice.
I am therefore looking for the most equitable approach between performance (speed) but also the readability for debugging.
Thanks in advance.

Hello again!

My stage contains 60000 sprites that i want to tween over it, so i wrote code to manipulate props of the objects and add update function to

PIXI.ticker.shared.add(this._update, this);

The final action on this._update is to update props of tweening object. In that way of updating i'v got 22 FPS

object['alpha'] = start + (end - start) * percent;
// OR
object.alpha = start + (end - start) * percent;

But i'v got about 5 - FPS drop if an update property name is located in other object

this.props = [ 'alpha','rotation','tint','something']

function _update(delta){
...
   for(let i = 0 ; i < this.props.length; i++)
     upd( object, this.props[i], start, end, percent)
...
}

function upd( object, key, start,end, percent){
   //15FPS
   object[key] = start + (end - start) * percent; 
}

And if I'll add 2 checks, than again got 22FPS

this.props = [ 'alpha','rotation','tint','something']

function _update(delta){
...
   for(let i = 0 ; i < this.props.length; i++)
     upd( object, this.props[i], start, end, percent)
...
}

function upd( object, key, start,end, percent){
   // 20 - 22FPS
   if(key == 'alpha') object.alpha = start + (end - start) * percent;           
   else
   if(key == 'rotation') object.rotation = start + (end - start) * percent;
}

Can someone help me, how to iterate through dynamical props names without getting fps drop?

Thanks.

Greetings, I am just learning pixijs and I have a question:

I am experimenting with writing a game, using pixi as the rendering engine. In my game I am trying as best as possible to have the act of drawing be a function of the game state. So, instead of issuing commands and changing the position and texture of individual sprites, I just alter the entities in my game, and the draw system knows how to draw them.

Currently, this is implemented by a system that runs in between the game state being updated, and pixi rendering the stage. Something like this:

function gameLoop() {
    requestAnimationFrame(gameLoop);
    update();
    draw();
    app.render(app.stage);
}

Where game draw essentially removes children from the stage, loops through entities that need to be drawn, creates sprites with the correct properties, and re-adds them to the stage. In practice this looks like:

draw() {
    this.container.removeChildren();

    const entities = this.game.entities();
    entities.forEach(e => {
        const sprite = this.spriteMap.getSprite(e, this.game.cm);
        this.container.addChild(sprite);
    });
}

Is there a performance hit to removing/adding sprites to the scene each frame? Is there a better way to do this, while still avoiding having the game logic directly manipulate sprite positions/textures?

Is there any way to pause a video immediately after creating the element with PIXI.Texture.fromVideo or fromVideoUrl?  It looks like it might be bugged currently, because under some circumstances the paused flag is set but the video doesn't actually pause.  I noticed in the fromVideoUrl function it will call play() before returning, and at one point console.log'ing the baseTexture.source element showed instead of the HTML tag, an object with a pixi_id or something.  I'm not sure if that is relevant, but I haven't been able to repeat that, so I'm not sure if it was just a one off (but it makes me suspicious if that object is somehow messing with my .pause() calls?  Maybe during the transition .pause() calls don't work properly, so the video keeps playing?  I'm not sure how that would work, but I'm not sure what's going on there either.)

This is the only code that I have been able to make that works, but I imagine it's fragile due to the bug? where sometimes .paused gets set to true even though the video is still playing.  If the timeout is lower than 1000 it doesn't pause the video, but the paused flag gets set so it stops it's setTimeout loop.  Also, it means the video plays for ~1 second before pausing which in my case is problematic.

var renderer, stage, video, sprite;$(function() {	renderer = new PIXI.autoDetectRenderer(1920, 1080);	$('body').append(renderer.view);	stage = new PIXI.Container();	video = PIXI.Texture.fromVideoUrl('720p_test_web.mp4');	sprite = new PIXI.Sprite(video);	stage.addChild(sprite);	animate();	pauseVideo(video.baseTexture.source);});function animate() {	requestAnimationFrame(animate);	renderer.render(stage);}function pauseVideo(el) {	console.log(el);	if (!el.paused) {		el.pause();		setTimeout(pauseVideo, 1000, el);	}}

I tried passing the video element directly into PIXI.Texture.fromVideo() but the video still doesn't pause and just plays from load.

var renderer, stage, video, sprite;$(function() {	renderer = new PIXI.autoDetectRenderer(1920, 1080);	$('body').append(renderer.view);	stage = new PIXI.Container();	video = PIXI.Texture.fromVideo(Util.fromVideoUrl('720p_test_web.mp4'));	sprite = new PIXI.Sprite(video);	stage.addChild(sprite);	animate();        video.baseTexture.source.pause();});function animate() {        requestAnimationFrame(animate);        renderer.render(stage);}var Util = Util || {};Util.fromVideoUrl = function(src) {        var video = document.createElement("video");        video.preload = "auto";        video.loop = true;        video.src = src;        video.pause();        return video;}

Any ideas?

Forgive the title - unless a moderator edited it, in which case you don't necessarily have to forgive me

Anyway - having worked with Flash, I've watched Pixi.js for a while. I personally like to think it's the way forward: I like its flexibility and the amount of features it supports. I also tried Phaser.io, but its outdated Pixi library was kind of a deal breaker for me (and what completely killed the project for me was that with v3 they broke compatibility completely, according to their FAQ).

Pixi.js on the other hand seems to try to keep their API intact, which are huge bonus points for me. When I first saw it, I ran into a few bugs, and since v4 was out for a while, I figured I'll just wait a little longer for v5 before committing to it long term. Though, seasons and years passed, and now it's 2018, but the last blog post is still from 2016 - there seems to be no news, at least not from the core developers. The "Blog" link from Pixi.js is outdated (though you can still get to it from Goodboy Digital). There's few committers, and the commits are spaced out quite a bit.

The lack of updates (and that I find very little about the company behind it, and their business model) worries me. I imagine you guys have a much better idea about what state Pixi is in. Are you worried? Are the lack of updates because it's just that stable now, or is it uncertain whether Pixi.js will even be supported longer than Flash? Is Pixi.js v5 just around the corner (I see an alpha tag on Github), or is it so far away that it's pointless to wait?

Hello,

I have a question about browser zoom. In the example I draw a few rectangles using PIXI.Sprite, each 1 pixel wide.

https://jsfiddle.net/4a5xLsk0/

At zoom level 100% all rectangles look the same (see picture 1) and animation looks fine, but on higher zoom levels (e.g. 110%) the rectangles look different (see picture 2) and the animating flickers. The behavior seems to be browser-independent. I would like to achive , that the animation looks smooth on all browser zoom levels? Is this possible?

Thank you!

mawi1512

100%

110%

Hi there.

So I am new to PIXIJS, but I have experience working with the canvas API directly. I recently started working on a game, finished the menu system, and decided I would give PIXIJS a shot for WebGL support. So I tested out my menu system with PIXI.

On my dev machine, with WebGL support,  performance is better than I was getting before. And that's great. However, I have another machine that has essentially no GPU to speak of, and does not have WebGL support. The performance difference is... well, it's quite staggering.

With my original code, redrawing a menu with 26 components: 4-7ms.

With PIXI, only 17 components:  15ms.

This quite honestly makes me feel like I must be doing something wrong, so I will try to break down what I am doing:

6 image components (5 are 17x22, 1 is scaled to 300x300 from 264x192)

10 text components

1 Graphic component (a ~100x15 Rectangle)

Images are pre-loaded into texture cache (PIXI.loader.add ...). When the menu is created, those images are loaded into sprites via: new PIXI.Sprite(PIXI.utils.TextureCache).

Text are generated just via new PIXI.text(text, style);

And the rectangle is made via new PIXI.Graphics(), begin fill, draw rect, end fill.

Sprites, text, and the rectangle are added to an internal collection object on the menu, which is added to the app stage after setup.

This is all that is running. For this test, nothing else is being processed. No event handling, nothing.

I tried drawing the static parts of the menu to a RenderTexture and then adding that to the collection rather than the individual elements, but that actually performed worse.

What am I missing here? Could anyone give me any ideas?

Hi All

I'm struggling to find any examples of what I need to do online.

Basically, I have a dial (think old fashioned safe) that I want to be able to click and rotate infinitely.

How would I go about doing this?

Thanks

I'm rendering the content of some PNG's via a 4096 by 4096 RenderTexture, to cram all of it in the GPU memory, for scrolling usage. As each column should be 1024 pixels wide I can store a maximum of 16384 pixels of height to scroll through. I use 4096 as width and height because of http://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE

But what to do if I want more than 16384 pixels to scroll through in one go?

Suddenly realised:
Should I just use some extra texture(s) of 4096 by 4096? It looks like a maximum of 8 textures is a safe bet: http://webglstats.com/webgl/parameter/MAX_TEXTURE_IMAGE_UNITS

Or is there a better approach?

Hi. I just started in Pixi js. Can someone explain to me if a container is used to create different levels of game?

Thanks in advance

Hello friends, so when I am trying to add a video to the background of a scene along with various other objects. For some reason if I use an image and add it to the container then allow the code to execute everything shows up correctly. But when I make the video sprite and attempt to add it to that same container I get the buttons on the screen showing up fine with a black background. I am insure what I am doing wrong.

-thanks in advance for the help!

This is my code right now to check if left or right mouse button is down:

// Left button down
app.stage.on("mousedown", function() {
  // code...
});

// Right button down
app.stage.on("rightdown", function() {
  // code...
});

But it doesn't seems to be possible that both events happen at the same time.

How would I check if both mouse buttons are pressed? Left and right.

Hey guys!

I tried to start with the pixi-spine plugin to load my spine file. 

I followed the example from https://github.com/pixijs/pixi-spine and did this on app init:

and my function onAssetsLoaded looks like this:

However, I get the error that spineData param is required and when I logged res.spineboy, I saw that the error param was logged with an error "Error: Error trying to parse loaded json: SyntaxError: Unexpected token < in JSON at position 0".
Then I guessed that webpack might be the culprit and I called require(jsonFile) which still gave me the same error "spineData param is required", but with no error in the error param of res.spineboy. 

Then instead of using the loader, I did this:

Which gave me a whole new error:

Uncaught TypeError: Cannot read property 'children' of undefined
    at new Skeleton

 3021 |     else {
  3022 |         var parent_1 = this.bones[boneData.parent.index];
  3023 |         bone = new core.Bone(boneData, this, parent_1);
> 3024 |         parent_1.children.push(bone);
  3025 |     }
  3026 |     this.bones.push(bone);

in 

Can anyone help me? 

I use PIXIJS to add effect on image. I already use adjustementFilter() and it's work well but with convolutionFilter() i get error.

Code :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="pixi.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi-filters@2.6.1/dist/pixi-filters.js"></script>

    <script>
        var filterEffect                 = new PIXI.filters.AdjustmentFilter();
        var filterSharpen                = new PIXI.filters.ConvolutionFilter();
    </script>
</head>
<body>

</body>
</html>