ZenBlender

Members
  • Content Count

    11
  • Joined

  • Last visited

  • Days Won

    1

ZenBlender last won the day on August 31

ZenBlender had the most liked content!

About ZenBlender

  • Rank
    Member
  1. Your syntax needs a little help. I'd recommend getting up to speed on syntax for working with arrays, and it might be a little clearer how to get this working.
  2. I really think you want to have "buttons" be an array of Graphics instances. I am also new to PixiJS, but it doesn't make logical sense to me that there would be a single instance that has everything in it, yet with individual properties like names. I'd refactor this so that you loop through all the buttons you want to create, each one its own Graphics instance, and each one having its own drag handlers attached. Based on what you shared, it makes total sense that the last name wins, which was your initial question. In your refactor it might be useful to put the buttons in a Container: https://pixijs.download/dev/docs/PIXI.Container.html
  3. An interesting discovery: In my latest simple test, where I have a few objects in my scene but only one small AnimatedSprite, Safari shows ~6% CPU usage in Activity Monitor. For the exact same test but in Chrome, I see the Renderer process taking up ~12% with the GPU process taking up an additional ~12%. Has anyone else noticed big differences in CPU/GPU usage when switching browsers, or have an idea about improving Chrome specifically? I am using transparent mode, which hasn't had any performance effect in either browser.
  4. What is the data type of "buttons"? The naming would imply to me that it's an array of buttons rather than a single button. It almost looks like you are drawing all circles within a single interactive element rather than individual elements. In other words, how many onDragStart handlers are being attached?
  5. Thanks, I tried enabling transparency for the renderer but it has no apparent effect on the CPU/GPU usage on my Macbook.
  6. In other words, perhaps there is a default CPU/GPU hit to simply having PixiJS, but perhaps that won't worsen significantly as a lot of functionality / complexity is added?
  7. Basically, if your PIXI.Application instance is not available in a global scope, or already attached to "window", you'd need to do that in your code when the app initializes. Then, using dev tools, you can navigate to the PIXI.Application's "stage" object, and inside there you'll see "children" arrays that you can traverse through the render tree.
  8. For my game project, I've only only implemented a small amount of animation so far, but was noticing that even with my high end 16" Macbook Pro from just last year, the simplest of PixiJS applications can cause the fans to come on, even when my game is only covering 1/4 of the screen. That seems a bit odd. I looked in Activity Monitor and I see Google Chrome Helper (GPU) will be using around 16% CPU and Google Chrome Helper (Renderer) around 11%. Fans are clearly audible, which seems extreme. Besides the distracting noise, I'm concerned about battery life. So then I simplify things as much as I can and basically have a game with just a static texture. Same CPU/GPU usage. Then I confirm that there are no animate functions attached to the ticker. Same result. I'm using react-pixi-fiber but it appears that this is not a factor since again, I'm not running any animate functions. I've looked at some of the simplest PixiJS examples, and the same situation exists. Consider this one, which has no animation and just a click handler: https://pixijs.io/examples/#/interaction/click.js Why does simply having this on screen cause ~16% GPU and ~11% CPU and my fans blowing air? This one has no interactivity but is only slightly better: https://pixijs.io/examples/#/graphics/simple.js (Of course my game will have some interactivity though) When I look at the performance profiler results, I see the ticker periodically firing, but the effect on my machine isn't inspiring. Is there anything that can be done? I feel like I can't get to the "performance optimization" stage of development when my game is already going to be eating up battery life before I even implement anything. Sorry for the venting, but would really appreciate some help, thanks!
  9. I'm not sure if this works for your use case, but I recently wrote about doing functional testing of the canvas element. This involved attaching arbitrary attributes to the Pixi render tree, and then attaching the Pixi application to the window object. From there you should be able to interactively look into that tree of objects, using your browser's dev tools for example. I'm using react-pixi-fiber but maybe the concepts translate to the particular setup you're using. Here's the post: https://medium.com/@zenblender/functional-testing-of-a-hybrid-pixijs-react-app-281ed5ea04b3
  10. I'm working on a large solo game project where I am attempting to use a combination of traditional DOM elements (React) and canvas elements (PixiJS and react-pixi-fiber) in the project. I wanted to gain visibility into the canvas element in a functional test, and didn't immediately see any libraries or posts explaining how this could be done. I've come up with a process that works for me, using Cypress, and wrote about it. Perhaps someone gets some value from this, and I'm happy to discuss testing and PixiJS! Thanks! https://medium.com/@zenblender/functional-testing-of-a-hybrid-pixijs-react-app-281ed5ea04b3