Upgrade to Pixi.js 5.3.0

[4ian]

First, thanks again to @Quarkstar for working on the original PR #1628 (the PR will be merged in master using a rebase to ensure the commit is properly attributed).

Let's discuss/work here on what is needed to make Pixi.js v5 work perfectly with GDevelop - notably filters.
@Bouh if you want feel free to make a list here of what you think need to be done before we consider this branch ready :)

@HarsimranVirk You can now surely start from this branch pixi-v5 and cherry pick your commits on top of it :) If you open a PR, you can choose to use pixi-v5 as the "base" branch, instead of master, so that only your commits are shown in the PR.

[Bouh]

Here a list of thing to check before merge this huge pixi-v5 branch.

Before all i wish propose to continue ours effort and forward to the maximum version of PixiJS, i mean pass from 5.2.4 to 5.3.0.
Why ?

Because 5.3.0:

• The BitmapText and BitmapFont.from are added, maybe this can be useful for blurry text in pixel perfect games.
• resize event to the Renderer and CanvasRenderer
• Improve the shape painter with support for lineJoin, lineCap and miterLimit.
• Auto-detect using 32-bit index buffer for large Graphics, (for fix this ?, the Tiled sprite can be blurred if this one is too large or the offset is huge.)

Thing to check :

• Sprite
• Tiled Sprite
  • Deprecate TilingSprite's fromImage and fromFrame
  • See if the object going blurry if this one is very large.
• Particules emitter
• Panel Sprite (9 patch)
  • See if the angles of the object are correct.
• Shape painter
  • Fix warning & crash with ClearBetweenFrame and Expression in a shape. Detail post
  • Wait a fix for this, Detail Post
• Text
  • See if font can be improve with Bitmap from 5.3.0, for fix blurry edge on text in nearest mode.
• BBText
  • See if the font and the line height are correct.
• Video
• Tilemap ?
• Filters (layer effect)
  • All filters, here a project file with all filters provide in the original PR. Here how should look the filters
  • Test on Android (which version is planned?)
  • Test on iPhone
• Remove forceFXAA Application and Renderer option
• The IDE is still in 5.2.1, planned to migrate on 5.3.0
  • Check the loaders
  • Check if the nearest mode is active or not on renderers in the IDE.

[4ian]

Before all i wish propose to continue ours effort and forward to the maximum version of PixiJS, i mean pass from 5.2.4 to 5.3.0.

Yep, no reason to stay behind, I've pushed a commit to use 5.3.0 in the editor :)
The game engine version is still at 5.2.1 though and I think there is some loader methods that we're using that are deprecated. Need to check that when updating to 5.3.0

Thing to check :

Thanks! I've made a quick check on various examples and could not find any problems so far.

All filters, here a project file with all filters provide in the original PR. Here how should look the filters

There are still a few differences, we should check if some filters need an update/fix (or if it was the previous version that was wrong :))

[4ian]

