Zealot

Members
  • Content Count

    13
  • Joined

  • Last visited

  • Days Won

    1

Zealot last won the day on May 19

Zealot had the most liked content!

About Zealot

  • Rank
    Member

Recent Profile Visitors

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

  1. That's super cool 😁 Neat little game, well done!
  2. Thanks a lot for your insight 😁
  3. I've been playing around with pixi-layers for a few days now and I've noticed 2 things: The layer.on("sort", ...) callback is being called continuously (on each tick if I had to guess). Each elements within layers have an updateOrder attribute that's continuously incrementing: Screen Recording 2020-06-04 at 21.38.49.mov All of that lead me to believe that layers are being continuously re-sorted (I may be mistaken), and I was wondering what was the point of doing such thing? Wouldn't be better to listen for an element's zOrder to change? This behavior can be observed on the example files as well.
  4. @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.
  5. Understood, thanks for these answers!
  6. 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?
  7. 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).
  8. 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.
  9. 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 🙃
  10. I'm not sure of how to achieve that yet, but I'll look into it. Thanks for your insight!
  11. 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.
  12. 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 😅
  13. 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!