ZYandu

Members
  • Content Count

    33
  • Joined

  • Last visited

Everything posted by ZYandu

  1. Yes good idea! I turned off all my plugins for Chrome on my Macbook Pro and I haven't gotten a profile with a RAF failure in 3 separate 60 second profiles. However, I still see it happen in my game πŸ˜› My guess is that since an RAF is supposed to sync with the browser, Chrome is saying that it's not ready to draw yet and holds the RAF up until it is ready. Or maybe my Macbook Pro isn't giving Chrome the resources it wants to be able to draw again too when the temp rises and fans start up. To test this, I did a profile on my Chromebook with the Pixi playground example and saw many slowdowns, most of them GPU related or caused by large spaces between frame executions. Also some GC. It is obvious that a Chromebook should perform much worse, but maybe it's highlighting the main problem to be with the Chrome browser itself or more of a device specific GPU + CPU available resources type of issue. https://imgur.com/a/0r7KhJ9 https://imgur.com/a/fAJpMID https://imgur.com/a/D4ItbY8
  2. I don't have any console.logs in my Pixi playground example if you look again. 😁Thanks, yes the second animation frame delay is really what gets my game the most! πŸ˜› https://www.pixiplayground.com/#/edit/pYTkTrNrzUEica9rRZhppο»Ώ
  3. Sorry I didn't really specify before @Exca, the screenshot in my first post is a part of the profile of my full game which uses the same code setup for consistently moving x values, just with more sprites. πŸ™‚ The moving parts are all the numbers and sprites in the middle section https://imgur.com/a/hhhIavE. I made the PIXI playground example and saw that it was also having some stutters for a much more simple version of my game so I figured it must've been an issue with how I was doing it. ^.^ Here's some more profile data on the pixi playground example to try and see similar issues! 😁 30 second profile #1: As Exca mentioned, I am seeing major GC happening a few times in the beginning of the example and then it stabilizes. Longest major gc: https://imgur.com/a/LDklp5o 4 main gc in beginning 25 seconds https://imgur.com/a/ODOoCL0 30 second profile #2: I got something similar to what I see in my game, where the request animation frame seems to take up a lot of time (19.62 ms) without really doing anything. https://imgur.com/a/UARFcMb I've seen both of these types of slowdowns in my game too, any advice? πŸ™‚ Thank you!
  4. Dang... are you seeing any of the visual stutters I mentioned? It still looks like it slips up on my MacBook Pro. Are you using a computer with a nice GPU?
  5. If Pixi playground still isn't showing up for you then delete all the code and put this in x) /*pixi playground consistant transform test*/ var img = document.createElement("img"); img.src = "https://i.postimg.cc/MKDkHyGN/background-Spice.jpg"; img.style.position = "absolute"; img.style.zIndex = -2; document.body.appendChild(img); var totalTimePassed = 0; //webgl renderer var renderer = new PIXI.Renderer({ width: window.innerWidth, height: window.innerHeight, transparent: true }); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); var loader = PIXI.Loader.shared; loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png') .load(startup); function startup(loader, resources) { var bunnyContainer = new PIXI.Container(); bunnyContainer.position.set(0,0); //make 300 bunny sprites at the edge of the pixi canvas for(let i = 0; i < 300; i++){ var bunny = new PIXI.Sprite(resources["bunny"].texture); bunny.visible = false; bunny.msUntilStartMoving = i * 1000; bunny.anchor.set(0.5); bunny.x = renderer.width; bunny.y = renderer.height / 2; bunnyContainer.addChild(bunny); } stage.addChild(bunnyContainer); animate(); } function animate(delta) { requestAnimationFrame(animate); for(let i = 0; i < stage.children[0].children.length; i++){ //Once enough time has passed kick the next sprite into moving if(stage.children[0].children[i].msUntilStartMoving < delta && stage.children[0].children[i].x >= 0) { //unhide sprites at the edge to get ready for transforms if(stage.children[0].children[i].visible == false){ stage.children[0].children[i].visible = true; } //consistantly transform x stage.children[0].children[i].x -= 3; } //once they make it to the left side of the screen, visible false for no transform overhead else{ stage.children[0].children[i].visible = false; } } renderer.render(stage); }
  6. import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt"; let loader = PIXI.Loader.shared; loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}]) .load(setup); function setup (loader, resources){ let text = new PIXI.BitmapText("abcdefg", { font: "50px Arial", //Arial is the face attribute located inside the .fnt file align: 'center' }); } Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! πŸ™‚ https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ο»Ώ
  7. Fixed the pixi playground link I think.. ^.^
  8. Here's an example of what my game is doing. ^.^ https://www.pixiplayground.com/#/edit/pYTkTrNrzUEica9rRZhpp I'm even seeing some stuttering in fps in this bare bones example. Although some of it might be the mouse events interactions. πŸ˜› Any big issues you see?
  9. Yes I only have the one RAF and I have 0 setTimeouts in my code ^.^
  10. I'm getting a lot of inconsistencies in fps due to requestAnimationFrame calls randomly taking a long time where it doesn't look like there is anything being called inside of it until the tail end of the call. What it does show in the call tree only takes PIXI 1-3ms to flush or update transforms while the RAF call can last anywhere from 8-15ms. The devtools are also showing that the GPU and other threads aren't doing any irregular work when the long RAF call happens. It happens at least 10-20 times within a 30 second Chrome devtools performance recording. Has anyone else experienced this kind of thing before? https://imgur.com/a/8Uh8028
  11. Has anyone ever seen this where my RAF wants to take up the entire frame (~15ms) but the processes within don't take very long (~3ms)? My app is running iOS on Cordova with wkwebview. Long RAFs: https://imgur.com/a/2KVeKJZ Processes within one RAF: https://imgur.com/a/CnUNSfk BUT When I zoom into the canvas (by doing the two finger swipe on the iPad) and then zoom out, the RAF fixes to take up only ~5ms total. After zoom trick: https://imgur.com/a/RSzmrTI Is the PIXI canvas loosing focus, like as if I went to another tab on the web? I'm not sure what is happening here, thanks for any help! πŸ™‚
  12. I haven't used any filters on any sprites or containers. πŸ™‚I don't use any RenderTexture's are they better optimized for the GPU? Overview of my resources: I have one tiling Sprite always moving, one spritesheet with all the sprites that have their position animated, all text is made from bitmap text, and the rest of the static sprites are loaded from data urls. Yeah I originally made two renderers because one didn't have to always get updated, but it needed to be updated enough that having separate RAFs gave worse performance than just rendering them both every frame in one RAF. I have thought about merging them into one Renderer, which would get rid of the composite layers. Is it better to have one renderer at full height and width of the screen? ^.^ I don't use antialiasing or preserveDrawingBuffer on renderer options but I do use transparency for background images. πŸ™‚ const renderer = useRef( new PIXI.Renderer({ width: 1920, height: 600, preserveDrawingBuffer: false, transparent: true, antialias: false, }) );
  13. I'm looking for any tips in regards to performance with the GPU and composite layers specifically. ^.^ My performance now is pretty good on web ~55-60 fps and it also looks pretty good on mobile, but it is using ~70% iPad's GPU power and only ~20-30% CPU. The code is in PIXI 5.1.0 and I have two renderers with one main RAF that renders both of them. Before the RAF starts, I'm using the PIXI.loader.shared to load in all the images and then I use the prepare plugin on all the PIXI containers that contain sprites. Offscreen sprites are all .visible = false. My main animations are constant x position subtracting to ~15-30 individual sprites on screen at a time and tinting menu sprites that are always on screen and aren't moving. Main Question: Looking at causes of composite layer paint complexity, I'm seeing that my PIXI renderers caused two layers for each of them. Is this normal for each renderer to have two layers with one saying n/a for compositing reasons? n/a layer: https://imgur.com/a/IGjPmTs Compositing due to the element being a <canvas> element: https://imgur.com/a/o4zZ21R Chrome devtools normal performance frame: https://imgur.com/a/iW3quHn I also have a lot of overlapping containers with sprites in the actual PIXI code which could be causing a higher memory estimate on the GPU's work. Is it worse to have each of the sprites in Containers when they overlap? Overlapping sprites: https://imgur.com/a/I61nBMo Thank you so much for any advice, you guys are the best! ^.^
  14. Makes sense, that solves it for me! Thank you! 🀘
  15. 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?
  16. Sorry, I was out of town for the weekend ^.^ Hopefully this pixi playground works for you: https://www.pixiplayground.com/#/edit/DLhN7lSrT6uHC3uZAN3eJ
  17. 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! 😁
  18. 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 😎
  19. @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.
  20. 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.
  21. 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. πŸ™ƒ
  22. 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/
  23. 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! 😁
  24. 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!