Upgrade to PixiJS v6

[4ian]

For now just a quick test to see how it works and to get a nightly build generated with it for the runtime.

• Upgrade in the IDE (package.json)
• Upgrade in the Runtime (file with the minified version)
• Do adaptations:
  • drawStar method for the Shape Painter (@pixi/graphics-extras)
  • Probably upgrade pixi-tilemap to v3. See this blog article: http://www.shukantpal.com/blog/pixijs-tilemap-kit-3/ Not necessary for now it seems
• Verify all filters work.
• Update types

Will fix #1991.

Autogenerated testing versions (be careful, please backup your game):

• Windows
• macOS
• Linux

[Bouh]

Moved drawStar Method

Graphics drawStar method has been moved to @pixi/graphics-extras, if you're using that, you need to use this optional package (not included in pixi.js or pixi.js-legacy by default). This method was added before graphics-extras and belongs with those optional drawing functions.

Source
Source2

I need to test it and see for fix.

[arthuro555]

Maybe we should use the minified version? We can download the sourcemaps to make debugging easier. (Same for pixi.js)

[Bouh]

Idk about how we should add map files if we use minified files Le sam. 20 mars 2021 à 14:05, Arthur Pacaud ***@***.***> a écrit :

…

***@***.**** commented on this pull request. ------------------------------ In Extensions/PrimitiveDrawing/pixi-graphics-extras/graphics-extras.js <#2447 (comment)>: > @@ -0,0 +1,406 @@ +/*! Maybe we should use the minified version ***@***.******@***.***/dist/browser/graphics-extras.min.js> ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2447 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMX4DVFURSZO7PJ46F224LTESMRTANCNFSM4ZNSPW2A> .

[arthuro555]

I already did the main work in 629adcc, you just need to have the .map file sit next to the normal file and have the same name except for the .map

[4ian]

Yep let's use the minified version + the .map next to it :)
Btw I put the non minified version for pixi.js just to quickly test and help if there are crashes, but we can do the same I think.

[Bouh]

Ok I'll do that's tonight Le sam. 20 mars 2021 à 15:29, Florian Rival ***@***.***> a écrit :

…

Yep let's use the minified version + the .map next to it :) Btw I put the non minified version for pixi.js just to quickly test and help if there are crashes, but we can do the same I think. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2447 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMX4DSF6JRC6IRQRMHU4ALTESWLVANCNFSM4ZNSPW2A> .

[Bouh]

Fix for texture on bitmapText is out in v6.0.1 🎉

[4ian]

Great! 👍
I think the biggest "challenge" is pixi-tilemap then. The rest seems straightforward/not changed?

[Bouh]

Nothing shocked me in the recent patch notes of PixiJS.
Could be fair enough to check the filters, and run a bunch of examples to be sure.
I can take care of it tomorrow in the end of the day.

[4ian]

That's good yes if you can take a look at the whole app. We'll also have to update Pixi.js inside the IDE, but if it works for the runtime then it will probably work without a single issue in the IDE, as we use much less features :)

[Bouh]

The project for test layer effects are in GDJS/tests/games/effects/all effects demo.json
Everything is ok!

[4ian]

Awesome! If we can get this "rolling" and merged quickly, we can then merge BitmapText soon after :)

[Bouh]

I've open up, run, and edited some examples with all types of objects, nothing to signal.
Expect one deprecation warning for tilmap.

For my test i have copied this branch and merged with master.

I let you check for update tilemap.

[4ian]

Thank you I'll check how tilemap is working :) If there are no bugs we can also go ahead with Pixi.js v6 and upgrade to pixi-tilemap v3 later.

[blurymind]

for tilemap, do we still need this hack?
76b904a

[4ian]

for tilemap, do we still need this hack?

It's properly integrated now in pixi-tilemap it seems.

Speaking of tilemaps, I've tested the two examples and everything seems to be working fine with Pixi.js v6.0.1. So I think we don't need to update to pixi-tilemap v3 directly, we can do this in a separate task :)

I've tested a larger game that works well, filters seem all to work as tested by @Bouh, so seems we're good to go? :)
This will solve a performance issue on iOS so it's fairly important, and this will also unblock BitmapText! :)

[Bouh]

Then sound good to me!

[4ian]

We're actually missing one last point: the typings! When upgrading pixi.js in the GDJS/package.json, we have tons of typescript errors, because it seems that types are declared differently and so PIXI is not recognised :/
Painful!

[arthuro555]

No offense intended but I don't think the last commit is a good solution. Casts to unknown, trying to force pixi types into a namespace by from what I understood patching the original PIXI file and importing pixi many times in the type definition... All of this add a lot of complexity to the code and makes us bypass type checking, which beats the purpose of typescript.

Then, I haven't really looked into it so if it is the only way, I guess there is no avoiding this.

[4ian]

No worries!
Happy to wait if you want to give a try at a different solution. I've unfortunately not found anything else that would allow to use PIXI as an "ambient namespace", meaning that you can just write PIXI.xxx and it "just works". The only way was to put it in a module.

I'm also not satisfied at having to modify pixi.js to add this global variable - this is really TypeScript running in our way there. I could have added this at some other place but I need to do it immediately after PIXI is defined, so I thought it was the best place.

If anything this will help migrating toward modules in the long term rather than using a global PIXI object (i.e: in the future we can replace the import PIXI = GlobalPIXIModule.PIXI by import * as PIXI from "pixi.js" or equivalent). But this is not a priority at all and would need heavy refactoring of all the files to use import/export instead of namespace gdjs { (and extensions too).

Let me know if you think of something better.
The as unknown are somehow necessary (not sure why) but as PIXI.filter.xxx was already there before, so we're not making things worse in terms of typing.
In other words, we've not lost any type checking coverage with this.

[4ian]

@arthuro555 Let me know if you have time to look at this. Would be great to go ahead with PixiJS v6 soon as it will allow BitmapText to get in, and also it has a performance fix for games on iOS :)

[arthuro555]

I took a longer look than I should have, and haven't found a better way. The only other way I found was using this:

import * as PIXI from 'pixi.js';
export as namespace PIXI;
export = PIXI;

But I didn't manage to extend the namespace with pixi-filters types without crashing the typescript compiler. I guess that having a weird hack is better than losing type coverage on all filters.

[4ian]

Nice finding though this export as namespace, I've been searching everywhere in the doc. Now I guess the filters are causing a crash 😅 I'll give another quick try, in the worse case we can always go back to this later.

[4ian]

Seems like as soon as you try to use a namespace PIXI after using export as namespace PIXI, you're getting a crash.
I think we've lost enough time on this. Filters are a bit suboptimal in the sense that they declare a different namespace PIXI as GlobalPIXIModule, but apart from that everything is still typed and the import PIXI = GlobalPIXIModule.PIXI actually help in the future to identify all files using PIXI.
So I think we'll go ahead like this!