• Content Count

  • Joined

  • Last visited

  • Days Won

  1. @charlie_says thank you for your answer, even though it didn't work in my case, it putted me on the way to what @bubamara said, I had actually found the solution but a bad config in my webpack conf was compiling the code in the wrong location 🤦‍♂️ So yes: simply providing PIXI through the webpack config is the way, thanks everyone for your help.
  2. Understood, thanks for these answers!
  3. Thanks for your answer Ivan, unfortunately it's a bit beyond my knowledge of webpack, I'll keep looking for a solution and post it here if I ever find one. Naive question: why isn't pixi-layers directly included in Pixi?
  4. I've been trying to make pixi-layers work with Pixi 5 with no success, here's the code: import * as PIXI from "pixi.js"; window.PIXI = PIXI; require("pixi-layers"); const app = PIXI.autoDetectRenderer(); document.querySelector('.pixi').appendChild(app.view); const stage = PIXI.display.Stage(); I'm trying to import pixi-layers the way it's recommended in the repo but I get this error on runtime: main.js:14 Uncaught ReferenceError: PIXI is not defined I've also tried to copy this example I've found but with no success, weirdly enough, the example seems to work perfectly fine, I don't see what's different in my code (I use Webpack for bundling).
  5. 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.
  6. 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 🙃
  7. I'm not sure of how to achieve that yet, but I'll look into it. Thanks for your insight!
  8. 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.
  9. 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 😅
  10. 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!