mawi1512

Members
  • Content Count

    4
  • Joined

  • Last visited

  1. mawi1512

    Flickering on browser zoom

    Cool, this helped me a lot. Thank you for the fast answer!
  2. mawi1512

    Flickering on browser zoom

    Hello, I have a question about browser zoom. In the example I draw a few rectangles using PIXI.Sprite, each 1 pixel wide. https://jsfiddle.net/4a5xLsk0/ At zoom level 100% all rectangles look the same (see picture 1) and animation looks fine, but on higher zoom levels (e.g. 110%) the rectangles look different (see picture 2) and the animating flickers. The behavior seems to be browser-independent. I would like to achive , that the animation looks smooth on all browser zoom levels? Is this possible? Thank you! mawi1512 100% 110%
  3. mawi1512

    Overlapping rectangles with text

    Thank you for this fast answer. I already tried that, but some of the rectangles have a 'diagonal brush', which are implemented through simple lines. Because of that I think I cannot use the 'Texture.WHITE'-approach and also it is not a fastrect, when lines are in the graphics object. Or am I wrong? Thank you for your help!
  4. mawi1512

    Overlapping rectangles with text

    Hi guys, I am playing around with PIXI since a few weeks. Unfortunately, I run into some performance problems. What I want to do is drawing many rectangles with text, which are moving through the scene. Some of them run outside the scene and new ones will appear. A few rectangles have a diagonal brush (implemented through lines). It is also possible, that the rectangles overlap each other partially and when one rectangle overlaps another rectangle, the text has to be visible partially too. In my first approach, I had one graphics object, where I draw all primitives and lines. For text I used bitmaptext and added the objects to the stage. With this solution I run into the problem, that the texts are over the rectangles all the time, even when they overlap. var graphics = new PIXI.Graphics(); stage.addChild(graphics); graphics.beginFill(0xFF0000, 1); graphics.drawRect(0, 0, 100, 20); graphics.endFill(); var text1 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' }); text1.position.x = 0 text1.position.y = 0; stage.addChild(text1); graphics.beginFill(0x0000FF, 1); graphics.drawRect(70, 0, 100, 20); graphics.endFill(); var text2 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' }); text2.position.x = 70; text2.position.y = 0; stage.addChild(text2); In my second approach, I created graphics objects for each rectangle and added the text as child. Now It looks fine with overlapping rectangles, but with this solution I reach only slow fps. var graphics = new PIXI.Graphics(); stage.addChild(graphics); graphics.beginFill(0xFF0000, 1); graphics.drawRect(0, 0, 100, 20); graphics.endFill(); var text1 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' }); text1.position.x = 0 text1.position.y = 0; stage.addChild(text1); var graphics2 = new PIXI.Graphics(); stage.addChild(graphics2); graphics2.beginFill(0x0000FF, 1); graphics2.drawRect(70, 0, 100, 20); graphics2.endFill(); var text2 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' }); text2.position.x = 70; text2.position.y = 0; stage.addChild(text2); So what can I do to solve this issue? I hope you can help me. Thank you!