Enabling Outline back on actionable objects

Actionable objects (still a prototype) were outlined when you walk next to them.
The OutlinePipeline was broken when moving in Phaser 3.50+.

This PR completely removes the custom OutlinePipeline and replaces it with the rexOutlinePipelinePlugin
that is provided by a third party library and that works great \o/

front/src/Phaser/Items/ActionableItem.ts

@@ -3,8 +3,8 @@
  * It has coordinates and an "activation radius"
  */
 import Sprite = Phaser.GameObjects.Sprite;
-import {OutlinePipeline} from "../Shaders/OutlinePipeline";
 import type {GameScene} from "../Game/GameScene";
+import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
 
 type EventCallback = (state: unknown, parameters: unknown) => void;
 
@@ -42,11 +42,11 @@ export class ActionableItem {
             return;
         }
         this.isSelectable = true;
-        if (this.sprite.pipeline) {
-            // Commented out to try to fix MacOS issue
-            /*this.sprite.setPipeline(OutlinePipeline.KEY);
-            this.sprite.pipeline.set2f('uTextureSize', this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height);*/
-        }
+
+        this.getOutlinePlugin()?.add(this.sprite, {
+            thickness: 2,
+            outlineColor: 0xffff00
+        });
     }
 
     /**
@@ -57,8 +57,11 @@ export class ActionableItem {
             return;
         }
         this.isSelectable = false;
-        // Commented out to try to fix MacOS issue
-        //this.sprite.resetPipeline();
+        this.getOutlinePlugin()?.remove(this.sprite);
+    }
+
+    private getOutlinePlugin(): OutlinePipelinePlugin|undefined {
+        return this.sprite.scene.plugins.get('rexOutlinePipeline') as unknown as OutlinePipelinePlugin|undefined;
     }
 
     /**

front/src/Phaser/Shaders/OutlinePipeline.ts

@@ -1,59 +0,0 @@
-export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.MultiPipeline {
-
-    // the unique id of this pipeline
-    public static readonly KEY = 'Outline';
-
-    /**
-     * @param {Phaser.Game} game - the controller of the game instance
-     */
-    constructor(game: Phaser.Game)
-    {
-        super({
-            game: game,
-            fragShader: `
-        precision mediump float;
-
-        uniform sampler2D uMainSampler;
-        uniform vec2 uTextureSize;
-
-        varying vec2 outTexCoord;
-        varying float outTintEffect;
-        varying vec4 outTint;
-
-        void main(void) 
-        {
-          vec4 texture = texture2D(uMainSampler, outTexCoord);
-          vec4 texel = vec4(outTint.rgb * outTint.a, outTint.a);
-          vec4 color = texture;
-
-          if (outTintEffect == 0.0)
-          {
-            color = texture * texel;
-          }
-          else if (outTintEffect == 1.0)
-          {
-            color.rgb = mix(texture.rgb, outTint.rgb * outTint.a, texture.a);
-            color.a = texture.a * texel.a;
-          }
-          else if (outTintEffect == 2.0)
-          {
-            color = texel;
-          }
-
-          vec2 onePixel = vec2(1.0, 1.0) / uTextureSize;
-          float upAlpha = texture2D(uMainSampler, outTexCoord + vec2(0.0, onePixel.y)).a;
-          float leftAlpha = texture2D(uMainSampler, outTexCoord + vec2(-onePixel.x, 0.0)).a;
-          float downAlpha = texture2D(uMainSampler, outTexCoord + vec2(0.0, -onePixel.y)).a;
-          float rightAlpha = texture2D(uMainSampler, outTexCoord + vec2(onePixel.x, 0.0)).a;
-
-          if (texture.a == 0.0 && max(max(upAlpha, downAlpha), max(leftAlpha, rightAlpha)) == 1.0) 
-          {
-            color = vec4(1.0, 1.0, 0.0, 1.0);
-          }
-
-          gl_FragColor = color;
-        }
-      `
-        });
-    }
-}

front/src/index.ts

@@ -10,6 +10,7 @@ import {SelectCompanionScene} from "./Phaser/Login/SelectCompanionScene";
 import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
 import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';
+import OutlinePipelinePlugin from 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js';
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {MenuScene} from "./Phaser/Menu/MenuScene";
@@ -22,6 +23,8 @@ import {waScaleManager} from "./Phaser/Services/WaScaleManager";
 import {Game} from "./Phaser/Game/Game";
 import App from './Components/App.svelte';
 import {HtmlUtils} from "./WebRtc/HtmlUtils";
+import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
+
 
 const {width, height} = coWebsiteManager.getGameSize();
 
@@ -123,11 +126,11 @@ const config: GameConfig = {
     powerPreference: "low-power",
     callbacks: {
         postBoot: game => {
-            // Commented out to try to fix MacOS bug
-            /*const renderer = game.renderer;
+            // Install rexOutlinePipeline only if the renderer is WebGL.
+            const renderer = game.renderer;
             if (renderer instanceof WebGLRenderer) {
-                renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game));
-            }*/
+                game.plugins.install('rexOutlinePipeline', OutlinePipelinePlugin, true);
+            }
         }
     }
 };

front/src/rex-plugins.d.ts

@@ -1,4 +1,3 @@
-
 declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
     const content: any; // eslint-disable-line
     export default content;
@@ -11,6 +10,17 @@ declare module 'phaser3-rex-plugins/plugins/webfontloader-plugin.js' {
     const content: any; // eslint-disable-line
     export default content;
 }
+declare module 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js' {
+    import GameObject = Phaser.GameObjects.GameObject;
+
+    class OutlinePipelinePlugin {
+        add(gameObject: GameObject, config: object);
+
+        remove(gameObject: GameObject, name?: string);
+    }
+
+    export default OutlinePipelinePlugin;
+}
 declare module 'phaser3-rex-plugins/plugins/gestures.js' {
     export const Pinch: any; // eslint-disable-line
 }