Update package-lock

Fix some errors.
Upgrade Pixi in Runtime.
2025-10-15 10:19:04 +00:00 · 2025-02-12 19:11:07 +01:00 · 2025-02-12 19:10:49 +01:00 · 2025-02-12 18:55:46 +01:00
50 changed files with 3697 additions and 3275 deletions
--- a/Extensions/BBText/bbtextruntimeobject-pixi-renderer.ts
+++ b/Extensions/BBText/bbtextruntimeobject-pixi-renderer.ts
@@ -1,4 +1,5 @@
 namespace gdjs {
+  // TODO PIXI8 Use HTMLText instead.
  /**
   * The PIXI.js renderer for the BBCode Text runtime object.
   */
--- a/Extensions/BitmapText/bitmaptextruntimeobject-pixi-renderer.ts
+++ b/Extensions/BitmapText/bitmaptextruntimeobject-pixi-renderer.ts
@@ -24,10 +24,27 @@ namespace gdjs {
          runtimeObject._bitmapFontResourceName,
          runtimeObject._textureAtlasResourceName
        );
-      this._pixiObject = new PIXI.BitmapText(runtimeObject._text, {
-        fontName: bitmapFont.font,
-        fontSize: bitmapFont.size,
-      });
+      if (bitmapFont) {
+        this._pixiObject = new PIXI.BitmapText({
+          text: runtimeObject._text,
+          style: {
+            fontFamily: bitmapFont.fontFamily,
+            fontSize: bitmapFont.fontMetrics.fontSize,
+          },
+        });
+      } else {
+        const defaultBitmapFontName = instanceContainer
+          .getGame()
+          .getBitmapFontManager()
+          .getDefaultBitmapFont();
+        this._pixiObject = new PIXI.BitmapText({
+          text: runtimeObject._text,
+          style: {
+            fontFamily: defaultBitmapFontName,
+            fontSize: 20,
+          },
+        });
+      }

      // Set the object on the scene
      instanceContainer
@@ -61,13 +78,17 @@ namespace gdjs {
        .getInstanceContainer()
        .getGame()
        .getBitmapFontManager()
-        .releaseBitmapFont(this._pixiObject.fontName);
+        .releaseBitmapFont(
+          Array.isArray(this._pixiObject.style.fontFamily)
+            ? this._pixiObject.style.fontFamily[0]
+            : this._pixiObject.style.fontFamily
+        );

      this._pixiObject.destroy();
    }

    getFontSize() {
-      return this._pixiObject.fontSize;
+      return this._pixiObject.style.fontSize;
    }

    updateFont(): void {
@@ -86,12 +107,18 @@ namespace gdjs {
        .getInstanceContainer()
        .getGame()
        .getBitmapFontManager()
-        .releaseBitmapFont(this._pixiObject.fontName);
+        .releaseBitmapFont(
+          Array.isArray(this._pixiObject.style.fontFamily)
+            ? this._pixiObject.style.fontFamily[0]
+            : this._pixiObject.style.fontFamily
+        );

      // Update the font used by the object:
-      this._pixiObject.fontName = bitmapFont.font;
-      this._pixiObject.fontSize = bitmapFont.size;
-      this.updatePosition();
+      if (bitmapFont) {
+        this._pixiObject.style.fontFamily = bitmapFont.fontFamily;
+        this._pixiObject.style.fontSize = bitmapFont.fontMetrics.fontSize;
+        this.updatePosition();
+      }
    }

    updateTint(): void {
@@ -100,7 +127,6 @@ namespace gdjs {
        this._object._tint[1],
        this._object._tint[2]
      );
-      this._pixiObject.dirty = true;
    }

    /**
@@ -131,12 +157,12 @@ namespace gdjs {

    updateWrappingWidth(): void {
      if (this._object._wordWrap) {
-        this._pixiObject.maxWidth =
+        this._pixiObject.style.wordWrap = true;
+        this._pixiObject.style.wordWrapWidth =
          this._object._wrappingWidth / this._object._scaleX;
-        this._pixiObject.dirty = true;
      } else {
-        this._pixiObject.maxWidth = 0;
-        this._pixiObject.dirty = true;
+        this._pixiObject.style.wordWrap = false;
+        this._pixiObject.style.wordWrapWidth = 0;
      }
      this.updatePosition();
    }
@@ -166,11 +192,11 @@ namespace gdjs {
    }

    getWidth(): float {
-      return this._pixiObject.textWidth * this.getScale();
+      return this._pixiObject.width * this.getScale();
    }

    getHeight(): float {
-      return this._pixiObject.textHeight * this.getScale();
+      return this._pixiObject.height * this.getScale();
    }
  }
  export const BitmapTextRuntimeObjectRenderer =
--- a/Extensions/Effects/blending-mode-pixi-filter.ts
+++ b/Extensions/Effects/blending-mode-pixi-filter.ts
@@ -1,7 +1,7 @@
 namespace gdjs {
  interface BlendingModeFilterNetworkSyncData {
    a: number;
-    bm: number;
+    bm: string;
  }
  gdjs.PixiFiltersTools.registerFilterCreator(
    'BlendingMode',
@@ -20,7 +20,8 @@ namespace gdjs {
        if (parameterName === 'alpha') {
          blendingModeFilter.alpha = value;
        } else if (parameterName === 'blendmode') {
-          blendingModeFilter.blendMode = value;
+          blendingModeFilter.blendMode =
+            gdjs.PixiFiltersTools.getBlendModeName(value);
        }
      }
      getDoubleParameter(filter: PIXI.Filter, parameterName: string): number {
@@ -29,7 +30,9 @@ namespace gdjs {
          return blendingModeFilter.alpha;
        }
        if (parameterName === 'blendmode') {
-          return blendingModeFilter.blendMode;
+          return gdjs.PixiFiltersTools.getBlendModeIndex(
+            blendingModeFilter.blendMode
+          );
        }
        return 0;
      }
@@ -66,6 +69,7 @@ namespace gdjs {
      ) {
        const blendingModeFilter = filter as unknown as PIXI.AlphaFilter;
        blendingModeFilter.alpha = data.a;
+        // @ts-ignore
        blendingModeFilter.blendMode = data.bm;
      }
    })()
--- a/Extensions/Effects/blur-pixi-filter.ts
+++ b/Extensions/Effects/blur-pixi-filter.ts
@@ -3,7 +3,7 @@ namespace gdjs {
    b: number;
    q: number;
    ks: number;
-    res: number | null;
+    res: number | 'inherit';
  }
  gdjs.PixiFiltersTools.registerFilterCreator(
    'Blur',
--- a/Extensions/Effects/light-night-pixi-filter.ts
+++ b/Extensions/Effects/light-night-pixi-filter.ts
@@ -4,8 +4,7 @@ namespace gdjs {
  }
  export class LightNightPixiFilter extends PIXI.Filter {
    constructor() {
-      const vertexShader = undefined;
-      const fragmentShader = [
+      const fragment = [
        'precision mediump float;',
        '',
        'varying vec2 vTextureCoord;',
@@ -20,7 +19,10 @@ namespace gdjs {
        '}',
      ].join('\n');
      const uniforms = { opacity: { type: '1f', value: 1 } };
-      super(vertexShader, fragmentShader, uniforms);
+      super({
+        glProgram: new PIXI.GlProgram({ vertex: '', fragment }),
+        resources: uniforms,
+      });
    }
  }
  LightNightPixiFilter.prototype.constructor = gdjs.LightNightPixiFilter;
@@ -38,7 +40,7 @@ namespace gdjs {
        value: number
      ) {
        if (parameterName === 'opacity') {
-          filter.uniforms.opacity = gdjs.PixiFiltersTools.clampValue(
+          filter.resources.opacity = gdjs.PixiFiltersTools.clampValue(
            value,
            0,
            1
@@ -47,7 +49,7 @@ namespace gdjs {
      }
      getDoubleParameter(filter: PIXI.Filter, parameterName: string): number {
        if (parameterName === 'opacity') {
-          return filter.uniforms.opacity;
+          return filter.resources.opacity;
        }
        return 0;
      }
@@ -71,14 +73,14 @@ namespace gdjs {
      ) {}
      getNetworkSyncData(filter: PIXI.Filter): LightNightFilterExtra {
        return {
-          o: filter.uniforms.opacity,
+          o: filter.resources.opacity,
        };
      }
      updateFromNetworkSyncData(
        filter: PIXI.Filter,
        data: LightNightFilterExtra
      ) {
-        filter.uniforms.opacity = data.o;
+        filter.resources.opacity = data.o;
      }
    })()
  );
--- a/Extensions/Effects/night-pixi-filter.ts
+++ b/Extensions/Effects/night-pixi-filter.ts
@@ -5,8 +5,7 @@ namespace gdjs {
  }
  export class NightPixiFilter extends PIXI.Filter {
    constructor() {
-      const vertexShader = undefined;
-      const fragmentShader = [
+      const fragment = [
        'precision mediump float;',
        '',
        'varying vec2 vTextureCoord;',
@@ -25,7 +24,10 @@ namespace gdjs {
        intensity: { type: '1f', value: 1 },
        opacity: { type: '1f', value: 1 },
      };
-      super(vertexShader, fragmentShader, uniforms);
+      super({
+        glProgram: new PIXI.GlProgram({ vertex: '', fragment }),
+        resources: uniforms,
+      });
    }
  }
  NightPixiFilter.prototype.constructor = gdjs.NightPixiFilter;
@@ -45,14 +47,14 @@ namespace gdjs {
        if (parameterName !== 'intensity' && parameterName !== 'opacity') {
          return;
        }
-        filter.uniforms[parameterName] = gdjs.PixiFiltersTools.clampValue(
+        filter.resources[parameterName] = gdjs.PixiFiltersTools.clampValue(
          value,
          0,
          1
        );
      }
      getDoubleParameter(filter: PIXI.Filter, parameterName: string): number {
-        return filter.uniforms[parameterName] || 0;
+        return filter.resources[parameterName] || 0;
      }
      updateStringParameter(
        filter: PIXI.Filter,
@@ -74,16 +76,16 @@ namespace gdjs {
      ) {}
      getNetworkSyncData(filter: PIXI.Filter): NightFilterNetworkSyncData {
        return {
-          i: filter.uniforms['intensity'],
-          o: filter.uniforms['opacity'],
+          i: filter.resources['intensity'],
+          o: filter.resources['opacity'],
        };
      }
      updateFromNetworkSyncData(
        filter: PIXI.Filter,
        data: NightFilterNetworkSyncData
      ) {
-        filter.uniforms['intensity'] = data.i;
-        filter.uniforms['opacity'] = data.o;
+        filter.resources['intensity'] = data.i;
+        filter.resources['opacity'] = data.o;
      }
    })()
  );
--- a/Extensions/ExampleJsExtension/dummyeffect.ts
+++ b/Extensions/ExampleJsExtension/dummyeffect.ts
@@ -33,8 +33,8 @@ namespace gdjs {
  gdjs.PixiFiltersTools.registerFilterCreator(
    'MyDummyExtension::DummyEffect',
    new (class extends gdjs.PixiFiltersTools.PixiFilterCreator {
-      // MakePIXIFilter should return a PIXI.Filter, that will be applied on the PIXI.Container (for layers)
-      // or the PIXI.DisplayObject (for objects).
+      // MakePIXIFilter should return a PIXI.Filter, that will be applied on the
+      // PIXI.Container (for layers or objects).
      makePIXIFilter(layer, effectData) {
        const filter = new DummyPixiFilter();

@@ -72,7 +72,7 @@ namespace gdjs {
        value: number
      ) {
        if (parameterName === 'opacity') {
-          filter.uniforms.opacity = gdjs.PixiFiltersTools.clampValue(
+          filter.resources.opacity = gdjs.PixiFiltersTools.clampValue(
            value,
            0,
            1
@@ -81,7 +81,7 @@ namespace gdjs {
      }
      getDoubleParameter(filter: PIXI.Filter, parameterName: string): number {
        if (parameterName === 'opacity') {
-          return filter.uniforms.opacity;
+          return filter.resources.opacity;
        }
        return 0;
      }
@@ -106,10 +106,10 @@ namespace gdjs {
        value: boolean
      ) {}
      getNetworkSyncData(filter: PIXI.Filter): any {
-        return { opacity: filter.uniforms.opacity };
+        return { opacity: filter.resources.opacity };
      }
      updateFromNetworkSyncData(filter: PIXI.Filter, data: any) {
-        filter.uniforms.opacity = data.opacity;
+        filter.resources.opacity = data.opacity;
      }
    })()
  );
--- a/Extensions/JsExtensionTypes.d.ts
+++ b/Extensions/JsExtensionTypes.d.ts
@@ -14,7 +14,7 @@ class RenderedInstance {
  _associatedObjectConfiguration: gd.ObjectConfiguration;
  _pixiContainer: PIXI.Container;
  _pixiResourcesLoader: Class<PixiResourcesLoader>;
-  _pixiObject: PIXI.DisplayObject | null;
+  _pixiObject: PIXI.Container | null;
  wasUsed: boolean;

  /** Set to true when onRemovedFromScene is called. Allows to cancel promises/asynchronous operations (notably: waiting for a resource load). */
@@ -38,7 +38,7 @@ class RenderedInstance {
   */
  update(): void;

-  getPixiObject(): PIXI.DisplayObject | null;
+  getPixiObject(): PIXI.Container | null;

  getInstance(): gd.InitialInstance;

@@ -92,7 +92,7 @@ class Rendered3DInstance {
  _pixiContainer: PIXI.Container;
  _threeGroup: THREE.Group;
  _pixiResourcesLoader: Class<PixiResourcesLoader>;
-  _pixiObject: PIXI.DisplayObject | null;
+  _pixiObject: PIXI.Container | null;
  _threeObject: THREE.Object3D | null;
  wasUsed: boolean;

@@ -131,7 +131,7 @@ class Rendered3DInstance {
   */
  update(): void;

-  getPixiObject(): PIXI.DisplayObject;
+  getPixiObject(): PIXI.Container;

  getThreeObject(): THREE.Object3D;

--- a/Extensions/Lighting/lightruntimeobject-pixi-renderer.ts
+++ b/Extensions/Lighting/lightruntimeobject-pixi-renderer.ts
@@ -1,6 +1,4 @@
 namespace gdjs {
-  const logger = new gdjs.Logger('Light object');
-
  /**
   * Pixi renderer for light runtime objects.
   */
@@ -15,7 +13,7 @@ namespace gdjs {
    _defaultVertexBuffer: Float32Array;
    _vertexBuffer: Float32Array;
    _indexBuffer: Uint16Array;
-    _light: PIXI.Mesh<PIXI.Shader> | null = null;
+    _light: PIXI.Mesh<PIXI.Geometry, PIXI.Shader> | null = null;
    _isPreview: boolean;
    _debugMode: boolean = false;
    _debugLight: PIXI.Container | null = null;
@@ -133,12 +131,6 @@ namespace gdjs {
    }

    updateMesh(): void {
-      if (!PIXI.utils.isWebGLSupported()) {
-        logger.warn(
-          'This device does not support webgl, which is required for Lighting Extension.'
-        );
-        return;
-      }
      this.updateTexture();
      const fragmentShader =
        this._texture === null
@@ -153,18 +145,22 @@ namespace gdjs {
        // @ts-ignore
        shaderUniforms.uSampler = this._texture;
      }
-      const shader = PIXI.Shader.from(
-        LightRuntimeObjectPixiRenderer.defaultVertexShader,
-        fragmentShader,
-        shaderUniforms
-      );
+      const shader = PIXI.Shader.from({
+        gl: {
+          vertex: LightRuntimeObjectPixiRenderer.defaultVertexShader,
+          fragment: fragmentShader,
+        },
+        resources: shaderUniforms,
+      });
      const geometry = new PIXI.Geometry();
-      geometry
-        .addAttribute('aVertexPosition', this._vertexBuffer, 2)
-        .addIndex(this._indexBuffer);
+      geometry.addAttribute('aVertexPosition', {
+        buffer: this._vertexBuffer,
+        size: 2,
+      });
+      geometry.addIndex(this._indexBuffer);
      if (!this._light) {
-        this._light = new PIXI.Mesh(geometry, shader);
-        this._light.blendMode = PIXI.BLEND_MODES.ADD;
+        this._light = new PIXI.Mesh({ geometry, shader });
+        this._light.blendMode = 'add';
      } else {
        this._light.shader = shader;
        // @ts-ignore - replacing the read-only geometry
@@ -177,7 +173,9 @@ namespace gdjs {
        return;
      }
      this._radius = this._object.getRadius();
-      this._light.shader.uniforms.radius = this._radius;
+      if (this._light.shader) {
+        this._light.shader.resources.radius = this._radius;
+      }
    }

    updateColor(): void {
@@ -190,7 +188,9 @@ namespace gdjs {
        objectColor[1] / 255,
        objectColor[2] / 255,
      ];
-      this._light.shader.uniforms.color = this._color;
+      if (this._light.shader) {
+        this._light.shader.resources.color = this._color;
+      }
    }

    updateTexture(): void {
@@ -291,13 +291,23 @@ namespace gdjs {
        this._defaultVertexBuffer[5] = this._object.y - this._radius;
        this._defaultVertexBuffer[6] = this._object.x - this._radius;
        this._defaultVertexBuffer[7] = this._object.y - this._radius;
-        this._light.shader.uniforms.center = this._center;
+        if (this._light.shader) {
+          this._light.shader.resources.center = this._center;
+        }
        this._light.geometry
          .getBuffer('aVertexPosition')
-          .update(this._defaultVertexBuffer);
+          .setDataWithSize(
+            this._defaultVertexBuffer,
+            this._defaultVertexBuffer.byteLength,
+            true
+          );
        this._light.geometry
          .getIndex()
-          .update(LightRuntimeObjectPixiRenderer._defaultIndexBuffer);
+          .setDataWithSize(
+            LightRuntimeObjectPixiRenderer._defaultIndexBuffer,
+            LightRuntimeObjectPixiRenderer._defaultIndexBuffer.byteLength,
+            true
+          );
        return;
      }
      const verticesCount = vertices.length;
@@ -347,12 +357,24 @@ namespace gdjs {
          this._indexBuffer[i + 2] = 1;
        }
      }
-      this._light.shader.uniforms.center = this._center;
+      if (this._light.shader) {
+        this._light.shader.resources.center = this._center;
+      }
      if (!isSubArrayUsed) {
        this._light.geometry
          .getBuffer('aVertexPosition')
-          .update(this._vertexBuffer);
-        this._light.geometry.getIndex().update(this._indexBuffer);
+          .setDataWithSize(
+            this._vertexBuffer,
+            this._vertexBuffer.byteLength,
+            true
+          );
+        this._light.geometry
+          .getIndex()
+          .setDataWithSize(
+            this._indexBuffer,
+            this._indexBuffer.byteLength,
+            true
+          );
      } else {
        this._light.geometry
          .getBuffer('aVertexPosition')
--- a/Extensions/PanelSpriteObject/panelspriteruntimeobject-pixi-renderer.ts
+++ b/Extensions/PanelSpriteObject/panelspriteruntimeobject-pixi-renderer.ts
@@ -210,7 +210,7 @@ namespace gdjs {
      this._textureWidth = texture.width;
      this._textureHeight = texture.height;

-      function makeInsideTexture(rect) {
+      function makeInsideTexture(rect: PIXI.Rectangle) {
        if (rect.width < 0) {
          rect.width = 0;
        }
@@ -238,108 +238,110 @@ namespace gdjs {
        return rect;
      }
      this._centerSprite.texture.destroy(false);
-      this._centerSprite.texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._centerSprite.texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            obj._lBorder,
            obj._tBorder,
            texture.width - obj._lBorder - obj._rBorder,
            texture.height - obj._tBorder - obj._bBorder
          )
-        )
-      );
+        ),
+      });

      //Top, Bottom, Right, Left borders:
      this._borderSprites[0].texture.destroy(false);
-      this._borderSprites[0].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[0].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            texture.width - obj._rBorder,
            obj._tBorder,
            obj._rBorder,
            texture.height - obj._tBorder - obj._bBorder
          )
-        )
-      );
+        ),
+      });
      this._borderSprites[2].texture.destroy(false);