So I upgraded to Pixi.js 5.3.0, but turns out that now only 3 filters are shown in your example (didn't see that before commiting!) :/ I wonder if some filters need an update. Replacing GDJS/Runtime/pixi-renderers/pixi.js by the 5.2.4 version make all the effects works again.

[4ian]

Hiding the "Tilt shift" layer "fixes" the issue, the other layer and filters are now visible again. Might be some additional setup or stuff to do for this filter?

EDIT: actually all layers shown below the layer with the tilt shift are not visible.

[4ian]

I think the TiltShift issue when upgrading to latest Pixi.js 5.3.0 is because it's erasing all the previously rendered layers, due to pixijs/pixijs#6295 (or related) and the fact that TiltShift is missing a parameter when calling apply (the "clear"/"clearMode" parameter): https://github.com/pixijs/pixi-filters/blob/0ad9a90c7f78ff3e278fd2372da288439a8b6748/filters/tilt-shift/src/TiltShiftFilter.js#L34-L35

I'll make a hotfix in the existing filter code while waiting to report this.

[4ian]

All filters current status:

vs 4.8.6:

[4ian]

Testing versions:

• Windows: https://github.com/4ian/GDevelop/releases/download/v5.0.0-beta97/GDevelop.5-5.0.0-beta97-pixi-v5-win.zip
• macOS: https://github.com/4ian/GDevelop/releases/download/v5.0.0-beta97/GDevelop.5-5.0.0-beta97-pixi-v5-mac.zip
• Linux: https://github.com/4ian/GDevelop/releases/download/v5.0.0-beta97/gdevelop-5.0.0-beta97-pixi-v5.tar.gz

[Bouh]

I've started to test and fix Graphics, it's not yet finish, i've started an big project for test all the stuff.

• There is a bug already reported on pixi repo.
  The outline can have a strange behavior, the width is setup on 10, but in the angles the width is bugged.
  
  In an future update i'll improve the Graphics, we can use different type of angle now.
  This bug is i think related to this new feature.

• I've removed some lines in drawPathLineTo, drawPathBezierCurveTo, drawPathArc and drawPathQuadraticCurveTo.
  The previous moveTo() is now handle by pixi or something like that, I need remove these lines for keep the same visual compare to v4.8.6, otherwise the graphic lines start from 0;0.

Can I push the content of my local branch v5 on this PR ?
What is the process for submit my code here ?

[4ian]

Thanks for checking and fixing that!! 👍

Can I push the content of my local branch v5 on this PR ?
What is the process for submit my code here ?

Create a branch from pixi-v5, create your commits as usual, then push to your repository as usual. Then when you open a PR, choose pixi-v5 as the target branch instead of master. You can also do it after creating the PR:

[Bouh]

When i use a combo of TimeDelta for an shape and ClearBetweenFrames (set on No, see the project file below of this post), i get warnings and this cause a crash of the game.
The requestAnimationFrame is very low to execute and the game crash after ~14 warning.

The .json of the profiler, you can see the spike at the end in the timeline, the spike is the first warning.
Profile-20200625T155905.zip
This didn't happen on 4.8.6.

(The parameter for the action ClearBetweenFrames is already fixed i'll push it later.)

Here the project used, go in scene Graphics and the group in red in the eventsheet.
GDevelop project - Benchmark Pixi 5.3.0.zip

A part this warnings and crash, the Shape Painter Object work like expected.

[4ian]

ClearBetweenFrames (set on No, see the project file below of this post)

If you're disabling clear between frames, everything that you display in a frame is persisted for the next one, so basically you're filling an array of graphics with new stuff 60 frame per seconds... at some point this is becoming too much to render (and/or to hold in memory) and the whole game crashes because your GPU can't keep up (probably).

That was my fear with this option, to risk having crashs like this when you add graphics to draw without stopping. We should surely have an upper bound of something like 100 shapes for a single object, and maybe add a warning somewhere.
But I'm surprised this does not crash for Pixi 4! :)

[Bouh]

I've seen a hack for it in the pixi's guide and found a similar issue.

This hack is now implemented in v5.3.0 but the issue persist.
It's indeed because the graphicsData (the shapes to draw) is huge and it's take a lot of time for the gameloop.

What you think if we use a renderTexture for keep the previous image of the shape painter object and use clear, this way the graphicData stay low.

[4ian]

What you think if we use a renderTexture for keep the previous image of the shape painter object and use clear, this way the graphicData stay low.

I think that's a solution, but if someone wants to use the Shape Painter objects to create a lot of small objects (i.e: a lot of objects, but each with a few shapes at most), it might be counter productive to create a texture for each of them.
So if we go ahead with adding a render texture, it should I think be an option. Also, we can limit the number of shapes to a large number but not too high enough to risk crashes. In other words:

• You want to make a highly animated object based on shapes? Use the object with the option to clear the shapes between frames (like we did before).
• You want to keep the shapes from the previous frame (because you're not adding shapes often, like only when the player clicks). Use the object without the option to clear the shapes between frames. We still have a limit of ~300 shapes to avoid risking you crashing your game if you add frames at every frame.
• You want to draw shapes every frame because you want to create some kind of special effects? Fair enough in this case activate the intermediate texture so that you're not paying the cost of drawing thousands of shapes (so you don't risk hitting the limit of 300 shapes). The downside is more memory usage to save the render texture, but well you chose it :)

[arthuro555]

I have a small suggestion for pixi-v5: using by default pixi-v5 and offer an option to enable legacy mode to use pixi-v5-legacy (with canvas rendering), like pixi does.

[Silver-Streak]

It sounds like BitmapFont/Text is one potential fix for some of the text issues, and since 5.3 is required for that, wanting to just check to see if there was any status on this? Anything I could do to help with testing?

[Bouh]

• Using the dev build here, and test each line here.
  Think to open the console in the IDE and in the preview for see if an error come.

• The fix for lines/angle on Shape painter (graphic) is fixed,
  We need wait for 5.3.1 "soon"

• I fail to use renderTexture for the option ClearBetweenFrames :/

I'm not gonna be here between Wednesday(tomorrow) and Sunday/Monday.

[Silver-Streak]

Ran through what tests I could. Hopefully this is more helpful than hurtful.

• Sprite

• Tiled Sprite

  • Deprecate TilingSprite's fromImage and fromFrame edit 4ian: nice to have but not mandatory
  • See if the object going blurry if this one is very large. edit 4ian: you can't reproduce, hence considering this ok

• Particles emitter

• Panel Sprite (9 patch)

  • See if the angles of the object are correct. edit 4ian: I think it's an old bug, considering this ok

• Shape painter

  • Fix warning & crash with ClearBetweenFrame and Expression in a shape. Detail post
  • Wait a fix for this, Detail Post
    • Fix merged, not available until 5.3.1

• Text

  • Same blurriness (scaling up) and distortion (scaling down) rendering issues as always, but otherwise behaves as expected. edit 4ian: no regression, so considering ok
  • As with BBText, IDE and Preview positioning/appearance still do not match (existing issue from b97). Example: IDE and Preview edit 4ian: no regression, so considering ok

• See if font can be improve with Bitmap text edit 4ian: checking as it's not an existing feature

• BBText

  • See if the font and the line height are correct.
    • Line height seems fixed. actual text positioning still differs between preview and IDE:

• Video

• Tilemap edit 4ian: checking as it's not an existing feature

• Filters

  • All filters, here a project file with all filters provide in the original PR. Here how should look the filters

    • Most seem greatly improved. Screenshot with Blue boxes added to show changes:
      
      Notes:

  • Displacement (Not working) edit 4ian: working, just the example was missing a file/

  • Dot (Working now, wasn't in b97)

  • Blur (Seems to shrink image, then blurs it)

  • Blending Mode (Can't tell what this one is supposed to do, but identical to b97)

  • ColorReplace (Working now, wasn't in b97)

  • Bulge Pinch (Both working now, wasn't in b97)

  • Zoom Blur (Working now, wasn't in B97)

  • ~~ Remove forceFXAA Application and Renderer option~~ Edit 4ian: Can't find this in the codebase?

• The IDE is still in 5.2.1, planned to migrate on 5.3.0

• Check the loaders

  • Seeing some weird behaviors in the console on preview. Lots of unable to copy alerts: edit 4ian: not related to Pixi, it's harmless
    

• Check if the nearest mode is active or not on renderers in the IDE.

[4ian]

Thanks both again for checking all of this :)

Going forward let's be very strict on this checklist, notably:

• if it's not an existing feature (tilemap, bitmap object), don't list it. I know that Pixi v5 will unlock these, but for now we must concentrate on landing Pixi v5, and if we add noise in this list, it will slow down my ability to merge this and so my ability to then help/implement these objects :)
• if it's an existing issue, let's not list it. Same, I would love to fix all existing issues, but for now we must just ensure that there is no regression. If it's not a regression, let's not write it down, it will slow down Pixi v5.

I'll edit your last message @Silver-Streak with my comments :)

[blurymind]

Tilemap implementation will happen as a separate pr. I have zero interest in piling it over this already huge pr, so no point in giving it a checkbox here

…

On Wed, 15 Jul 2020, 12:28 Florian Rival, ***@***.***> wrote: Thanks both again for checking all of this :) Going forward let's be very strict on this checklist, notably: - if it's not an existing feature (tilemap, bitmap object), don't list it. I know that Pixi v5 will unlock these, but for now we must concentrate on landing Pixi v5, and if we add noise in this list, it will slow down my ability to merge this and so my ability to then help/implement these objects :) - if it's an existing issue, let's not list it. Same, I would love to fix all existing issues, but for now we must just ensure that there is no regression. If it's not a regression, let's not write it down, it will slow down Pixi v5. I'll edit your last message @Silver-Streak <https://github.com/Silver-Streak> with my comments :) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1824 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVOSK3EEZUFZ63RDGELR3WHGJANCNFSM4OBSM4QA> .

[4ian]

Alright I think we've very near merging this!
We only need to sort out:

• Merge Graphics for Pixi v5.3.0 #1836 into this PR (fix for graphics)

Not blocking:

• Use Pixi 5.3.1 when available to fix a shape painter glitch in some specific cases
• Blur filter that is somehow broken in the example... but working fine if I try it in another game. Might be not worth spending a lot of time on it, especially because it might getting hidden/deprecated in favor of Kawase Blur.
• Possible add something to warn/prevent crashes with shape painter when drawing too much without clearing the frame - though I don't consider this blocking.

[4ian]

Merged! Thanks @Quarkstar again, @Bouh, @Silver-Streak and everyone that helped on this. @HarsimranVirk you should now be able to base your branch on the master branch ;)

I know there was a few things that I listed in my previous message that we should still look at, but I think they are not blocking. It's also a large and important upgrade so better have it done because this could also solve some existing glitches/bug/performance issues from Pixi 4. I hope that apart from that there are no major regression - I could not find anything wrong when testing various game/examples - but let me know if there is something that seems not to work anymore!