• Content Count

  • Joined

  • Last visited

About liajoy

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

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

    Too many graphics is too slow

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

    can renderTexture be rendered by any renderer

    sorry, I didn't get the point about Graphics with holes. what dose it mean?
  7. 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
  8. 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.
  9. 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); });