kazoo

Members
  • Content Count

    18
  • Joined

  • Last visited

  1. Also to add to this topic. Here (https://jsfiddle.net/g7tqghp5/4/) is an example of drawing an arc, so same as @dinther's example, but instead of drawing a rect, it draws an arc. But it just simply does not work, unless you add a drawRect call somewhere in the middle there, then for some reason it works. I don't know if this is a bug..
  2. kazoo

    Performance Tips

    I do know, I use performance.now() to measure the time it takes to execute, and I use the chrome profiler. On PC, it's pretty fast, performance.now() measures it at 51.12ms, while the profiler measures it at 14.3 ms. However when I run this on a 3rd party device, which is my final target, the measurement at performance.now() is at 2132.29ms. I can't get the profiler info on the device tho.
  3. kazoo

    Performance Tips

    If you mean by an animation cycle, then no, it just goes through the function once, and that's it. It takes 2 seconds for just the function to finish, which is too slow. So it goes, like this, I press a button on a page which is supposed to navigate me to another page. When I press that button, I wait 2-3 seconds and only then does the second page with the canvas display. It hangs, 2-3 seconds just waiting for this function to execute.
  4. kazoo

    Performance Tips

    Ivan, any way you can help me with this, it's kinda specific, but I need to understand how to make it more performance efficient. Here is a jsfiddle, https://jsfiddle.net/h3gswp76/. It has no visible output, just the js code for the sake of easier formatting there, than here on the forum. What that function does is that it creates an initial element, makes a sprite out of it, then repeats it x amount of times and creates another sprite out of the whole bunch of those elements, essentially creating a list, which is actually a single sprite. I then use a 3rd party library to slide that long list of elements, etc. The issue is that on mobile, that function executes in about 2-3 seconds, which is way too slow, since when I navigate to the page which executes this function the whole page hangs until it creates this sprite. Is there anything I can do to improve this process that I have here, to make it faster? I also omitted the part where I also add text elements within this function, just to make it more concise, but I guess that text creation also adds to the performance issue, so I would need a solution to that too.
  5. kazoo

    Performance Tips

    @ivan.popelyshev I will thanks, I'll use the latest of course.
  6. kazoo

    Performance Tips

    OK, it seems that it is time to move to Pixi-v4. Thanks for the help Ivan, I will try and do all the things you mentioned.
  7. kazoo

    Performance Tips

    What are some general performance tips that you would have for newcomers to Pixi? Also what should we really take care of if we want to avoid memory leaks, performance issues, etc. I currently destroy all graphics objects, sprites and textures that I use. I also take care of the stage and the renderer. Also I store references to dynamically created objects in arrays and then clear them afterwards when I need to. However I still see small memory leaks here and there. I use chrome dev tools to identify the leaks.. Also, consider this scenario. I have two pages, and on both of them I have a Pixi canvas with some stuff being drawn. When switching from page 1 to page 2, the whole page 2 throttles, until the Pixi canvas is loaded, although this is just a guess for now. However when I remove the Pixi canvas the page loads, fast, normal.. I am just asking this vaguely, since I haven't looked at what might be causing the issue yet, but I want to have some more input before I start. I do draw around 100+ different graphics elements on the second page.. Are there any ways to improve this loading, rendering time of the second canvas? Also I am running this on a 3rd party device, and that's why I need to be very conservative with memory and performance. When running on PC, I do not see performance issues, however the device is also really powerful, so I would not say this is a hardware limitation.
  8. As always, thanks for the speedy reply Ivan. Yeah I figured, so I went with filling the arc. It works thanks.
  9. Hey, nice work. I have an addition to make to this, or rather a question. If I take your exact same code, how would i just instead of the color add a texture to it. Specifically a texture that was made out of a tiling sprite, like a hatch pattern. I can add a codepen but it is basically the same as OP's I just need a texture on it. I already tried and made a tiling sprite, 500x500 px, and then I applied it as a mask to the arc, but nothing shows up. Any examples on this?
  10. kazoo

    Graphics hit box

    Ooookay, I totally misunderstood what you wrote then, my bad, sorry, thanks for the reply.
  11. kazoo

    Graphics hit box

    Thanks for the help so far Ivan, I'm kind of glad I found a bug , but I have a need for this functionality in this version (v3). Since I am quite new to Pixi, I do not fully understand what the above code snippet is supposed to do, can I use it in some way? If so, would you be so kind to give an example. If the above code is not a solution, is there an alternative? It does not necessarily have to be pretty, I just need the same functionality. Could creating an invisible larger interactive element on top of this one be the solution? So that when you move this larger invisible element, the visible one moves accordingly. Or would you have another solution for this?
  12. kazoo

    Graphics hit box

    Thanks Ivan, but how come I couldn't find the hitArea property in the pixi documentation (http://pixijs.github.io/docs/index.html), is it complete ?
  13. kazoo

    Graphics hit box

    If I have a graphics object, which is interactive, how do I increase its hit box, aka the area that listens to certain touch/mouse events. If I have a visible 5x5 px rectangle, I would like to make its touch area 50 x 50 px lets say, to make it easier to move it around via touch, without the need to press on it at exact coordinates of 5x5 px.
  14. is it possible to set a mask on the line of a primitive? I can see that it works but only when setting a fill for the primitive. When setting just a thick line, linestyle, I can't see the mask effect.
  15. kazoo

    Update arc

    I tried using clear(), but it makes a weird result. So I have a new graphics object. I create an arc out of it, then I clear that graphic object and then just call lineStyle and arc again. But instead of drawing another normal arc, I get a weird shape like broken glass all over the canvas, where the arc is supposed to be, so what is all this about?