ZYandu

Members
  • Content Count

    19
  • Joined

  • Last visited

About ZYandu

  • Rank
    Member

Recent Profile Visitors

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

  1. I believe all that is happening is it adds the backgroundColor to the border of the sprite. Does that mean I should just not have a backgroundColor when using a background html image?
  2. Sorry, I was out of town for the weekend ^.^ Hopefully this pixi playground works for you: https://www.pixiplayground.com/#/edit/DLhN7lSrT6uHC3uZAN3eJ
  3. I'm getting a side effect from having PIXI sprites over the top of an html image background. It seems like a white border or artifacts are created when transitioning between displaying the sprite and the image background. The z-index layout in html for the image and pixi: <!-- Background Html image --> <div className={css` position: absolute; z-index: 0; width: ${window.innerWidth}px; height: ${window.innerHeight}px; overflow: hidden; `} > <img src={backgroundImg} /> </div> <!-- PIXI Stage --> <div className={css` position: absolute; z-index: 2; transform: scale(${Math.min(window.innerWidth / 1920, window.innerHeight / 400)}); transform-origin: top left; overflow: hidden; width: ${window.innerWidth}px; height: 600px; `} ref={element => { props.updatePixi(element); }} /> Renderer settings: const renderer = useRef( new PIXI.autoDetectRenderer({ width: highwayWidth.current, height: highwayHeight.current, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: false, }) ); Removing sprites from the stage reveals more of the background, but adds white border artifacts to the other sprites now too. https://imgur.com/a/wCuLlbr Removing the background added white artifacts to the next sprites transitioning to the html image: https://imgur.com/a/1xOiAyc Any advice on getting rid of this? Thanks for any help! 😁
  4. No, I wasn't using any filters on it. All the colors and design were done in Adobe Illustrator before putting it in the project 😎
  5. @ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView.
  6. Each texture for the blue arrow animated sprite is a PNG ~127 KB (there are 20 of them), and the black background sprite is a PNG at 49KB size. It's weird because the green arrow is made out of 6 different sprites made from PNGs ~4KB each and they are showing up just fine.
  7. After fixing the performance issues, now I am facing a new set of problems where certain sprites are not showing on the screen anymore. I'm guessing it has something to do with the order that they are drawn in PIXI? It is working just fine on Google Chrome and Safari on my Ipad. Then in Cordova it looks like the blue arrow (Animated Sprite) and black background (Png Sprite) have both disappeared. Cordova: Safari: Both turning off battery safe mode and antialias: false helped with performance so thank you @@jorasso_com and @ivanpopelyshev! 😎 For reference on how to fix the requestAnimationFrame speed / performance issue: I ended up using a WkWebView instead of a UIWebView and that dramatically sped the whole app up, not just the canvas. These were the resources I used to accomplish this: WkWebView Cordova plugin: https://github.com/apache/cordova-plugin-wkwebview-engine Explanation of speed increase: https://medium.com/@photokandy/what-a-difference-a-web-view-makes-4d95a34dd338 Because of its speed, my opinion is that this should be more public to Cordova users and even be packaged with Cordova rather than a plugin to integrate. 🙃
  8. Hello, I'm having issues running PIXI with an autoDetectRenderer in Cordova iOS. It is very slow compared to just loading the page from Safari within iOS. The goal is 60fps but Cordova is getting ~25fps while Safari has performance that is good enough to be acceptable. Is there some kind of optimization I have to turn on? The cordova docs claim that the hardware acceleration config option is only available on OSX, not iOS. I ensured that my game loop function usually takes about 1-5 milliseconds to run in Cordova. Could it be some kind of overhead that Cordova has set up with plugins or something? The only cordova plugin I'm using is one that I created myself, which takes event input from an external musical bluetooth MIDI controller. My app is essentially a rhythm game with a big highway of arrows moving as one container with animated sprites that flash at different times and hide/show accordingly to how you played. How do I get comparable performance to iOS Safari on iOS Cordova with PIXI? (Btw using React to bundle and build all this). Thanks! 😎 Cordova docs: https://cordova.apache.org/docs/en/latest/config_ref/
  9. I have a container of 150 sprites and I want all of them to move left 10 pixels each frame in a custom RAF gameloop. What are the best practices for moving all of the sprites at once? This is what I tried, but I am experiencing some stuttering / inconsistencies in how smooth they move. const renderer = new PIXI.autoDetectRenderer({ width: 1920, height: 1080, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: true, }); let stage = new PIXI.display.Stage(); let spriteContainer = new PIXI.Container(); stage.addChild(spriteContainer); for (let i = 0; i <= 150; i++) { let sprite = PIXI.Sprite.fromImage(tallLine); sprite.x = i * 10; spriteContainer.addChild(sprite); } requestAnimationFrame(rafGameLoop); //move all the sprites left 10 pixels per frame const rafGameLoop = () => { requestAnimationFrame(rafGameLoop); spriteContainer.children.forEach(sprite => { sprite.x = sprite.x - 10; }); renderer.render(stage); } Thank you! 😁
  10. That's awesome Ivan, I'm excited you're working on custom filters! I will try making the bar sprites in Photoshop or Adobe for now! Perhaps I will find a way to build an SVG version programmatically to have flexibility in their width. 😃 Thank you!
  11. I want to add a really big blue glow to the gray hold bar. This example looks pretty good but I want it to look less like a tight border and more like a stretched blue fade out. I tried to accomplish this by increasing the outer strength. let barContainer = new PIXI.Container(); barContainer.position.set(xPosition, 110); let bar = new PIXI.Graphics(); bar.beginFill(0xffffff); bar.tint = 0xbbbbbb; bar.drawRect(0, 0, chordWidth, 10); barContainer.addChild(bar); let glowFilter = new GlowFilter(10, 2, 0, 0x00507c, 0.1); glowFilter.padding = 100; barContainer.children[0].filters = [glowFilter]; //increase outer strength to try and make the filter spread out farther let glowFilter = new GlowFilter(10, 30, 0, 0x00507c, 0.1); As cool of a border as this is, how can I make a glow filter that fades out? Is it possible with something as easy as GlowFilter or other filters? Thank you for any help! 😁 P.S. I also tried the approach of using a gradient image as suggested in this topic but it didn't work very well with my rectangles that heavily vary in width.
  12. That makes sense! Mad respect Ivan, you are always very helpful! 🤘
  13. I'm setting the starting width of the blueBar rectangle based on how long a chord needs to be held. Then I decrease the width of the blueBar in the game loop: const holdBar = new PIXI.Container(); let blueBar = new PIXI.Graphics(); blueBar.lineStyle(2, 0x006ba6); blueBar.beginFill(0xffffff); blueBar.drawRect(0, 0, Math.floor( 8 * (howLongDoesTheChordLastInMs / 16.67) - 50 ), 10 ); holdBar.addChild(blueBar); containers.current.holdBar.children.forEach(blueBar => { console.log("my linestyle is:", blueBar.lineWidth); if(blueBar.x <= 100){ blueBar.width = blueBar.width - 8; } else{ blueBar.x = blueBar.x - 8; } } The result is that the lineStyle is getting chopped off even though the console.log still shows a lineWidth value of 2. My guess is that the lineStyle is getting hidden by the container, or that graphics don't like having width dynamically changed in the game loop. Thank you for any advice on how to fix this! 😁
  14. Thank you, that advice helped get rid of some of the slowdowns! I came across this article which talks about RAF being run at the end of the frame instead of preparing for it at the beginning. I'm not using setTimeouts in my code but does Pixi use setTimeouts for updates? "Frameworks or samples may use setTimeout or setInterval to do visual changes like animations, but the problem with this is that the callback will run at some point in the frame, possibly right at the end, and that can often have the effect of causing us to miss a frame, resulting in jank." (https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution). I'm experiencing this behavior where it runs the RAF closest to the end of a frame for all updates: