• Content Count

  • Joined

  • Last visited

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

2,293 profile views
  1. 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.
  2. 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.
  3. 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);
  4. 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); }
  5. 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.
  6. 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);
  7. 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).
  8. 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?
  9. 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
  10. 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.
  11. Exca

    Pixi.js Showcase

    Merry Christmas to everyone! https://excaa.github.io/xmas18/
  12. 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.
  13. 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.
  14. 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.
  15. 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.