Refactor PixiResourcesLoader to remove static methods and type it pro…

…perly in extensions

Extensions/JsExtensionTypes.d.ts

@@ -4,6 +4,107 @@ type GDNamespace = typeof import('../GDevelop.js/types');
 // in this file and merge it with the other namespace declarations.
 declare namespace PIXI {}
 
+/**
+ * Expose functions to load PIXI textures or fonts, given the names of
+ * resources and a gd.Project.
+ */
+declare class PixiResourcesLoader {
+  burstCache();
+
+  async reloadResource(project: gd.Project, resourceName: string);
+
+  /**
+   * Reload the given resources.
+   */
+  async reloadResources(
+    project: gd.Project,
+    resourceNames: Array<string>
+  ): Promise<void>;
+
+  /**
+   * Return the PIXI texture represented by the given resource.
+   * If not loaded, it will load it.
+   */
+  getPIXITexture(project: gd.Project, resourceName: string): PIXI.Texture;
+
+  /**
+   * Return the three.js texture associated to the specified resource name.
+   * Returns a placeholder texture if not found.
+   * @param project The project
+   * @param resourceName The name of the resource
+   * @returns The requested texture, or a placeholder if not found.
+   */
+  getThreeTexture(project: gd.Project, resourceName: string): THREE.Texture;
+
+  /**
+   * Return the three.js material associated to the specified resource name.
+   * @param project The project
+   * @param resourceName The name of the resource
+   * @param options Set if the material should be transparent or not.
+   * @returns The requested material.
+   */
+  getThreeMaterial(
+    project: gd.Project,
+    resourceName: string,
+    { useTransparentTexture }: { useTransparentTexture: boolean }
+  ): THREE.Material;
+
+  /**
+   * Return the three.js material associated to the specified resource name.
+   * @param project The project
+   * @param resourceName The name of the resource
+   * @param options
+   * @returns The requested material.
+   */
+  get3DModel(
+    project: gd.Project,
+    resourceName: string
+  ): Promise<THREE.THREE_ADDONS.GLTF>;
+
+  /**
+   * Return the Pixi spine data for the specified resource name.
+   * @param project The project
+   * @param spineName The name of the spine json resource
+   * @returns The requested spine skeleton.
+   */
+  async getSpineData(
+    project: gd.Project,
+    spineName: string
+  ): Promise<SpineDataOrLoadingError>;
+
+  /**
+   * Return the PIXI video texture represented by the given resource.
+   * If not loaded, it will load it.
+   * @returns The PIXI.Texture to be used. It can be loading, so you
+   * should listen to PIXI.Texture `update` event, and refresh your object
+   * if this event is triggered.
+   */
+  getPIXIVideoTexture(project: gd.Project, resourceName: string): PIXI.Texture;
+
+  /**
+   * Load the given font from its url/filename.
+   * @returns a Promise that resolves with the font-family to be used
+   * to render a text with the font.
+   */
+  loadFontFamily(project: gd.Project, resourceName: string): Promise<string>;
+
+  /**
+   * Get the font family name for the given font resource.
+   * The font won't be loaded.
+   * @returns The font-family to be used to render a text with the font.
+   */
+  getFontFamily(project: gd.Project, resourceName: string): string;
+
+  /**
+   * Get the data from a bitmap font file (fnt/xml) resource in the IDE.
+   */
+  getBitmapFontData(project: gd.Project, resourceName: string): Promise<any>;
+
+  getInvalidPIXITexture();
+
+  getResourceJsonData(project: gd.Project, resourceName: string);
+}
+
 /**
  * RenderedInstance is the base class used for creating 2D renderers of instances,
  * which display on the scene editor, using Pixi.js, the instance of an object (see InstancesEditor).
@@ -14,17 +115,17 @@ class RenderedInstance {
   _instance: gd.InitialInstance;
   _associatedObjectConfiguration: gd.ObjectConfiguration;
   _pixiContainer: PIXI.Container;
-  _pixiResourcesLoader: Class<PixiResourcesLoader>;
+  _pixiResourcesLoader: PixiResourcesLoader;
   _pixiObject: PIXI.DisplayObject;
   wasUsed: boolean;
 
   constructor(
-    project: gdProject,
-    layout: gdLayout,
-    instance: gdInitialInstance,
-    associatedObjectConfiguration: gdObjectConfiguration,
+    project: gd.Project,
+    layout: gd.Layout,
+    instance: gd.InitialInstance,
+    associatedObjectConfiguration: gd.ObjectConfiguration,
     pixiContainer: PIXI.Container,
-    pixiResourcesLoader: Class<PixiResourcesLoader>
+    pixiResourcesLoader: PixiResourcesLoader
   );
 
   /**
@@ -85,25 +186,25 @@ class RenderedInstance {
  * It can also display 2D artifacts on Pixi 2D plane (3D object shadow projected on the plane for instance).
  */
 class Rendered3DInstance {
-  _project: gdProject;
-  _layout: gdLayout;
-  _instance: gdInitialInstance;
-  _associatedObjectConfiguration: gdObjectConfiguration;
+  _project: gd.Project;
+  _layout: gd.Layout;
+  _instance: gd.InitialInstance;
+  _associatedObjectConfiguration: gd.ObjectConfiguration;
   _pixiContainer: PIXI.Container;
   _threeGroup: THREE.Group;
-  _pixiResourcesLoader: Class<PixiResourcesLoader>;
+  _pixiResourcesLoader: PixiResourcesLoader;
   _pixiObject: PIXI.DisplayObject;
   _threeObject: THREE.Object3D | null;
   wasUsed: boolean;
 
   constructor(
-    project: gdProject,
-    layout: gdLayout,
-    instance: gdInitialInstance,
-    associatedObjectConfiguration: gdObjectConfiguration,
+    project: gd.Project,
+    layout: gd.Layout,
+    instance: gd.InitialInstance,
+    associatedObjectConfiguration: gd.ObjectConfiguration,
     pixiContainer: PIXI.Container,
     threeGroup: THREE.Group,
-    pixiResourcesLoader: Class<PixiResourcesLoader>
+    pixiResourcesLoader: PixiResourcesLoader
   );
 
   /**

Extensions/TileMap/JsExtension.js

@@ -1290,6 +1290,7 @@ module.exports = {
               manager.getOrLoadTextureCache(
                 this._loadTileMapWithCallback.bind(this),
                 (textureName) =>
+                  // @ts-ignore
                   this._pixiResourcesLoader.getPIXITexture(
                     this._project,
                     mapping[textureName] || textureName

newIDE/app/src/MainFrame/index.js

@@ -175,7 +175,7 @@ import useCreateProject from '../Utils/UseCreateProject';
 import newNameGenerator from '../Utils/NewNameGenerator';
 import { addDefaultLightToAllLayers } from '../ProjectCreation/CreateProject';
 import useEditorTabsStateSaving from './EditorTabs/UseEditorTabsStateSaving';
-import PixiResourcesLoader from '../ObjectsRendering/PixiResourcesLoader';
+import { pixiResourcesLoader } from '../ObjectsRendering/PixiResourcesLoader';
 import useResourcesWatcher from './ResourcesWatcher';
 import { extractGDevelopApiErrorStatusAndCode } from '../Utils/GDevelopServices/Errors';
 import useVersionHistory from '../VersionHistory/UseVersionHistory';
@@ -901,7 +901,7 @@ const MainFrame = (props: Props) => {
       // the URL to a resource with a name in the old project is not re-used
       // for another resource with the same name in the new project.
       ResourcesLoader.burstAllUrlsCache();
-      PixiResourcesLoader.burstCache();
+      pixiResourcesLoader.burstCache();
 
       const state = await setState(state => ({
         ...state,

newIDE/app/src/ObjectEditor/Editors/Model3DEditor.js

@@ -25,7 +25,7 @@ import { makeDragSourceAndDropTarget } from '../../UI/DragAndDrop/DragSourceAndD
 import { DragHandleIcon } from '../../UI/DragHandle';
 import DropIndicator from '../../UI/SortableVirtualizedItemList/DropIndicator';
 import GDevelopThemeContext from '../../UI/Theme/GDevelopThemeContext';
-import PixiResourcesLoader from '../../ObjectsRendering/PixiResourcesLoader';
+import { pixiResourcesLoader } from '../../ObjectsRendering/PixiResourcesLoader';
 import useAlertDialog from '../../UI/Alert/useAlertDialog';
 import { type GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
@@ -155,7 +155,7 @@ const Model3DEditor = ({
   const [gltf, setGltf] = React.useState<GLTF | null>(null);
   const loadGltf = React.useCallback(
     async (modelResourceName: string) => {
-      const newModel3d = await PixiResourcesLoader.get3DModel(
+      const newModel3d = await pixiResourcesLoader.get3DModel(
         project,
         modelResourceName
       );

newIDE/app/src/ObjectEditor/Editors/SpineEditor.js

@@ -24,7 +24,8 @@ import { makeDragSourceAndDropTarget } from '../../UI/DragAndDrop/DragSourceAndD
 import { DragHandleIcon } from '../../UI/DragHandle';
 import DropIndicator from '../../UI/SortableVirtualizedItemList/DropIndicator';
 import GDevelopThemeContext from '../../UI/Theme/GDevelopThemeContext';
-import PixiResourcesLoader, {
+import {
+  pixiResourcesLoader,
   type SpineDataOrLoadingError,
 } from '../../ObjectsRendering/PixiResourcesLoader';
 import useAlertDialog from '../../UI/Alert/useAlertDialog';
@@ -109,7 +110,7 @@ const SpineEditor = ({
   React.useEffect(
     () => {
       (async () => {
-        const spineData = await PixiResourcesLoader.getSpineData(
+        const spineData = await pixiResourcesLoader.getSpineData(
           project,
           spineResourceName
         );

newIDE/app/src/ObjectsRendering/ObjectsRenderingService.js

@@ -10,7 +10,7 @@ import RenderedTextEntryInstance from './Renderers/RenderedTextEntryInstance';
 import RenderedParticleEmitterInstance from './Renderers/RenderedParticleEmitterInstance';
 import RenderedCustomObjectInstance from './Renderers/RenderedCustomObjectInstance';
 import RenderedSprite3DInstance from './Renderers/RenderedSprite3DInstance';
-import PixiResourcesLoader from './PixiResourcesLoader';
+import { pixiResourcesLoader } from './PixiResourcesLoader';
 import ResourcesLoader from '../ResourcesLoader';
 import RenderedInstance from './Renderers/RenderedInstance';
 import Rendered3DInstance from './Renderers/Rendered3DInstance';
@@ -90,7 +90,7 @@ const ObjectsRenderingService = {
         associatedObjectConfiguration,
         pixiContainer,
         threeGroup,
-        PixiResourcesLoader
+        pixiResourcesLoader
       );
     } else if (this.renderers.hasOwnProperty(objectType))
       return new this.renderers[objectType](
@@ -99,7 +99,7 @@ const ObjectsRenderingService = {
         instance,
         associatedObjectConfiguration,
         pixiContainer,
-        PixiResourcesLoader
+        pixiResourcesLoader
       );
     else {
       if (project.hasEventsBasedObject(objectType)) {
@@ -116,7 +116,7 @@ const ObjectsRenderingService = {
             associatedObjectConfiguration,
             pixiContainer,
             threeGroup,
-            PixiResourcesLoader
+            pixiResourcesLoader
           );
         } else {
           return new RenderedCustomObjectInstance(
@@ -126,7 +126,7 @@ const ObjectsRenderingService = {
             associatedObjectConfiguration,
             pixiContainer,
             threeGroup,
-            PixiResourcesLoader
+            pixiResourcesLoader
           );
         }
       }
@@ -140,7 +140,7 @@ const ObjectsRenderingService = {
         instance,
         associatedObjectConfiguration,
         pixiContainer,
-        PixiResourcesLoader
+        pixiResourcesLoader
       );
     }
   },