Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Zealot

  1. Hi @Exca, thanks for your reply, I'll be looking into it, it may take a while since I'm a noob at shaders but I'll keep you updated!
  2. Hi @jonforum thanks once again for your insight I've been playing a bit with blend mode and while I'm still not there yet I managed to have that render, I'm not going to use it and it's not optimized at all but I think it looks cool 😁 Screen Recording 2020-12-03 at 11.02.04.mov Still experimenting with blend modes this time to see how I can "substract" areas out of the overlay.
  3. I'm aware this question has been asked dozens of time already, sorry about that 😇 I'm looking to implement a classic field of view in my game, with a fog of war hiding game elements, for that I've been thinking of using an "obfuscating" element (a PIXI.Graphics reactangle) covering the whole game stage, coupled to a pretty classic 2d-visibility algorithm, here's what I managed to have on my scene: The lines are representing the triangles being drawn, the yellow area is what I want to reveal to the player, any entity outside of that area should be hidden (behind the obfuscating
  4. Thanks for your input @ivan.popelyshev 🙂 Using the pixi.js package (5.3.3, also tried with 5.4.0-rc.2) didn't work, even with headless gl imported before the tests, I may actually have to initialize headless gl somehow but I'm not sure how to provide it to Pixi. Tests are running well in WebGL with pixi.js-legacy, as a reference, here's my setupTests.js import "@testing-library/jest-dom/extend-expect"; import "@testing-library/jest-dom"; import { render, fireEvent } from "./test-utils"; import "canvas-prebuilt"; import "canvas"; import "jest-canvas-mock"; import "webgl-mock"; i
  5. I didn't know about this, I'll look into it later tonight, thank you! Interestingly, using the WebGL render with pixi.js-legacy seems to solve the issue, tests are running even with the WebGL enabled. I'll come back later to confirm that.
  6. Hi @jonforum I believe using `canvas-prebuilt` actually solved the canvas problem, now it's WebGL that's causing me trouble, to confirm that: I've installed pixi.js-legacy and forced canvas through the forceCanvas option and all my tests passes successfully. I'd however not use the legacy version with canvas. Thanks a lot for your reply and insight!
  7. I've been trying to implement testing with Jest and I've run into a few issues, my stack is running React (with Create-React-App), Jest for testing, and Pixi 5.3.3. My first issue was Jest being unable to render a canvas (TypeError: Cannot set property 'fillStyle' of null), which was solved by importing canvas-prebuilt in my tests' setup, this issue on Github is mentioning this problem. However, I now get a WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support. error, is it possible to launch tests with WebGL enabled? I've also tried importing `j
  8. That's super cool 😁 Neat little game, well done!
  9. 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 e
  10. @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.
  11. Understood, thanks for these answers!
  12. 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?
  13. 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
  14. 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.
  15. 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 🙃
  16. I'm not sure of how to achieve that yet, but I'll look into it. Thanks for your insight!
  17. 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.
  18. 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]
  19. 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!
  • Create New...