• Content Count

  • Joined

  • Last visited

Everything posted by liajoy

  1. liajoy

    ticker first deltaTime is larger

    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?
  2. 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!
  3. liajoy

    Sprite's containsPoint method check alpha

    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?
  4. liajoy

    Too many graphics is too slow

    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); })
  5. liajoy

    Too many graphics is too slow

    thanks a lot!
  6. 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); });
  7. liajoy

    can renderTexture be rendered by any renderer

    sorry, I didn't get the point about Graphics with holes. what dose it mean?
  8. liajoy

    can renderTexture be rendered by any renderer

    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
  9. liajoy

    can renderTexture be rendered by any renderer

    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.