• 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 graphic). My issue is pretty much on how masking works: using that yellow area as my mask I'd effectively need to "reverse" the masking, displaying only the Graphic outside of the mask. I'm using Pixi 5.3.3, what's the best approach to that? The older solutions I've found looks outdated (pre 5.0), I don't really know where to start here.
  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"; import "jest-webgl-canvas-mock"; I think I'll go with legacy for now and go back to pixi.js at some point if I ever manage to run my tests, maybe the 5.3.4 will fix that issue, it's difficult for me to understand why using legacy solved a problem linked to WebGL, I'll have to look into it more in the future.
  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 `jest-webgl-canvas-mock` and `webgl-mock` in my test's setup, with no success. Any clue on how to test the application using WebGL? I'd prefer not to use the Canvas version.
  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 example files as well.
  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 don't see what's different in my code (I use Webpack for bundling).
  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.