-      this._borderSprites[2].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[2].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            obj._lBorder,
            0,
            texture.width - obj._lBorder - obj._rBorder,
            obj._tBorder
          )
-        )
-      );
+        ),
+      });
      this._borderSprites[4].texture.destroy(false);
-      this._borderSprites[4].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[4].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            0,
            obj._tBorder,
            obj._lBorder,
            texture.height - obj._tBorder - obj._bBorder
          )
-        )
-      );
+        ),
+      });
      this._borderSprites[6].texture.destroy(false);
-      this._borderSprites[6].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[6].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            obj._lBorder,
            texture.height - obj._bBorder,
            texture.width - obj._lBorder - obj._rBorder,
            obj._bBorder
          )
-        )
-      );
+        ),
+      });
      this._borderSprites[1].texture.destroy(false);
-      this._borderSprites[1].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[1].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            texture.width - obj._rBorder,
            0,
            obj._rBorder,
            obj._tBorder
          )
-        )
-      );
+        ),
+      });
      this._borderSprites[3].texture.destroy(false);
-      this._borderSprites[3].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(new PIXI.Rectangle(0, 0, obj._lBorder, obj._tBorder))
-      );
+      this._borderSprites[3].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
+          new PIXI.Rectangle(0, 0, obj._lBorder, obj._tBorder)
+        ),
+      });
      this._borderSprites[5].texture.destroy(false);
-      this._borderSprites[5].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[5].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            0,
            texture.height - obj._bBorder,
            obj._lBorder,
            obj._bBorder
          )
-        )
-      );
+        ),
+      });
      this._borderSprites[7].texture.destroy(false);
-      this._borderSprites[7].texture = new PIXI.Texture(
-        texture,
-        makeInsideTexture(
+      this._borderSprites[7].texture = new PIXI.Texture({
+        source: texture,
+        frame: makeInsideTexture(
          new PIXI.Rectangle(
            texture.width - obj._rBorder,
            texture.height - obj._bBorder,
            obj._rBorder,
            obj._bBorder
          )
-        )
-      );
+        ),
+      });
      this._updateSpritesAndTexturesSize();
      this._updateLocalPositions();
      this.updatePosition();
--- a/Extensions/ParticleSystem/particleemitterobject-pixi-renderer.ts
+++ b/Extensions/ParticleSystem/particleemitterobject-pixi-renderer.ts
@@ -14,6 +14,8 @@ namespace gdjs {
    first.next.value = endValue;
  };

