• Content Count

  • Joined

  • Last visited

Everything posted by liajoy

  1. Thanks a lot! Another question is sprite and graphics which has the better performance? For example, 1000 sprites vs a graphics with 1000 shapes vs 10 graphics with 100 shapes?
  2. I wrote a POC of this. there are four ways to do this: 1. just draw circle every times 2. convert graphics to sprite every times 3. separate graphics to many segment if graphicsData too larger 4. convert graphics to sprite if graphicsData too larger which way is the best?
  3. Hello! i've found that a graphics have more than 300 graphicsData will be slow performance. But if seperate it to 3 graphics( a graphics have 100 grapchisData), it will be good. But why? seems it explain why, but i didn't get it.
  4. app.ticker.add(function(delta) { console.log(delta); // first log will be 5 or 6 // then 1.xxxx }) Hello! How to prevent this? is this a bug or a feature?
  5. hello again! I've saw those 'guide'. Thanks so much. I just want to know if some point is contained of some sprite. Seems there's no need to concern about shader? Another question is `extract.pixels()` will return something wrong if the displayObject shifted and out of the box. Seems it didn't count the `transform` of displayObject? const circle = new PIXI.Graphics(); circle.x = 200; circle.beginFill(0xabcdef); circle.drawCircle(0, 0, 100); circle.endFill(); const pixels = app.renderer.extract.pixels(circle); // [0, ...0] So in some situation, `extract.pixels()` doesn't work perfectly, use 2d canvas is the only way to get the correct pixels?
  6. Hello! `Sprite` support `containsPoint` method, But it just check the point is in the sprite area depend on width and height not by imageData. For example, if the sprite image is a totally transparent image, `containsPoint` should always return false. My thought maybe like this 1. extract `imageData` from `app.stage` 2. check the pixel relative to the point is alpha Any better advise to do this? Thank you!
  7. Use Pixi to make a paint app. when mousemove to draw a circle or line or other graphics. If a graphics has more than 1000 items, the fps will be 30 - 40, may be more lower. Is this a wrong way to make brush in Pixi? Should i create another canvas to draw lines and make it as a texture of a pixi Sprite? Also wonder why drawCircle has more perfomance overhead? In Pixi' webgl render, there is not 'lineCap = round', so I have to draw circle every time to simulate a round lineCap line, is any better way to do this? var graphics = new PIXI.Graphics(); graphics.beginFill(0xFF3300); const lineWidth = 100; const points = new Array(600).fill('').map(v => ({ x: Math.random() * 300, y: Math.random() * 300 })); graphics.lineStyle(lineWidth, 0xeeeeee,1); points.forEach((point, idx) => { if(!idx) { return; } graphics.moveTo(points[idx - 1].x,points[idx - 1].y); graphics.lineTo(point.x, point.y); })
  8. sorry, I didn't get the point about Graphics with holes. what dose it mean?
  9. Thanks a lot! But I nedd use mask many times, it's used as a eraser for brush, so every time when mousemove event trigger, it'll be re-rendered. There are three solution, I don't know which is the best: 1. If I can access app.renderer, use Graphics.generateTexture then update sprite. 2. If I can access app.renderer, draw in canvas and made texture from canvas as what you said. 3. Use app.renderer to render the renderTexture. 4. If I can use anyrenderer to render the renderTexture haven't tried, but I guess 3 is the best performance? If 4 is possible, it'll be nice and that's what I need
  10. Sorry, i've made a mistake, please see the code again. it's not a CanvasRenderer to webgl problems. The reason is I want to make a inverted mask and I use Graphics draw white background and draw black shapes according inputed params, then render Graphics to a renderTexture so I can use alpha mask. But I don't want the class access the .app.renderer.
  11. Can I just new a CanvasRenderer or WebglRenderer to render renderTexture? Seems dosen't work. So renderTexture only can be rendered by it's own renderer? These codes are from offical renderTexture demo: var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); var container = new PIXI.Container(); app.stage.addChild(container); var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png'); var bunny = new PIXI.Sprite(texture); container.addChild(bunny); var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1); var rt = new PIXI.RenderTexture(brt); var sprite = new PIXI.Sprite(rt); sprite.x = 450; sprite.y = 60; app.stage.addChild(sprite); container.x = 100; container.y = 60; const renderer = PIXI.autoDetectRenderer(); app.ticker.add(function() { //app.renderer.render(container, rt); renderer.render(container, rt); });