Search the Community

I have application made using Pixi.js and it uses a WebGLRenderer. I'm preserving the drawing buffer and not clearing before render: { preserveDrawingBuffer: true, clearBeforeRender: false } This allows me to create trails as objects move around. I want the trails to fade out over time, so I apply a transparent black rectangle on top over every rendering. This works, but the fade out eventually rounds off to gray. I want a complete fade to black. I've tried using a ColorMatrixFilter filter with a lowered brightness on my root container, hoping it would cause a fade effect. It didn't cause any fade effect, instead just causing everything to be slightly darker. If that had worked, then a custom filter could help to do the job. How can I get a slow gradual fade to complete black for the trails of my rendered objects? I've also asked this on StackOverflow: https://stackoverflow.com/questions/44866613/trailing-fade-to-complete-black-with-pixi-js-and-webglrenderer

I'm new to pixijs, but what I've seen so far is very impressive. Great design of the API, naming of functions, variables, documentation, etc. Great performance. Congrats to the people behind it. I use my own sprite classes. Is there a way to bypass that part of pixijs? Optimally I just want to do a series of drawImage calls, where I pass a texture, frame rectangle (texture clipping), and transformation matrix, and its painted to the canvas in the order called. Very much like immediate mode rendering, instead of the pixijs scene graph which is more like retained mode rendering. Is there any example of this you can point me to? Or is the scene graph part of the optimization that makes pixijs high performance, so it would be worthwhile for me to rewrite my code to use pixijs' sprite classes? Regards, Bjorn

Hello everybody, I transfered my project in PIXIv3 and when I lauch it in cocoonjs, I saw the fps very poor. I didn't understand the why of the how until I realize that cocoon was in canvas mode. So, if I do (in cocoonjs): var renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height); renderer returns canvas. Canvas works, but the FPS is not the best. else, if I do: var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height)renderer return webgl. OK, the FPS is max, BUT, cocoonjs don't display sprites. It display graphics, background color, but no sprite. It's annoying because v2 (v 2.7 i believe my last version) worked perfectly: autoDetect returned webgl, FPS max and sprites were displayed. It is normal, it isn't? I stress google since long hours and i don't have any key about this (stencil?, I don't know what is, and I don't understand why v2 worked and why v3 not). I stess me too, because I don't know how many tests I did in my device but the result is the same, with cocoonjs, PIXI the third (3.0.6) is not a webgl warmachine.

This is my setup: var win_width = window.innerWidth;var win_height = window.innerHeight;var stage = new PIXI.Stage(0xFFFFFF);var renderer = new PIXI.WebGLRenderer( win_width, win_height, { transparent: true});document.body.insertBefore( renderer.view, document.body.firstChild );var game = requestAnimationFrame( updateGame );var rect = new PIXI.Graphics();rect.beginFill(0x336699);rect.drawRect(0, 0, 400, 400);stage.addChild( rect );function updateGame() { // My simple game logic renderer.render( stage ); game = requestAnimationFrame( updateGame );}And when I open in a browser I got this error message Uncaught TypeError: Cannot read property 'length' of nullTried to change it to autoDetectRenderer and still producing same error but, If I change the renderer to CanvasRenderer, everything work normally. What do I miss? Additional info: Using PIXI v2.2.8Tested in Google Chrome 41, OS X Yosemite

Hi Folks. I am running into an issue when I am using the WebGLRenderer and the drawing API for the Graphics class. This only seems to manifest with the WebGLRenderer, not the CanvasRenderer. Given an instance of the Graphics class, I run the following code: var g = //instance of pixi.Graphicsg.clear()g.lineStyle(1, 0xffffff) //white lines against a black canvasg.moveTo(0, 0)g.lineTo( width, height ) //my current viewport's dimensionsand the result? Obviously the diagonal line is desired but the arc is not. A few things to note: I have some code to detect the window resize to resize the renderer. Sometimes after a resize the arc artifact is gone, most times however, it is not.The current graphics in this example is nested in a few DisplayObjectContainers (which is the structure of my Viewport class). That structure looks like this:viewport.mainContainer (attached to the stage)viewport.zoomContainerviewport.contentContainer (where the graphics instance resides)using the drawCircle API doesn't create the artifact.Please advise. Thank you.

Hi all, I just posted this issue over here at the PIXI github (https://github.com/GoodBoyDigital/pixi.js/issues/1038) - But thought it might be worth it to fire up a discussion and see if anyone had come accross the issue before. I'll give a brief overview incase people can't be bothered to look at the github link, basically what's happening is this : webGL Renderer -> canvas Renderer That's two sprites on a blank stage, one is a standard PIXI.Sprite (the square) and the other is a PIXI.TilingSprite (the circle) - under webGL it runs fine, under canvas it fails...as you can see. The code to reproduce the issue is over at the above mentioned github link. I'm using the latest PIXI and have tested it on firefox, chrome, and using cordova crosswalk on android devices. I also have a secondary question for anyone familiar with cordova crosswalk (or just plain crosswalk as well) When I build this into an app using crosswalk, on one of my test phones it forces the canvasRenderer when I use autoDetectRenderer. And when I try to set the renderer manually with "renderer = new PIXI.WebGLRenderer" I get an error saying the phone does not support webGL. However, when I build this using intelXDK (which as far as I know uses cordova crosswalk) the issue never arises, it's as if the phone magically can use webGL again. Any Ideas?

How much in PIXI affect fps canvas size? CanvasRenderer with understanding, and how will the WebGLRenderer? for example 1366x768 and 1920x1080.

In my case I need to recreate WebGLRenderer on new Canvas. Also I've deleted previous WebGLRenderer before. After some experiments I've found that you need to clear some cache objects in PIXI.js before recreate WebGLRenderer, to avoid caching of previous 3D context in objects. Here is solution: //clear some cached objects in Pixi.jsPIXI._batchs.length = 0;PIXI.TextureCache = {};PIXI.BaseTextureCache = {}; https://gist.github.com/Hyzhak/5747824 PS: But anyway I'm still having some strange bug with shuffling of sequence of rendering DisplayObjects. It's look like after recreation of WebGLRenderer hierarchy of DisplayObjects breaks. PPS: I've tested same use case on CanvasRenderer and everything works fine.