• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. Exca

    Bad Graphics Quality on Mobile?

    You could still use the native scrolling. Just have some element that is on top of the canvas with the actual width that the canvas would have now, then just read it's position and offset the container in pixi that you are rendering by same amount. Other option is to track mouse/touch -movements on canvas and move the container that way. Could be many other ways also.
  2. Exca

    Bad Graphics Quality on Mobile?

    Your total canvas size goes over what is maximum on the device -> it renders it on lower resolution and then upscales -> blurry image. You should implement it so that the canvas size is the maximum the viewport can show. That way rendering happens only to the actually visible region and memory requirements for the canvas dont go over device limits. Looks like you're not moving the canvas when scrolling so fix should be just not making your canvas so large.
  3. Exca

    Changing quality in renderer?

    It depends a lot on what kind of project you have. There's no single easy method to swap to lower quality rendering. Rather you should find out what is the bottleneck in your project and then either optimize that or make it so that it's toggled off for faster rendering when needed. Some of the common bottlenecks include: - Texture swapping (having objects in the scenegraph that cannot be rendered with batches) - Too many graphics objects being rendered. - Too many text objects being updated. - Having too many filters. - Rendering the scene too many times.
  4. Exca

    Mobile Blur

    One thing I noticed with ios when using large textures (limit depends on ios) it will resize them to smaller size instead of just failing. Got this to appear on iphone 4 with sizes over 1024x2048 and with never devices those limits have gone up.
  5. Exca

    Transparency coming out as whites

    You can also use a library like pngquant to optimize images into 8 bit while automatically preserving alpha channel (with some lossy compression of course). Makes it much more nicer to put the 8 bit conversion as a part of a workflow. The lib can be found here https://pngquant.org/
  6. Exca

    Help Needed: Improve performance

    It looks like your rendering is not the thing causing frames to go down. Profiling it shows that most of the time goes to javascript. ProcessSurvivor and findfood take most of the time. Optimizing those might help. Also if you have only 200 sprites you can use regular container without any problems. ParticleContainer starts to show benefits at thousands of objects. Here's a screenshot of the profile (chrome profiler)
  7. Exca

    Pointerevents on unclosed polygon

    You could also solve this by having objects with renderable = false that have a hitarea with an approximation of the coordinates, then listen to those objects and keep track of what maps to where. That way you could have single line tracked with a simple rectangular polygon.
  8. Set the filterArea property of that sprite to apply filter only to given area. Though that makes it so that the only area visible is the area where filter is drawn. One option to prevent that would be to have 2 sprites, one with filter and another one without. Or render a separate texture of the sprite from the wanted region and then blur that and add that blurred part on top of sprite. Or you could adjust the way how pixi works with filterarea. To the latest part I dont know for sure how it would be done.
  9. Exca

    Apply tween on group of image

    I would suggest using some kind of tweening library. I myself use tweenJS but there's plenty of them available. In tweenjs you could say something like this: Tween.get( yourSprite).to({ x: targetposition.x, y: targetposition.y, width: target.width, height:target.height}, 500);
  10. Exca

    Performance Drop with beginFill on Mouse Move

    What you could do is draw the triangles into a texture and then display that texture on the stage. That way you wouldn't have a very large graphics object redrawn every time. So something like this: //Pseudo code. Might have some syntax errors. var texture = PIXI.RenderTexture.create( app.screen.width, app.screen.height); var graphics = new PIXI.Graphics(); var sprite = new Sprite(texture); app.stage.addChild(sprite); //Draw other shapes you want here to graphics and then draw that to texture also. graphics.beginFill() ... graphics.endFIll(); app.renderer.render(graphics, texture); function mouseMoveHandler() { graphics.clear(); graphics.beginFill(0x000000); graphics.lineStyle(Math.random()*3, 0xffffff, 1); // draw a shape graphics.moveTo(0,0); graphics.lineTo(250, 0); graphics.lineTo(event.pageX, event.pageY); graphics.lineTo(0, 250); graphics.endFill(); app.renderer.render( graphics, texture, false); }
  11. Exca

    disable multitouch

    When a touch/pointer begins, store the pointerId of the first touch and keep track of that and only react to events with that id. When event ends, make it null and allow storing of next touch/point.
  12. I have done similar solution with code like this: function beforeSheetLoad(r,next){ if(r.name.indexOf("json_image") >= 0 && r.url.indexOf("?") == -1) { r.url += "?" + something; } else if(r.name.indexOf(".json") >= 0 && r.url.indexOf("?") == -1) { r.url += "?" + something; } next(); } loader = new Loader(); loader.pre(beforeSheetLoad);
  13. Exca

    ticker first deltaTime is larger

    You could also ignore the few first ticks to let the ticker settle down (gpu uploads etc. might be happening at that point which takes some time).
  14. Exca

    Draw a lot of tiles to make one object

    You could draw the container into a single rendertexture and then use that as a sprite. var rt = new PIXI.RenderTexture( new PIXI.BaseRenderTexture(width, height), new Rectangle(0,0, width,height)); renderer.render(gfx_container, rt); var bgSprite = new Sprite(rt); maincontainer.addChild(bgSprite); You could also use cacheAsBitmap to that container to make the same effect. If you have same texture for each sprite, then you could use TilingSprite. How many tiles in total and do you have different textures for those?
  15. Exca

    Get pixeldata in a webgl?

    You can use extract-plugin that is found on renderer. renderer.plugins.extract.pixels( targetContainer ); http://pixijs.download/dev/docs/PIXI.extract.html
  16. Exca

    Good resources

    Lots of examples available at pixi examples https://pixijs.io/examples/#/basics/basic.js Then there's at least one book I know of: https://www.amazon.co.uk/Learn-Pixi-js-Interactive-Graphics/dp/1484210956 Also pixijs official site has some tutorials: http://www.pixijs.com/tutorials though some of those are pretty old.
  17. Exca

    Pixi.js Showcase

    Merry Christmas to everyone! https://excaa.github.io/xmas18/
  18. Exca

    Performance question

    Here's a good source of info on spritesheets in pixi. A tutorial using texturepacker https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs Basically what you do is use a tool that packs all your images into a single file + a file telling where each image is on that sheet. Then you load that configuration file (json in most cases) and use the textures/sprites from that sheet instead of an image. There are a lot of free tools also available, but I've been really happy with texturepacker so I dont really know about what's the best free one.
  19. Invisible is better than moving them outside. Items with visible = false do not update their transformations during the main loop. Items that are outside of the screen do, and they also get their rendering called if there's no culling implemented.
  20. Exca

    Performance question

    One way to optimize drawing of lots of different images is to store them in a spritesheet. That way you will use only one basetexture instead of multiple ones. That allows the images to be drawn in a singe batch instead of swapping textures every time image is drawn.
  21. Exca

    WebGL or Canvas Renderer as default

    You could also have an option screen and let player select what rendering to use. And then maybe have an FPS tracking system that notifies player that they could get better performance with another mode and then give a button to change renderer.
  22. Exca

    How to decrease heating up computer.

    One really great way of reducing gpu/cpu utiliziation is to skip rendering when nothing has changed. Especially good if you have lots of static content. Easiest way to do that is to have some global flag and everytime you update something set it to true and when rendering set it to false. Then just check before render if it's true or not. Skip rendering on false. That way you only get rendering when it is actually needed.
  23. If you have already working subprocess that does the thing, why not pass the output as base64 data inside a json if json is the only available transfer method? That way you could just create the basetexture with image that has src as something like "data:image/png;base64, datahere".
  24. Exca

    PIXI - many filters cause fps drop

    Depending on filters and the area they are applied to it they can be really expensive. What kind of filter you have?
  25. Exca

    Understanding pixi-particles

    You have the update timer running multiple times and your main emitter is common to all fo the particleExample instances. So you will have all of the previous updates ticking away with the current one. So each added panel is a multiplier for the speed.