Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Zealot last won the day on May 19 2020

Zealot had the most liked content!

About Zealot

  • Rank

Recent Profile Visitors

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

  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.
  • Create New...