Search the Community

Hi, I'm new to Pixi and couldn't find anyone with the same problem so here I am. I have a container full of black squares (drawn with Graphics) to hide parts of the map, like a fog of war. Some have their alpha set to 0 to reveal what's underneath (I know there are a million better ways to do that but MVP first, optimizations later). The problem is when I set cacheAsBitmap = true on the container, a weird diagonal line appears. This container can be very big and doesn't change much so it makes sense to cache it. Is there something I'm missing or is this a bug? I am literally doing nothing else to it, it'a at 0,0 of the parent container (the stage) and just contains Graphics objects. I'll try to reproduce the issue in a Codepen, thanks to anyone who can help.

Hi guys, since webgl will cause some problems for some low performance phones(screen blinking or couldn't show at all), sometimes we are forced to use canvas instead, but the number of sprites showed in the game really influence the performance a lot for canvas, we use cacheAsBitmap to resolve it, but seems like cacheAsBitmap is very memory consuming, it will cause the game crashed for some low performance device(perhaps memory not enough) maybe I didn’t use it correctly, could anyone answer my following question so I can use it more properly? if there is a sprite and it doesn’t move or change at all, will it be kept redrawing by renderer? if so, does it mean that a moving sprite consume the same performance as it to a static sprite? should I use cacheAsBitmap to a single sprite(as I tested the performance improved), or I should only use it to a group which contains numbers of sprites? I have a group contains 40 sprites, those sprites only change their visibility(i.e. sometimes show only 20 of them), I set the group’s cacheAsBitmap to true after i set the visibility to it’s children, and I will set it to false when I need to change the visibility of those sprites again, is it proper to use cacheAsBitmap this way? when I set cacheAsBitmap to false, would it release the memory? any other suggestion will be appreciated:)

Hi, friends I am working on the game where I have more than 10 thousand objects in 9 different layers on the scene. Thank God that I can easily cache it, to do that I split each layer up into small pieces, I called them chunks. So, I cached each chunk using cacheAsBitmap = true and everything was great, until I changed the scene. Of course, I recached the chunk: let chunk:PIXI.Container = this.chunkGrid[chunkPosition.x][chunkPosition.y]; if (chunk.cacheAsBitmap) { chunk.cacheAsBitmap = false; } if(chunk.width > 0 && chunk.height > 0) { chunk.cacheAsBitmap = true; } But after I do it, chunk position is changing (See the screenshot). I have no idea why and how could I deal with it I'll be appreciate for any help Best regards, Denis

Hi all, been working on trying to get my game a little more optimised for mobile. It's a slot game - just 9 icons all spine skeletons. The icon drop is animated with GSAP. Win detection then plays out the winning lines. At the moment FPS for mobile (on my G4 is around 20-30fps, desktop 60fps) So I've tried setting cache to bitmap as true once the icons have been created but neither seems to work. The animation still plays out once a win is detected (without turning cacheAsBitmap back to false) Tried setting cacheAsBitmap on both the parent containers and the icons themselves, but still no luck. Tested it on a spine animated cactus I have in the background as well and that works fine which is weird. Any ideas greatly appreciated!

Hi everyone, I'm trying to draw a large PIXI.Graphics with some Polygons. Above a certain dimension the cacheAsBitmat function returns a black bitmap. Is a Pixi limit? Is there a way to solve this problem? thanks here is a sample code: <script type="text/javascript"> $(document).ready(function () { $('body').css('overflow', 'hidden'); }); var backgroundColor = '0xcccccc'; var renderer = PIXI.autoDetectRenderer(1920, 963); renderer.autoResize = true; document.body.appendChild(renderer.view); renderer.backgroundColor = backgroundColor; var stage = new PIXI.Container(); var Container1 = new PIXI.Container(); Container1.position.x = 400; Container1.position.y = 300; stage.interactive = true; stage.addChild(Container1); var grap = new PIXI.Graphics(); grap.interactive = true; grap.beginFill('0xac11aa', 1); grap.drawPolygon(14484, 2967, 2755, 6577, 2757, 5026, 2307, 5026, 2298, 2967, 14484, 2967) grap.endFill(); Container1.addChild(grap); var grap1 = new PIXI.Graphics(); grap1.interactive = true; grap1.beginFill('0xac11aa', 1); //KO 18700,5041 grap1.drawPolygon(16551,1989,18700,5041,15637,5041,15637,4514,15697,4514,15697,1989,16551,1989) //OK 18600,5041 // grap1.drawPolygon(16551,1989,18600,5041,15637,5041,15637,4514,15697,4514,15697,1989,16551,1989) grap1.endFill(); Container1.addChild(grap1); stage.skew.set(3.14159, 0); stage.scale.set(0.0607, 0.0607); stage.position.set(0, 1000); requestAnimationFrame(animate); function animate() { renderer.render(stage); requestAnimationFrame(animate); } $('#Button1').click(function () { Container1.cacheAsBitmap = !Container1.cacheAsBitmap; }); </script>

Hi, I have found that when an object has cacheAsBitmap property as true and the pivot of that object is changed, the body and input coordinates of that object doesn't get updated. You can see an example here: http://jsfiddle.net/cmnb/creL1vqm/ If you set cacheAsBitmap to false, the coordinates are updated to the right place.

I have a static Container object that I set to cacheAsBitmap = true. Even if it is static. Changes sometimes occur and wich means I want to redraw(/reCache) it at the next render. I accidentally viewed the documentation for Pixi 2 and saw updateCache which seems to be what I want but I can't find it or anything similar in the documentation for V3. How do I do this?

Hello all, I'm trying to use the cacheAsBitmap feature in my app. I'm putting a bunch of small objects in a Container to make a larger object, then setting the container to cacheAsBitmap=true, to turn it all into one texture. This all gets done immediately when the large object is created: it creates the container, puts in the sprites, sets the container to cacheAsBitmap, then adds it to the stage to be rendered next frame. I've noticed that when doing this, the object is sometimes randomly not drawn at all. Here's my reproduction case: https://jsfiddle.net/fletcher00/cd6jahh8/8/ . The first sprite is normal, the second one is cached and sometimes doesn't show up. I don't know how this will work on your machines, but for me, the problem is totally sporadic. I can press "Run" 5 times and it won't show up, then it will randomly work fine the next time. Whether it shows up or not seems to depend on some race condition of whether it is cached correctly in time. If on the other hand, I comment out the line "s2.cacheAsBitmap = true;" and uncomment the setTimeout line; that makes it wait one second before setting cacheAsBitmap. When I do that, it works flawlessly every time. So I'm just wondering if there is some way to create an object in its cached state? Or will I have to find a way to create the object, wait a frame for rendering, then call something to set it as cached?

Ok - I have Group that contains lots of images and sprites. I need to rotate and move this group without changing any of the children, so cacheAsBitmap seems to be a good option for speed. From what I understand, cacheAsBitmap takes a snapshot of the Group, and uses that for subsequent rendering. Later on in the game, one of the sprites inside this Group needs to animate. Does this mean the cached Bitmap gets regenerated on each frame of the animation? Would it be best to turn off cacheAsBitmap in this case? (PS I put a console.log inside PIXI's _generateCachedSprite() which actually creates the cached bitmap and it only seems to get called once, and doesn't get called again after the animation starts playing, which seems odd.)

Either this is a bug or I'm doing something wrong... I've create a group and added a bunch of Images to it. I also add 2 TileSprite's. I then set 'cacheAsBitmap' to true on the group. When the group renders the TileSprites are not visible. They ARE visible when cacheAsBitmap is false. Running Phaser 2.2.2, WebGL

Hi, I was noticing similar bugs for a while, but now I see its not my fault. http://jsfiddle.net/43xf0oor/ Move the mouse over bitmap, then to left upper, stage corner, see the flickering, also rectangle gets chopped. Is this suppose to be buggy and cacheAsBitmap shouldnt be used on interactive display objects? Thanks

Hello, I'm trying to use pixijs to draw a "path" behind a sprite as it moves. I attempted to make this path by using cacheasbitmap and drawing a circle to a displayobject every frame but within 5 seconds, it froze (I think it was too much for the system to handle). Can someone help me with a suggestion for how to go about drawing a path behind a moving sprite? Thank you.