+  // TODO PIXI8 use https://github.com/andriibarvynko/particle-emitter ?
+
  export class ParticleEmitterObjectPixiRenderer {
    renderer: PIXI.Container;
    emitter: PIXI.particles.Emitter;
@@ -370,7 +372,7 @@ namespace gdjs {
        .getGame()
        .getImageManager()
        .getPIXITexture(texture);
-      return pixiTexture.valid && pixiTexture !== invalidPixiTexture;
+      return !pixiTexture.destroyed && pixiTexture !== invalidPixiTexture;
    }

    setTextureName(
@@ -385,7 +387,7 @@ namespace gdjs {
        .getGame()
        .getImageManager()
        .getPIXITexture(texture);
-      if (pixiTexture.valid && pixiTexture !== invalidPixiTexture) {
+      if (!pixiTexture.destroyed && pixiTexture !== invalidPixiTexture) {
        // Access private members of the behavior to apply changes right away.
        const behavior: any = this.emitter.getBehavior('textureSingle');
        behavior.texture = pixiTexture;
--- a/Extensions/PrimitiveDrawing/shapepainterruntimeobject-pixi-renderer.ts
+++ b/Extensions/PrimitiveDrawing/shapepainterruntimeobject-pixi-renderer.ts
@@ -20,7 +20,10 @@ namespace gdjs {

    _antialiasingFilter: null | PIXI.Filter = null;

-    private static readonly _positionForTransformation: PIXI.IPointData = {
+    _fillStyle: PIXI.FillStyle = {};
+    _strokeStyle: PIXI.StrokeStyle = {};
+
+    private static readonly _positionForTransformation: PIXI.PointData = {
      x: 0,
      y: 0,
    };
@@ -47,51 +50,55 @@ namespace gdjs {
      this.invalidateBounds();
    }

+    private _applyStyle() {
+      this._fillStyle.color = this._object._fillColor;
+      this._fillStyle.alpha = this._object._fillOpacity / 255;
+
+      this._strokeStyle.width = this._object._outlineSize;
+      this._strokeStyle.color = this._object._outlineColor;
+      this._strokeStyle.alpha = this._object._outlineOpacity / 255;
+
+      this._graphics.fill(this._fillStyle);
+      this._graphics.stroke(this._strokeStyle);
+    }
+
    drawRectangle(x1: float, y1: float, x2: float, y2: float) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      this._graphics.drawRect(x1, y1, x2 - x1, y2 - y1);
-      this._graphics.endFill();
+      this._graphics.rect(x1, y1, x2 - x1, y2 - y1);
+      this._applyStyle();
      this.invalidateBounds();
    }

    drawCircle(x: float, y: float, radius: float) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      this._graphics.drawCircle(x, y, radius);
-      this._graphics.endFill();
+      this._fillStyle.color = this._object._fillColor;
+      this._fillStyle.alpha = this._object._fillOpacity / 255;
+      this._graphics.circle(x, y, radius);
+      this._graphics.fill(this._fillStyle);
      this.invalidateBounds();
    }

    drawLine(x1: float, y1: float, x2: float, y2: float, thickness: float) {
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
      if (y2 === y1) {
-        this._graphics.drawRect(x1, y1 - thickness / 2, x2 - x1, thickness);
+        this._graphics.rect(x1, y1 - thickness / 2, x2 - x1, thickness);
      } else {
        const angle = Math.atan2(y2 - y1, x2 - x1);
        const xIncrement = Math.sin(angle) * thickness;
        const yIncrement = Math.cos(angle) * thickness;
-        this._graphics.drawPolygon(
-          x1 + xIncrement,
-          y1 - yIncrement,
-          x1 - xIncrement,
-          y1 + yIncrement,
-          x2 - xIncrement,
-          y2 + yIncrement,
-          x2 + xIncrement,
-          y2 - yIncrement
-        );
+
+        const workingPoints: Array<number> = gdjs.staticArray(
+          gdjs.AnchorRuntimeBehavior.prototype.doStepPreEvents
+        ) as Array<number>;
+        workingPoints.length = 8;
+        workingPoints[0] = x1 + xIncrement;
+        workingPoints[1] = y1 - yIncrement;
+        workingPoints[2] = x1 - xIncrement;
+        workingPoints[3] = y1 + yIncrement;
+        workingPoints[4] = x2 - xIncrement;
+        workingPoints[5] = y2 + yIncrement;
+        workingPoints[6] = x2 + xIncrement;
+        workingPoints[7] = y2 - yIncrement;
+        this._graphics.poly(workingPoints);
      }
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -108,13 +115,8 @@ namespace gdjs {
    }

    drawEllipse(x1: float, y1: float, width: float, height: float) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      this._graphics.drawEllipse(x1, y1, width / 2, height / 2);
-      this._graphics.endFill();
+      this._graphics.ellipse(x1, y1, width / 2, height / 2);
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -125,14 +127,8 @@ namespace gdjs {
      y2: float,
      radius: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      this._graphics.drawRoundedRect(x1, y1, x2 - x1, y2 - y1, radius);
-      this._graphics.closePath();
-      this._graphics.endFill();
+      this._graphics.roundRect(x1, y1, x2 - x1, y2 - y1, radius);
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -143,15 +139,8 @@ namespace gdjs {
      y2: float,
      fillet: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      //@ts-ignore from @pixi/graphics-extras
-      this._graphics.drawFilletRect(x1, y1, x2 - x1, y2 - y1, fillet);
-      this._graphics.closePath();
-      this._graphics.endFill();
+      this._graphics.filletRect(x1, y1, x2 - x1, y2 - y1, fillet);
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -162,15 +151,8 @@ namespace gdjs {
      y2: float,
      chamfer: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      //@ts-ignore from @pixi/graphics-extras
-      this._graphics.drawChamferRect(x1, y1, x2 - x1, y2 - y1, chamfer);
-      this._graphics.closePath();
-      this._graphics.endFill();
+      this._graphics.chamferRect(x1, y1, x2 - x1, y2 - y1, chamfer);
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -182,22 +164,25 @@ namespace gdjs {
      startArc: float,
      endArc: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      //@ts-ignore from @pixi/graphics-extras
-      this._graphics.drawTorus(
+      this._graphics.beginPath();
+      this._graphics.arc(
        x1,
        y1,
-        innerRadius,
        outerRadius,
        startArc ? gdjs.toRad(startArc) : 0,
        endArc ? gdjs.toRad(endArc) : 0
      );
+      // TODO PIXI8 Add a lineTo?
+      this._graphics.arc(
+        x1,
+        y1,
+        innerRadius,
+        startArc ? gdjs.toRad(startArc) : 0,
+        endArc ? gdjs.toRad(endArc) : 0,
+        true
+      );
      this._graphics.closePath();
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -208,21 +193,14 @@ namespace gdjs {
      radius: float,
      rotation: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      //@ts-ignore from @pixi/graphics-extras
-      this._graphics.drawRegularPolygon(
+      this._graphics.regularPoly(
        x1,
        y1,
        radius,
        sides,
        rotation ? gdjs.toRad(rotation) : 0
      );
-      this._graphics.closePath();
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -234,13 +212,7 @@ namespace gdjs {
      innerRadius: float,
      rotation: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
-      //@ts-ignore from @pixi/graphics-extras
-      this._graphics.drawStar(
+      this._graphics.star(
        x1,
        y1,
        points,
@@ -248,8 +220,7 @@ namespace gdjs {
        innerRadius ? innerRadius : radius / 2,
        rotation ? gdjs.toRad(rotation) : 0
      );
-      this._graphics.closePath();
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -262,11 +233,7 @@ namespace gdjs {
      anticlockwise: boolean,
      closePath: boolean
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
+      this._graphics.beginPath();
      this._graphics.moveTo(
        x1 + radius * Math.cos(gdjs.toRad(startAngle)),
        y1 + radius * Math.sin(gdjs.toRad(startAngle))
@@ -282,7 +249,7 @@ namespace gdjs {
      if (closePath) {
        this._graphics.closePath();
      }
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -296,14 +263,10 @@ namespace gdjs {
      x2: float,
      y2: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
+      this._graphics.beginPath();
      this._graphics.moveTo(x1, y1);
      this._graphics.bezierCurveTo(cpX, cpY, cpX2, cpY2, x2, y2);
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -315,27 +278,19 @@ namespace gdjs {
      x2: float,
      y2: float
    ) {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
+      this._graphics.beginPath();
      this._graphics.moveTo(x1, y1);
      this._graphics.quadraticCurveTo(cpX, cpY, x2, y2);
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

    beginFillPath() {
-      this.updateOutline();
-      this._graphics.beginFill(
-        this._object._fillColor,
-        this._object._fillOpacity / 255
-      );
+      this._graphics.beginPath();
    }

    endFillPath() {
-      this._graphics.endFill();
+      this._applyStyle();
      this.invalidateBounds();
    }

@@ -389,14 +344,6 @@ namespace gdjs {
      this.invalidateBounds();
    }

-    updateOutline(): void {
-      this._graphics.lineStyle(
-        this._object._outlineSize,
-        this._object._outlineColor,
-        this._object._outlineOpacity / 255
-      );
-    }
-
    invalidateBounds() {
      this._object.invalidateBounds();
      this._positionXIsUpToDate = false;
@@ -450,7 +397,8 @@ namespace gdjs {
    updateTransformationIfNeeded() {
      if (!this._transformationIsUpToDate) {
        this.updatePositionIfNeeded();
-        this._graphics.updateTransform();
+        // TODO PIXI8 Is it still necessary?
+        // this._graphics.updateTransform();
      }
      this._transformationIsUpToDate = true;
    }
@@ -579,36 +527,34 @@ namespace gdjs {
    }

    updateAntialiasing(): void {
-      if (this._object.getAntialiasing() !== 'none') {
-        if (!this._antialiasingFilter) {
-          this._antialiasingFilter = new PIXI.FXAAFilter();
-        }
-
-        const antialiasingFilter = this._antialiasingFilter;
-        antialiasingFilter.enabled = true;
-        antialiasingFilter.multisample =
-          PIXI.MSAA_QUALITY[this._object.getAntialiasing().toUpperCase()] ||
-          PIXI.MSAA_QUALITY.LOW;
-
-        if (!this._graphics.filters) {
-          this._graphics.filters = [];
-        }
-        // Do not apply the filter if it is already present on the object.
-        if (this._graphics.filters.indexOf(antialiasingFilter) === -1) {
-          this._graphics.filters.push(antialiasingFilter);
-        }
-      } else if (this._antialiasingFilter !== null) {
-        if (!this._graphics.filters) {
-          return;
-        }
-        const antialiasingFilterIndex = this._graphics.filters.indexOf(
-          this._antialiasingFilter
-        );
-
-        if (antialiasingFilterIndex !== -1) {
-          this._graphics.filters.splice(antialiasingFilterIndex, 1);
-        }
-      }
+      // TODO PIXI8 Find how to do antialiasing with Pixi 8.
+      // if (this._object.getAntialiasing() !== 'none') {
+      //   if (!this._antialiasingFilter) {
+      //     this._antialiasingFilter = new PIXI.FXAAFilter();
+      //   }
+      //   const antialiasingFilter = this._antialiasingFilter;
+      //   antialiasingFilter.enabled = true;
+      //   antialiasingFilter.multisample =
+      //     PIXI.MSAA_QUALITY[this._object.getAntialiasing().toUpperCase()] ||
+      //     PIXI.MSAA_QUALITY.LOW;
+      //   if (!this._graphics.filters) {
+      //     this._graphics.filters = [];
+      //   }
+      //   // Do not apply the filter if it is already present on the object.
+      //   if (this._graphics.filters.indexOf(antialiasingFilter) === -1) {
+      //     this._graphics.filters.push(antialiasingFilter);
+      //   }
+      // } else if (this._antialiasingFilter !== null) {
+      //   if (!this._graphics.filters) {
+      //     return;
+      //   }
+      //   const antialiasingFilterIndex = this._graphics.filters.indexOf(
+      //     this._antialiasingFilter
+      //   );
+      //   if (antialiasingFilterIndex !== -1) {
+      //     this._graphics.filters.splice(antialiasingFilterIndex, 1);
+      //   }
+      // }
    }

    destroy(): void {
--- a/Extensions/PrimitiveDrawing/shapepainterruntimeobject.ts
+++ b/Extensions/PrimitiveDrawing/shapepainterruntimeobject.ts
@@ -491,7 +491,6 @@ namespace gdjs {

    setOutlineColor(rgbColor: string): void {
      this._outlineColor = gdjs.rgbOrHexStringToNumber(rgbColor);
-      this._renderer.updateOutline();
    }

    getOutlineColorR(): integer {
@@ -506,7 +505,6 @@ namespace gdjs {

    setOutlineSize(size: float): void {
      this._outlineSize = size;
-      this._renderer.updateOutline();
    }

    getOutlineSize() {
@@ -535,7 +533,6 @@ namespace gdjs {
     */
    setOutlineOpacity(opacity: float): void {
      this._outlineOpacity = opacity;
-      this._renderer.updateOutline();
    }

    /**
--- a/Extensions/Spine/managers/pixi-spine-atlas-manager.ts
+++ b/Extensions/Spine/managers/pixi-spine-atlas-manager.ts
@@ -106,10 +106,10 @@ namespace gdjs {
     * @param resource The data of resource to load.
     * @param callback The callback to pass atlas to it once it is loaded.
     */
-    load(
+    async load(
      resource: ResourceData,
      callback: SpineAtlasManagerRequestCallback
-    ): void {
+    ): Promise<void> {
      const game = this._resourceLoader.getRuntimeGame();
      const embeddedResourcesNames = game.getEmbeddedResourcesNames(
        resource.name
@@ -120,18 +120,15 @@ namespace gdjs {
          new Error(`${resource.name} do not have image metadata!`)
        );

-      const images = embeddedResourcesNames.reduce<{
-        [key: string]: PIXI.Texture;
-      }>((imagesMap, embeddedResourceName) => {
+      const images = {};
+      for (const embeddedResourceName of embeddedResourcesNames) {
        const mappedResourceName = game.resolveEmbeddedResource(
          resource.name,
          embeddedResourceName
        );
-        imagesMap[embeddedResourceName] =
-          this._imageManager.getOrLoadPIXITexture(mappedResourceName);
-
-        return imagesMap;
-      }, {});
+        images[embeddedResourceName] =
+          await this._imageManager.getOrLoadPIXITexture(mappedResourceName);
+      }
      const onLoad = (atlas: pixi_spine.TextureAtlas) => {
        this._loadedSpineAtlases.set(resource, atlas);
        callback(null, atlas);
--- a/Extensions/TextObject/textruntimeobject-pixi-renderer.ts
+++ b/Extensions/TextObject/textruntimeobject-pixi-renderer.ts
@@ -4,6 +4,7 @@ namespace gdjs {
    _fontManager: any;
    _text: PIXI.Text;
    _justCreated: boolean = true;
+    _strokeStyle: PIXI.StrokeStyle = {};

    constructor(
      runtimeObject: gdjs.TextRuntimeObject,
@@ -32,8 +33,9 @@ namespace gdjs {

    ensureUpToDate() {
      if (this._justCreated) {
-        //Work around a PIXI.js bug:
-        this._text.updateText(false);
+        // TODO PIXI8 Is it still useful?
+        // Work around a PIXI.js bug:
+        // this._text.updateText(false);

        //Width seems not to be correct when text is not rendered yet.
        this.updatePosition();
@@ -50,45 +52,41 @@ namespace gdjs {
      style.fontSize = this._object._characterSize;
      style.fontFamily = fontName;
      if (this._object._useGradient) {
-        style.fill = this._getGradientHex();
+        style.fill = this._getFillGradient();
      } else {
        style.fill = this._getColorHex();
      }
-      if (this._object._gradientType === 'LINEAR_VERTICAL') {
-        style.fillGradientType = PIXI.TEXT_GRADIENT.LINEAR_VERTICAL;
-      } else {
-        style.fillGradientType = PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL;
-      }
      // @ts-ignore
      style.align = this._object._textAlign;
      style.wordWrap = this._object._wrapping;
      style.wordWrapWidth = this._object._wrappingWidth;
      style.breakWords = true;
-      style.stroke = gdjs.rgbToHexNumber(
+      this._strokeStyle.color = gdjs.rgbToHexNumber(
        this._object._outlineColor[0],
        this._object._outlineColor[1],
        this._object._outlineColor[2]
      );
-      style.strokeThickness = this._object._isOutlineEnabled
+      this._strokeStyle.width = this._object._isOutlineEnabled
        ? this._object._outlineThickness
        : 0;
+      // Prevent spikey outlines by adding a miter limit
+      this._strokeStyle.miterLimit = 3;
+      style.stroke = this._strokeStyle;
      style.dropShadow = this._object._shadow;
-      style.dropShadowColor = gdjs.rgbToHexNumber(
+      style.dropShadow.color = gdjs.rgbToHexNumber(
        this._object._shadowColor[0],
        this._object._shadowColor[1],
        this._object._shadowColor[2]
      );
-      style.dropShadowAlpha = this._object._shadowOpacity / 255;
-      style.dropShadowBlur = this._object._shadowBlur;
-      style.dropShadowAngle = gdjs.toRad(this._object._shadowAngle);
-      style.dropShadowDistance = this._object._shadowDistance;
+      style.dropShadow.alpha = this._object._shadowOpacity / 255;
+      style.dropShadow.blur = this._object._shadowBlur;
+      style.dropShadow.angle = gdjs.toRad(this._object._shadowAngle);
+      style.dropShadow.distance = this._object._shadowDistance;
      const extraPaddingForShadow = style.dropShadow
-        ? style.dropShadowDistance + style.dropShadowBlur
+        ? style.dropShadow.distance + style.dropShadow.blur
        : 0;
      style.padding = Math.ceil(this._object._padding + extraPaddingForShadow);

-      // Prevent spikey outlines by adding a miter limit
-      style.miterLimit = 3;
      this.updatePosition();

      // Manually ask the PIXI object to re-render as we changed a style property
@@ -142,8 +140,9 @@ namespace gdjs {
      this._text.text =
        this._object._str.length === 0 ? ' ' : this._object._str;

-      //Work around a PIXI.js bug.
-      this._text.updateText(false);
+      // TODO PIXI8 Is it still useful?
+      // Work around a PIXI.js bug.
+      // this._text.updateText(false);
    }

    getWidth(): float {
@@ -162,14 +161,19 @@ namespace gdjs {
      );
    }

-    _getGradientHex() {
-      const gradient: Array<string> = [];
+    _getFillGradient(): PIXI.FillGradient {
+      // TODO PIXI8 Make sure the size is up to date.
+      const gradient =
+        this._object._gradientType === 'LINEAR_VERTICAL'
+          ? new PIXI.FillGradient(0, 0, 0, this._text.height)
+          : new PIXI.FillGradient(0, 0, this._text.width, 0);
      for (
        let colorIndex = 0;
        colorIndex < this._object._gradient.length;
        colorIndex++
      ) {
-        gradient.push(
+        gradient.addColorStop(
+          colorIndex / this._object._gradient.length,
          '#' +
            gdjs.rgbToHex(
              this._object._gradient[colorIndex][0],
--- a/Extensions/TileMap/TileMapRuntimeManager.ts
+++ b/Extensions/TileMap/TileMapRuntimeManager.ts
@@ -105,7 +105,7 @@ namespace gdjs {
       * @param callback A function called when the tiles textures are split.
       */
      getOrLoadTextureCache(
-        getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>,
+        getTexture: (textureName: string) => PIXI.TextureSource,
        atlasImageResourceName: string,
        tileMapJsonResourceName: string,
        tileSetJsonResourceName: string,
@@ -132,7 +132,7 @@ namespace gdjs {
       * @param callback A function called when the tiles textures are split.
       */
      getOrLoadSimpleTileMapTextureCache(
-        getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>,
+        getTexture: (textureName: string) => PIXI.TextureSource,
        atlasImageResourceName: string,
        tileSize: number,
        columnCount: number,
--- a/Extensions/TileMap/helper/TileMapHelper.js
+++ b/Extensions/TileMap/helper/TileMapHelper.js
--- a/Extensions/TileMap/helper/TileMapHelper.js.map
+++ b/Extensions/TileMap/helper/TileMapHelper.js.map
--- a/Extensions/TileMap/helper/dts/render/TileMapManager.d.ts
+++ b/Extensions/TileMap/helper/dts/render/TileMapManager.d.ts
@@ -67,7 +67,7 @@ export declare class TileMapManager {
      tileSetJsonResourceName: string,
      callback: (tileMapFileContent: TileMapFileContent | null) => void
    ) => void,
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>,
+    getTexture: (textureName: string) => PIXI.TextureSource,
    atlasImageResourceName: string,
    tileMapJsonResourceName: string,
    tileSetJsonResourceName: string,
@@ -83,7 +83,7 @@ export declare class TileMapManager {
   * @param callback A function called when the tiles textures are split.
   */
  getOrLoadSimpleTileMapTextureCache(
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>,
+    getTexture: (textureName: string) => PIXI.TextureSource,
    atlasImageResourceName: string,
    tileSize: number,
    columnCount: number,
--- a/Extensions/TileMap/helper/dts/render/TileMapManager.d.ts.map
+++ b/Extensions/TileMap/helper/dts/render/TileMapManager.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"TileMapManager.d.ts","sourceRoot":"","sources":["../../src/render/TileMapManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE;;;;;;;GAOG;AACH,qBAAa,cAAc;IACzB,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,mBAAmB,CAAkC;;IAO7D;;;OAGG;IACH,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,MAAM,GAAG,cAAc;IAWzD;;;OAGG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,GAAG,kBAAkB,GAAG,IAAI;IAwBrD;;;;;;;OAOG;IACH,gBAAgB,CACd,WAAW,EAAE,CACX,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,QAAQ,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,KAC9D,IAAI,EACT,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,GAAG,EACT,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,GAClD,IAAI;IAiCP,sBAAsB,CACpB,iBAAiB,EAAE,yBAAyB,EAC5C,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,MAAM,EAC1B,eAAe,EAAE,MAAM,EAGvB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,GAC3C,IAAI;IAYP;;;;;;;;OAQG;IACH,qBAAqB,CACnB,WAAW,EAAE,CACX,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,QAAQ,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,KAC9D,IAAI,EACT,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpE,sBAAsB,EAAE,MAAM,EAC9B,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,GACxD,IAAI;IAwCP;;;;;;;OAOG;IACH,kCAAkC,CAChC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpE,sBAAsB,EAAE,MAAM,EAC9B,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,GACxD,IAAI;IAwBP,WAAW,IAAI,IAAI;CAIpB"}
+{"version":3,"file":"TileMapManager.d.ts","sourceRoot":"","sources":["../../src/render/TileMapManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE;;;;;;;GAOG;AACH,qBAAa,cAAc;IACzB,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,mBAAmB,CAAkC;;IAO7D;;;OAGG;IACH,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,MAAM,GAAG,cAAc;IAWzD;;;OAGG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,GAAG,kBAAkB,GAAG,IAAI;IAwBrD;;;;;;;OAOG;IACH,gBAAgB,CACd,WAAW,EAAE,CACX,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,QAAQ,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,KAC9D,IAAI,EACT,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,GAAG,EACT,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,GAClD,IAAI;IAiCP,sBAAsB,CACpB,iBAAiB,EAAE,yBAAyB,EAC5C,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,MAAM,EAC1B,eAAe,EAAE,MAAM,EAGvB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,GAC3C,IAAI;IAYP;;;;;;;;OAQG;IACH,qBAAqB,CACnB,WAAW,EAAE,CACX,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,QAAQ,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,KAC9D,IAAI,EACT,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,aAAa,EACvD,sBAAsB,EAAE,MAAM,EAC9B,uBAAuB,EAAE,MAAM,EAC/B,uBAAuB,EAAE,MAAM,EAC/B,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,GACxD,IAAI;IAwCP;;;;;;;OAOG;IACH,kCAAkC,CAChC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,aAAa,EACvD,sBAAsB,EAAE,MAAM,EAC9B,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,GACxD,IAAI;IAwBP,WAAW,IAAI,IAAI;CAIpB"}
--- a/Extensions/TileMap/helper/dts/render/TileMapPixiHelper.d.ts
+++ b/Extensions/TileMap/helper/dts/render/TileMapPixiHelper.d.ts
@@ -15,8 +15,8 @@ export declare namespace PixiTileMapHelper {
  function parseAtlas(
    tileMap: TileMapFileContent,
    levelIndex: number,
-    atlasTexture: PIXI.BaseTexture<PIXI.Resource> | null,
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>
+    atlasTexture: PIXI.TextureSource | null,
+    getTexture: (textureName: string) => PIXI.TextureSource
  ): TileTextureCache | null;
  /**
   * Split an atlas image into Pixi textures.
@@ -28,7 +28,7 @@ export declare namespace PixiTileMapHelper {
   * @returns A textures cache.
   */
  function parseSimpleTileMapAtlas(
-    atlasTexture: PIXI.BaseTexture<PIXI.Resource>,
+    atlasTexture: PIXI.TextureSource,
    columnCount: number,
    rowCount: number,
    tileSize: number
--- a/Extensions/TileMap/helper/dts/render/TileMapPixiHelper.d.ts.map
+++ b/Extensions/TileMap/helper/dts/render/TileMapPixiHelper.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"TileMapPixiHelper.d.ts","sourceRoot":"","sources":["../../src/render/TileMapPixiHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAEL,eAAe,EAEhB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,yBAAiB,iBAAiB,CAAC;IACjC;;;;;;;;OAQG;IACH,SAAgB,UAAU,CACxB,OAAO,EAAE,kBAAkB,EAC3B,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,EACpD,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,GACnE,gBAAgB,GAAG,IAAI,CAuBzB;IAED;;;;;;;;OAQG;IACH,SAAgB,uBAAuB,CACrC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC7C,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,gBAAgB,CAqBlB;IAED;;;;;;;;;;;;OAYG;IACH,SAAgB,iBAAiB,CAC/B,kBAAkB,EAAE,GAAG,EACvB,OAAO,EAAE,eAAe,EACxB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,OAAO,GAAG,SAAS,GAAG,KAAK,EACxC,UAAU,EAAE,MAAM,GACjB,IAAI,CA0GN;IAED;;OAEG;IACH,SAAgB,uBAAuB,CACrC,YAAY,EAAE,IAAI,CAAC,QAAQ,EAC3B,OAAO,EAAE,eAAe,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE,OAAO,EACrB,cAAc,EAAE,KAAK,EACrB,SAAS,EAAE,OAAO,EAClB,WAAW,EAAE,KAAK,GACjB,IAAI,CA6BN;CA8DF"}
+{"version":3,"file":"TileMapPixiHelper.d.ts","sourceRoot":"","sources":["../../src/render/TileMapPixiHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAEL,eAAe,EAEhB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,yBAAiB,iBAAiB,CAAC;IACjC;;;;;;;;OAQG;IACH,SAAgB,UAAU,CACxB,OAAO,EAAE,kBAAkB,EAC3B,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,EACvC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,aAAa,GACtD,gBAAgB,GAAG,IAAI,CAuBzB;IAED;;;;;;;;OAQG;IACH,SAAgB,uBAAuB,CACrC,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,gBAAgB,CAqBlB;IAED;;;;;;;;;;;;OAYG;IACH,SAAgB,iBAAiB,CAC/B,kBAAkB,EAAE,GAAG,EACvB,OAAO,EAAE,eAAe,EACxB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,OAAO,GAAG,SAAS,GAAG,KAAK,EACxC,UAAU,EAAE,MAAM,GACjB,IAAI,CA0GN;IAED;;OAEG;IACH,SAAgB,uBAAuB,CACrC,YAAY,EAAE,IAAI,CAAC,QAAQ,EAC3B,OAAO,EAAE,eAAe,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE,OAAO,EACrB,cAAc,EAAE,KAAK,EACrB,SAAS,EAAE,OAAO,EAClB,WAAW,EAAE,KAAK,GACjB,IAAI,CA6BN;CA8DF"}
--- a/Extensions/TileMap/helper/dts/render/ldtk/LDtkPixiHelper.d.ts
+++ b/Extensions/TileMap/helper/dts/render/ldtk/LDtkPixiHelper.d.ts
@@ -1,7 +1,6 @@
 import { TileTextureCache } from '../TileTextureCache';
 import { LDtkTileMap } from '../../load/ldtk/LDtkFormat';
-type Texture = PIXI.BaseTexture<PIXI.Resource>;
-type TextureLoader = (textureName: string) => PIXI.BaseTexture<PIXI.Resource>;
+type TextureLoader = (textureName: string) => PIXI.TextureSource;
 export declare namespace LDtkPixiHelper {
  /**
   * Split an atlas image into Pixi textures.
@@ -15,7 +14,7 @@ export declare namespace LDtkPixiHelper {
  function parseAtlas(
    tileMap: LDtkTileMap,
    levelIndex: number,
-    atlasTexture: Texture | null,
+    atlasTexture: PIXI.TextureSource | null,
    getTexture: TextureLoader
  ): TileTextureCache | null;
 }
--- a/Extensions/TileMap/helper/dts/render/ldtk/LDtkPixiHelper.d.ts.map
+++ b/Extensions/TileMap/helper/dts/render/ldtk/LDtkPixiHelper.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"LDtkPixiHelper.d.ts","sourceRoot":"","sources":["../../../src/render/ldtk/LDtkPixiHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAkB,MAAM,4BAA4B,CAAC;AAGzE,KAAK,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/C,KAAK,aAAa,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAmC9E,yBAAiB,cAAc,CAAC;IAC9B;;;;;;;;OAQG;IACH,SAAgB,UAAU,CACxB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,OAAO,GAAG,IAAI,EAC5B,UAAU,EAAE,aAAa,GACxB,gBAAgB,GAAG,IAAI,CAoFzB;CACF"}
+{"version":3,"file":"LDtkPixiHelper.d.ts","sourceRoot":"","sources":["../../../src/render/ldtk/LDtkPixiHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAkB,MAAM,4BAA4B,CAAC;AAGzE,KAAK,aAAa,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC;AAmCjE,yBAAiB,cAAc,CAAC;IAC9B;;;;;;;;OAQG;IACH,SAAgB,UAAU,CACxB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,EACvC,UAAU,EAAE,aAAa,GACxB,gBAAgB,GAAG,IAAI,CAuFzB;CACF"}
--- a/Extensions/TileMap/helper/dts/render/tiled/TiledPixiHelper.d.ts
+++ b/Extensions/TileMap/helper/dts/render/tiled/TiledPixiHelper.d.ts
@@ -13,8 +13,8 @@ export declare namespace TiledPixiHelper {
  function parseAtlas(
    tileMap: TiledTileMap,
    levelIndex: number,
-    atlasTexture: PIXI.BaseTexture<PIXI.Resource> | null,
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>
+    atlasTexture: PIXI.TextureSource | null,
+    getTexture: (textureName: string) => PIXI.TextureSource
  ): TileTextureCache | null;
 }
 //# sourceMappingURL=TiledPixiHelper.d.ts.map
--- a/Extensions/TileMap/helper/dts/render/tiled/TiledPixiHelper.d.ts.map
+++ b/Extensions/TileMap/helper/dts/render/tiled/TiledPixiHelper.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"TiledPixiHelper.d.ts","sourceRoot":"","sources":["../../../src/render/tiled/TiledPixiHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,yBAAiB,eAAe,CAAC;IAC/B;;;;;;;;OAQG;IACH,SAAgB,UAAU,CACxB,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,EACpD,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,GACnE,gBAAgB,GAAG,IAAI,CA8FzB;CACF"}
+{"version":3,"file":"TiledPixiHelper.d.ts","sourceRoot":"","sources":["../../../src/render/tiled/TiledPixiHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,yBAAiB,eAAe,CAAC;IAC/B;;;;;;;;OAQG;IACH,SAAgB,UAAU,CACxB,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,EACvC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,aAAa,GACtD,gBAAgB,GAAG,IAAI,CAiGzB;CACF"}
--- a/Extensions/TileMap/pixi-tilemap/dist/pixi-tilemap.d.ts
+++ b/Extensions/TileMap/pixi-tilemap/dist/pixi-tilemap.d.ts
@@ -1,34 +1,9 @@
 declare namespace PIXI {
  export namespace tilemap {
-    /**
-     * The renderer plugin for canvas. It isn't registered by default.
-     *
-     * ```
-     * import { CanvasTileRenderer } from '@pixi/tilemap';
-     * import { CanvasRenderer } from '@pixi/canvas-core';
-     *
-     * // You must register this yourself (optional). @pixi/tilemap doesn't do it to
-     * // prevent a hard dependency on @pixi/canvas-core.
-     * CanvasTileRenderer.registerExtension();
-     * ```
-     */
-    export class CanvasTileRenderer {
-      /** The renderer */
-      renderer: PIXI.IRenderer;
-      /** The global tile animation state */
-      tileAnim: number[];
-      /** @deprecated */
-      dontUseTransform: boolean;
-      /** @param renderer */
-      constructor(renderer: PIXI.IRenderer);
-      static registerExtension(): void;
-      static getInstance(renderer: any): CanvasTileRenderer;
-    }
-
    /**
     * A tilemap composite that lazily builds tilesets layered into multiple tilemaps.
     *
-     * The composite tileset is the concatenatation of the individual tilesets used in the tilemaps. You can
+     * The composite tileset is the concatenation of the individual tilesets used in the tilemaps. You can
     * preinitialized it by passing a list of tile textures to the constructor. Otherwise, the composite tilemap
     * is lazily built as you add more tiles with newer tile textures. A new tilemap is created once the last
     * tilemap has reached its limit (as set by {@link CompositeTilemap.texturesPerTilemap texturesPerTilemap}).
@@ -82,7 +57,7 @@ declare namespace PIXI {
     *      globalTilemap.tile('bomb.png', x * 100, y * 100);
     * });
     */
-    class CompositeTilemap extends PIXI.Container {
+    export class CompositeTilemap extends PIXI.Container {
      /** The hard limit on the number of tile textures used in each tilemap. */
      readonly texturesPerTilemap: number;
      /**
@@ -99,14 +74,12 @@ declare namespace PIXI {
      /** The last modified tilemap. */
      protected lastModifiedTilemap: Tilemap;
      private modificationMarker;
-      private shadowColor;
-      private _globalMat;
      /**
       * @param tileset - A list of tile base-textures that will be used to eagerly initialized the layered
       *  tilemaps. This is only an performance optimization, and using {@link CompositeTilemap.tile tile}
       *  will work equivalently.
       */
-      constructor(tileset?: Array<PIXI.BaseTexture>);
+      constructor(tileset?: Array<PIXI.TextureSource>);
      /**
       * This will preinitialize the tilesets of the layered tilemaps.
       *
@@ -115,7 +88,7 @@ declare namespace PIXI {
       *
       * @param tileTextures - The list of tile textures that make up the tileset.
       */
-      tileset(tileTextures: Array<PIXI.BaseTexture>): this;
+      tileset(tileTextures: Array<PIXI.TextureSource>): this;
      /** Clears the tilemap composite. */
      clear(): this;
      /** Changes the rotation of the last added tile. */
@@ -168,10 +141,16 @@ declare namespace PIXI {
          alpha?: number;
        }
      ): this;
-      renderCanvas(renderer: any): void;
-      render(renderer: PIXI.Renderer): void;
-      /* Excluded from this release type: isModified */
-      /* Excluded from this release type: clearModify */
+      /**
+       * @internal
+       * @ignore
+       */
+      isModified(anim: boolean): boolean;
+      /**
+       * @internal
+       * @ignore
+       */
+      clearModify(): void;
      /**
       * @deprecated Since @pixi/tilemap 3.
       * @see CompositeTilemap.tile
@@ -210,7 +189,7 @@ declare namespace PIXI {
       *
       * @deprecated Since @pixi/tilemap 3.
       */
-      setBitmaps: (tileTextures: Array<PIXI.BaseTexture>) => this;
+      setBitmaps: (tileTextures: Array<PIXI.TextureSource>) => this;
      /**
       * @deprecated Since @pixi/tilemap 3.
       * @readonly
@@ -218,69 +197,6 @@ declare namespace PIXI {
       */
      get texPerChild(): number;
    }
-    export { CompositeTilemap as CompositeRectTileLayer };
-    export { CompositeTilemap };
-
-    export const Constant: {
-      /** The default number of textures per tilemap in a tilemap composite. */
-      TEXTURES_PER_TILEMAP: number;
-      /**
-       * The width/height of each texture tile in a {@link TEXTILE_DIMEN}. This is 1024px by default.
-       *
-       * This should fit all tile base-textures; otherwise, {@link TextileResource} may fail to correctly
-       * upload the textures togther in a tiled fashion.
-       */
-      TEXTILE_DIMEN: number;
-      /**
-       * The number of texture tiles per {@link TextileResource}.
-       *
-       * Texture tiling is disabled by default, and so this is set to `1` by default. If it is set to a
-       * higher value, textures will be uploaded together in a tiled fashion.
-       *
-       * Since {@link TextileResource} is a dual-column format, this should be even for packing
-       * efficiency. The optimal value is usually 4.
-       */
-      TEXTILE_UNITS: number;
-      /** The scaling mode of the combined texture tiling. */
-      TEXTILE_SCALE_MODE: PIXI.SCALE_MODES;
-      /** This will enable 32-bit index buffers. It's useful when you have more than 16K tiles. */
-      use32bitIndex: boolean;
-      /** Flags whether textiles should be cleared when each tile is uploaded. */
-      DO_CLEAR: boolean;
-      maxTextures: number;
-      boundSize: number;
-      boundCountPerBuffer: number;
-    };
-
-    /* Excluded from this release type: fillSamplers */
-
-    /* Excluded from this release type: generateFragmentSrc */
-
-    export const pixi_tilemap: {
-      CanvasTileRenderer: typeof CanvasTileRenderer;
-      CompositeRectTileLayer: typeof CompositeTilemap;
-      CompositeTilemap: typeof CompositeTilemap;
-      Constant: {
-        TEXTURES_PER_TILEMAP: number;
-        TEXTILE_DIMEN: number;
-        TEXTILE_UNITS: number;
-        TEXTILE_SCALE_MODE: PIXI.SCALE_MODES;
-        use32bitIndex: boolean;
-        DO_CLEAR: boolean;
-        maxTextures: number;
-        boundSize: number;
-        boundCountPerBuffer: number;
-      };
-      TextileResource: typeof TextileResource;
-      MultiTextureResource: typeof TextileResource;
-      RectTileLayer: typeof Tilemap;
-      Tilemap: typeof Tilemap;
-      TilemapShader: typeof TilemapShader;
-      TilemapGeometry: typeof TilemapGeometry;
-      RectTileShader: typeof TilemapShader;
-      RectTileGeom: typeof TilemapGeometry;
-      TileRenderer: typeof TileRenderer;
-    };

    export const POINT_STRUCT_SIZE: number;

@@ -293,79 +209,19 @@ declare namespace PIXI {
    export const settings: {
      /** The default number of textures per tilemap in a tilemap composite. */
      TEXTURES_PER_TILEMAP: number;
-      /**
-       * The width/height of each texture tile in a {@link TEXTILE_DIMEN}. This is 1024px by default.
-       *
-       * This should fit all tile base-textures; otherwise, {@link TextileResource} may fail to correctly
-       * upload the textures togther in a tiled fashion.
-       */
-      TEXTILE_DIMEN: number;
-      /**
-       * The number of texture tiles per {@link TextileResource}.
-       *
-       * Texture tiling is disabled by default, and so this is set to `1` by default. If it is set to a
-       * higher value, textures will be uploaded together in a tiled fashion.
-       *
-       * Since {@link TextileResource} is a dual-column format, this should be even for packing
-       * efficiency. The optimal value is usually 4.
-       */
-      TEXTILE_UNITS: number;
      /** The scaling mode of the combined texture tiling. */
-      TEXTILE_SCALE_MODE: PIXI.SCALE_MODES;
+      TEXTILE_SCALE_MODE: PIXI.SCALE_MODE;
+      /** This will enable 32-bit index buffers. It's useful when you have more than 16K tiles. */
+      use32bitIndex: boolean;
+    };
+    export const Constant: {
+      /** The default number of textures per tilemap in a tilemap composite. */
+      TEXTURES_PER_TILEMAP: number;
+      /** The scaling mode of the combined texture tiling. */
+      TEXTILE_SCALE_MODE: PIXI.SCALE_MODE;
      /** This will enable 32-bit index buffers. It's useful when you have more than 16K tiles. */
      use32bitIndex: boolean;
-      /** Flags whether textiles should be cleared when each tile is uploaded. */
-      DO_CLEAR: boolean;
-      maxTextures: number;
-      boundSize: number;
-      boundCountPerBuffer: number;
    };
-
-    export interface TextileOptions {
-      TEXTILE_DIMEN: number;
-      TEXTILE_UNITS: number;
-      DO_CLEAR?: boolean;
-    }
-
-    /**
-     * This texture tiling resource can be used to upload multiple base-textures together.
-     *
-     * This resource combines multiple base-textures into a "textile". They're laid out in
-     * a dual column format, placed in row-order order. The size of each tile is predefined,
-     * and defaults to {@link settings.TEXTILE_DIMEN}. This means that each input base-texture
-     * must is smaller than that along both its width and height.
-     *
-     * @see settings.TEXTILE_UNITS
-     */
-    export class TextileResource extends PIXI.Resource {
-      /** The base-texture that contains all the texture tiles. */
-      baseTexture: PIXI.BaseTexture;
-      private readonly doClear;
-      private readonly tileDimen;
-      private readonly tiles;
-      private _clearBuffer;
-      /**
-       * @param options - This will default to the "settings" exported by @pixi/tilemap.
-       * @param options.TEXTILE_DIMEN - The dimensions of each tile.
-       * @param options.TEXTILE_UNITS - The number of texture tiles.
-       */
-      constructor(options?: TextileOptions);
-      /**
-       * Sets the texture to be uploaded for the given tile.
-       *
-       * @param index - The index of the tile being set.
-       * @param texture - The texture with the base-texture to upload.
-       */
-      tile(index: number, texture: PIXI.BaseTexture): void;
-      /** @override */
-      bind(baseTexture: PIXI.BaseTexture): void;
-      /** @override */
-      upload(
-        renderer: PIXI.Renderer,
-        texture: PIXI.BaseTexture,
-        glTexture: PIXI.GLTexture
-      ): boolean;
-    }

    /**
     * A rectangular tilemap implementation that renders a predefined set of tile textures.
@@ -396,9 +252,21 @@ declare namespace PIXI {
     *          .tile('brick_wall.png', 0, 100);
     * });
     */
-    class Tilemap extends PIXI.Container {
+    export class Tilemap extends PIXI.Container {
+      /**
+       * Currently doesnt work.
+       */
      shadowColor: Float32Array;
-      _globalMat: PIXI.Matrix;
+      state: PIXI.State;
+      is_valid: boolean;
+      readonly renderPipeId = 'tilemap';
+      readonly canBundle = true;
+      _instruction: TilemapInstruction;
+      /**
+       * @internal
+       * @ignore
+       */
+      checkValid(): boolean;
      /**
       * The tile animation frame.
       *
@@ -409,11 +277,7 @@ declare namespace PIXI {
       * This is the last uploaded size of the tilemap geometry.
       * @ignore
       */
-      modificationMarker: number;
-      /** @ignore */
-      offsetX: number;
-      /** @ignore */
-      offsetY: number;
+      rects_count: number;
      /** @ignore */
      compositeParent: boolean;
      /**
@@ -422,7 +286,7 @@ declare namespace PIXI {
       * This should not be shuffled after tiles have been added into this tilemap. Usually, only tile textures
       * should be added after tiles have been added into the map.
       */
-      protected tileset: Array<PIXI.BaseTexture>;
+      protected tileset: TileTextureArray;
      /**
       * The local bounds of the tilemap itself. This does not include DisplayObject children.
       */
@@ -435,18 +299,23 @@ declare namespace PIXI {
       * @param tileset - The tileset to use for the tilemap. This can be reset later with {@link Tilemap.setTileset}. The
       *      base-textures in this array must not be duplicated.
       */
-      constructor(tileset: PIXI.BaseTexture | Array<PIXI.BaseTexture>);
+      constructor(tileset: PIXI.TextureSource | Array<PIXI.TextureSource>);
      /**
       * @returns The tileset of this tilemap.
       */
-      getTileset(): Array<PIXI.BaseTexture>;
+      getTileset(): TileTextureArray;
      /**
       * Define the tileset used by the tilemap.
       *
-       * @param tileset - The list of textures to use in the tilemap. If a base-texture (not array) is passed, it will
+       * @param textureOrArray - The list of textures to use in the tilemap. If a base-texture (not array) is passed, it will
       *  be wrapped into an array. This should not contain any duplicates.
       */
-      setTileset(tileset?: PIXI.BaseTexture | Array<PIXI.BaseTexture>): this;
+      setTileset(
+        textureOrArray?:
+          | TileTextureArray
+          | PIXI.TextureSource
+          | Array<PIXI.TextureSource>
+      ): this;
      /**  Clears all the tiles added into this tilemap. */
      clear(): this;
      /**
@@ -474,7 +343,7 @@ declare namespace PIXI {
       * @return This tilemap, good for chaining.
       */
      tile(
-        tileTexture: number | string | PIXI.Texture | PIXI.BaseTexture,
+        tileTexture: number | string | PIXI.Texture | PIXI.TextureSource,
        x: number,
        y: number,
        options?: {
@@ -500,24 +369,29 @@ declare namespace PIXI {
      /** Changes the `animDivisor` value of the last tile. */
      tileAnimDivisor(divisor: number): void;
      tileAlpha(alpha: number): void;
-      renderCanvas: (renderer: any) => void;
-      renderCanvasCore(renderer: any): void;
      private vbId;
-      private vb;
+      vb: TilemapGeometry;
      private vbBuffer;
      private vbArray;
      private vbInts;
      private destroyVb;
-      render(renderer: PIXI.Renderer): void;
-      renderWebGLCore(renderer: PIXI.Renderer, plugin: TileRenderer): void;
-      /* Excluded from this release type: isModified */
-      /* Excluded from this release type: clearModify */
+      updateBuffer(plugin: TilemapPipe): void;
+      /**
+       * @internal
+       * @ignore
+       */
+      isModified(anim: boolean): boolean;
+      /**
+       * This will pull forward the modification marker.
+       *
+       * @internal
+       * @ignore
+       */
+      clearModify(): void;
+      addBounds(bounds: PIXI.Bounds): void;
+      get bounds(): PIXI.Bounds;
      /** @override */
-      protected _calculateBounds(): void;
-      /** @override */
-      getLocalBounds(rect?: PIXI.Rectangle): PIXI.Rectangle;
-      /** @override */
-      destroy(options?: PIXI.IDestroyOptions): void;
+      destroy(options?: PIXI.DestroyOptions): void;
      /**
       * Deprecated signature for {@link Tilemap.tile tile}.
       *
@@ -552,27 +426,54 @@ declare namespace PIXI {
        alpha?: number
      ): this;
    }
-    export { Tilemap as RectTileLayer };
-    export { Tilemap };

    export class TilemapGeometry extends PIXI.Geometry {
+      static vertSize: number;
+      static vertPerQuad: number;
+      static stride: number;
+      lastTimeAccess: number;
      vertSize: number;
      vertPerQuad: number;
      stride: number;
-      lastTimeAccess: number;
-      constructor();
-      buf: any;
+      constructor(indexBuffer: PIXI.Buffer);
+      buf: PIXI.Buffer;
    }

-    export class TilemapShader extends PIXI.Shader {
-      maxTextures: number;
-      constructor(maxTextures: number);
+    export abstract class TilemapAdaptor {
+      abstract init(): void;
+      abstract execute(meshPipe: TilemapPipe, mesh: Tilemap): void;
+      abstract destroy(): void;
+      pipe_uniforms: PIXI.UniformGroup<{
+        u_proj_trans: {
+          value: PIXI.Matrix;
+          type: 'mat3x3<f32>';
+        };
+        u_anim_frame: {
+          value: Float32Array;
+          type: 'vec2<f32>';
+        };
+      }>;
    }

+    export interface TilemapInstruction extends PIXI.Instruction {
+      renderPipeId: 'tilemap';
+      tilemap: Tilemap;
+    }
    /**
     * Rendering helper pipeline for tilemaps. This plugin is registered automatically.
     */
-    export class TileRenderer extends PIXI.ObjectRenderer {
+    export class TilemapPipe
+      implements
+        PIXI.RenderPipe<Tilemap>,
+        PIXI.InstructionPipe<TilemapInstruction>
+    {
+      static extension: {
+        readonly type: readonly [
+          PIXI.ExtensionType.WebGLPipes,
+          PIXI.ExtensionType.WebGPUPipes,
+        ];
+        readonly name: 'tilemap';
+      };
      /** The managing renderer */
      readonly renderer: PIXI.Renderer;
      /** The tile animation frame */
@@ -582,33 +483,77 @@ declare namespace PIXI {
      private indexBuffer;
      /** The shader used to render tilemaps. */
      private shader;
-      /**
-       * {@link TextileResource} instances used to upload textures batched in tiled groups. This is
-       * used only if {@link settings.TEXTURES_PER_TILEMAP} is greater than 1.
-       */
-      private textiles;
-      /** @param renderer - The managing renderer */
-      constructor(renderer: PIXI.Renderer);
-      /**
-       * Binds the tile textures to the renderer, and updates the tilemap shader's `uSamplerSize` uniform.
-       *
-       * If {@link settings.TEXTILE_UNITS}
-       *
-       * @param renderer - The renderer to which the textures are to be bound.
-       * @param textures - The tile textures being bound.
-       */
-      bindTileTextures(
-        renderer: PIXI.Renderer,
-        textures: Array<PIXI.BaseTexture>
-      ): void;
+      private adaptor;
+      constructor(renderer: PIXI.Renderer, adaptor: TilemapAdaptor);
      start(): void;
-      /* Excluded from this release type: createVb */
-      /** @return The {@link TilemapShader} shader that this rendering pipeline is using. */
-      getShader(): TilemapShader;
+      /**
+       * @internal
+       * @ignore
+       */
+      createVb(): TilemapGeometry;
+      /** @return The {@link TilemapGeometry} shader that this rendering pipeline is using. */
+      getShader(): TilemapGeometry;
      destroy(): void;
-      checkIndexBuffer(size: number, _vb?: TilemapGeometry): void;
-      /** Makes textile resources and initializes {@link TileRenderer.textiles}. */
-      private makeTextiles;
+      checkIndexBuffer(size: number): void;
+      destroyRenderable(_renderable: Tilemap): void;
+      addRenderable(
+        tilemap: Tilemap,
+        instructionSet: PIXI.InstructionSet | undefined
+      ): void;
+      updateRenderable(
+        tilemap: Tilemap,
+        _instructionSet?: PIXI.InstructionSet | undefined
+      ): void;
+      validateRenderable(renderable: Tilemap): boolean;
+      execute({ tilemap }: TilemapInstruction): void;
+    }
+
+    export class GlTilemapAdaptor extends TilemapAdaptor {
+      static extension: {
+        readonly type: readonly [PIXI.ExtensionType.WebGLPipesAdaptor];
+        readonly name: 'tilemap';
+      };
+      _shader: PIXI.Shader;
+      max_textures: number;
+      destroy(): void;
+      execute(pipe: TilemapPipe, tilemap: Tilemap): void;
+      init(): void;
+    }
+
+    export class GpuTilemapAdaptor extends TilemapAdaptor {
+      static extension: {
+        readonly type: readonly [PIXI.ExtensionType.WebGPUPipesAdaptor];
+        readonly name: 'tilemap';
+      };
+      _shader: PIXI.Shader;
+      max_textures: number;
+      bind_group: PIXI.BindGroup;
+      destroy(): void;
+      execute(pipe: TilemapPipe, tilemap: Tilemap): void;
+      init(): void;
+    }
+
+    export class TileTextureArray {
+      max_textures: number;
+      constructor(max_textures: number);
+      arr: PIXI.TextureSource[];
+      count: number;
+      dirty: boolean;
+      dirty_gpu: boolean;
+      bind_group: PIXI.BindGroup;
+      bind_group_resources: any;
+      tex_sizes: Float32Array;
+      null_color: Float32Array;
+      tex_buf: PIXI.Buffer;
+      get length(): number;
+      push(tex: PIXI.TextureSource): void;
+      at(ind: number): PIXI.TextureSource<any>;
+      update(): void;
+      markDirty(): void;
+      getBindGroup(): PIXI.BindGroup;
+      static generate_gpu_textures(max_textures: number): string;
+      static generate_gl_textures(max_textures: number): string;
+      static gl_gen_resources(max_textures: number): any;
    }
  }
 }
--- a/Extensions/TileMap/simpletilemapruntimeobject.ts
+++ b/Extensions/TileMap/simpletilemapruntimeobject.ts
@@ -116,9 +116,7 @@ namespace gdjs {
            return this.getInstanceContainer()
              .getGame()
              .getImageManager()
-              .getPIXITexture(
-                textureName
-              ) as unknown as PIXI.BaseTexture<PIXI.Resource>;
+              .getPIXITexture(textureName) as unknown as PIXI.TextureSource;
          },
          this._atlasImage,
          this._tileSize,
@@ -287,9 +285,7 @@ namespace gdjs {
              return this.getInstanceContainer()
                .getGame()
                .getImageManager()
-                .getPIXITexture(
-                  textureName
-                ) as unknown as PIXI.BaseTexture<PIXI.Resource>;
+                .getPIXITexture(textureName) as unknown as PIXI.TextureSource;
            },
            this._atlasImage,
            this._tileSize,
--- a/Extensions/TileMap/tilemapruntimeobject.ts
+++ b/Extensions/TileMap/tilemapruntimeobject.ts
@@ -227,9 +227,7 @@ namespace gdjs {
              );
              return game
                .getImageManager()
-                .getPIXITexture(
-                  mappedName
-                ) as unknown as PIXI.BaseTexture<PIXI.Resource>;
+                .getPIXITexture(mappedName) as unknown as PIXI.TextureSource;
            },
            this._tilemapAtlasImage,
            this._tilemapJsonFile,
--- a/GDJS/Runtime/pixi-renderers/DebuggerPixiRenderer.ts
+++ b/GDJS/Runtime/pixi-renderers/DebuggerPixiRenderer.ts
@@ -64,15 +64,13 @@ namespace gdjs {
        x: float,
        y: float
      ) => {
-        debugDraw.line.color = fillColor;
-        debugDraw.fill.color = fillColor;
-        debugDraw.drawCircle(x, y, 3);
+        debugDraw.circle(x, y, 3).fill(fillColor);

        if (showPointsNames) {
          if (!points[name]) {
-            points[name] = new PIXI.Text(name, {
-              fill: fillColor,
-              fontSize: 12,
+            points[name] = new PIXI.Text({
+              text: name,
+              style: { fill: fillColor, fontSize: 12 },
            });

            this._debugDrawContainer!.addChild(points[name]);
@@ -83,9 +81,7 @@ namespace gdjs {
      };

      debugDraw.clear();
-      debugDraw.beginFill();
      debugDraw.alpha = 0.8;
-      debugDraw.lineStyle(2, 0x0000ff, 1);

      // Draw AABB
      const workingPoint: FloatPoint = [0, 0];
@@ -105,9 +101,6 @@ namespace gdjs {
          continue;
        }
        const aabb = object.getAABB();
-        debugDraw.fill.alpha = 0.2;
-        debugDraw.line.color = 0x778ee8;
-        debugDraw.fill.color = 0x778ee8;

        const polygon: float[] = [];
        polygon.push.apply(
@@ -147,7 +140,10 @@ namespace gdjs {
          )
        );

-        debugDraw.drawPolygon(polygon);
+        debugDraw
+          .poly(polygon)
+          .stroke({ color: 0x778ee8, width: 2 })
+          .fill({ color: 0x778ee8, alpha: 0.2 });
      }

      // Draw hitboxes and points
@@ -195,14 +191,10 @@ namespace gdjs {
            polygon.push(point[0]);
            polygon.push(point[1]);
          });
-          debugDraw.fill.alpha = 0;
-          debugDraw.line.alpha = 0.5;
-          debugDraw.line.color = 0xff0000;
-          debugDraw.drawPolygon(polygon);
+          debugDraw.poly(polygon).stroke({ color: 0xff0000, alpha: 0.5 });
        }

        // Draw points
-        debugDraw.fill.alpha = 0.3;

        // Draw Center point
        const centerPoint = layer.applyLayerTransformation(
--- a/GDJS/Runtime/pixi-renderers/layer-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/layer-pixi-renderer.ts
@@ -446,7 +446,7 @@ namespace gdjs {
            .getRuntimeScene()
            .getGame()
            .getRenderer()
-            .getPIXIRenderer() instanceof PIXI.Renderer
+            .getPIXIRenderer() instanceof PIXI.AbstractRenderer
        ) {
          // TODO Revert from `round` to `ceil` when the issue is fixed in Pixi.
          // Since the upgrade to Pixi 7, sprites are rounded with `round`
@@ -600,7 +600,7 @@ namespace gdjs {
     * @param zOrder The z order of the associated object.
     */
    addRendererObject(pixiChild, zOrder: float): void {
-      const child = pixiChild as PIXI.DisplayObject;
+      const child = pixiChild as PIXI.Container;
      child.zIndex = zOrder || LayerPixiRenderer.zeroZOrderForPixi;
      this._pixiContainer.addChild(child);
    }
@@ -612,7 +612,7 @@ namespace gdjs {
     * @param newZOrder The z order of the associated object.
     */
    changeRendererObjectZOrder(pixiChild, newZOrder: float): void {
-      const child = pixiChild as PIXI.DisplayObject;
+      const child = pixiChild as PIXI.Container;
      child.zIndex = newZOrder;
    }

@@ -657,7 +657,7 @@ namespace gdjs {
     * so it can then be consumed by Three.js to render it in 3D.
     */
    private _createPixiRenderTexture(pixiRenderer: PIXI.Renderer | null): void {
-      if (!pixiRenderer || pixiRenderer.type !== PIXI.RENDERER_TYPE.WEBGL) {
+      if (!pixiRenderer) {
        return;
      }
      if (this._renderTexture) {
@@ -686,7 +686,7 @@ namespace gdjs {
     * Render the layer of the PixiJS RenderTexture, so that it can be then displayed
     * with a blend mode (for a lighting layer) or consumed by Three.js (for 2D+3D layers).
     */
-    renderOnPixiRenderTexture(pixiRenderer: PIXI.Renderer) {
+    renderOnPixiRenderTexture(pixiRenderer: PIXI.WebGLRenderer) {
      if (!this._renderTexture) {
        return;
      }
@@ -711,15 +711,12 @@ namespace gdjs {
      this._clearColor[3] = this._isLightingLayer ? 1 : 0;
      pixiRenderer.renderTexture.clear(this._clearColor);

-      pixiRenderer.render(this._pixiContainer, {
-        renderTexture: this._renderTexture,
+      pixiRenderer.render({
+        container: this._pixiContainer,
+        target: this._renderTexture,
        clear: false,
      });
-      pixiRenderer.renderTexture.bind(
-        oldRenderTexture,
-        oldSourceFrame,
-        undefined
-      );
+      pixiRenderer.texture.bind(oldRenderTexture, oldSourceFrame);
    }

    /**
@@ -728,7 +725,7 @@ namespace gdjs {
     */
    updateThreePlaneTextureFromPixiRenderTexture(
      threeRenderer: THREE.WebGLRenderer,
-      pixiRenderer: PIXI.Renderer
+      pixiRenderer: PIXI.WebGLRenderer
    ): void {
      if (!this._threePlaneTexture || !this._renderTexture) {
        return;
@@ -761,7 +758,7 @@ namespace gdjs {
      }

      this._lightingSprite = new PIXI.Sprite(this._renderTexture);
-      this._lightingSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
+      this._lightingSprite.blendMode = 'multiply';
      const parentPixiContainer =
        runtimeInstanceContainerRenderer.getRendererObject();
      if (parentPixiContainer) {
--- a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts
@@ -18,7 +18,7 @@ namespace gdjs {
      object.alpha = 1;
    }
  };
-  const hasFadedIn = (object: PIXI.DisplayObject | null) => {
+  const hasFadedIn = (object: PIXI.Container | null) => {
    return !object || object.alpha >= 1;
  };

@@ -58,16 +58,19 @@ namespace gdjs {
        return;
      }

-      const backgroundTexture = imageManager.getOrLoadPIXITexture(
-        loadingScreenData.backgroundImageResourceName
-      );
-      if (backgroundTexture !== imageManager.getInvalidPIXITexture()) {
-        this._backgroundSprite = PIXI.Sprite.from(backgroundTexture);
-        this._backgroundSprite.alpha = 0;
-        this._backgroundSprite.anchor.x = 0.5;
-        this._backgroundSprite.anchor.y = 0.5;
-        this._loadingScreenContainer.addChild(this._backgroundSprite);
-      }
+      const backgroundSprite = PIXI.Sprite.from(PIXI.Texture.EMPTY);
+      backgroundSprite.alpha = 0;
+      backgroundSprite.anchor.x = 0.5;
+      backgroundSprite.anchor.y = 0.5;
+      this._loadingScreenContainer.addChild(backgroundSprite);
+      this._backgroundSprite = backgroundSprite;
+      imageManager
+        .getOrLoadPIXITexture(loadingScreenData.backgroundImageResourceName)
+        .then((texture) => {
+          if (texture !== imageManager.getInvalidPIXITexture()) {
+            backgroundSprite.texture = texture;
+          }
+        });

      if (loadingScreenData.showGDevelopSplash && isFirstScene) {
        this._gdevelopLogoSprite = PIXI.Sprite.from(gdjs.gdevelopLogo);
@@ -98,7 +101,7 @@ namespace gdjs {
    private _updatePositions() {
      if (!this._pixiRenderer) return;

-      if (this._backgroundSprite && this._backgroundSprite.texture.valid) {
+      if (this._backgroundSprite && !this._backgroundSprite.texture.destroyed) {
        this._backgroundSprite.position.x = this._pixiRenderer.width / 2;
        this._backgroundSprite.position.y = this._pixiRenderer.height / 2;
        const scale = Math.max(
@@ -171,7 +174,10 @@ namespace gdjs {
      if (this._state == LoadingScreenState.NOT_STARTED) {
        this._pixiRenderer.background.color =
          this._loadingScreenData.backgroundColor;
-        if (!this._backgroundSprite || this._backgroundSprite.texture.valid) {
+        if (
+          !this._backgroundSprite ||
+          !this._backgroundSprite.texture.destroyed
+        ) {
          this._startLoadingScreen();
        }
        return true;
@@ -242,23 +248,17 @@ namespace gdjs {
        // Display bar with an additional 1% to ensure it's filled at the end.
        const progress = Math.min(1, (this._progressPercent + 1) / 100);
        this._progressBarGraphics.clear();
-        this._progressBarGraphics.lineStyle(lineWidth, color, 1, 0);
-        this._progressBarGraphics.drawRect(
-          progressBarX,
-          progressBarY,
-          progressBarWidth,
-          progressBarHeight
-        );
-
-        this._progressBarGraphics.beginFill(color, 1);
-        this._progressBarGraphics.lineStyle(0, color, 1);
-        this._progressBarGraphics.drawRect(
-          progressBarX + lineWidth,
-          progressBarY + lineWidth,
-          progressBarWidth * progress - lineWidth * 2,
-          progressBarHeight - lineWidth * 2
-        );
-        this._progressBarGraphics.endFill();
+        this._progressBarGraphics
+          .rect(progressBarX, progressBarY, progressBarWidth, progressBarHeight)
+          .stroke({ width: lineWidth, color });
+        this._progressBarGraphics
+          .rect(
+            progressBarX + lineWidth,
+            progressBarY + lineWidth,
+            progressBarWidth * progress - lineWidth * 2,
+            progressBarHeight - lineWidth * 2
+          )
+          .fill(color);
      }

      this._pixiRenderer.render(this._loadingScreenContainer);
--- a/GDJS/Runtime/pixi-renderers/pixi-bitmapfont-manager.ts
+++ b/GDJS/Runtime/pixi-renderers/pixi-bitmapfont-manager.ts
@@ -25,12 +25,8 @@ namespace gdjs {
    bitmapFont: PIXI.BitmapFont,
    bitmapFontInstallKey: string
  ) => {
-    const defaultName = bitmapFont.font;
    // @ts-ignore - we "hack" into Pixi to change the font name
-    bitmapFont.font = bitmapFontInstallKey;
-    PIXI.BitmapFont.available[bitmapFontInstallKey] = bitmapFont;
-    delete PIXI.BitmapFont.available[defaultName];
-    return PIXI.BitmapFont.available[bitmapFontInstallKey];
+    bitmapFont.fontFamily = bitmapFontInstallKey;
  };

  const resourceKinds: Array<ResourceKind> = ['bitmapFont'];
@@ -53,7 +49,7 @@ namespace gdjs {
    private _pixiBitmapFontsToUninstall: string[] = [];

    /** Loaded fonts data, indexed by resource name. */
-    private _loadedFontsData = new gdjs.ResourceCache<any>();
+    private _loadedFontsData = new gdjs.ResourceCache<PIXI.BitmapFont>();

    private _defaultSlugFontName: string | null = null;

@@ -78,35 +74,28 @@ namespace gdjs {
    /**
     * Get the instance of the default `Pixi.BitmapFont`, always available.
     */
-    getDefaultBitmapFont() {
+    getDefaultBitmapFont(): string {
      if (this._defaultSlugFontName !== null) {
-        return PIXI.BitmapFont.available[this._defaultSlugFontName];
+        return defaultBitmapFontKey;
      }

-      // Default bitmap font style
-      const fontFamily = 'Arial';
-      const bitmapFontStyle = new PIXI.TextStyle({
-        fontFamily: fontFamily,
-        fontSize: 20,
-        padding: 5,
-        align: 'left',
-        fill: '#ffffff',
-        wordWrap: true,
-        lineHeight: 20,
+      // Generate default bitmapFont, and replace the name of PIXI.BitmapFont by a unique name
+      PIXI.BitmapFont.install({
+        name: defaultBitmapFontKey,
+        style: {
+          fontFamily: 'Arial',
+          fontSize: 20,
+          padding: 5,
+          align: 'left',
+          fill: '#ffffff',
+          wordWrap: true,
+          lineHeight: 20,
+        },
      });

-      // Generate default bitmapFont, and replace the name of PIXI.BitmapFont by a unique name
-      const defaultBitmapFont = patchInstalledBitmapFont(
-        PIXI.BitmapFont.from(fontFamily, bitmapFontStyle, {
-          // All the printable ASCII characters
-          chars: [[' ', '~']],
-        }),
-        defaultBitmapFontKey
-      );
-
      // Define the default name used for the default bitmap font.
-      this._defaultSlugFontName = defaultBitmapFont.font;
-      return defaultBitmapFont;
+      this._defaultSlugFontName = defaultBitmapFontKey;
+      return defaultBitmapFontKey;
    }

    /**
@@ -195,29 +184,18 @@ namespace gdjs {
    obtainBitmapFont(
      bitmapFontResourceName: string,
      textureAtlasResourceName: string
-    ): PIXI.BitmapFont {
-      const bitmapFontInstallKey =
-        bitmapFontResourceName + '@' + textureAtlasResourceName;
-
-      if (PIXI.BitmapFont.available[bitmapFontInstallKey]) {
-        // Return the existing BitmapFont that is already in memory and already installed.
-        this._markBitmapFontAsUsed(bitmapFontInstallKey);
-        return PIXI.BitmapFont.available[bitmapFontInstallKey];
-      }
-
-      // The Bitmap Font is not loaded, load it in memory.
-
+    ): PIXI.BitmapFont | null {
      // First get the font data:
-      const fontData = this._loadedFontsData.getFromName(
+      const bitmapFont = this._loadedFontsData.getFromName(
        bitmapFontResourceName
      );
-      if (!fontData) {
+      if (!bitmapFont) {
        logger.warn(
          'Could not find Bitmap Font for resource named "' +
            bitmapFontResourceName +
            '". The default font will be used.'
        );
-        return this.getDefaultBitmapFont();
+        return null;
      }

      // Get the texture to be used in the font:
@@ -227,11 +205,9 @@ namespace gdjs {

      try {
        // Create and install the Pixi.BitmapFont in memory:
-        const bitmapFont = patchInstalledBitmapFont(
-          PIXI.BitmapFont.install(fontData, texture),
-          bitmapFontInstallKey
-        );
-        this._markBitmapFontAsUsed(bitmapFontInstallKey);
+        // TODO PIXI8 Handle fonts used with different atlas.
+        bitmapFont.pages[0].texture = texture;
+        this._markBitmapFontAsUsed(bitmapFontResourceName);
        return bitmapFont;
      } catch (error) {
        logger.error(
@@ -240,7 +216,7 @@ namespace gdjs {
            '". The default font will be used. Error is: ' +
            error
        );
-        return this.getDefaultBitmapFont();
+        return null;
      }
    }

@@ -265,21 +241,20 @@ namespace gdjs {
      }

      try {
-        const response = await fetch(
-          this._resourceLoader.getFullUrl(resource.file),
-          {
-            credentials: this._resourceLoader.checkIfCredentialsRequired(
-              resource.file
-            )
-              ? // Any resource stored on the GDevelop Cloud buckets needs the "credentials" of the user,
-                // i.e: its gdevelop.io cookie, to be passed.
-                'include'
-              : // For other resources, use "same-origin" as done by default by fetch.
-                'same-origin',
-          }
+        PIXI.loadTextures.config = {
+          preferWorkers: true,
+          preferCreateImageBitmap: true,
+          crossOrigin: this._resourceLoader.checkIfCredentialsRequired(
+            resource.file
+          )
+            ? 'use-credentials'
+            : 'anonymous',
+        };
+        const bitmapFont = await PIXI.Assets.load<PIXI.BitmapFont>(
+          this._resourceLoader.getFullUrl(resource.file)
        );
-        const fontData = await response.text();
-        this._loadedFontsData.set(resource, fontData);
+        patchInstalledBitmapFont(bitmapFont, resource.name);
+        this._loadedFontsData.set(resource, bitmapFont);
      } catch (error) {
        logger.error(
          "Can't fetch the bitmap font file " +
--- a/GDJS/Runtime/pixi-renderers/pixi-effects-manager.ts
+++ b/GDJS/Runtime/pixi-renderers/pixi-effects-manager.ts
@@ -58,7 +58,7 @@ namespace gdjs {
    }

    /**
-     * Update the filters applied on a PixiJS DisplayObject.
+     * Update the filters applied on a PixiJS Container.
     * This must be called after the events and before the rendering.
     *
     * This allows effects to be sure that they are up to date and ready
@@ -73,7 +73,7 @@ namespace gdjs {
    }

    /**
-     * Add a new effect on a PixiJS DisplayObject, or replace the one
+     * Add a new effect on a PixiJS Container, or replace the one
     * with the same name.
     * @param effectData The effect data
     * @param rendererEffects The renderer effects
@@ -100,7 +100,7 @@ namespace gdjs {
    }

    /**
-     * Remove the effect with the specified name from a PixiJS DisplayObject.
+     * Remove the effect with the specified name from a PixiJS Container.
     * @param rendererEffects The collection of PixiJS filters.
     * @param rendererObject The renderer object.
     * @param effectName The name of the effect.
@@ -120,10 +120,10 @@ namespace gdjs {
    }

    /**
-     * Remove all effects from a PixiJS DisplayObject.
+     * Remove all effects from a PixiJS Container.
     * @param rendererObject The renderer object.
     */
-    clearEffects(rendererObject: PIXI.DisplayObject): boolean {
+    clearEffects(rendererObject: PIXI.Container): boolean {
      if (rendererObject) {
        rendererObject.filters = [];
      }
--- a/GDJS/Runtime/pixi-renderers/pixi-filters-tools.ts
+++ b/GDJS/Runtime/pixi-renderers/pixi-filters-tools.ts
@@ -1,7 +1,64 @@
+const allBlendModes: Array<PIXI.BLEND_MODES> = [
+  'normal',
+  'add',
+  'multiply',
+  'screen',
+  'overlay',
+  'darken',
+  'lighten',
+  'color-dodge',
+  'color-burn',
+  'hard-light',
+  'soft-light',
+  'difference',
+  'exclusion',
+  // HUE
+  'normal',
+  'saturation',
+  'color',
+  'luminosity',
+  'normal-npm',
+  'add-npm',
+  'screen-npm',
+  'none',
+  // SRC_IN
+  'normal',
+  // SRC_OUT
+  'normal',
+  // SRC_ATOP
+  'normal',
+  // DST_OVER
+  'normal',
+  // DST_IN
+  'normal',
+  // DST_OUT
+  'normal',
+  // DST_ATOP
+  'normal',
+  // ERASE
+  'normal',
+  'subtract',
+  // XOR
+  'normal',
+];
+
 namespace gdjs {
  const logger = new gdjs.Logger('Filters');

  export namespace PixiFiltersTools {
+    export const getBlendModeName = (
+      blendModeIndex: integer
+    ): PIXI.BLEND_MODES => {
+      return allBlendModes[blendModeIndex];
+    };
+
+    export const getBlendModeIndex = (
+      blendModeName: PIXI.BLEND_MODES
+    ): integer => {
+      return allBlendModes.indexOf(blendModeName);
+    };
+    getBlendModeIndex;
+
    export const clampValue = function (value, min, max) {
      return Math.max(min, Math.min(max, value));
    };
@@ -71,7 +128,7 @@ namespace gdjs {
       */
      setEnabled(target: EffectsTarget, enabled: boolean): boolean;
      /**
-       * Apply the effect on the PixiJS DisplayObject.
+       * Apply the effect on the PixiJS Container.
       * Called after the effect is initialized.
       */
      applyEffect(target: EffectsTarget): boolean;
@@ -101,7 +158,7 @@ namespace gdjs {
      makeFilter(target: EffectsTarget, effectData: EffectData): Filter {
        const pixiFilter = this.makePIXIFilter(target, effectData);
        if (target.isLightingLayer && target.isLightingLayer()) {
-          pixiFilter.blendMode = PIXI.BLEND_MODES.ADD;
+          pixiFilter.blendMode = 'add';
        }
        return new PixiFilter(pixiFilter, this);
      }
@@ -177,27 +234,32 @@ namespace gdjs {

      applyEffect(target: EffectsTarget): boolean {
        const rendererObject = target.getRendererObject() as
-          | PIXI.DisplayObject
+          | PIXI.Container
          | null
          | undefined;
        if (!rendererObject) {
          return false;
        }
-        rendererObject.filters = (rendererObject.filters || []).concat(
-          this.pixiFilter
-        );
+        const filters = Array.isArray(rendererObject.filters)
+          ? rendererObject.filters
+          : [rendererObject.filters];
+        filters.push(this.pixiFilter);
+        rendererObject.filters = filters;
        return true;
      }

      removeEffect(target: EffectsTarget): boolean {
        const rendererObject = target.getRendererObject() as
-          | PIXI.DisplayObject
+          | PIXI.Container
          | null
          | undefined;
        if (!rendererObject) {
          return false;
        }
-        rendererObject.filters = (rendererObject.filters || []).filter(
+        const filters = Array.isArray(rendererObject.filters)
+          ? rendererObject.filters
+          : [rendererObject.filters];
+        rendererObject.filters = filters.filter(
          (pixiFilter) => pixiFilter !== this.pixiFilter
        );
        return true;
--- a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts
+++ b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts
@@ -68,12 +68,19 @@ namespace gdjs {
     */
    constructor(resourceLoader: gdjs.ResourceLoader) {
      this._resourceLoader = resourceLoader;
-      this._invalidTexture = PIXI.Texture.from(
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAkFBMVEWdIvr///+hOfrx6v7i0/39/P+eK/rn2v6vbPv7+f/cx/359v/38v7s4v7Wvf3LqvzFnvysY/v18P6jQvrz7P7u5P7ezP3Or/yoV/qlTfrq3v7l1v3hz/2fLvrTuPy0efufMvraxP3YwP3AlPu2fvuuavvRtPy8i/uqXfu5hvvIo/y4gvuxcvugNfq+j/vCmfxfwZ2lAAAF60lEQVR42uzPMQ0AAAjEQPBvmhkBDE+uAppcdXgfAHXY9R4AAAAAAAAAAGAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAEA/YAQAMNfa2nCoMhmE4HxhcFESggMhGtNa11NLl/d9dO53pQRMklPKn4TllhuEdEjb/CK/WWPXvBTjOOVxvDsvVO3u03e8EnC9BZnNMwNcfYDU728NkLpoDLpmPSQU6Ax5vNsfE0lpbwOs1AYGbroDnBCQyPQH7tQsanpYAqwQVftEQEKWgE9AHtAkIpTV1QBOD1Jk4IPJA6y9tQF2C2Io24ApqXq4OMHgBvTsSBjgVBnA9P7HH2xEGPOM+7hVPQdhGUZRvt4/WeHvCgBJ3uFXYsn4m/BO3HJ2Ko8XuMSogQBdvzXoYFRCjQ3GazWQuRIfKms1o0Skge3DmMxvdckiWzoyGu0dIvGhO0+kAkmBW4/UVRPw0qwAfopKpmRPwh0N0ZGrmBPyDyI2Yms6AaiH48nd3g8hmsijMFkrZ9UQSwCFY9j+EHpgor1wM4gaO9oAKog0TtDEGuxoQIF7DOcZwqQEB4kJe4Bt83QHOEiJLuAGe2QG2KuAF37HUHVAn0wZsdAfs/WkD8pkHrGrtSyhWBVgxhnti5m1itsZg/IUiIO4NKJQBzoFjoJjRB6hfZA0T/U8xTEASkMo7TfEtJLGa4CB81JYeZM3PAmQfUQUEtsUY+zx66N6I+MTuySFJPk48Sl9ACYH/1s6dICkKQwEYfg9NkE1QdhkREXGZ1rn/7aZmrR4SAdHnMpXvAF31txETSPA/BXjy9QBiV0KKAhNuCwA5E5vS1hWZtYc+XBScYbDhAVsDm7xeuxYX2GQUzwgAu9+cHrFzkuoCTcAamz7ar6O46QiQr6WNLVGAOFjjjrE88rsDIskHRxRQYVPecTlEszvAEP8tVAErbFrDJ0sHRceuAA8FCVXAB2u/81OjiOW8PUAXR9CJKsCfY4OtwSeFhRJm2haQGpJ5EFUAjLCp6vGQL9gUlwM8yUyaLmDcccXeGyjleKf+f3IOdAHiILc5CD8FMuzLZg8SmiWOIMKAr9gxhvYMLzKCsp5onbe0cUUY4KMgb6y5sN1I183Y+yM2Q3EE+VQB8mXjqIDPEhtvFJE+4Cg7t2Nv8EZn0oAdCnSh8SZWQRrALWxijS+dtqAfQcMDwETBmMM/fB1vcCYOWKGo+cup3VBgnYgDtKDHjXB/gUNl5I9Z8z7bCE9THMgjD0gZCmwfmg4BDhEW5AGwRlHGocmfWni9KdAHTIyeF780MvBKrCIIEMS9HwhtTYZXCeARAVrQfz/wrMRrlBQBohol7C3I8KQOGPZVPSbAH0kLJnBBlS+wm/PleFiSBIg22PoZiLi/yZ3AkC9zRuG69hLhoCplwHKMMtaOQwu+XR3itfnXOvcOq9VMe8aGp5mNUqUPT9crADyUcyZAgCAAdJSzvwIBgoDEQjlWJu/xWoaVgRfMa+0dAuBg4MUE178xYDuR2t8zAI4MLyfE6fAAvhsxKeN81wDIsYUVbQYGrMZ4QcTvGwBrbGWXX0/XBvDDmOEFQQp3DuARdljEiQa9cf+Y4WWb+289LiLsNB+7uz4RxS7WGbbIKfZO85phD8Y8Ko/bWcJBwt/PdlMzMLDduqDZ/L0zsDcrdJxFNI3dX+JppDuOM8c+oiXV7vXVCB8gO9Ftv/czJJdplOcHuGshLfNEfABiFyKlbEl+gqOoGZKJl484gjLLkEa4HTobfYlxxGrtgWcpzzremf7x2OO4vMoMvBsWnjkQB4gmEd5J8PU5r2nj23yEt1scORAFdCsm0znD4Zg9/eC0a+JuVa0bOARb5BXpor4/v8qdOV7DDstvKQd4kYAfllW/l+Sx+RfzW+XDDy8V8BPnyc511wvHCQPb+F3DDDsIHcfJStc9p5w//zRrL1qazH7ZJ6nP4a8XOI77IlTAld4w4FVu7qqA31SAClABKkAFqAAVoAJUgApQASpABagAFaACVIAKUAH/TcB7e/uA7+03ZsJSaNOuAAAAAElFTkSuQmCC',
-        { width: 192, height: 192 }
-      );
+      this._invalidTexture = PIXI.Texture.WHITE;
+      PIXI.Assets.load(
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAkFBMVEWdIvr///+hOfrx6v7i0/39/P+eK/rn2v6vbPv7+f/cx/359v/38v7s4v7Wvf3LqvzFnvysY/v18P6jQvrz7P7u5P7ezP3Or/yoV/qlTfrq3v7l1v3hz/2fLvrTuPy0efufMvraxP3YwP3AlPu2fvuuavvRtPy8i/uqXfu5hvvIo/y4gvuxcvugNfq+j/vCmfxfwZ2lAAAF60lEQVR42uzPMQ0AAAjEQPBvmhkBDE+uAppcdXgfAHXY9R4AAAAAAAAAAGAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAEA/YAQAMNfa2nCoMhmE4HxhcFESggMhGtNa11NLl/d9dO53pQRMklPKn4TllhuEdEjb/CK/WWPXvBTjOOVxvDsvVO3u03e8EnC9BZnNMwNcfYDU728NkLpoDLpmPSQU6Ax5vNsfE0lpbwOs1AYGbroDnBCQyPQH7tQsanpYAqwQVftEQEKWgE9AHtAkIpTV1QBOD1Jk4IPJA6y9tQF2C2Io24ApqXq4OMHgBvTsSBjgVBnA9P7HH2xEGPOM+7hVPQdhGUZRvt4/WeHvCgBJ3uFXYsn4m/BO3HJ2Ko8XuMSogQBdvzXoYFRCjQ3GazWQuRIfKms1o0Skge3DmMxvdckiWzoyGu0dIvGhO0+kAkmBW4/UVRPw0qwAfopKpmRPwh0N0ZGrmBPyDyI2Yms6AaiH48nd3g8hmsijMFkrZ9UQSwCFY9j+EHpgor1wM4gaO9oAKog0TtDEGuxoQIF7DOcZwqQEB4kJe4Bt83QHOEiJLuAGe2QG2KuAF37HUHVAn0wZsdAfs/WkD8pkHrGrtSyhWBVgxhnti5m1itsZg/IUiIO4NKJQBzoFjoJjRB6hfZA0T/U8xTEASkMo7TfEtJLGa4CB81JYeZM3PAmQfUQUEtsUY+zx66N6I+MTuySFJPk48Sl9ACYH/1s6dICkKQwEYfg9NkE1QdhkREXGZ1rn/7aZmrR4SAdHnMpXvAF31txETSPA/BXjy9QBiV0KKAhNuCwA5E5vS1hWZtYc+XBScYbDhAVsDm7xeuxYX2GQUzwgAu9+cHrFzkuoCTcAamz7ar6O46QiQr6WNLVGAOFjjjrE88rsDIskHRxRQYVPecTlEszvAEP8tVAErbFrDJ0sHRceuAA8FCVXAB2u/81OjiOW8PUAXR9CJKsCfY4OtwSeFhRJm2haQGpJ5EFUAjLCp6vGQL9gUlwM8yUyaLmDcccXeGyjleKf+f3IOdAHiILc5CD8FMuzLZg8SmiWOIMKAr9gxhvYMLzKCsp5onbe0cUUY4KMgb6y5sN1I183Y+yM2Q3EE+VQB8mXjqIDPEhtvFJE+4Cg7t2Nv8EZn0oAdCnSh8SZWQRrALWxijS+dtqAfQcMDwETBmMM/fB1vcCYOWKGo+cup3VBgnYgDtKDHjXB/gUNl5I9Z8z7bCE9THMgjD0gZCmwfmg4BDhEW5AGwRlHGocmfWni9KdAHTIyeF780MvBKrCIIEMS9HwhtTYZXCeARAVrQfz/wrMRrlBQBohol7C3I8KQOGPZVPSbAH0kLJnBBlS+wm/PleFiSBIg22PoZiLi/yZ3AkC9zRuG69hLhoCplwHKMMtaOQwu+XR3itfnXOvcOq9VMe8aGp5mNUqUPT9crADyUcyZAgCAAdJSzvwIBgoDEQjlWJu/xWoaVgRfMa+0dAuBg4MUE178xYDuR2t8zAI4MLyfE6fAAvhsxKeN81wDIsYUVbQYGrMZ4QcTvGwBrbGWXX0/XBvDDmOEFQQp3DuARdljEiQa9cf+Y4WWb+289LiLsNB+7uz4RxS7WGbbIKfZO85phD8Y8Ko/bWcJBwt/PdlMzMLDduqDZ/L0zsDcrdJxFNI3dX+JppDuOM8c+oiXV7vXVCB8gO9Ftv/czJJdplOcHuGshLfNEfABiFyKlbEl+gqOoGZKJl484gjLLkEa4HTobfYlxxGrtgWcpzzremf7x2OO4vMoMvBsWnjkQB4gmEd5J8PU5r2nj23yEt1scORAFdCsm0znD4Zg9/eC0a+JuVa0bOARb5BXpor4/v8qdOV7DDstvKQd4kYAfllW/l+Sx+RfzW+XDDy8V8BPnyc511wvHCQPb+F3DDDsIHcfJStc9p5w//zRrL1qazH7ZJ6nP4a8XOI77IlTAld4w4FVu7qqA31SAClABKkAFqAAVoAJUgApQASpABagAFaACVIAKUAH/TcB7e/uA7+03ZsJSaNOuAAAAAElFTkSuQmCC'
+      ).then((texture) => {
+        this._invalidTexture = texture;
+      });
      this._loadedThreeTextures = new Hashtable();
      this._loadedThreeMaterials = new Hashtable();
+      PIXI.loadTextures.config = {
+        preferWorkers: true,
+        preferCreateImageBitmap: true,
+        crossOrigin: 'anonymous',
+      };
    }

    getResourceKinds(): ResourceKind[] {
@@ -99,7 +106,7 @@ namespace gdjs {
      if (!existingTexture) {
        return this._invalidTexture;
      }
-      if (!existingTexture.valid) {
+      if (existingTexture.destroyed) {
        logger.error(
          'Texture for ' +
            resourceName +
@@ -119,7 +126,7 @@ namespace gdjs {
     * @param resourceName The name of the resource
     * @returns The requested texture, or a placeholder if not valid.
     */
-    getOrLoadPIXITexture(resourceName: string): PIXI.Texture {
+    async getOrLoadPIXITexture(resourceName: string): Promise<PIXI.Texture> {
      const resource = this._getImageResource(resourceName);
      if (!resource) {
        logger.warn(
@@ -130,45 +137,50 @@ namespace gdjs {

      const existingTexture = this._loadedTextures.get(resource);
      if (existingTexture) {
-        if (existingTexture.valid) {
-          return existingTexture;
-        } else {
+        if (existingTexture.destroyed) {
          logger.error(
            'Texture for ' +
              resourceName +
              ' is not valid anymore (or never was).'
          );
          return this._invalidTexture;
+        } else {
+          return existingTexture;
        }
      }

      logger.log('Loading texture for resource "' + resourceName + '"...');
      const file = resource.file;
      const url = this._resourceLoader.getFullUrl(file);
-      const texture = PIXI.Texture.from(url, {
-        resourceOptions: {
-          // Note that using `false`
-          // to not having `crossorigin` at all would NOT work because the browser would taint the
-          // loaded resource so that it can't be read/used in a canvas (it's only working for display `<img>` on screen).
-          crossorigin: this._resourceLoader.checkIfCredentialsRequired(file)
-            ? 'use-credentials'
-            : 'anonymous',
-        },
-      }).on('error', (error) => {
-        logFileLoadingError(file, error);
-      });
-      if (!texture) {
-        throw new Error(
-          'Texture loading by PIXI returned nothing for file ' +
-            file +
-            ' behind url ' +
-            url
-        );
-      }
-      applyTextureSettings(texture, resource);
+      PIXI.loadTextures.config = {
+        preferWorkers: true,
+        preferCreateImageBitmap: true,
+        // Note that using `false`
+        // to not having `crossorigin` at all would NOT work because the browser would taint the
+        // loaded resource so that it can't be read/used in a canvas (it's only working for display `<img>` on screen).
+        crossOrigin: this._resourceLoader.checkIfCredentialsRequired(file)
+          ? 'use-credentials'
+          : 'anonymous',
+      };
+      try {
+        const texture = await PIXI.Assets.load(url);
+        if (!texture) {
+          logger.error(
+            'Texture loading by PIXI returned nothing for file ' +
+              file +
+              ' behind url ' +
+              url
+          );
+          return this._invalidTexture;
+        }
+        applyTextureSettings(texture, resource);

-      this._loadedTextures.set(resource, texture);
-      return texture;
+        this._loadedTextures.set(resource, texture);
+        return texture;
+      } catch (error) {
+        logFileLoadingError(file, error);
+        return this._invalidTexture;
+      }
    }

    /**
@@ -328,34 +340,21 @@ namespace gdjs {
          // Pixi.Texture.from() does not return a promise, so we need to ensure we look at the 'loaded' event of the baseTexture,
          // to continue, otherwise if we try to play the video too soon (at the beginning of scene for instance),
          // it will fail.
-          await new Promise<void>((resolve, reject) => {
-            const texture = PIXI.Texture.from(
-              this._resourceLoader.getFullUrl(resource.file),
-              {
-                resourceOptions: {
-                  crossorigin: this._resourceLoader.checkIfCredentialsRequired(
-                    resource.file
-                  )
-                    ? 'use-credentials'
-                    : 'anonymous',
-                  autoPlay: false,
-                },
-              }
-            ).on('error', (error) => {
-              reject(error);
-            });
-
-            const baseTexture = texture.baseTexture;
-            baseTexture
-              .on('loaded', () => {
-                this._loadedTextures.set(resource, texture);
-                applyTextureSettings(texture, resource);
-                resolve();
-              })
-              .on('error', (error) => {
-                reject(error);
-              });
-          });
+          PIXI.loadTextures.config = {
+            preferWorkers: true,
+            preferCreateImageBitmap: true,
+            crossOrigin: this._resourceLoader.checkIfCredentialsRequired(
+              resource.file
+            )
+              ? 'use-credentials'
+              : 'anonymous',
+          };
+          // TODO PIXI8 autoPlay: false
+          const texture = await PIXI.Assets.load(
+            this._resourceLoader.getFullUrl(resource.file)
+          );
+          this._loadedTextures.set(resource, texture);
+          applyTextureSettings(texture, resource);
        } else {
          // If the file has no extension, PIXI.assets.load cannot find
          // an adequate load parser and does not load the file although
@@ -363,18 +362,17 @@ namespace gdjs {
          // TODO: When PIXI v8+ is used, PIXI.Assets.load can be used because
          // loadParser can be forced in PIXI.Assets.load
          // (see https://github.com/pixijs/pixijs/blob/71ed56c569ebc6b53da19e3c49258a0a84892101/packages/assets/src/loader/Loader.ts#L68)
-          const loadedTexture = PIXI.Texture.from(
-            this._resourceLoader.getFullUrl(resource.file),
-            {
-              resourceOptions: {
-                autoLoad: false,
-                crossorigin: this._resourceLoader.checkIfCredentialsRequired(
-                  resource.file
-                )
-                  ? 'use-credentials'
-                  : 'anonymous',
-              },
-            }
+          PIXI.loadTextures.config = {
+            preferWorkers: true,
+            preferCreateImageBitmap: true,
+            crossOrigin: this._resourceLoader.checkIfCredentialsRequired(
+              resource.file
+            )
+              ? 'use-credentials'
+              : 'anonymous',
+          };
+          const loadedTexture = await PIXI.Assets.load(
+            this._resourceLoader.getFullUrl(resource.file)
          );
          await loadedTexture.baseTexture.resource.load();

--- a/GDJS/Runtime/pixi-renderers/pixi.js
+++ b/GDJS/Runtime/pixi-renderers/pixi.js
--- a/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
@@ -26,7 +26,7 @@ namespace gdjs {
    //Used to track if the window is displayed as fullscreen (see setFullscreen method).
    _forceFullscreen: any;

-    _pixiRenderer: PIXI.Renderer | null = null;
+    _pixiRenderer: PIXI.WebGLRenderer | null = null;
    private _threeRenderer: THREE.WebGLRenderer | null = null;
    private _gameCanvas: HTMLCanvasElement | null = null;
    private _domElementsContainer: HTMLDivElement | null = null;
@@ -88,6 +88,11 @@ namespace gdjs {
    initializeRenderers(gameCanvas: HTMLCanvasElement): void {
      this._throwIfDisposed();

+      // Handle pixels rounding.
+      if (this._game.getPixelsRounding()) {
+        PIXI.AbstractRenderer.defaultOptions.roundPixels = true;
+      }
+
      if (typeof THREE !== 'undefined') {
        this._threeRenderer = new THREE.WebGLRenderer({
          canvas: gameCanvas,
@@ -107,7 +112,8 @@ namespace gdjs {
        // Create a PixiJS renderer that use the same GL context as Three.js
        // so that both can render to the canvas and even have PixiJS rendering
        // reused in Three.js (by using a RenderTexture and the same internal WebGL texture).
-        this._pixiRenderer = new PIXI.Renderer({
+        this._pixiRenderer = new PIXI.WebGLRenderer();
+        this._pixiRenderer.init({
          width: this._game.getGameResolutionWidth(),
          height: this._game.getGameResolutionHeight(),
          view: gameCanvas,
@@ -123,19 +129,22 @@ namespace gdjs {
        // Create the renderer and setup the rendering area.
        // "preserveDrawingBuffer: true" is needed to avoid flickering
        // and background issues on some mobile phones (see #585 #572 #566 #463).
-        this._pixiRenderer = PIXI.autoDetectRenderer({
+        this._pixiRenderer = new PIXI.WebGLRenderer();
+        this._pixiRenderer.init({
          width: this._game.getGameResolutionWidth(),
          height: this._game.getGameResolutionHeight(),
          view: gameCanvas,
          preserveDrawingBuffer: true,
          antialias: false,
-        }) as PIXI.Renderer;
+        });
      }

+      // TODO PIXI8 Is it still necessary?
      // Deactivating accessibility support in PixiJS renderer, as we want to be in control of this.
      // See https://github.com/pixijs/pixijs/issues/5111#issuecomment-420047824
-      this._pixiRenderer.plugins.accessibility.destroy();
-      delete this._pixiRenderer.plugins.accessibility;
+      this._pixiRenderer.accessibility.destroy();
+      // @ts-ignore
+      delete this._pixiRenderer.accessibility;
    }

    /**
@@ -195,11 +204,6 @@ namespace gdjs {
        gameCanvas.style['image-rendering'] = 'pixelated';
      }

-      // Handle pixels rounding.
-      if (this._game.getPixelsRounding()) {
-        PIXI.settings.ROUND_PIXELS = true;
-      }
-
      // Handle resize: immediately adjust the game canvas (and dom element container)
      // and notify the game (that may want to adjust to the new size of the window).
      window.addEventListener('resize', () => {
@@ -998,10 +1002,7 @@ namespace gdjs {
     * @returns true if WebGL is supported
     */
    isWebGLSupported(): boolean {
-      return (
-        !!this._pixiRenderer &&
-        this._pixiRenderer.type === PIXI.RENDERER_TYPE.WEBGL
-      );
+      return !!this._pixiRenderer;
    }

    /**
--- a/GDJS/Runtime/pixi-renderers/runtimescene-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/runtimescene-pixi-renderer.ts
@@ -124,7 +124,7 @@ namespace gdjs {
            if (lastRenderWas3D) {
              // Ensure the state is clean for PixiJS to render.
              threeRenderer.resetState();
-              pixiRenderer.reset();
+              pixiRenderer.resetState();
            }

            if (isFirstRender) {
@@ -148,7 +148,7 @@ namespace gdjs {
                runtimeLayerRenderer.getLightingSprite()) ||
              runtimeLayerRenderer.getRendererObject();

-            pixiRenderer.render(pixiContainer, { clear: false });
+            pixiRenderer.render({ container: pixiContainer, clear: false });
            this._layerRenderingMetrics.rendered2DLayersCount++;

            lastRenderWas3D = false;
@@ -174,7 +174,7 @@ namespace gdjs {
                  if (lastRenderWas3D) {
                    // Ensure the state is clean for PixiJS to render.
                    threeRenderer.resetState();
-                    pixiRenderer.reset();
+                    pixiRenderer.resetState();
                  }

                  // Do the rendering of the PixiJS objects of the layer on the render texture.
@@ -198,7 +198,7 @@ namespace gdjs {
              if (!lastRenderWas3D) {
                // It's important to reset the internal WebGL state of PixiJS, then Three.js
                // to ensure the 3D rendering is made properly by Three.js
-                pixiRenderer.reset();
+                pixiRenderer.resetState();
                threeRenderer.resetState();
              }

@@ -242,7 +242,7 @@ namespace gdjs {

        if (debugContainer) {
          threeRenderer.resetState();
-          pixiRenderer.reset();
+          pixiRenderer.resetState();
          pixiRenderer.render(debugContainer);
          lastRenderWas3D = false;
        }
@@ -250,7 +250,7 @@ namespace gdjs {
        if (!lastRenderWas3D) {
          // Out of caution, reset the WebGL states from PixiJS to start again
          // with a 3D rendering on the next frame.
-          pixiRenderer.reset();
+          pixiRenderer.resetState();
        }

        // Uncomment to display some debug metrics from Three.js.
@@ -272,7 +272,8 @@ namespace gdjs {
        // Render all the layers then.
        // TODO: replace by a loop like in 3D?
        pixiRenderer.background.color = this._runtimeScene.getBackgroundColor();
-        pixiRenderer.render(this._pixiContainer, {
+        pixiRenderer.render({
+          container: this._pixiContainer,
          clear: this._runtimeScene.getClearCanvas(),
        });
        this._layerRenderingMetrics.rendered2DLayersCount++;
@@ -367,10 +368,11 @@ namespace gdjs {
        return;
      }
      if (!this._profilerText) {
-        this._profilerText = new PIXI.Text(' ', {
-          align: 'left',
-          stroke: '#FFF',
-          strokeThickness: 1,
+        this._profilerText = new PIXI.Text({
+          style: {
+            align: 'left',
+            stroke: { color: '#FFF', width: 1 },
+          },
        });

        // Add on top of all layers:
--- a/GDJS/Runtime/pixi-renderers/spriteruntimeobject-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/spriteruntimeobject-pixi-renderer.ts
@@ -74,7 +74,9 @@ namespace gdjs {
            Math.abs(scaleY);
        this._sprite.rotation = gdjs.toRad(this._object.angle);
        this._sprite.visible = !this._object.hidden;
-        this._sprite.blendMode = this._object._blendMode;
+        this._sprite.blendMode = gdjs.PixiFiltersTools.getBlendModeName(
+          this._object._blendMode
+        );
        this._sprite.alpha = this._object.opacity / 255;
        this._sprite.scale.x = scaleX;
        this._sprite.scale.y = scaleY;
--- a/GDJS/Runtime/runtimeobject.ts
+++ b/GDJS/Runtime/runtimeobject.ts
@@ -660,14 +660,14 @@ namespace gdjs {

    //Rendering:
    /**
-     * @return The internal object for a 2D rendering (PIXI.DisplayObject...)
+     * @return The internal object for a 2D rendering (PIXI.Container...)
     */
    getRendererObject(): RendererObjectInterface | null | undefined {
      return undefined;
    }

    /**
-     * @return The internal object for a 3D rendering (PIXI.DisplayObject...)
+     * @return The internal object for a 3D rendering (THREE.Object3D...)
     */
    get3DRendererObject(): THREE.Object3D | null | undefined {
      return undefined;
--- a/GDJS/package-lock.json
+++ b/GDJS/package-lock.json
--- a/GDJS/package.json
+++ b/GDJS/package.json
@@ -16,7 +16,7 @@
    "minimist": "^1.2.5",
    "patch-package": "^6.4.7",
    "pixi-spine": "4.0.4",
-    "pixi.js": "7.4.2",
+    "pixi.js": "8.7.3",
    "prettier": "3.4.2",
    "recursive-readdir": "^2.2.2",
    "shelljs": "^0.8.4",
--- a/SharedLibs/TileMapHelper/package.json
+++ b/SharedLibs/TileMapHelper/package.json
@@ -24,7 +24,7 @@
  "dependencies": {
    "@types/offscreencanvas": "^2019.6.4",
    "pako": "^2.0.4",
-    "pixi.js": "7.4.2"
+    "pixi.js": "8.7.3"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "13.3.0",
--- a/SharedLibs/TileMapHelper/src/render/TileMapManager.ts
+++ b/SharedLibs/TileMapHelper/src/render/TileMapManager.ts
@@ -154,7 +154,7 @@ export class TileMapManager {
      tileSetJsonResourceName: string,
      callback: (tileMapFileContent: TileMapFileContent | null) => void
    ) => void,
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>,
+    getTexture: (textureName: string) => PIXI.TextureSource,
    atlasImageResourceName: string,
    tileMapJsonResourceName: string,
    tileSetJsonResourceName: string,
@@ -209,7 +209,7 @@ export class TileMapManager {
   * @param callback A function called when the tiles textures are split.
   */
  getOrLoadSimpleTileMapTextureCache(
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>,
+    getTexture: (textureName: string) => PIXI.TextureSource,
    atlasImageResourceName: string,
    tileSize: number,
    columnCount: number,
--- a/SharedLibs/TileMapHelper/src/render/TileMapPixiHelper.ts
+++ b/SharedLibs/TileMapHelper/src/render/TileMapPixiHelper.ts
@@ -23,8 +23,8 @@ export namespace PixiTileMapHelper {
  export function parseAtlas(
    tileMap: TileMapFileContent,
    levelIndex: number,
-    atlasTexture: PIXI.BaseTexture<PIXI.Resource> | null,
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>
+    atlasTexture: PIXI.TextureSource | null,
+    getTexture: (textureName: string) => PIXI.TextureSource
  ): TileTextureCache | null {
    if (tileMap.kind === "ldtk") {
      return LDtkPixiHelper.parseAtlas(
@@ -60,7 +60,7 @@ export namespace PixiTileMapHelper {
   * @returns A textures cache.
   */
  export function parseSimpleTileMapAtlas(
-    atlasTexture: PIXI.BaseTexture<PIXI.Resource>,
+    atlasTexture: PIXI.TextureSource,
    columnCount: number,
    rowCount: number,
    tileSize: number
@@ -75,7 +75,7 @@ export namespace PixiTileMapHelper {
          tileSize
        );

-        const texture = new PIXI.Texture(atlasTexture, rect);
+        const texture = new PIXI.Texture({ source: atlasTexture, frame: rect });

        textureCache.setTexture(
          // Id of the tile
--- a/SharedLibs/TileMapHelper/src/render/ldtk/LDtkPixiHelper.ts
+++ b/SharedLibs/TileMapHelper/src/render/ldtk/LDtkPixiHelper.ts
@@ -2,20 +2,19 @@ import { TileTextureCache } from "../TileTextureCache";
 import { LDtkTileMap, LDtkTilesetDef } from "../../load/ldtk/LDtkFormat";
 import { getLDtkTileId } from "../../load/ldtk/LDtkTileMapLoaderHelper";

-type Texture = PIXI.BaseTexture<PIXI.Resource>;
-type TextureLoader = (textureName: string) => PIXI.BaseTexture<PIXI.Resource>;
+type TextureLoader = (textureName: string) => PIXI.TextureSource;

 function getAtlasTexture(
-  atlasTextures: Record<number, Texture | null>,
+  atlasTextures: Record<number, PIXI.TextureSource | null>,
  tilesetCache: Record<number, LDtkTilesetDef>,
  getTexture: TextureLoader,
  tilesetId: number
-): Texture | null {
+): PIXI.TextureSource | null {
  if (atlasTextures[tilesetId]) {
    return atlasTextures[tilesetId];
  }

-  let texture: Texture | null = null;
+  let texture: PIXI.TextureSource | null = null;

  const tileset = tilesetCache[tilesetId];
  if (tileset?.relPath) {
@@ -51,7 +50,7 @@ export namespace LDtkPixiHelper {
  export function parseAtlas(
    tileMap: LDtkTileMap,
    levelIndex: number,
-    atlasTexture: Texture | null,
+    atlasTexture: PIXI.TextureSource | null,
    getTexture: TextureLoader
  ): TileTextureCache | null {
    const level = tileMap.levels[levelIndex > -1 ? levelIndex : 0];
@@ -68,7 +67,7 @@ export namespace LDtkPixiHelper {
    // List the tiles that have been loaded to Pixi by all the layers of the level.
    // The keys are a composition (getLDtkTileId) between the tileset's id and the tile's id.
    const levelTileCache: Record<number, boolean> = {};
-    const atlasTextures: Record<number, Texture | null> = {};
+    const atlasTextures: Record<number, PIXI.TextureSource | null> = {};

    for (let iLayer = level.layerInstances.length - 1; iLayer >= 0; --iLayer) {
      const layer = level.layerInstances[iLayer];
@@ -113,7 +112,10 @@ export namespace LDtkPixiHelper {
          const [x, y] = tile.src;
          const rect = new PIXI.Rectangle(x, y, gridSize, gridSize);

-          const texture = new PIXI.Texture(atlasTexture, rect);
+          const texture = new PIXI.Texture({
+            source: atlasTexture,
+            frame: rect,
+          });

          textureCache.setTexture(tileId, texture);
        } catch (error) {
@@ -131,7 +133,7 @@ export namespace LDtkPixiHelper {
    if (level.bgRelPath) {
      const atlasTexture = getTexture(level.bgRelPath);
      const rect = new PIXI.Rectangle(0, 0, level.pxWid, level.pxHei);
-      const texture = new PIXI.Texture(atlasTexture!, rect);
+      const texture = new PIXI.Texture({ source: atlasTexture!, frame: rect });

      textureCache.setLevelBackgroundTexture(level.bgRelPath, texture);
    }
--- a/SharedLibs/TileMapHelper/src/render/tiled/TiledPixiHelper.ts
+++ b/SharedLibs/TileMapHelper/src/render/tiled/TiledPixiHelper.ts
@@ -15,8 +15,8 @@ export namespace TiledPixiHelper {
  export function parseAtlas(
    tileMap: TiledTileMap,
    levelIndex: number,
-    atlasTexture: PIXI.BaseTexture<PIXI.Resource> | null,
-    getTexture: (textureName: string) => PIXI.BaseTexture<PIXI.Resource>
+    atlasTexture: PIXI.TextureSource | null,
+    getTexture: (textureName: string) => PIXI.TextureSource
  ): TileTextureCache | null {
    if (!tileMap.tiledversion) {
      console.warn(
@@ -99,7 +99,10 @@ export namespace TiledPixiHelper {

      try {
        const rect = new PIXI.Rectangle(x, y, tilewidth, tileheight);
-        const texture = new PIXI.Texture(atlasTexture!, rect);
+        const texture = new PIXI.Texture({
+          source: atlasTexture!,
+          frame: rect,
+        });

        textureCache.setTexture(tileId, texture);
      } catch (error) {
--- a/SharedLibs/TileMapHelper/tsconfig.json
+++ b/SharedLibs/TileMapHelper/tsconfig.json
@@ -14,7 +14,7 @@
      "expect.js",
      "offscreencanvas"
    ],
-    "lib": ["DOM", "ES5", "ES6"],
+    "lib": ["DOM", "ES5", "ES6", "ES2017", "ES2020"],
    "esModuleInterop": false, 
    "downlevelIteration": true,
    "moduleResolution": "node",
--- a/SharedLibs/TileMapHelper/types/pixi-tilemap.d.ts
+++ b/SharedLibs/TileMapHelper/types/pixi-tilemap.d.ts
Author	SHA1	Message	Date
Davy Hélard	b3d91907d2	Update package-lock	2025-02-12 19:11:07 +01:00
Davy Hélard	c56538a824	Fix some errors.	2025-02-12 19:10:49 +01:00
Davy Hélard	a00d222ed5	Upgrade Pixi in Runtime.	2025-02-12 18:55:46 +01:00