Skip to content

Commit

Permalink
Refactor PixiResourcesLoader to remove static methods and type it pro…
Browse files Browse the repository at this point in the history
…perly in extensions
  • Loading branch information
4ian committed May 12, 2024
1 parent 4ca859c commit 160adfc
Show file tree
Hide file tree
Showing 18 changed files with 194 additions and 89 deletions.
146 changes: 130 additions & 16 deletions Extensions/JsExtensionTypes.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,120 @@ 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).
Expand All @@ -14,17 +128,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
);

/**
Expand Down Expand Up @@ -85,25 +199,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
);

/**
Expand Down
4 changes: 2 additions & 2 deletions newIDE/app/src/MainFrame/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions newIDE/app/src/ObjectEditor/Editors/Model3DEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
);
Expand Down
5 changes: 3 additions & 2 deletions newIDE/app/src/ObjectEditor/Editors/SpineEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -109,7 +110,7 @@ const SpineEditor = ({
React.useEffect(
() => {
(async () => {
const spineData = await PixiResourcesLoader.getSpineData(
const spineData = await pixiResourcesLoader.getSpineData(
project,
spineResourceName
);
Expand Down
12 changes: 6 additions & 6 deletions newIDE/app/src/ObjectsRendering/ObjectsRenderingService.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -90,7 +90,7 @@ const ObjectsRenderingService = {
associatedObjectConfiguration,
pixiContainer,
threeGroup,
PixiResourcesLoader
pixiResourcesLoader
);
} else if (this.renderers.hasOwnProperty(objectType))
return new this.renderers[objectType](
Expand All @@ -99,7 +99,7 @@ const ObjectsRenderingService = {
instance,
associatedObjectConfiguration,
pixiContainer,
PixiResourcesLoader
pixiResourcesLoader
);
else {
if (project.hasEventsBasedObject(objectType)) {
Expand All @@ -116,7 +116,7 @@ const ObjectsRenderingService = {
associatedObjectConfiguration,
pixiContainer,
threeGroup,
PixiResourcesLoader
pixiResourcesLoader
);
} else {
return new RenderedCustomObjectInstance(
Expand All @@ -126,7 +126,7 @@ const ObjectsRenderingService = {
associatedObjectConfiguration,
pixiContainer,
threeGroup,
PixiResourcesLoader
pixiResourcesLoader
);
}
}
Expand All @@ -140,7 +140,7 @@ const ObjectsRenderingService = {
instance,
associatedObjectConfiguration,
pixiContainer,
PixiResourcesLoader
pixiResourcesLoader
);
}
},
Expand Down
Loading

0 comments on commit 160adfc

Please sign in to comment.