Upgrade game rendering to use Pixi.js 5.3.0, allowing games to run wi…

…th WebGL 2 (#1824)

* This brings various upgrades and performance improvement to the internal rendering engine used by games, both in the editor and in exported games.
* This also paves the way for adding new objects like Bitmap Text, Mesh or dynamic lights in the future.
* Huge thanks to @Quarkstar for working on this task and making most of the necessary upgrades .
* Thanks @Bouh for helping fixing/upgrading the Shape Painter object and @Silver-Streak as well as testers from the forum

Don't show the rest in changelog:
* Add a test game with all effects that can be used, to quickly verify they are working.

Co-authored-by: Quarkstar <quarkstar9@gmail.com>
Co-authored-by: Aurélien Vivet <bouh.vivez@gmail.com>

Extensions/BBText/JsExtension.js

@@ -506,7 +506,7 @@ module.exports = {
 
       const rawText = properties.get('text').getValue();
       if (rawText !== this._pixiObject.text) {
-        this._pixiObject.setText(rawText);
+        this._pixiObject.text = rawText;
       }
 
       const opacity = properties.get('opacity').getValue();

Extensions/BBText/bbtextruntimeobject-pixi-renderer.js

@@ -67,7 +67,7 @@ gdjs.BBTextRuntimeObjectPixiRenderer.prototype.updateWrappingWidth = function ()
 };
 
 gdjs.BBTextRuntimeObjectPixiRenderer.prototype.updateText = function () {
-  this._pixiObject.setText(this._object._text);
+  this._pixiObject.text = this._object._text;
   this.updatePosition();
 };
 

Extensions/BBText/pixi-multistyle-text/README.md

@@ -1,9 +1,67 @@
-This extension is using release version 0.8.0 (commit 336bed0b206043e2c3e81c373b7ca02094ecabe7) of the pixi-multistyle-text library:
-https://github.com/tleunen/pixi-multistyle-text
+# pixi-multistyle-text
 
-The BBcode tag feature was especially added for Gdevelop and this extension (commit 2a7be2084598933502c76419d7a86c0e6cd11719)
+[![NPM](https://nodei.co/npm/pixi-multistyle-text.png)](https://nodei.co/npm/pixi-multistyle-text/)
 
-README:
-Add a MultiStyleText object inside pixi.js to easily create text using different styles.
+Add a `MultiStyleText` object inside [pixi.js](https://github.com/GoodBoyDigital/pixi.js) to easily create text using different styles.
 
-License: MIT
+## Example
+
+In the example below, we are defining 4 text styles.
+`default` is the default style for the text, and the others matches the tags inside the text.
+
+```js
+let text = new MultiStyleText("Let's make some <ml>multiline</ml>\nand <ms>multistyle</ms> text for\n<pixi>Pixi.js!</pixi>",
+{
+	"default": {
+		fontFamily: "Arial",
+		fontSize: "24px",
+		fill: "#cccccc",
+		align: "center"
+	},
+	"ml": {
+		fontStyle: "italic",
+		fill: "#ff8888"
+	},
+	"ms": {
+		fontStyle: "italic",
+		fill: "#4488ff"
+	},
+	"pixi": {
+		fontSize: "64px",
+		fill: "#efefef"
+	}
+});
+```
+## Build instructions
+
+```
+$ yarn install
+$ yarn build
+```
+
+## Usage
+
+### `text = new MultiStyleText(text, textStyles)`
+
+Creates a new `MultiStyleText` with the given text and styles.
+
+#### `textStyles`
+Type: `{ [key: string]: ExtendedTextStyle }`
+
+Each key of this dictionary should match with a tag in the text. Use the key `default` for the default style.
+
+Each `ExtendedTextStyle` object can have [any of the properties of a standard PIXI text style](http://pixijs.download/release/docs/PIXI.TextStyle.html), in addition to a `valign` property that allows you to specify where text is rendered relative to larger text on the same line (`"top"`, `"middle"`, or `"bottom"`).
+
+The `align`, `wordWrap`, `wordWrapWidth`, and `breakWord` properties are ignored on all styles _except for the `default` style_, which controls those properties for the entire text object.
+
+If text is rendered without any value assigned to a given parameter, Pixi's defaults are used.
+
+## Demo
+```
+$ yarn demo
+```
+
+
+## License
+
+MIT, see [LICENSE.md](http://github.com/tleunen/pixi-multistyle-text/blob/master/LICENSE.md) for details.

Extensions/Effects/JsExtension.js

@@ -200,7 +200,6 @@ module.exports = {
       .setDescription(
         _('Alter the rendered image with the specified blend mode.')
       )
-      .addIncludeFile('Extensions/Effects/pixi-filters/filter-alpha.js')
       .addIncludeFile('Extensions/Effects/blending-mode-pixi-filter.js');
     const blendingModeProperties = blendingModeEffect.getProperties();
     blendingModeProperties
@@ -240,7 +239,7 @@ module.exports = {
       .setLabel(_('Resolution'))
       .setType('number');
     blurProperties
-      .getOrCreate('resolution')
+      .getOrCreate('kernelSize')
       .setValue('5')
       .setLabel(_('Kernel size (one of these values: 5, 7, 9, 11, 13, 15)'))
       .setType('number');
@@ -847,8 +846,8 @@ module.exports = {
       .setDescription(
         _("Applies a pixelate effect, making display objects appear 'blocky'.")
       )
-      .addIncludeFile('Extensions/Effects/pixelate-pixi-filter.js')
-      .addIncludeFile('Extensions/Effects/pixi-filters/filter-pixelate.js');
+      .addIncludeFile('Extensions/Effects/pixi-filters/filter-pixelate.js')
+      .addIncludeFile('Extensions/Effects/pixelate-pixi-filter.js');
     const pixelateProperties = pixelateEffect.getProperties();
     pixelateProperties
       .getOrCreate('size')
@@ -901,8 +900,8 @@ module.exports = {
           'Applies a reflection effect to simulate the reflection on water with waves.'
         )
       )
-      .addIncludeFile('Extensions/Effects/reflection-pixi-filter.js')
-      .addIncludeFile('Extensions/Effects/pixi-filters/filter-reflection.js');
+      .addIncludeFile('Extensions/Effects/pixi-filters/filter-reflection.js')
+      .addIncludeFile('Extensions/Effects/reflection-pixi-filter.js');
     const reflectionProperties = reflectionEffect.getProperties();
     reflectionProperties
       .getOrCreate('mirror')