Layer effects not applied in Firefox

paulera commented 4 years ago

Describe the bug

Layer effects are not applied to HTML5 game when opening in Firefox. Shows fine in Chrome.

To Reproduce

Use Firefox
Open the game https://itch.io/embed-upload/1940180 (alternative: https://unforgivenexception.com/games/itroubled/index.html)
Press space in the intro screen to go to the gameplay.

Expected behaviour

CRT and Sepia effects applied during gameplay.
When the player picks up the coffee mug, there should be an RGB split effect.
When the time is over, the score is displayed in popups and the game layer behind gets a B&W-ish effect.

Observed behaviour

No effect is applied at all in Firefox

Notes

Firefox console output:

Google chrome console output:

Environment details

Firefox 72.0.2 (64-bit)
Windows 10
GDevelop 5.0.0-beta88
Game source: https://github.com/paulera/itrouble-game (exported html5 available in the /build/html5 folder - just serve it to run locally)
Example link was deployed at itch.io. However, it happens from another server too: https://unforgivenexception.com/games/itroubled/index.html

4ian commented 4 years ago

Your version of Firefox seems to run the game in "Canvas" mode, meaning it's not being rendered with WebGL. What's your computer configuration and graphic cards? Firefox must be disabling WebGL for some reason, potentially incompatibility with your graphic driver.

I've been testing on a MacBook Pro and can see the effects on FF :)

arthuro555 commented 4 years ago

I can see the effects on firefox windows 7

4ian commented 4 years ago

So while this is a "feature" and not a bug (being able to run without WebGL, thanks to Pixi.js Canvas implementation). This is indeed surprising. We can think of adding a message in the console to explictly tell "This game is running with a Canvas rendering, without WebGL. Effects won't be shown." (flagging this as a good first issue).

Wend1go commented 4 years ago

In fact, you can already react to this with the "Is WebGL supported" condition. And display a message on screen using a text object.

4ian commented 4 years ago

This is very true! A message in the console might be useful for "debugging" but otherwise yes this condition is useful for the game itself :)

Quarkstar commented 4 years ago

@4ian In pixi v5, WebGL and WebGL2 are now first-class, it has removed the canvas-based fallback from the default pixi.js package. Instead, we need to use the legacy bundle to have access to the canvas rendering. So, will we support running game in "Canvas" mode when upgrading to pixi v5?

import * as PIXI from "pixi.js";
// Will NOT return CanvasRenderer because canvas-based
// functionality was removed from "pixi.js"
const renderer = PIXI.autoDetectRenderer(); // return PIXI.Renderer or throws error

import * as PIXI from "pixi.js-legacy";
const renderer = PIXI.autoDetectRenderer(); // returns PIXI.Renderer or PIXI.CanvasRenderer

4ian commented 4 years ago

I think we will to keep backward compatibility. We can later switch to pixi.js (instead of pixi.js-legacy) when we want to drop this (and benefit from a smaller bundle :)). We could even have some sort of progressive update scheme:

Use pixi v5 with legacy canvas support
Then add an option to export the games without the legacy canvas support. And warn when it's used.
Then later (at a time to be decided), drop the support entirely for canvas support.

arthuro555 commented 4 years ago

We should do that when support for Windows 1.8 gets dropped, because there won’t be any version of internet explorer supported anymore wich is basically the one browser causing problems. The current supported Edge version will soon be for everyone the Chrome based one so there should’t be any problem. We need to be more careful tho with Firefox. We don’t want it not being supported (except maybe for electron only extensions)

De : Florian Rivalmailto:notifications@github.com Envoyé le :mardi 31 mars 2020 16:49 À : 4ian/GDevelopmailto:GDevelop@noreply.github.com Cc : Arthur Pacaudmailto:arthur.pacaud@hotmail.fr; Commentmailto:comment@noreply.github.com Objet :Re: [4ian/GDevelop] Layer effects not applied in Firefox (#1464)

I think we will to keep backward compatibility. We can later switch to pixi.js (instead of pixi.js-legacy) when we want to drop this (and benefit from a smaller bundle :)). We could even have some sort of progressive update scheme:

Use pixi v5 with legacy canvas support
Then add an option to export the games without the legacy canvas support. And warn when it's used.
Then later (at a time to be decided), drop the support entirely for canvas support.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/4ian/GDevelop/issues/1464#issuecomment-606675088, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AETT4LSFNIA5THYJRY7FZN3RKH7HPANCNFSM4K2C4ZWA.

85ayush commented 3 years ago

I would love to work on this issue, I am new to open source contribution, can you please guide me?

paulera commented 3 years ago

I would love to work on this issue, I am new to open source contribution, can you please guide me?

Issue's pages are exclusive to their technical details and discussion. The GDevelop forum is the right place to search/ask this question.

Anyways, the video Contributing to Open Source for the first time and the project homepage will help you to get started.

arthuro555 commented 3 years ago

🤔 It seems legitimate to me to ask here, it is a technical question (how do I get started with contributing to GDevelop/how to install the dev environment), where the forum is (I think) more a place for questions about GDevelop itself.

4ian commented 3 years ago

The message that was marked as spam was posted on ~30 issues without any changes. This was spam, hence marked as such, and is not a good sign generally: if you're motivated enough to do that, you might as well just follow the README. I'm happy to help people, but only when you have put enough efforts on your own (instead of making us lose 15 minutes dealing with the spammed issues). It's ok to ask question, but only when you've done at least a bit of research. Seems like the original poster did not even try to follow the README.

pro11x11 commented 1 year ago

for me it work fine

4ian / GDevelop