Zealot

Members
  • Content Count

    6
  • Joined

  • Last visited

  1. Thanks a lot, it helped me get a working grid using a TilingSprite. The result is pretty good, and the `cacheAsBitmap` method probably helped the whole thing run even smoother, however I'm not sure the TilingSprite approach has a lot of benefits performance-wise over the looped `Graphics` elements, but I'm not sure of how to compare memory usage for the 2 of them. It should be fine for the scope of my project for now, I just wished I had a better understanding of shaders are they look like an excellent solution for this kind of use.
  2. I've been trying to use a canvas to create the texture, that I'll later use in a TileSprite, I'm trying to make it work in a Sprite for now but something is wrong and it's not rendering anything: const canvas = document.createElement("canvas"); canvas.width = 100; canvas.height = 100; canvas.style.border = "4px solid white"; canvas.style.background = "white"; const tileTexture = Texture.from(canvas); this.background = Sprite(tileTexture); window.viewport.addChild(this.background); I'll look at it more in depth tomorrow 🙃
  3. I'm not sure of how to achieve that yet, but I'll look into it. Thanks for your insight!
  4. I need to be able to programmatically adjust the grid appearance (lines width, and color), I'm not sure of how to achieve that using a sprite.
  5. Hi @ivan.popelyshev thanks a lot for being this welcoming and your quick answer 😁 I made some progress! First thing first: I want to use this grid within a pixi-viewport, might not change much but I prefer to say it first. Anyway here's the modified code: const uniforms = {}; uniforms.vpw = this.width; uniforms.vph = this.height; uniforms.offset = [0, 1]; uniforms.pitch = [50, 50]; uniforms.resolution = [this.width, this.height]; const gridShader = new Filter(undefined, shader, uniforms); const rect = new Graphics().drawRect(0, 0, this.width, this.height); rect.filters = [gridShader]; window.viewport.filterArea = window.game.renderer.screen; window.viewport.addChild(rect); This got me from a sad black background to an actual grid, only issue is: it's not scaling with the viewport: screen recording.webm Now I'm trying to make it scale nicely with the viewport, I'll get back at you when I managed to do that. That might be more suited to my needs, I'll also look into this. Indeed I don't know much about the use of framebuffers in this case. All I'm trying to do is to get a grid while limiting the draw calls, my initial – naive – approach was the classic OOP loop with an individual Graphics instance for each line, I'm just looking for something more optimized, maybe a mesh shader makes more sense for that use case. Thanks again for your precious help, I'm a bit ashamed of my lack of knowledge here 😅
  6. I'm looking to generate a basic grid using a shader, and I've came across this Codepen which fits what I'm looking for. Only issue is: it's using Pixi v3, I've been looking into the documentation to port this code to work for a v5 filter, with no success so far. I'm still in the process of learning about shaders and filters, and the original code is already 2 versions outdated. Any help would be greatly appreciated. Cheers!