diff --git a/Extensions/Spine/managers/pixi-spine-atlas-manager.ts b/Extensions/Spine/managers/pixi-spine-atlas-manager.ts
index aa8038bf3477..849a91c42fe6 100644
--- a/Extensions/Spine/managers/pixi-spine-atlas-manager.ts
+++ b/Extensions/Spine/managers/pixi-spine-atlas-manager.ts
@@ -103,6 +103,11 @@ namespace gdjs {
         return imagesMap;
       }, {});
 
+      // Note: "atlas" and "spine" resources are never put inside a resource
+      // pack at export (see `ResourcePackPlanner`), because `PIXI.Assets`
+      // decides which loader to use from the extension of the URL, and a
+      // `blob:` URL has none. Only the atlas pages, which are plain images
+      // given to the loader below as already-loaded textures, are packed.
       const url = this._resourceLoader.getFullUrl(resource.file);
       const alias = url;
 
diff --git a/GDJS/GDJS/IDE/ExporterHelper.cpp b/GDJS/GDJS/IDE/ExporterHelper.cpp
index bf918c3b38fc..eca9d38a2b21 100644
--- a/GDJS/GDJS/IDE/ExporterHelper.cpp
+++ b/GDJS/GDJS/IDE/ExporterHelper.cpp
@@ -1169,6 +1169,7 @@ void ExporterHelper::AddLibsInclude(bool pixiRenderers,
   InsertUnique(includesFiles, "inputmanager.js");
   InsertUnique(includesFiles, "jsonmanager.js");
   InsertUnique(includesFiles, "Model3DManager.js");
+  InsertUnique(includesFiles, "ResourcePackManager.js");
   InsertUnique(includesFiles, "ResourceLoader.js");
   InsertUnique(includesFiles, "ResourceCache.js");
   InsertUnique(includesFiles, "timemanager.js");
diff --git a/GDJS/Runtime/ResourceLoader.ts b/GDJS/Runtime/ResourceLoader.ts
index 0bb1ee9e4046..30ea9547175d 100644
--- a/GDJS/Runtime/ResourceLoader.ts
+++ b/GDJS/Runtime/ResourceLoader.ts
@@ -148,6 +148,12 @@ namespace gdjs {
     private _spineManager: SpineManager | null = null;
     private _svgManager: InternalInGameEditorOnlySvgManager;
 
+    /**
+     * Gives access to the resources of a game exported with its resources
+     * packed into ".gdpak" archives. Does nothing otherwise.
+     */
+    private _resourcePackManager = new gdjs.ResourcePackManager();
+
     private privateResourceManager = new PrivateResourceManager(this);
     private sceneResourceLoadingQueue = new ResourceLoadingQueue(
       'scene',
@@ -239,6 +245,12 @@ namespace gdjs {
     ): void {
       this._globalResources = globalResources;
 
+      // The exporter writes this at the end of `data.js` when it packed the
+      // game resources. It stays null for previews and for games exported
+      // without packing, in which case every resource is downloaded as its own
+      // file, as before.
+      this._resourcePackManager.setManifest(gdjs.resourcePacks);
+
       // TODO We should probably instanciate new queues to avoid side effects from running tasks.
       this.sceneResourceLoadingQueue.clear();
       for (const objectResourceLoadingQueue of this.objectResourceLoadingQueues.values()) {
@@ -346,24 +358,52 @@ namespace gdjs {
         ...this._globalResources,
         ...firstSceneResourceNames,
       ];
-      await ResourceLoader.processAndRetryIfNeededWithPromisePool(
-        resourceNames,
-        ResourceLoader.maxForegroundConcurrency,
-        ResourceLoader.maxAttempt,
-        async (resourceName) => {
-          const resource =
-            this.privateResourceManager._resources.get(resourceName);
-          if (!resource) {
-            logger.warn('Unable to find resource "' + resourceName + '".');
-            return;
-          }
-          await this.privateResourceManager._loadResource(resource);
-          await this.privateResourceManager._processResource(resource);
-          loadedCount++;
-          onProgress(loadedCount, resourceNames.length);
+
+      // No resource can be loaded while its pack is downloading, so without
+      // this the loading bar would stay at 0% for the whole download. Report
+      // the download itself as a fraction of a resource.
+      let lastReportedPackProgress = 0;
+      this._resourcePackManager.setOnProgressCallback(
+        (loadedBytes, totalBytes) => {
+          // A server compressing the pack on the fly announces the compressed
+          // size, while the bytes received are decompressed: don't go past 100%.
+          const packProgress = Math.min(1, loadedBytes / totalBytes);
+          if (Math.abs(packProgress - lastReportedPackProgress) < 0.01) return;
+          lastReportedPackProgress = packProgress;
+          onProgress(loadedCount + packProgress, resourceNames.length);
         }
       );
 
+      try {
+        // Resources that are only reachable dynamically (a sound played by
+        // name from an expression) are in no loading task, so nothing else
+        // would ever download the pack holding them - and the engine asks for
+        // their URL synchronously, when it is too late to download anything.
+        const startupPacksPromise =
+          this._resourcePackManager.ensureStartupPacksLoaded();
+        if (startupPacksPromise) await startupPacksPromise;
+
+        await ResourceLoader.processAndRetryIfNeededWithPromisePool(
+          resourceNames,
+          ResourceLoader.maxForegroundConcurrency,
+          ResourceLoader.maxAttempt,
+          async (resourceName) => {
+            const resource =
+              this.privateResourceManager._resources.get(resourceName);
+            if (!resource) {
+              logger.warn('Unable to find resource "' + resourceName + '".');
+              return;
+            }
+            await this.privateResourceManager._loadResource(resource);
+            await this.privateResourceManager._processResource(resource);
+            loadedCount++;
+            onProgress(loadedCount, resourceNames.length);
+          }
+        );
+      } finally {
+        this._resourcePackManager.setOnProgressCallback(null);
+      }
+
       this.sceneResourceLoadingQueue.setResourcesAs(firstSceneName, 'ready');
     }
 
@@ -526,11 +566,44 @@ namespace gdjs {
         this.getObjectResourceLoadingQueue(unloadedSceneName);
       objectResourceLoadingQueue.clear();
 
+      this._unloadUnusedResourcePacks();
+
       debugLogger.log(
         `Unloading of resources for scene ${unloadedSceneName} finished.`
       );
     }
 
+    /**
+     * Give back the memory used by the archives of the scenes that are not
+     * loaded anymore. Does nothing for a game exported without packed
+     * resources.
+     */
+    private _unloadUnusedResourcePacks(): void {
+      const stillLoadedFiles = new Set<string>();
+      const addFilesOf = (resourceNames: Array<string>) => {
+        for (const resourceName of resourceNames) {
+          const resource =
+            this.privateResourceManager._resources.get(resourceName);
+          if (resource) stillLoadedFiles.add(resource.file);
+        }
+      };
+
+      // Global resources are never unloaded.
+      addFilesOf(this._globalResources);
+      for (const loadingState of this.sceneResourceLoadingQueue.loadingStates.values()) {
+        if (loadingState.status === 'not-loaded') continue;
+        addFilesOf(loadingState.resourceNames);
+      }
+      for (const objectResourceLoadingQueue of this.objectResourceLoadingQueues.values()) {
+        for (const loadingState of objectResourceLoadingQueue.loadingStates.values()) {
+          if (loadingState.status === 'not-loaded') continue;
+          addFilesOf(loadingState.resourceNames);
+        }
+      }
+
+      this._resourcePackManager.unloadPacksWithNoFileIn(stillLoadedFiles);
+    }
+
     /**
      * Unload an object assets in background.
      */
@@ -573,6 +646,9 @@ namespace gdjs {
       for (const objectResourceLoadingQueue of this.objectResourceLoadingQueues.values()) {
         objectResourceLoadingQueue.clear();
       }
+      // Keep the manifest: the packs are downloaded again when the resources
+      // are loaded back.
+      this._resourcePackManager.unloadAllPacks();
       debugLogger.log(`Unloading of all resources finished.`);
     }
 
@@ -610,6 +686,58 @@ namespace gdjs {
       return this.privateResourceManager._resources.get(resourceName) || null;
     }
 
+    /**
+     * Download the resource pack holding this resource, if the game was
+     * exported with packed resources and the pack is not downloaded yet.
+     *
+     * @returns null when there is nothing to wait for. Callers must check it
+     * rather than awaiting unconditionally, so that loading a resource keeps
+     * starting synchronously when there is no pack involved.
+     */
+    ensurePackLoadedFor(resource: ResourceData): Promise<void> | null {
+      if (!this._resourcePackManager.hasPacks()) return null;
+
+      const loadingPromises: Array<Promise<void>> = [];
+      const visitedResourceNames = new Set<string>();
+      const visit = (resource: ResourceData) => {
+        if (visitedResourceNames.has(resource.name)) return;
+        visitedResourceNames.add(resource.name);
+
+        const loadingPromise = this._resourcePackManager.ensureLoadedFor(
+          resource.file
+        );
+        if (loadingPromise) loadingPromises.push(loadingPromise);
+
+        // Managers reach the resources embedded in another one synchronously
+        // (the Spine atlas manager asks the image manager for the page
+        // textures of an atlas), so their packs must be downloaded too.
+        for (const embeddedResourceName of this._runtimeGame.getEmbeddedResourcesNames(
+          resource.name
+        )) {
+          const embeddedResource = this.privateResourceManager._resources.get(
+            this._runtimeGame.resolveEmbeddedResource(
+              resource.name,
+              embeddedResourceName
+            )
+          );
+          if (embeddedResource) visit(embeddedResource);
+        }
+      };
+      visit(resource);
+
+      if (!loadingPromises.length) return null;
+      if (loadingPromises.length === 1) return loadingPromises[0];
+      return Promise.all(loadingPromises).then(() => {});
+    }
+
+    /**
+     * @returns true when this file is stored inside a resource pack, and so is
+     * read from memory rather than downloaded on its own.
+     */
+    isFileInResourcePack(file: string): boolean {
+      return this._resourcePackManager.isPacked(file);
+    }
+
     // Helper methods used when resources are loaded from an URL.
 
     /**
@@ -617,6 +745,23 @@ namespace gdjs {
      * the resource (this can be for example a token needed to access the resource).
      */
     getFullUrl(url: string) {
+      // When the game was exported with packed resources, the file lives inside
+      // an archive that was already downloaded (`_loadResource` waits for it),
+      // and is read from a `blob:` URL instead of being fetched on its own.
+      const packedUrl = this._resourcePackManager.getObjectUrl(url);
+      if (packedUrl) return packedUrl;
+
+      if (this._resourcePackManager.isPacked(url)) {
+        // The file is in a pack that is not downloaded yet. The URL returned
+        // below points to a file that the export does not contain, so loading
+        // it will fail: warn rather than let it look like a missing file.
+        logger.warn(
+          'The resource file "' +
+            url +
+            '" was requested before its resource pack was downloaded.'
+        );
+      }
+
       if (this._runtimeGame.isInGameEdition()) {
         // Avoid adding cache burst to URLs which are assumed to be immutable files,
         // to avoid costly useless requests each time the game is hot-reloaded.
@@ -977,6 +1122,14 @@ namespace gdjs {
         );
         return;
       }
+      // Make sure the archive holding this file is downloaded before the
+      // manager asks for its URL. Concurrent calls share the same download.
+      // Nothing is awaited for a game exported without packed resources, so
+      // that the download of a resource still starts synchronously.
+      const packLoadingPromise =
+        this.resourceLoader.ensurePackLoadedFor(resource);
+      if (packLoadingPromise) await packLoadingPromise;
+
       await resourceManager.loadResource(resource.name);
     }
 
@@ -988,7 +1141,9 @@ namespace gdjs {
         );
         if (resourceManager) {
           debugLogger.log(
-            `Unloading of resources of kind ${resourceData.kind} : ${resourceName}`
+            `Unloading of resources of kind ${
+              resourceData.kind
+            } : ${resourceName}`
           );
           resourceManager.unloadResource(resourceData);
         }
@@ -1062,7 +1217,11 @@ namespace gdjs {
       debugLogger.log(`Loading all ${this.name} resources, in background.`);
       while (this.loadingTaskQueue.length > 0) {
         debugLogger.log(
-          `Still resources of ${this.loadingTaskQueue.length} ${this.name}(s) to load: ${this.loadingTaskQueue.map((task) => task.identifier).join(', ')}`
+          `Still resources of ${this.loadingTaskQueue.length} ${
+            this.name
+          }(s) to load: ${this.loadingTaskQueue
+            .map((task) => task.identifier)
+            .join(', ')}`
         );
         const task = this.loadingTaskQueue[this.loadingTaskQueue.length - 1];
         if (task === undefined) {
@@ -1071,7 +1230,9 @@ namespace gdjs {
         this.currentLoadingTaskIdentifier = task.identifier;
         if (!this.areAssetsLoaded(task.identifier)) {
           debugLogger.log(
-            `Loading (but not processing) resources for ${this.name} ${task.identifier}.`
+            `Loading (but not processing) resources for ${this.name} ${
+              task.identifier
+            }.`
           );
           const loadingState = this.loadingStates.get(task.identifier);
           if (loadingState) {
@@ -1080,12 +1241,16 @@ namespace gdjs {
             );
           } else {
             logger.warn(
-              `Can\'t load resource for unknown ${this.name}: "${task.identifier}".`
+              `Can\'t load resource for unknown ${this.name}: "${
+                task.identifier
+              }".`
             );
             return;
           }
           debugLogger.log(
-            `Done loading (but not processing) resources for ${this.name} ${task.identifier}.`
+            `Done loading (but not processing) resources for ${this.name} ${
+              task.identifier
+            }.`
           );
 
           // A task may have been moved last while awaiting resources to be
@@ -1249,7 +1414,9 @@ namespace gdjs {
       }
       if (objectLoadingState.status !== 'not-loaded') {
         debugLogger.log(
-          `Resources for ${this.name} ${taskIdentifier} are already loading or loaded.`
+          `Resources for ${
+            this.name
+          } ${taskIdentifier} are already loading or loaded.`
         );
         return null;
       }
@@ -1270,7 +1437,9 @@ namespace gdjs {
       }
       if (!unloadedTaskIdentifier) return;
       debugLogger.log(
-        `Unloading of resources for ${this.name} ${unloadedTaskIdentifier} was requested.`
+        `Unloading of resources for ${
+          this.name
+        } ${unloadedTaskIdentifier} was requested.`
       );
 
       const unloadedTaskState = this.loadingStates.get(unloadedTaskIdentifier);
@@ -1290,7 +1459,9 @@ namespace gdjs {
       }
 
       debugLogger.log(
-        `Unloading of resources for ${this.name} ${unloadedTaskIdentifier} finished.`
+        `Unloading of resources for ${
+          this.name
+        } ${unloadedTaskIdentifier} finished.`
       );
 
       unloadedTaskState.status = 'not-loaded';
diff --git a/GDJS/Runtime/ResourcePackManager.ts b/GDJS/Runtime/ResourcePackManager.ts
new file mode 100644
index 000000000000..753e83e4ab60
--- /dev/null
+++ b/GDJS/Runtime/ResourcePackManager.ts
@@ -0,0 +1,437 @@
+/*
+ * GDevelop JS Platform
+ * Copyright 2013-present Florian Rival (Florian.Rival@gmail.com). All rights reserved.
+ * This project is released under the MIT License.
+ */
+namespace gdjs {
+  const logger = new gdjs.Logger('ResourcePackManager');
+
+  const PACK_MAGIC = 'GDPK';
+  const PACK_HEADER_SIZE = 12;
+  const SUPPORTED_PACK_VERSION = 1;
+
+  /**
+   * An entry of the index stored at the beginning of a pack.
+   */
+  type ResourcePackEntryData = {
+    path: string;
+    offset: integer;
+    size: integer;
+    type: string;
+  };
+
+  /**
+   * The list of packs of an exported game, and the pack each resource file
+   * lives in.
+   *
+   * This is written by the exporter at the end of `data.js`, and is left
+   * undefined when the game was exported without packing its resources (which
+   * is the case for previews and for in-game edition).
+   * @category Resources
+   */
+  export type ResourcePacksManifest = {
+    version: integer;
+    /** The pack file names, relative to the game index.html. */
+    packs: Array<string>;
+    /** Resource file name -> index in `packs`. */
+    files: Record<string, integer>;
+    /**
+     * Packs that must be downloaded before the first scene starts, even though
+     * no loading task refers to their files.
+     *
+     * A resource that is only reachable dynamically - a sound played by name
+     * from an expression, an animation picked by an expression - appears in no
+     * `usedResources` list, so nothing would ever trigger the download of its
+     * pack, and the engine asks for its URL synchronously when it is used.
+     * Those resources are gathered in a pack listed here.
+     */
+    startupPacks?: Array<integer>;
+  };
+
+  /**
+   * Set by the exported `data.js` when the game resources were packed.
+   * @category Resources
+   */
+  export let resourcePacks: ResourcePacksManifest | null = null;
+
+  /**
+   * A single ".gdpak" archive, downloaded as one file and then sliced to give
+   * each resource its own `blob:` URL.
+   *
+   * See `newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.js` for the
+   * description of the format.
+   */
+  class ResourcePack {
+    private readonly _url: string;
+    /** Resource file name -> a slice of the downloaded archive. */
+    private _entries = new Map<string, Blob>();
+    /** Resource file name -> the object URL handed out for it. */
+    private _objectUrls = new Map<string, string>();
+
+    constructor(url: string) {
+      this._url = url;
+    }
+
+    /**
+     * Download the archive, then index its content.
+     */
+    load(
+      onProgress?: (loadedBytes: integer, totalBytes: integer) => void
+    ): Promise<void> {
+      return this._download(onProgress).then((blob) => this._readIndex(blob));
+    }
+
+    /**
+     * `XMLHttpRequest` is used rather than `fetch`: it works on the `file:`
+     * URLs of Electron and Cordova games, and reports progress natively.
+     */
+    private _download(
+      onProgress?: (loadedBytes: integer, totalBytes: integer) => void
+    ): Promise<Blob> {
+      return new Promise<Blob>((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.responseType = 'blob';
+        request.onprogress = (event) => {
+          if (onProgress && event.lengthComputable && event.total > 0) {
+            onProgress(event.loaded, event.total);
+          }
+        };
+        request.onload = () => {
+          const blob: Blob | null = request.response;
+          // A `file:` URL answers with a status of 0.
+          const isSuccess =
+            (request.status >= 200 && request.status < 300) ||
+            (request.status === 0 && !!blob && blob.size > 0);
+          if (!isSuccess || !blob) {
+            reject(
+              new Error(
+                `Could not download the resource pack "${this._url}" (status ${request.status}).`
+              )
+            );
+            return;
+          }
+          resolve(blob);
+        };
+        request.onerror = () =>
+          reject(
+            new Error(
+              `Could not download the resource pack "${this._url}" (network error).`
+            )
+          );
+        request.onabort = () =>
+          reject(
+            new Error(
+              `The download of the resource pack "${this._url}" was aborted.`
+            )
+          );
+        request.open('GET', this._url);
+        request.send();
+      });
+    }
+
+    private async _readIndex(blob: Blob): Promise<void> {
+      const headerBytes = await blob.slice(0, PACK_HEADER_SIZE).arrayBuffer();
+      if (headerBytes.byteLength < PACK_HEADER_SIZE) {
+        throw new Error(`The resource pack "${this._url}" is truncated.`);
+      }
+
+      const headerBytesArray = new Uint8Array(headerBytes);
+      const magic = String.fromCharCode(
+        headerBytesArray[0],
+        headerBytesArray[1],
+        headerBytesArray[2],
+        headerBytesArray[3]
+      );
+      if (magic !== PACK_MAGIC) {
+        throw new Error(
+          `"${this._url}" is not a resource pack (unexpected magic "${magic}").`
+        );
+      }
+
+      const headerView = new DataView(headerBytes);
+      const version = headerView.getUint32(4, true);
+      if (version !== SUPPORTED_PACK_VERSION) {
+        throw new Error(
+          `The resource pack "${this._url}" uses the unsupported version ${version}.`
+        );
+      }
+
+      const indexByteLength = headerView.getUint32(8, true);
+      const indexJson = await blob
+        .slice(PACK_HEADER_SIZE, PACK_HEADER_SIZE + indexByteLength)
+        .text();
+      const entries: Array<ResourcePackEntryData> = JSON.parse(indexJson).files;
+
+      // Slicing a Blob does not copy anything: the browser owns the downloaded
+      // bytes (and may keep them out of memory), and each entry is only a view
+      // on them.
+      for (const entry of entries) {
+        this._entries.set(
+          entry.path,
+          blob.slice(entry.offset, entry.offset + entry.size, entry.type)
+        );
+      }
+    }
+
+    /**
+     * @returns a `blob:` URL for this file, or null if the pack does not
+     * contain it. The same URL is returned for subsequent calls.
+     */
+    getObjectUrl(filePath: string): string | null {
+      const existingUrl = this._objectUrls.get(filePath);
+      if (existingUrl !== undefined) return existingUrl;
+
+      const blob = this._entries.get(filePath);
+      if (!blob) return null;
+
+      const objectUrl = URL.createObjectURL(blob);
+      this._objectUrls.set(filePath, objectUrl);
+      return objectUrl;
+    }
+
+    getFilePaths(): Array<string> {
+      return Array.from(this._entries.keys());
+    }
+
+    /**
+     * Release the archive and every URL handed out for it.
+     */
+    dispose(): void {
+      for (const objectUrl of this._objectUrls.values()) {
+        URL.revokeObjectURL(objectUrl);
+      }
+      this._objectUrls.clear();
+      this._entries.clear();
+    }
+  }
+
+  /**
+   * Gives access to the resources of a game whose export packed them into
+   * ".gdpak" archives, so that the exported game stays below the file count
+   * limits of hosting services (itch.io refuses archives with more than 1000
+   * files).
+   *
+   * When a game was exported without packing, every method is a no-op and the
+   * engine downloads each resource file as usual.
+   * @category Resources
+   */
+  export class ResourcePackManager {
+    private _manifest: ResourcePacksManifest | null = null;
+    private _packs: Array<ResourcePack | null> = [];
+    /** In-flight downloads, so that a pack is only ever downloaded once. */
+    private _loadingPromises: Array<Promise<void> | null> = [];
+    private _onProgress:
+      | ((loadedBytes: integer, totalBytes: integer) => void)
+      | null = null;
+    /**
+     * The download progress of the packs currently being downloaded, so that
+     * progress can be reported for all of them at once rather than having each
+     * pack fight over the loading bar.
+     */
+    private _pendingDownloads = new Map<
+      integer,
+      { loadedBytes: integer; totalBytes: integer }
+    >();
+    /**
+     * Incremented every time the packs are released, so that a download
+     * started before does not resurrect a pack that was disposed in between.
+     */
+    private _generation: integer = 0;
+
+    /**
+     * Read the manifest written by the exporter. Called by the resource loader
+     * when the game data is set, so that hot-reloading picks up changes too.
+     */
+    setManifest(manifest: ResourcePacksManifest | null): void {
+      if (manifest && manifest.version !== SUPPORTED_PACK_VERSION) {
+        logger.error(
+          `Unsupported resource pack manifest version ${
+            manifest.version
+          }, resources will be loaded as individual files.`
+        );
+        manifest = null;
+      }
+
+      this.dispose();
+      this._manifest = manifest;
+      this._packs = manifest ? manifest.packs.map(() => null) : [];
+      this._loadingPromises = manifest ? manifest.packs.map(() => null) : [];
+    }
+
+    /**
+     * Register a callback notified while a pack is being downloaded, so that
+     * the loading screen can show something is happening.
+     */
+    setOnProgressCallback(
+      onProgress: ((loadedBytes: integer, totalBytes: integer) => void) | null
+    ): void {
+      this._onProgress = onProgress;
+    }
+
+    /**
+     * @returns true when the game was exported with packed resources.
+     */
+    hasPacks(): boolean {
+      return !!this._manifest;
+    }
+
+    isPacked(filePath: string): boolean {
+      return !!this._manifest && this._manifest.files[filePath] !== undefined;
+    }
+
+    /**
+     * Download the pack containing this file, if any and if not already done.
+     *
+     * @returns null when there is nothing to wait for: the game was exported
+     * without packing, the file was left as an individual file, or its pack is
+     * already downloaded. Callers must not await unconditionally, so that
+     * loading a resource keeps starting synchronously.
+     */
+    ensureLoadedFor(filePath: string): Promise<void> | null {
+      const manifest = this._manifest;
+      if (!manifest) return null;
+
+      const packIndex = manifest.files[filePath];
+      if (packIndex === undefined) return null;
+
+      return this._ensurePackLoaded(packIndex);
+    }
+
+    /**
+     * Download the packs holding the resources that no loading task refers to.
+     * To be awaited before the first scene is loaded.
+     *
+     * @returns null when there is nothing to wait for.
+     */
+    ensureStartupPacksLoaded(): Promise<void> | null {
+      const manifest = this._manifest;
+      if (!manifest || !manifest.startupPacks) return null;
+
+      const loadingPromises: Array<Promise<void>> = [];
+      for (const packIndex of manifest.startupPacks) {
+        const loadingPromise = this._ensurePackLoaded(packIndex);
+        if (loadingPromise) loadingPromises.push(loadingPromise);
+      }
+      if (!loadingPromises.length) return null;
+
+      return Promise.all(loadingPromises).then(() => {});
+    }
+
+    private _ensurePackLoaded(packIndex: integer): Promise<void> | null {
+      const manifest = this._manifest;
+      if (!manifest || !manifest.packs[packIndex]) return null;
+
+      if (this._packs[packIndex]) return null;
+
+      const existingPromise = this._loadingPromises[packIndex];
+      if (existingPromise) return existingPromise;
+
+      const generation = this._generation;
+      const pack = new ResourcePack(manifest.packs[packIndex]);
+      const loadingPromise = pack
+        .load((loadedBytes, totalBytes) => {
+          if (generation !== this._generation) return;
+          this._pendingDownloads.set(packIndex, { loadedBytes, totalBytes });
+          this._reportProgress();
+        })
+        .then(() => {
+          if (generation !== this._generation) {
+            // The packs were released while this one was downloading.
+            pack.dispose();
+            return;
+          }
+          this._packs[packIndex] = pack;
+          this._pendingDownloads.delete(packIndex);
+        })
+        .catch((error) => {
+          if (generation !== this._generation) throw error;
+          // Forget the failed download, so that the retries done by the
+          // resource loader actually try again.
+          this._loadingPromises[packIndex] = null;
+          this._pendingDownloads.delete(packIndex);
+          throw error;
+        });
+
+      this._loadingPromises[packIndex] = loadingPromise;
+      return loadingPromise;
+    }
+
+    private _reportProgress(): void {
+      const onProgress = this._onProgress;
+      if (!onProgress) return;
+
+      let loadedBytes = 0;
+      let totalBytes = 0;
+      for (const pendingDownload of this._pendingDownloads.values()) {
+        loadedBytes += pendingDownload.loadedBytes;
+        totalBytes += pendingDownload.totalBytes;
+      }
+      if (totalBytes) onProgress(loadedBytes, totalBytes);
+    }
+
+    /**
+     * @returns the `blob:` URL to read this file from its pack, or null if the
+     * file is not packed or its pack is not downloaded yet.
+     */
+    getObjectUrl(filePath: string): string | null {
+      const manifest = this._manifest;
+      if (!manifest) return null;
+
+      const packIndex = manifest.files[filePath];
+      if (packIndex === undefined) return null;
+
+      const pack = this._packs[packIndex];
+      if (!pack) return null;
+
+      return pack.getObjectUrl(filePath);
+    }
+
+    /**
+     * Release every pack that holds none of the given files.
+     *
+     * Called when scenes are unloaded: as each scene has its own pack, the
+     * memory used by the archive of a scene that is not needed anymore can be
+     * given back.
+     */
+    unloadPacksWithNoFileIn(stillLoadedFilePaths: Set<string>): void {
+      for (let packIndex = 0; packIndex < this._packs.length; packIndex++) {
+        const pack = this._packs[packIndex];
+        if (!pack) continue;
+        // A pack being downloaded must not be disposed: the promise waiting for
+        // it would then resolve on a pack that gives out nothing.
+        if (this._pendingDownloads.has(packIndex)) continue;
+
+        const isStillNeeded = pack
+          .getFilePaths()
+          .some((filePath) => stillLoadedFilePaths.has(filePath));
+        if (isStillNeeded) continue;
+
+        pack.dispose();
+        this._packs[packIndex] = null;
+        this._loadingPromises[packIndex] = null;
+      }
+    }
+
+    /**
+     * Release every downloaded pack, but keep the manifest so that they are
+     * downloaded again when needed. Used when hot-reloading.
+     */
+    unloadAllPacks(): void {
+      this._generation++;
+      for (let packIndex = 0; packIndex < this._packs.length; packIndex++) {
+        const pack = this._packs[packIndex];
+        if (pack) pack.dispose();
+        this._packs[packIndex] = null;
+        this._loadingPromises[packIndex] = null;
+      }
+      this._pendingDownloads.clear();
+    }
+
+    dispose(): void {
+      this.unloadAllPacks();
+      this._manifest = null;
+      this._packs = [];
+      this._loadingPromises = [];
+    }
+  }
+}
diff --git a/GDJS/Runtime/fontfaceobserver-font-manager/fontfaceobserver-font-manager.ts b/GDJS/Runtime/fontfaceobserver-font-manager/fontfaceobserver-font-manager.ts
index 0a55f1e1e806..0ba2d24aa4ec 100644
--- a/GDJS/Runtime/fontfaceobserver-font-manager/fontfaceobserver-font-manager.ts
+++ b/GDJS/Runtime/fontfaceobserver-font-manager/fontfaceobserver-font-manager.ts
@@ -98,12 +98,13 @@ namespace gdjs {
      */
     private _loadFont(fontFamily: string, src: string): Promise<void> {
       const descriptors = {};
-      const srcWithUrl = 'url(' + encodeURI(src) + ')';
+      const fullUrl = this._resourceLoader.getFullUrl(src);
+      const srcWithUrl = 'url(' + encodeURI(fullUrl) + ')';
 
       // @ts-ignore
       if (typeof FontFace !== 'undefined') {
         // Load the given font using CSS Font Loading API.
-        return fetch(this._resourceLoader.getFullUrl(src), {
+        return fetch(fullUrl, {
           credentials: this._resourceLoader.checkIfCredentialsRequired(src)
             ? // Any resource stored on the GDevelop Cloud buckets needs the "credentials" of the user,
               // i.e: its gdevelop.io cookie, to be passed.
diff --git a/GDJS/Runtime/howler-sound-manager/howler-sound-manager.ts b/GDJS/Runtime/howler-sound-manager/howler-sound-manager.ts
index 9f6f8ba2b33d..5da2fb9ad414 100644
--- a/GDJS/Runtime/howler-sound-manager/howler-sound-manager.ts
+++ b/GDJS/Runtime/howler-sound-manager/howler-sound-manager.ts
@@ -17,6 +17,49 @@ namespace gdjs {
       logger.error('Error while loading an audio file: ' + error),
   };
 
+  /**
+   * The file extensions Howler knows how to check support for.
+   * See https://github.com/goldfire/howler.js#format-array-
+   */
+  const supportedAudioFormats = [
+    'mp3',
+    'mpeg',
+    'opus',
+    'ogg',
+    'oga',
+    'wav',
+    'aac',
+    'caf',
+    'm4a',
+    'm4b',
+    'mp4',
+    'weba',
+    'webm',
+    'dolby',
+    'flac',
+  ];
+
+  /**
+   * Howler guesses the codec of a sound from the extension of its URL. This
+   * does not work when the game resources were packed at export: the sound is
+   * then read from a `blob:` URL, which has no extension. Tell Howler the
+   * format explicitly, using the name the resource file had.
+   */
+  const getAudioFormats = (file: string): Array<string> | undefined => {
+    const lastDotIndex = file.lastIndexOf('.');
+    if (lastDotIndex === -1) return undefined;
+
+    const extension = file
+      .slice(lastDotIndex + 1)
+      .toLowerCase()
+      // A resource file can keep a search parameter when it comes from a URL.
+      .replace(/[?#].*$/, '');
+
+    return supportedAudioFormats.indexOf(extension) === -1
+      ? undefined
+      : [extension];
+  };
+
   /**
    * Ensure the volume is between 0 and 1.
    */
@@ -656,6 +699,7 @@ namespace gdjs {
         container[file] = new Howl(
           Object.assign({}, HowlParameters, {
             src: this._getSoundUrlsFromResource(resource),
+            format: getAudioFormats(resource.file),
             onload: resolve,
             onloaderror: (soundId: number, error?: string) => reject(error),
             html5: isMusic,
@@ -751,6 +795,7 @@ namespace gdjs {
           Object.assign(
             {
               src: this._getSoundUrlsFromResource(resource),
+              format: getAudioFormats(resource.file),
               html5: isMusic,
               xhr: {
                 withCredentials:
@@ -790,6 +835,7 @@ namespace gdjs {
           Object.assign(
             {
               src: this._getSoundUrlsFromResource(resource),
+              format: getAudioFormats(resource.file),
               html5: isMusic,
               xhr: {
                 withCredentials:
@@ -1104,13 +1150,16 @@ namespace gdjs {
           throw error;
         }
       } else if (
-        resource.preloadInCache ||
-        // Force downloading of sounds.
-        // TODO Decide if sounds should be allowed to be downloaded after the scene starts.
-        // - they should be requested automatically at the end of the scene loading
-        // - they will be downloaded while the scene is playing
-        // - other scenes will be pre-loaded only when all the sounds for the current scene are in cache
-        !resource.preloadAsMusic
+        // A file read from a resource pack is already in memory: requesting it
+        // to put it in the browser cache would only copy it for nothing.
+        !this._resourceLoader.isFileInResourcePack(resource.file) &&
+        (resource.preloadInCache ||
+          // Force downloading of sounds.
+          // TODO Decide if sounds should be allowed to be downloaded after the scene starts.
+          // - they should be requested automatically at the end of the scene loading
+          // - they will be downloaded while the scene is playing
+          // - other scenes will be pre-loaded only when all the sounds for the current scene are in cache
+          !resource.preloadAsMusic)
       ) {
         // preloading as sound already does a XHR request, hence "else if"
         try {
@@ -1124,7 +1173,9 @@ namespace gdjs {
                 resolve(undefined);
               } else {
                 reject(
-                  `HTTP error while preloading audio file in cache. Status is ${sound.status}.`
+                  `HTTP error while preloading audio file in cache. Status is ${
+                    sound.status
+                  }.`
                 );
               }
             });
diff --git a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts
index 7e28fb2379e8..f491fb9c59fb 100644
--- a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts
+++ b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts
@@ -426,18 +426,21 @@ namespace gdjs {
           // 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(resourceUrl, {
-              resourceOptions: {
-                crossorigin: this._resourceLoader.checkIfCredentialsRequired(
-                  resource.file
-                )
-                  ? 'use-credentials'
-                  : 'anonymous',
-                autoPlay: false,
-              },
-            }).on('error', (error) => {
-              reject(error);
+            // The resource is explicitly built as a video one: `PIXI.Texture.from`
+            // picks the kind of resource from the file extension of the URL,
+            // and there is none when the game resources were packed at export
+            // (the video is then read from a `blob:` URL).
+            const videoResource = new PIXI.VideoResource(resourceUrl, {
+              crossorigin: this._resourceLoader.checkIfCredentialsRequired(
+                resource.file
+              )
+                ? 'use-credentials'
+                : 'anonymous',
+              autoPlay: false,
             });
+            const texture = new PIXI.Texture(
+              new PIXI.BaseTexture(videoResource)
+            );
 
             const baseTexture = texture.baseTexture;
             baseTexture
diff --git a/GDJS/tests/karma.conf.js b/GDJS/tests/karma.conf.js
index f1b0da5796e3..4224d980cb36 100644
--- a/GDJS/tests/karma.conf.js
+++ b/GDJS/tests/karma.conf.js
@@ -69,6 +69,7 @@ module.exports = function (config) {
       './newIDE/app/resources/GDJS/Runtime/fontfaceobserver-font-manager/fontfaceobserver-font-manager.js',
       './newIDE/app/resources/GDJS/Runtime/Model3DManager.js',
       './newIDE/app/resources/GDJS/Runtime/jsonmanager.js',
+      './newIDE/app/resources/GDJS/Runtime/ResourcePackManager.js',
       './newIDE/app/resources/GDJS/Runtime/ResourceLoader.js',
       './newIDE/app/resources/GDJS/Runtime/ResourceCache.js',
       './newIDE/app/resources/GDJS/Runtime/timemanager.js',
diff --git a/GDJS/tests/tests/ResourcePackManager.js b/GDJS/tests/tests/ResourcePackManager.js
new file mode 100644
index 000000000000..c3b4c6dcd165
--- /dev/null
+++ b/GDJS/tests/tests/ResourcePackManager.js
@@ -0,0 +1,362 @@
+// @ts-check
+
+/**
+ * Tests for gdjs.ResourcePackManager, and its integration in gdjs.ResourceLoader.
+ *
+ * The packs read here are built exactly like the exporter builds them, see
+ * `newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.js`.
+ */
+describe('gdjs.ResourcePackManager', () => {
+  const PACK_HEADER_SIZE = 12;
+  const PACK_ALIGNMENT = 16;
+
+  const alignUp = value => {
+    const remainder = value % PACK_ALIGNMENT;
+    return remainder === 0 ? value : value + (PACK_ALIGNMENT - remainder);
+  };
+
+  /**
+   * @param {string} file
+   * @returns {ResourceData}
+   */
+  const makeResourceData = file => ({
+    kind: 'fake-resource-kind-for-testing-only',
+    name: file,
+    metadata: '',
+    file,
+    userAdded: true,
+  });
+
+  /**
+   * A scene with no resource of its own.
+   * @param {string} name
+   * @returns {LayoutData}
+   */
+  const makeEmptySceneData = name => ({
+    r: 0,
+    v: 0,
+    b: 0,
+    mangledName: name,
+    name,
+    objects: [],
+    objectsGroups: [],
+    layers: [],
+    instances: [],
+    behaviorsSharedData: [],
+    stopSoundsOnStartup: false,
+    title: '',
+    variables: [],
+    usedResources: [],
+    uiSettings: {
+      grid: false,
+      gridType: 'rectangular',
+      gridWidth: 10,
+      gridHeight: 10,
+      gridDepth: 10,
+      gridOffsetX: 0,
+      gridOffsetY: 0,
+      gridOffsetZ: 0,
+      gridColor: 0,
+      gridAlpha: 1,
+      snap: false,
+    },
+  });
+
+  /**
+   * Build a ".gdpak" archive and return an URL to download it from.
+   * @param {Array<{path: string, content: string, type: string}>} files
+   * @returns {string}
+   */
+  const createPackUrl = files => {
+    const encoder = new TextEncoder();
+    const contents = files.map(file => encoder.encode(file.content));
+
+    // The offsets depend on the length of the index, which depends on the
+    // offsets: grow the index until it settles.
+    let indexByteLength = 0;
+    let indexJson = '';
+    const entries = files.map((file, index) => ({
+      path: file.path,
+      offset: 0,
+      size: contents[index].length,
+      type: file.type,
+    }));
+    for (let attempt = 0; attempt < 8; attempt++) {
+      let offset = alignUp(PACK_HEADER_SIZE + indexByteLength);
+      for (const entry of entries) {
+        entry.offset = offset;
+        offset = alignUp(offset + entry.size);
+      }
+      indexJson = JSON.stringify({ files: entries });
+      const newIndexByteLength = encoder.encode(indexJson).length;
+      if (newIndexByteLength <= indexByteLength) break;
+      indexByteLength = newIndexByteLength;
+    }
+
+    const contentStart = alignUp(PACK_HEADER_SIZE + indexByteLength);
+    const packBytes = new Uint8Array(
+      entries.length
+        ? alignUp(
+            entries[entries.length - 1].offset +
+              entries[entries.length - 1].size
+          )
+        : contentStart
+    );
+    packBytes.set(encoder.encode('GDPK'), 0);
+    const view = new DataView(packBytes.buffer);
+    view.setUint32(4, 1, true);
+    view.setUint32(8, indexByteLength, true);
+    packBytes.set(
+      encoder.encode(
+        indexJson +
+          ' '.repeat(indexByteLength - encoder.encode(indexJson).length)
+      ),
+      PACK_HEADER_SIZE
+    );
+    entries.forEach((entry, index) => {
+      packBytes.set(contents[index], entry.offset);
+    });
+
+    return URL.createObjectURL(
+      new Blob([packBytes], { type: 'application/octet-stream' })
+    );
+  };
+
+  /** @type {Array<string>} */
+  let createdUrls = [];
+
+  const createPackedGame = (files, extraResourceFiles = []) => {
+    const packUrl = createPackUrl(files);
+    createdUrls.push(packUrl);
+
+    gdjs.resourcePacks = {
+      version: 1,
+      packs: [packUrl],
+      files: files.reduce((filesMap, file) => {
+        filesMap[file.path] = 0;
+        return filesMap;
+      }, {}),
+    };
+
+    const allFiles = [...files.map(({ path }) => path), ...extraResourceFiles];
+    return gdjs.getPixiRuntimeGame({
+      resources: {
+        resources: allFiles.map(filePath => ({
+          kind: 'fake-resource-kind-for-testing-only',
+          name: filePath,
+          metadata: '',
+          file: filePath,
+          userAdded: true,
+        })),
+      },
+    });
+  };
+
+  afterEach(() => {
+    gdjs.resourcePacks = null;
+    createdUrls.forEach(url => URL.revokeObjectURL(url));
+    createdUrls = [];
+  });
+
+  it('reads a file back from a pack, keeping its content and its MIME type', async () => {
+    const runtimeGame = createPackedGame([
+      { path: 'a.png', content: 'content of a', type: 'image/png' },
+      { path: 'b.mp3', content: 'the content of b', type: 'audio/mpeg' },
+    ]);
+    const resourceLoader = runtimeGame.getResourceLoader();
+
+    await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+
+    const aUrl = resourceLoader.getFullUrl('a.png');
+    expect(aUrl.startsWith('blob:')).to.be(true);
+    const aResponse = await fetch(aUrl);
+    expect(await aResponse.text()).to.be('content of a');
+    expect(aResponse.headers.get('Content-Type')).to.be('image/png');
+
+    // Every file of the pack is available once it is downloaded.
+    const bResponse = await fetch(resourceLoader.getFullUrl('b.mp3'));
+    expect(await bResponse.text()).to.be('the content of b');
+    expect(bResponse.headers.get('Content-Type')).to.be('audio/mpeg');
+  });
+
+  it('hands out the same URL for a file, so that caches stay valid', async () => {
+    const runtimeGame = createPackedGame([
+      { path: 'a.png', content: 'content of a', type: 'image/png' },
+    ]);
+    const resourceLoader = runtimeGame.getResourceLoader();
+    await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+
+    expect(resourceLoader.getFullUrl('a.png')).to.be(
+      resourceLoader.getFullUrl('a.png')
+    );
+  });
+
+  it('downloads a pack only once, even for concurrent requests', async () => {
+    const runtimeGame = createPackedGame([
+      { path: 'a.png', content: 'content of a', type: 'image/png' },
+      { path: 'b.png', content: 'content of b', type: 'image/png' },
+    ]);
+    const resourceLoader = runtimeGame.getResourceLoader();
+
+    await Promise.all([
+      resourceLoader.ensurePackLoadedFor(makeResourceData('a.png')),
+      resourceLoader.ensurePackLoadedFor(makeResourceData('b.png')),
+      resourceLoader.ensurePackLoadedFor(makeResourceData('a.png')),
+    ]);
+
+    // Both files come from the same downloaded archive.
+    expect(
+      await (await fetch(resourceLoader.getFullUrl('a.png'))).text()
+    ).to.be('content of a');
+    expect(
+      await (await fetch(resourceLoader.getFullUrl('b.png'))).text()
+    ).to.be('content of b');
+  });
+
+  it('leaves the files that were not packed alone', async () => {
+    const runtimeGame = createPackedGame(
+      [{ path: 'a.png', content: 'content of a', type: 'image/png' }],
+      ['loading-screen.png']
+    );
+    const resourceLoader = runtimeGame.getResourceLoader();
+
+    expect(resourceLoader.isFileInResourcePack('a.png')).to.be(true);
+    expect(resourceLoader.isFileInResourcePack('loading-screen.png')).to.be(
+      false
+    );
+
+    // A file left out of the packs keeps being downloaded on its own.
+    await resourceLoader.ensurePackLoadedFor(
+      makeResourceData('loading-screen.png')
+    );
+    expect(resourceLoader.getFullUrl('loading-screen.png')).to.be(
+      'loading-screen.png'
+    );
+  });
+
+  it('does nothing for a game exported without packed resources', async () => {
+    gdjs.resourcePacks = null;
+    const runtimeGame = gdjs.getPixiRuntimeGame({
+      resources: {
+        resources: [
+          {
+            kind: 'fake-resource-kind-for-testing-only',
+            name: 'a.png',
+            metadata: '',
+            file: 'a.png',
+            userAdded: true,
+          },
+        ],
+      },
+    });
+    const resourceLoader = runtimeGame.getResourceLoader();
+
+    await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+    expect(resourceLoader.isFileInResourcePack('a.png')).to.be(false);
+    expect(resourceLoader.getFullUrl('a.png')).to.be('a.png');
+  });
+
+  it('releases the packs when all the resources are unloaded', async () => {
+    const runtimeGame = createPackedGame([
+      { path: 'a.png', content: 'content of a', type: 'image/png' },
+    ]);
+    const resourceLoader = runtimeGame.getResourceLoader();
+    await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+
+    const urlBeforeUnload = resourceLoader.getFullUrl('a.png');
+    expect(urlBeforeUnload.startsWith('blob:')).to.be(true);
+
+    resourceLoader.unloadAllResources();
+
+    // The archive is not held in memory anymore...
+    expect(resourceLoader.getFullUrl('a.png')).to.be('a.png');
+    // ...but the game knows it can download it again.
+    expect(resourceLoader.isFileInResourcePack('a.png')).to.be(true);
+
+    await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+    const response = await fetch(resourceLoader.getFullUrl('a.png'));
+    expect(await response.text()).to.be('content of a');
+  });
+
+  it('downloads the startup packs before the first scene, for resources no scene refers to', async () => {
+    // A sound played by name from an expression is in no `usedResources` list,
+    // so nothing triggers the download of its pack - and the sound manager asks
+    // for its URL synchronously when it is played. Without the startup packs,
+    // the game would ask the server for a file that is not there anymore.
+    const packUrl = createPackUrl([
+      { path: 'dynamic.wav', content: 'the sound', type: 'audio/wav' },
+    ]);
+    createdUrls.push(packUrl);
+    gdjs.resourcePacks = {
+      version: 1,
+      packs: [packUrl],
+      files: { 'dynamic.wav': 0 },
+      startupPacks: [0],
+    };
+
+    const runtimeGame = gdjs.getPixiRuntimeGame({
+      layouts: [makeEmptySceneData('Scene1')],
+      resources: {
+        resources: [
+          {
+            kind: 'audio',
+            name: 'dynamicSound',
+            metadata: '',
+            file: 'dynamic.wav',
+            userAdded: true,
+          },
+        ],
+      },
+    });
+    const resourceLoader = runtimeGame.getResourceLoader();
+
+    // Before the game starts, the pack is not downloaded yet.
+    expect(resourceLoader.getFullUrl('dynamic.wav')).to.be('dynamic.wav');
+
+    await runtimeGame.loadFirstAssetsAndStartBackgroundLoading('Scene1');
+
+    const url = resourceLoader.getFullUrl('dynamic.wav');
+    expect(url.startsWith('blob:')).to.be(true);
+    expect(await (await fetch(url)).text()).to.be('the sound');
+  });
+
+  it('fails clearly when a pack cannot be downloaded, and allows retrying', async () => {
+    gdjs.resourcePacks = {
+      version: 1,
+      packs: ['this-pack-does-not-exist.gdpak'],
+      files: { 'a.png': 0 },
+    };
+    const runtimeGame = gdjs.getPixiRuntimeGame({
+      resources: {
+        resources: [
+          {
+            kind: 'fake-resource-kind-for-testing-only',
+            name: 'a.png',
+            metadata: '',
+            file: 'a.png',
+            userAdded: true,
+          },
+        ],
+      },
+    });
+    const resourceLoader = runtimeGame.getResourceLoader();
+
+    let firstError = null;
+    try {
+      await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+    } catch (error) {
+      firstError = error;
+    }
+    expect(firstError).not.to.be(null);
+
+    // The failed download must not be remembered, otherwise the retries done by
+    // the resource loader would all resolve to the same failure.
+    let secondError = null;
+    try {
+      await resourceLoader.ensurePackLoadedFor(makeResourceData('a.png'));
+    } catch (error) {
+      secondError = error;
+    }
+    expect(secondError).not.to.be(null);
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserCordovaExport.js b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserCordovaExport.js
index be8bc7c868c8..e76b74c3e21a 100644
--- a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserCordovaExport.js
+++ b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserCordovaExport.js
@@ -11,6 +11,7 @@ import {
   downloadUrlFilesToBlobFiles,
   archiveFiles,
 } from '../../Utils/BrowserArchiver';
+import { packResourcesInBlobFiles } from '../ResourcePacking/BrowserResourcePacker';
 import {
   type ExportFlowProps,
   type ExportPipeline,
@@ -135,14 +136,27 @@ export const browserCordovaExportPipeline: ExportPipeline<
     }));
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { textFiles, blobFiles }: ResourcesDownloadOutput
   ): Promise<Blob> => {
+    const basePath = '/export/';
+
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    const filesToArchive = context.packResources
+      ? await packResourcesInBlobFiles({
+          textFiles,
+          blobFiles,
+          basePath: basePath + 'www/',
+          onProgress: context.updateStepProgress,
+        })
+      : { textFiles, blobFiles };
+
     return archiveFiles({
-      blobFiles,
-      textFiles,
-      basePath: '/export/',
+      blobFiles: filesToArchive.blobFiles,
+      textFiles: filesToArchive.textFiles,
+      basePath,
       onProgress: context.updateStepProgress,
     });
   },
diff --git a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserElectronExport.js b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserElectronExport.js
index a830f414961e..26d38f5ca3be 100644
--- a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserElectronExport.js
+++ b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserElectronExport.js
@@ -11,6 +11,7 @@ import {
   downloadUrlFilesToBlobFiles,
   archiveFiles,
 } from '../../Utils/BrowserArchiver';
+import { packResourcesInBlobFiles } from '../ResourcePacking/BrowserResourcePacker';
 import {
   type ExportFlowProps,
   type ExportPipeline,
@@ -135,14 +136,27 @@ export const browserElectronExportPipeline: ExportPipeline<
     }));
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { textFiles, blobFiles }: ResourcesDownloadOutput
   ): Promise<Blob> => {
+    const basePath = '/export/';
+
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    const filesToArchive = context.packResources
+      ? await packResourcesInBlobFiles({
+          textFiles,
+          blobFiles,
+          basePath: basePath + 'app/',
+          onProgress: context.updateStepProgress,
+        })
+      : { textFiles, blobFiles };
+
     return archiveFiles({
-      blobFiles,
-      textFiles,
-      basePath: '/export/',
+      blobFiles: filesToArchive.blobFiles,
+      textFiles: filesToArchive.textFiles,
+      basePath,
       onProgress: context.updateStepProgress,
     });
   },
diff --git a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserFacebookInstantGamesExport.js b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserFacebookInstantGamesExport.js
index 7a8c65a2694e..e6d8ced5dd04 100644
--- a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserFacebookInstantGamesExport.js
+++ b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserFacebookInstantGamesExport.js
@@ -11,6 +11,7 @@ import {
   downloadUrlFilesToBlobFiles,
   archiveFiles,
 } from '../../Utils/BrowserArchiver';
+import { packResourcesInBlobFiles } from '../ResourcePacking/BrowserResourcePacker';
 import {
   type ExportFlowProps,
   type ExportPipeline,
@@ -136,14 +137,27 @@ export const browserFacebookInstantGamesExportPipeline: ExportPipeline<
     }));
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { textFiles, blobFiles }: ResourcesDownloadOutput
   ): Promise<Blob> => {
+    const basePath = '/export/';
+
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    const filesToArchive = context.packResources
+      ? await packResourcesInBlobFiles({
+          textFiles,
+          blobFiles,
+          basePath: basePath + '',
+          onProgress: context.updateStepProgress,
+        })
+      : { textFiles, blobFiles };
+
     return archiveFiles({
-      blobFiles,
-      textFiles,
-      basePath: '/export/',
+      blobFiles: filesToArchive.blobFiles,
+      textFiles: filesToArchive.textFiles,
+      basePath,
       onProgress: context.updateStepProgress,
     });
   },
diff --git a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserHTML5Export.js b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserHTML5Export.js
index f6c1f7aa9c65..cdf2172bcc23 100644
--- a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserHTML5Export.js
+++ b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserHTML5Export.js
@@ -26,6 +26,7 @@ import {
   DoneFooter,
   ExportFlow,
 } from '../GenericExporters/HTML5Export';
+import { packResourcesInBlobFiles } from '../ResourcePacking/BrowserResourcePacker';
 
 const gd: libGDevelop = global.gd;
 
@@ -133,14 +134,27 @@ export const browserHTML5ExportPipeline: ExportPipeline<
     }));
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { textFiles, blobFiles }: ResourcesDownloadOutput
   ): Promise<Blob> => {
+    const basePath = '/export/';
+
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the zip stays below the file count limit of hosting services.
+    const filesToArchive = context.packResources
+      ? await packResourcesInBlobFiles({
+          textFiles,
+          blobFiles,
+          basePath,
+          onProgress: context.updateStepProgress,
+        })
+      : { textFiles, blobFiles };
+
     return archiveFiles({
-      blobFiles,
-      textFiles,
-      basePath: '/export/',
+      blobFiles: filesToArchive.blobFiles,
+      textFiles: filesToArchive.textFiles,
+      basePath,
       onProgress: context.updateStepProgress,
     });
   },
diff --git a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserOnlineWebExport.js b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserOnlineWebExport.js
index 0f4007c19287..6a8f0f21b6a1 100644
--- a/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserOnlineWebExport.js
+++ b/newIDE/app/src/ExportAndShare/BrowserExporters/BrowserOnlineWebExport.js
@@ -17,6 +17,7 @@ import {
   downloadUrlFilesToBlobFiles,
   archiveFiles,
 } from '../../Utils/BrowserArchiver';
+import { packResourcesInBlobFiles } from '../ResourcePacking/BrowserResourcePacker';
 import {
   type ExportPipeline,
   type ExportPipelineContext,
@@ -135,14 +136,27 @@ export const browserOnlineWebExportPipeline: ExportPipeline<
     }));
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { textFiles, blobFiles }: ResourcesDownloadOutput
   ): Promise<Blob> => {
+    const basePath = '/export/';
+
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    const filesToArchive = context.packResources
+      ? await packResourcesInBlobFiles({
+          textFiles,
+          blobFiles,
+          basePath: basePath + '',
+          onProgress: context.updateStepProgress,
+        })
+      : { textFiles, blobFiles };
+
     return archiveFiles({
-      blobFiles,
-      textFiles,
-      basePath: '/export/',
+      blobFiles: filesToArchive.blobFiles,
+      textFiles: filesToArchive.textFiles,
+      basePath,
       onProgress: context.updateStepProgress,
       sizeLimit: 250 * 1000 * 1000,
     });
diff --git a/newIDE/app/src/ExportAndShare/ExportPipeline.flow.js b/newIDE/app/src/ExportAndShare/ExportPipeline.flow.js
index 59a305e1dcef..243a4900bea9 100644
--- a/newIDE/app/src/ExportAndShare/ExportPipeline.flow.js
+++ b/newIDE/app/src/ExportAndShare/ExportPipeline.flow.js
@@ -13,6 +13,11 @@ export type ExportPipelineContext<ExportState> = {|
   exportState: ExportState,
   updateStepProgress: (count: number, total: number) => void,
   i18n: I18nType,
+  /**
+   * Gather the game resources into a few ".gdpak" archives instead of leaving
+   * one file per resource (see `ResourcePacking`). Comes from the preferences.
+   */
+  packResources: boolean,
 |};
 
 export type HeaderProps<ExportState> = {|
diff --git a/newIDE/app/src/ExportAndShare/Headless/ExportLocalHtml5Headless.js b/newIDE/app/src/ExportAndShare/Headless/ExportLocalHtml5Headless.js
index e279e012b60e..72a0602bacbf 100644
--- a/newIDE/app/src/ExportAndShare/Headless/ExportLocalHtml5Headless.js
+++ b/newIDE/app/src/ExportAndShare/Headless/ExportLocalHtml5Headless.js
@@ -29,6 +29,12 @@ type Options = {|
   project: gdProject,
   i18n: I18nType,
   outputDir?: string,
+  /**
+   * Gather the game resources into a few ".gdpak" archives, so that the export
+   * stays below the file count limit of hosting services. On by default, as
+   * the preference is in the editor.
+   */
+  packResources?: boolean,
 |};
 
 type Result = {| outputDir: string |};
@@ -38,6 +44,7 @@ export const exportLocalHtml5Headless = async ({
   project,
   i18n,
   outputDir,
+  packResources = true,
 }: Options): Promise<Result> => {
   const resolvedOutputDir = outputDir || resolveHtml5OutputDir(project);
   project.setLastCompilationDirectory(resolvedOutputDir);
@@ -47,6 +54,7 @@ export const exportLocalHtml5Headless = async ({
     exportState: { outputDir: resolvedOutputDir },
     updateStepProgress: (count: number, total: number) => {},
     i18n,
+    packResources,
   };
 
   const preparedExporter = await localHTML5ExportPipeline.prepareExporter(
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalCordovaExport.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalCordovaExport.js
index 489c121a72f7..f6f31bf39f05 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalCordovaExport.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalCordovaExport.js
@@ -20,12 +20,14 @@ import {
   ExportFlow,
 } from '../GenericExporters/CordovaExport';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 // It's important to use remote and not electron for folder actions,
 // otherwise they will be opened in the background.
 // See https://github.com/electron/electron/issues/4349#issuecomment-777475765
 const remote = optionalRequire('@electron/remote');
 const shell = remote ? remote.shell : null;
 
+const path = optionalRequire('path');
 const gd: libGDevelop = global.gd;
 
 type ExportState = {
@@ -161,11 +163,21 @@ export const localCordovaExportPipeline: ExportPipeline<
     return null;
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     exportOutput: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
-    return Promise.resolve(null);
+    // The export is a folder, so there is nothing to compress. This is where
+    // the resources are gathered into a few ".gdpak" archives instead, now
+    // that the ones stored as URLs have been downloaded.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: path.join(context.exportState.outputDir, 'www'),
+        onProgress: context.updateStepProgress,
+      });
+    }
+
+    return null;
   },
 
   renderDoneFooter: ({ exportState }) => {
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalElectronExport.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalElectronExport.js
index 051664af8749..952f6474a952 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalElectronExport.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalElectronExport.js
@@ -20,12 +20,14 @@ import {
   ExportFlow,
 } from '../GenericExporters/ElectronExport';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 // It's important to use remote and not electron for folder actions,
 // otherwise they will be opened in the background.
 // See https://github.com/electron/electron/issues/4349#issuecomment-777475765
 const remote = optionalRequire('@electron/remote');
 const shell = remote ? remote.shell : null;
 
+const path = optionalRequire('path');
 const gd: libGDevelop = global.gd;
 
 type ExportState = {
@@ -161,11 +163,21 @@ export const localElectronExportPipeline: ExportPipeline<
     return null;
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     exportOutput: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
-    return Promise.resolve(null);
+    // The export is a folder, so there is nothing to compress. This is where
+    // the resources are gathered into a few ".gdpak" archives instead, now
+    // that the ones stored as URLs have been downloaded.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: path.join(context.exportState.outputDir, 'app'),
+        onProgress: context.updateStepProgress,
+      });
+    }
+
+    return null;
   },
 
   renderDoneFooter: ({ exportState }) => {
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalFacebookInstantGamesExport.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalFacebookInstantGamesExport.js
index 9df9bc6dac28..9c537e290dcf 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalFacebookInstantGamesExport.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalFacebookInstantGamesExport.js
@@ -21,6 +21,7 @@ import {
   ExportFlow,
 } from '../GenericExporters/FacebookInstantGamesExport';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 
 const path = optionalRequire('path');
 // It's important to use remote and not electron for folder actions,
@@ -184,10 +185,19 @@ export const localFacebookInstantGamesExportPipeline: ExportPipeline<
     return { temporaryOutputDir };
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { temporaryOutputDir }: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: temporaryOutputDir,
+        onProgress: context.updateStepProgress,
+      });
+    }
+
     return archiveLocalFolder({
       path: temporaryOutputDir,
       outputFilename: context.exportState.archiveOutputFilename,
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalHTML5Export.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalHTML5Export.js
index f1730ca25355..15b8c41a79fa 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalHTML5Export.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalHTML5Export.js
@@ -20,6 +20,7 @@ import {
   ExportFlow,
 } from '../GenericExporters/HTML5Export';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 import DismissableTutorialMessage from '../../Hints/DismissableTutorialMessage';
 
 // It's important to use remote and not electron for folder actions,
@@ -163,11 +164,21 @@ export const localHTML5ExportPipeline: ExportPipeline<
     return null;
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     exportOutput: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
-    return Promise.resolve(null);
+    // The export is a folder, so there is nothing to compress. This is where
+    // the resources are gathered into a few ".gdpak" archives instead, now
+    // that the ones stored as URLs have been downloaded.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: context.exportState.outputDir,
+        onProgress: context.updateStepProgress,
+      });
+    }
+
+    return null;
   },
 
   renderDoneFooter: ({ exportState }) => {
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineCordovaExport.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineCordovaExport.js
index e785f7f05c5c..b864f24d7c32 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineCordovaExport.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineCordovaExport.js
@@ -24,6 +24,7 @@ import {
   ExportFlow,
 } from '../GenericExporters/OnlineCordovaExport';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 
 const path = optionalRequire('path');
 const os = optionalRequire('os');
@@ -161,10 +162,19 @@ export const localOnlineCordovaExportPipeline: ExportPipeline<
     return { temporaryOutputDir };
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { temporaryOutputDir }: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: path.join(temporaryOutputDir, 'www'),
+        onProgress: context.updateStepProgress,
+      });
+    }
+
     const archiveOutputDir = os.tmpdir();
     return archiveLocalFolder({
       path: temporaryOutputDir,
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineElectronExport.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineElectronExport.js
index 1bb682e5984f..eeb0ec31640d 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineElectronExport.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineElectronExport.js
@@ -24,6 +24,7 @@ import {
   ExportFlow,
 } from '../GenericExporters/OnlineElectronExport';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 
 const path = optionalRequire('path');
 const os = optionalRequire('os');
@@ -157,10 +158,19 @@ export const localOnlineElectronExportPipeline: ExportPipeline<
     return { temporaryOutputDir };
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { temporaryOutputDir }: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: path.join(temporaryOutputDir, 'app'),
+        onProgress: context.updateStepProgress,
+      });
+    }
+
     const archiveOutputDir = os.tmpdir();
     return archiveLocalFolder({
       path: temporaryOutputDir,
diff --git a/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineWebExport.js b/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineWebExport.js
index 237f5bb0be4f..3e527394e5a3 100644
--- a/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineWebExport.js
+++ b/newIDE/app/src/ExportAndShare/LocalExporters/LocalOnlineWebExport.js
@@ -20,6 +20,7 @@ import {
 } from '../ExportPipeline.flow';
 import { ExplanationHeader } from '../GenericExporters/OnlineWebExport';
 import { downloadUrlsToLocalFiles } from '../../Utils/LocalFileDownloader';
+import { packResourcesInFolder } from '../ResourcePacking/LocalResourcePacker';
 import OnlineWebExportFlow from '../GenericExporters/OnlineWebExport/OnlineWebExportFlow';
 
 const path = optionalRequire('path');
@@ -148,10 +149,19 @@ export const localOnlineWebExportPipeline: ExportPipeline<
     return { temporaryOutputDir };
   },
 
-  launchCompression: (
+  launchCompression: async (
     context: ExportPipelineContext<ExportState>,
     { temporaryOutputDir }: ResourcesDownloadOutput
   ): Promise<CompressionOutput> => {
+    // Gather the resources into a few ".gdpak" archives before zipping, so
+    // that the archive holds a few files rather than one per resource.
+    if (context.packResources) {
+      await packResourcesInFolder({
+        exportDir: temporaryOutputDir,
+        onProgress: context.updateStepProgress,
+      });
+    }
+
     const archiveOutputDir = os.tmpdir();
     return archiveLocalFolder({
       path: temporaryOutputDir,
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/BrowserResourcePacker.js b/newIDE/app/src/ExportAndShare/ResourcePacking/BrowserResourcePacker.js
new file mode 100644
index 000000000000..6e3380030226
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/BrowserResourcePacker.js
@@ -0,0 +1,124 @@
+// @flow
+import path from 'path-browserify';
+import { buildPackLayout } from './PackFormat';
+import {
+  RESOURCE_KINDS_NEVER_PACKED,
+  appendResourcePacksManifestToDataJs,
+  buildResourcePacksManifest,
+  planResourcePacks,
+  readProjectDataFromDataJs,
+} from './index';
+import {
+  type BlobFileDescriptor,
+  type TextFileDescriptor,
+} from '../../Utils/BrowserArchiver';
+
+// See BrowserFileSystem for why `path.posix` is not used directly.
+const pathPosix = path.posix || path;
+
+type Args = {|
+  textFiles: Array<TextFileDescriptor>,
+  blobFiles: Array<BlobFileDescriptor>,
+  basePath: string,
+  onProgress: (count: number, total: number) => void,
+|};
+
+type Output = {|
+  textFiles: Array<TextFileDescriptor>,
+  blobFiles: Array<BlobFileDescriptor>,
+|};
+
+/**
+ * Replace the individual resource files of an exported game by a handful of
+ * ".gdpak" archives, so that the game can be uploaded to services limiting the
+ * number of files in an archive (itch.io allows 1000).
+ *
+ * Nothing is read back into memory: a pack is a `Blob` built from the blobs of
+ * the files it contains, which the browser keeps where they already are.
+ */
+export const packResourcesInBlobFiles = async ({
+  textFiles,
+  blobFiles,
+  basePath,
+  onProgress,
+}: Args): Promise<Output> => {
+  const dataJsFilePath = pathPosix.join(basePath, 'data.js');
+  const dataJsFile = textFiles.find(
+    ({ filePath }) => filePath === dataJsFilePath
+  );
+  if (!dataJsFile) {
+    throw new Error(
+      `Could not find "${dataJsFilePath}" in the exported game, so its resources can't be packed.`
+    );
+  }
+
+  const plan = planResourcePacks(readProjectDataFromDataJs(dataJsFile.text), {
+    excludedResourceKinds: RESOURCE_KINDS_NEVER_PACKED,
+  });
+  if (!plan.packs.length) return { textFiles, blobFiles };
+
+  const blobByRelativePath: Map<string, Blob> = new Map();
+  blobFiles.forEach(({ filePath, blob }) => {
+    blobByRelativePath.set(pathPosix.relative(basePath, filePath), blob);
+  });
+
+  const packedFilePaths: Set<string> = new Set();
+  const packBlobFiles: Array<BlobFileDescriptor> = [];
+  let packedCount = 0;
+
+  for (const pack of plan.packs) {
+    const contents: Array<{| filePath: string, blob: Blob |}> = [];
+    pack.filePaths.forEach(filePath => {
+      const blob = blobByRelativePath.get(filePath);
+      // A resource can be missing when the project references a file that was
+      // not exported. The engine already copes with a missing resource, so skip
+      // it rather than failing the whole export.
+      if (blob) contents.push({ filePath, blob });
+    });
+
+    packedCount++;
+    onProgress(packedCount, plan.packs.length);
+    // Writing an empty archive would only waste a file. Nothing refers to it,
+    // as the manifest is built from the files that were really packed.
+    if (!contents.length) continue;
+
+    const layout = buildPackLayout(
+      contents.map(({ filePath, blob }) => ({ filePath, size: blob.size }))
+    );
+
+    const parts: Array<Blob | Uint8Array> = [layout.headerBytes];
+    layout.entries.forEach((entry, index) => {
+      parts.push(contents[index].blob);
+      if (layout.paddings[index] > 0) {
+        parts.push(new Uint8Array(layout.paddings[index]));
+      }
+    });
+
+    packBlobFiles.push({
+      filePath: pathPosix.join(basePath, pack.name),
+      blob: new Blob(parts, { type: 'application/octet-stream' }),
+    });
+    contents.forEach(({ filePath }) => packedFilePaths.add(filePath));
+  }
+
+  // The files that made it into a pack must not be exported on their own
+  // anymore - that is the whole point.
+  const remainingBlobFiles = blobFiles.filter(
+    ({ filePath }) =>
+      !packedFilePaths.has(pathPosix.relative(basePath, filePath))
+  );
+
+  const manifest = buildResourcePacksManifest(plan, packedFilePaths);
+
+  return {
+    textFiles: textFiles.map(textFile =>
+      textFile.filePath === dataJsFilePath
+        ? {
+            filePath: textFile.filePath,
+            text: appendResourcePacksManifestToDataJs(textFile.text, manifest),
+          }
+        : textFile
+    ),
+    blobFiles: [...remainingBlobFiles, ...packBlobFiles],
+  };
+};
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/BrowserResourcePacker.spec.js b/newIDE/app/src/ExportAndShare/ResourcePacking/BrowserResourcePacker.spec.js
new file mode 100644
index 000000000000..c1496b82b97c
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/BrowserResourcePacker.spec.js
@@ -0,0 +1,186 @@
+// @flow
+import { packResourcesInBlobFiles } from './BrowserResourcePacker';
+import { parsePackIndex } from './PackFormat';
+import { readProjectDataFromDataJs } from './index';
+
+const BASE_PATH = '/export/';
+
+// The test environment has no `Blob`, while the browser this code runs in
+// always has one. Node's implementation supports everything used here
+// (`size`, `slice`, `text`, `arrayBuffer`, and Blobs as constructor parts).
+beforeAll(() => {
+  if (typeof global.Blob === 'undefined') {
+    global.Blob = require('buffer').Blob;
+  }
+});
+
+const makeDataJs = (projectData: Object) =>
+  'gdjs.projectData = ' +
+  JSON.stringify(projectData) +
+  ';\ngdjs.runtimeGameOptions = {};\n';
+
+const makeResource = (name: string, file: string, kind: string = 'image') => ({
+  name,
+  file,
+  kind,
+  metadata: '',
+  userAdded: true,
+});
+
+const readFromPack = async (packBlob: Blob, filePath: string) => {
+  const packBytes = new Uint8Array(await packBlob.arrayBuffer());
+  const entry = parsePackIndex(packBytes).entries.find(
+    entry => entry.path === filePath
+  );
+  if (!entry) throw new Error(`"${filePath}" is not in this pack.`);
+
+  return {
+    text: await packBlob.slice(entry.offset, entry.offset + entry.size).text(),
+    type: entry.type,
+  };
+};
+
+describe('packResourcesInBlobFiles', () => {
+  const projectData = {
+    properties: { loadingScreen: { backgroundImageResourceName: 'splash' } },
+    resources: {
+      resources: [
+        makeResource('global', 'global.png'),
+        makeResource('music', 'music.mp3', 'audio'),
+        makeResource('menu', 'menu.png'),
+        makeResource('splash', 'splash.png'),
+      ],
+    },
+    usedResources: [{ name: 'global' }, { name: 'music' }],
+    objects: [],
+    layouts: [{ name: 'Menu', usedResources: [{ name: 'menu' }], objects: [] }],
+  };
+
+  const makeInput = () => ({
+    textFiles: [
+      { filePath: '/export/data.js', text: makeDataJs(projectData) },
+      { filePath: '/export/runtimegame.js', text: 'gdjs.RuntimeGame = ...' },
+    ],
+    blobFiles: [
+      { filePath: '/export/global.png', blob: new Blob(['the global image']) },
+      { filePath: '/export/music.mp3', blob: new Blob(['the music']) },
+      { filePath: '/export/menu.png', blob: new Blob(['the menu image']) },
+      { filePath: '/export/splash.png', blob: new Blob(['the splash image']) },
+      // A binary engine file, which must be left alone.
+      {
+        filePath: '/export/pixi-renderers/draco/gltf/draco_decoder.wasm',
+        blob: new Blob(['not a resource']),
+      },
+    ],
+    basePath: BASE_PATH,
+    onProgress: (count: number, total: number) => {},
+  });
+
+  it('replaces the resource blobs by packs, leaving the engine files alone', async () => {
+    const { textFiles, blobFiles } = await packResourcesInBlobFiles(
+      makeInput()
+    );
+
+    expect(blobFiles.map(({ filePath }) => filePath).sort()).toEqual([
+      // The loading screen background is needed before the loading screen can
+      // be shown, so it stays an individual file.
+      '/export/pixi-renderers/draco/gltf/draco_decoder.wasm',
+      '/export/resources.gdpak',
+      '/export/scene-0.gdpak',
+      '/export/splash.png',
+    ]);
+    // Text files are untouched, apart from data.js.
+    expect(
+      textFiles.find(({ filePath }) => filePath === '/export/runtimegame.js')
+        ?.text
+    ).toBe('gdjs.RuntimeGame = ...');
+  });
+
+  it('writes contents that can be read back, with their MIME type', async () => {
+    const { blobFiles } = await packResourcesInBlobFiles(makeInput());
+
+    const globalPack = blobFiles.find(
+      ({ filePath }) => filePath === '/export/resources.gdpak'
+    );
+    if (!globalPack) throw new Error('The global pack was not written.');
+
+    expect(await readFromPack(globalPack.blob, 'global.png')).toEqual({
+      text: 'the global image',
+      type: 'image/png',
+    });
+    expect(await readFromPack(globalPack.blob, 'music.mp3')).toEqual({
+      text: 'the music',
+      type: 'audio/mpeg',
+    });
+
+    const scenePack = blobFiles.find(
+      ({ filePath }) => filePath === '/export/scene-0.gdpak'
+    );
+    if (!scenePack) throw new Error('The scene pack was not written.');
+    expect(await readFromPack(scenePack.blob, 'menu.png')).toEqual({
+      text: 'the menu image',
+      type: 'image/png',
+    });
+  });
+
+  it('declares the packs in data.js without touching the project data', async () => {
+    const { textFiles } = await packResourcesInBlobFiles(makeInput());
+
+    const dataJs = textFiles.find(
+      ({ filePath }) => filePath === '/export/data.js'
+    );
+    if (!dataJs) throw new Error('data.js is missing.');
+
+    expect(readProjectDataFromDataJs(dataJs.text)).toEqual(projectData);
+
+    const manifest = JSON.parse(
+      dataJs.text
+        .slice(
+          dataJs.text.indexOf('gdjs.resourcePacks = ') +
+            'gdjs.resourcePacks = '.length
+        )
+        .trim()
+        .replace(/;$/, '')
+    );
+    expect(manifest).toEqual({
+      version: 1,
+      packs: ['resources.gdpak', 'scene-0.gdpak'],
+      files: { 'global.png': 0, 'music.mp3': 0, 'menu.png': 1 },
+      // The global pack must be downloaded up front, as it holds the resources
+      // that no loading task refers to.
+      startupPacks: [0],
+    });
+  });
+
+  it('leaves the export untouched when there is nothing to pack', async () => {
+    const emptyProjectData = {
+      properties: { loadingScreen: { backgroundImageResourceName: '' } },
+      resources: { resources: [] },
+      usedResources: [],
+      objects: [],
+      layouts: [],
+    };
+    const { textFiles, blobFiles } = await packResourcesInBlobFiles({
+      textFiles: [
+        { filePath: '/export/data.js', text: makeDataJs(emptyProjectData) },
+      ],
+      blobFiles: [],
+      basePath: BASE_PATH,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    expect(blobFiles).toEqual([]);
+    expect(textFiles[0].text).not.toContain('gdjs.resourcePacks');
+  });
+
+  it('fails clearly when data.js is not in the export', async () => {
+    await expect(
+      packResourcesInBlobFiles({
+        textFiles: [],
+        blobFiles: [],
+        basePath: BASE_PATH,
+        onProgress: (count: number, total: number) => {},
+      })
+    ).rejects.toThrow(/Could not find "\/export\/data.js"/);
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/FullExport.spec.js b/newIDE/app/src/ExportAndShare/ResourcePacking/FullExport.spec.js
new file mode 100644
index 000000000000..720e13300fc7
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/FullExport.spec.js
@@ -0,0 +1,217 @@
+// @flow
+/**
+ * Runs a real HTML5 export (through libGD.js and the actual exporter) and packs
+ * its resources, so that the whole chain is checked: the exporter writes
+ * `data.js` and `index.html`, the packer reads them back, and the game engine
+ * would find `gdjs.ResourcePackManager` in the script list.
+ */
+import assignIn from 'lodash/assignIn';
+import { packResourcesInFolder } from './LocalResourcePacker';
+import { parsePackIndex } from './PackFormat';
+import optionalRequire from '../../Utils/OptionalRequire';
+
+const fs = optionalRequire('fs-extra');
+const path = optionalRequire('path');
+const os = optionalRequire('os');
+const process = optionalRequire('process');
+
+const gd: libGDevelop = global.gd;
+
+// The tests are run from `newIDE/app`, where the built game engine lives.
+const GDJS_ROOT = path.resolve(process.cwd(), 'resources/GDJS');
+
+const addImageResource = (
+  project: gdProject,
+  name: string,
+  absoluteFilePath: string
+) => {
+  const resource = new gd.ImageResource();
+  resource.setName(name);
+  resource.setFile(absoluteFilePath);
+  project.getResourcesManager().addResource(resource);
+  resource.delete();
+};
+
+/**
+ * Add a sprite object using the given image, so that the resource is really
+ * "used" by the scene and ends up in its `usedResources`.
+ */
+const addSpriteObject = (
+  container: gdObjectsContainer,
+  objectName: string,
+  imageResourceName: string
+) => {
+  const object = container.insertNewObject(
+    // $FlowFixMe[prop-missing] - the project is the platform holder here.
+    global.testProject,
+    'Sprite',
+    objectName,
+    container.getObjectsCount()
+  );
+  const configuration = gd.asSpriteConfiguration(object.getConfiguration());
+  const animation = new gd.Animation();
+  animation.setDirectionsCount(1);
+  const direction = animation.getDirection(0);
+  const sprite = new gd.Sprite();
+  sprite.setImageName(imageResourceName);
+  direction.addSprite(sprite);
+  animation.setDirection(direction, 0);
+  configuration.getAnimations().addAnimation(animation);
+  animation.delete();
+  sprite.delete();
+};
+
+describe('Full HTML5 export with packed resources', () => {
+  let workingDir = '';
+  let exportDir = '';
+  let project: any = null;
+
+  beforeAll(async () => {
+    workingDir = await fs.mkdtemp(path.join(os.tmpdir(), 'gdevelop-export-'));
+    exportDir = path.join(workingDir, 'export');
+    await fs.ensureDir(exportDir);
+
+    // Real files on disk, so that the exporter really copies them.
+    const assetsDir = path.join(workingDir, 'assets');
+    await fs.ensureDir(assetsDir);
+    const imagePaths: { [string]: string } = {};
+    for (const name of ['global', 'menu', 'level']) {
+      const filePath = path.join(assetsDir, `${name}.png`);
+      await fs.writeFile(filePath, `the ${name} image`, 'utf8');
+      imagePaths[name] = filePath;
+    }
+
+    project = gd.ProjectHelper.createNewGDJSProject();
+    global.testProject = project;
+    project.setName('Packing test');
+
+    addImageResource(project, 'globalImage', imagePaths.global);
+    addImageResource(project, 'menuImage', imagePaths.menu);
+    addImageResource(project, 'levelImage', imagePaths.level);
+
+    // A global object, so that its image lands in the project-wide resources.
+    addSpriteObject(project.getObjects(), 'GlobalSprite', 'globalImage');
+
+    const menuScene = project.insertNewLayout('Menu', 0);
+    addSpriteObject(menuScene.getObjects(), 'MenuSprite', 'menuImage');
+    const levelScene = project.insertNewLayout('Level', 1);
+    addSpriteObject(levelScene.getObjects(), 'LevelSprite', 'levelImage');
+
+    // `LocalFileSystem` transitively imports a web worker module that expects
+    // `self` to exist, so it is required here rather than imported at the top.
+    if (typeof global.self === 'undefined') global.self = global;
+    const LocalFileSystem = require('../LocalExporters/LocalFileSystem')
+      .default;
+
+    // Run the actual exporter, as the export pipeline does.
+    const localFileSystem = new LocalFileSystem({
+      downloadUrlsToLocalFiles: true,
+    });
+    const fileSystem = assignIn(new gd.AbstractFileSystemJS(), localFileSystem);
+    const exporter = new gd.Exporter(fileSystem, GDJS_ROOT);
+    const exportOptions = new gd.ExportOptions(project, exportDir);
+    const exportSucceeded = exporter.exportWholePixiProject(exportOptions);
+    exportOptions.delete();
+    exporter.delete();
+
+    if (!exportSucceeded) throw new Error('The export failed.');
+  }, 60000);
+
+  afterAll(async () => {
+    if (project) project.delete();
+    global.testProject = null;
+    if (workingDir) await fs.remove(workingDir);
+  });
+
+  it('exports a game whose index.html loads the resource pack manager', async () => {
+    const indexHtml = await fs.readFile(
+      path.join(exportDir, 'index.html'),
+      'utf8'
+    );
+
+    // Without this script, `gdjs.ResourcePackManager` would be undefined and
+    // the game would not start.
+    expect(indexHtml).toContain('<script src="ResourcePackManager.js"');
+    // It must come before the resource loader that instantiates it.
+    expect(indexHtml.indexOf('ResourcePackManager.js')).toBeLessThan(
+      indexHtml.indexOf('ResourceLoader.js')
+    );
+    expect(
+      await fs.pathExists(path.join(exportDir, 'ResourcePackManager.js'))
+    ).toBe(true);
+  });
+
+  it('packs the exported resources and keeps the game readable', async () => {
+    const filesBeforePacking = await fs.readdir(exportDir);
+    // The exporter flattens the resources at the root of the export.
+    expect(filesBeforePacking).toContain('global.png');
+    expect(filesBeforePacking).toContain('menu.png');
+    expect(filesBeforePacking).toContain('level.png');
+
+    await packResourcesInFolder({
+      exportDir,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    const filesAfterPacking = await fs.readdir(exportDir);
+    // Every resource is now inside a pack...
+    expect(filesAfterPacking).not.toContain('global.png');
+    expect(filesAfterPacking).not.toContain('menu.png');
+    expect(filesAfterPacking).not.toContain('level.png');
+    // ...and the engine files are untouched.
+    expect(filesAfterPacking).toContain('index.html');
+    expect(filesAfterPacking).toContain('data.js');
+    expect(filesAfterPacking).toContain('runtimegame.js');
+
+    const packNames = filesAfterPacking.filter(name => name.endsWith('.gdpak'));
+    expect(packNames.sort()).toEqual([
+      'resources.gdpak',
+      'scene-0.gdpak',
+      'scene-1.gdpak',
+    ]);
+
+    // The global image is used by a global object: it must be in the global
+    // pack, and each scene image in its own pack.
+    const readPack = async (name: string) =>
+      parsePackIndex(
+        new Uint8Array(await fs.readFile(path.join(exportDir, name)))
+      ).entries.map(entry => entry.path);
+
+    expect(await readPack('resources.gdpak')).toEqual(['global.png']);
+    expect(await readPack('scene-0.gdpak')).toEqual(['menu.png']);
+    expect(await readPack('scene-1.gdpak')).toEqual(['level.png']);
+  });
+
+  it('declares the packs in data.js, in a way the engine can read', async () => {
+    const dataJs = await fs.readFile(path.join(exportDir, 'data.js'), 'utf8');
+
+    // Evaluate data.js the way the browser would, and check what the engine
+    // will find on the `gdjs` object.
+    const gdjs: Object = {};
+    // eslint-disable-next-line no-new-func
+    const runDataJs: Function = new Function('gdjs', dataJs);
+    runDataJs(gdjs);
+
+    expect(gdjs.resourcePacks).toBeDefined();
+    expect(gdjs.resourcePacks.version).toBe(1);
+    expect(gdjs.resourcePacks.packs).toEqual([
+      'resources.gdpak',
+      'scene-0.gdpak',
+      'scene-1.gdpak',
+    ]);
+    expect(gdjs.resourcePacks.files).toEqual({
+      'global.png': 0,
+      'menu.png': 1,
+      'level.png': 2,
+    });
+
+    // Every packed file must still be a resource the engine knows about, under
+    // the same name: this is what ties the manifest to `resource.file`.
+    const resourceFiles = gdjs.projectData.resources.resources.map(
+      resource => resource.file
+    );
+    Object.keys(gdjs.resourcePacks.files).forEach(filePath => {
+      expect(resourceFiles).toContain(filePath);
+    });
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/LocalResourcePacker.js b/newIDE/app/src/ExportAndShare/ResourcePacking/LocalResourcePacker.js
new file mode 100644
index 000000000000..025004ccb210
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/LocalResourcePacker.js
@@ -0,0 +1,129 @@
+// @flow
+import optionalRequire from '../../Utils/OptionalRequire';
+import { buildPackLayout } from './PackFormat';
+import {
+  RESOURCE_KINDS_NEVER_PACKED,
+  appendResourcePacksManifestToDataJs,
+  buildResourcePacksManifest,
+  planResourcePacks,
+  readProjectDataFromDataJs,
+} from './index';
+
+const fs = optionalRequire('fs-extra');
+const path = optionalRequire('path');
+
+type Args = {|
+  exportDir: string,
+  onProgress: (count: number, total: number) => void,
+|};
+
+type PackedFile = {|
+  filePath: string,
+  absolutePath: string,
+  size: number,
+|};
+
+/**
+ * Append a chunk to a write stream, waiting for it to be accepted.
+ */
+const writeChunk = (output: any, chunk: Uint8Array): Promise<void> =>
+  new Promise((resolve, reject) => {
+    output.write(chunk, error => (error ? reject(error) : resolve()));
+  });
+
+/**
+ * Copy a whole file into an already opened write stream, without loading it in
+ * memory: a pack can hold hundreds of megabytes of 3D models or music.
+ */
+const appendFileToStream = (output: any, filePath: string): Promise<void> =>
+  new Promise((resolve, reject) => {
+    const input = fs.createReadStream(filePath);
+    input.on('error', reject);
+    // Writes stay ordered because they are queued on the write stream, so
+    // resolving as soon as the file has been read entirely is enough.
+    input.on('end', resolve);
+    input.pipe(
+      output,
+      { end: false }
+    );
+  });
+
+/**
+ * Replace the individual resource files of an exported game folder by a
+ * handful of ".gdpak" archives, so that the game can be uploaded to services
+ * limiting the number of files in an archive (itch.io allows 1000).
+ *
+ * Must be called after the resources stored as URLs have been downloaded.
+ */
+export const packResourcesInFolder = async ({
+  exportDir,
+  onProgress,
+}: Args): Promise<void> => {
+  const dataJsPath = path.join(exportDir, 'data.js');
+  if (!(await fs.pathExists(dataJsPath))) {
+    throw new Error(
+      `Could not find "${dataJsPath}" in the exported game, so its resources can't be packed.`
+    );
+  }
+  const dataJsContent = await fs.readFile(dataJsPath, 'utf8');
+
+  const plan = planResourcePacks(readProjectDataFromDataJs(dataJsContent), {
+    excludedResourceKinds: RESOURCE_KINDS_NEVER_PACKED,
+  });
+  if (!plan.packs.length) return;
+
+  const packedFilePaths: Set<string> = new Set();
+  let packedCount = 0;
+
+  for (const pack of plan.packs) {
+    const contents: Array<PackedFile> = [];
+    for (const filePath of pack.filePaths) {
+      const absolutePath = path.join(exportDir, filePath);
+      // A resource can be missing when the project references a file that was
+      // not exported. The engine already copes with a missing resource, so skip
+      // it rather than failing the whole export.
+      const stats = await fs.stat(absolutePath).catch(() => null);
+      if (!stats || !stats.isFile()) continue;
+
+      contents.push({ filePath, absolutePath, size: stats.size });
+    }
+
+    packedCount++;
+    onProgress(packedCount, plan.packs.length);
+    // Writing an empty archive would only waste a file. Nothing refers to it,
+    // as the manifest is built from the files that were really packed.
+    if (!contents.length) continue;
+
+    const layout = buildPackLayout(
+      contents.map(({ filePath, size }) => ({ filePath, size }))
+    );
+
+    const output = fs.createWriteStream(path.join(exportDir, pack.name));
+    try {
+      await writeChunk(output, layout.headerBytes);
+      for (let index = 0; index < layout.entries.length; index++) {
+        await appendFileToStream(output, contents[index].absolutePath);
+        const padding = layout.paddings[index];
+        if (padding > 0) await writeChunk(output, new Uint8Array(padding));
+      }
+    } finally {
+      await new Promise(resolve => output.end(resolve));
+    }
+
+    contents.forEach(({ filePath }) => packedFilePaths.add(filePath));
+  }
+
+  // The files that made it into a pack must not be exported on their own
+  // anymore - that is the whole point.
+  for (const filePath of packedFilePaths) {
+    await fs.remove(path.join(exportDir, filePath));
+  }
+
+  const manifest = buildResourcePacksManifest(plan, packedFilePaths);
+
+  await fs.writeFile(
+    dataJsPath,
+    appendResourcePacksManifestToDataJs(dataJsContent, manifest),
+    'utf8'
+  );
+};
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/LocalResourcePacker.spec.js b/newIDE/app/src/ExportAndShare/ResourcePacking/LocalResourcePacker.spec.js
new file mode 100644
index 000000000000..2943a668aea9
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/LocalResourcePacker.spec.js
@@ -0,0 +1,252 @@
+// @flow
+import { packResourcesInFolder } from './LocalResourcePacker';
+import { parsePackIndex } from './PackFormat';
+import { readProjectDataFromDataJs } from './index';
+import optionalRequire from '../../Utils/OptionalRequire';
+
+const fs = optionalRequire('fs-extra');
+const path = optionalRequire('path');
+const os = optionalRequire('os');
+
+const makeDataJs = (projectData: Object) =>
+  'gdjs.projectData = ' +
+  JSON.stringify(projectData) +
+  ';\ngdjs.runtimeGameOptions = {};\n';
+
+const makeResource = (name: string, file: string, kind: string = 'image') => ({
+  name,
+  file,
+  kind,
+  metadata: '',
+  userAdded: true,
+});
+
+/**
+ * Read a resource back from the pack it was written in.
+ */
+const readFromPack = (packBytes: Uint8Array, filePath: string): string => {
+  const entry = parsePackIndex(packBytes).entries.find(
+    entry => entry.path === filePath
+  );
+  if (!entry) throw new Error(`"${filePath}" is not in this pack.`);
+
+  return new TextDecoder().decode(
+    packBytes.slice(entry.offset, entry.offset + entry.size)
+  );
+};
+
+describe('packResourcesInFolder', () => {
+  let exportDir = '';
+
+  beforeEach(async () => {
+    exportDir = await fs.mkdtemp(path.join(os.tmpdir(), 'gdevelop-pack-test-'));
+  });
+
+  afterEach(async () => {
+    if (exportDir) await fs.remove(exportDir);
+  });
+
+  const writeExportFolder = async (projectData: Object, files: Object) => {
+    await fs.writeFile(
+      path.join(exportDir, 'data.js'),
+      makeDataJs(projectData),
+      'utf8'
+    );
+    for (const filePath of Object.keys(files)) {
+      await fs.writeFile(
+        path.join(exportDir, filePath),
+        files[filePath],
+        'utf8'
+      );
+    }
+  };
+
+  it('replaces the resource files by packs and declares them in data.js', async () => {
+    const projectData = {
+      properties: { loadingScreen: { backgroundImageResourceName: 'splash' } },
+      resources: {
+        resources: [
+          makeResource('global', 'global.png'),
+          makeResource('menu', 'menu.png'),
+          makeResource('level', 'level.png'),
+          makeResource('splash', 'splash.png'),
+        ],
+      },
+      usedResources: [{ name: 'global' }],
+      objects: [],
+      layouts: [
+        { name: 'Menu', usedResources: [{ name: 'menu' }], objects: [] },
+        { name: 'Level', usedResources: [{ name: 'level' }], objects: [] },
+      ],
+    };
+    await writeExportFolder(projectData, {
+      'global.png': 'the global image',
+      'menu.png': 'the menu image',
+      'level.png': 'the level image',
+      'splash.png': 'the splash image',
+      // An engine file, which must be left alone.
+      'runtimegame.js': 'gdjs.RuntimeGame = ...',
+    });
+
+    await packResourcesInFolder({
+      exportDir,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    const remainingFiles = (await fs.readdir(exportDir)).sort();
+    expect(remainingFiles).toEqual([
+      'data.js',
+      'resources.gdpak',
+      'runtimegame.js',
+      'scene-0.gdpak',
+      'scene-1.gdpak',
+      // The loading screen background stays an individual file: it is needed
+      // before the loading screen can be shown.
+      'splash.png',
+    ]);
+
+    const globalPack = await fs.readFile(
+      path.join(exportDir, 'resources.gdpak')
+    );
+    expect(readFromPack(new Uint8Array(globalPack), 'global.png')).toBe(
+      'the global image'
+    );
+    const menuPack = await fs.readFile(path.join(exportDir, 'scene-0.gdpak'));
+    expect(readFromPack(new Uint8Array(menuPack), 'menu.png')).toBe(
+      'the menu image'
+    );
+    const levelPack = await fs.readFile(path.join(exportDir, 'scene-1.gdpak'));
+    expect(readFromPack(new Uint8Array(levelPack), 'level.png')).toBe(
+      'the level image'
+    );
+
+    const dataJs = await fs.readFile(path.join(exportDir, 'data.js'), 'utf8');
+    // The project data itself must be untouched: resource files keep their name,
+    // which is what the packs are indexed by.
+    expect(readProjectDataFromDataJs(dataJs)).toEqual(projectData);
+
+    const manifestJson = dataJs
+      .slice(
+        dataJs.indexOf('gdjs.resourcePacks = ') + 'gdjs.resourcePacks = '.length
+      )
+      .trim()
+      .replace(/;$/, '');
+    const manifest = JSON.parse(manifestJson);
+    expect(manifest.version).toBe(1);
+    expect(manifest.packs).toEqual([
+      'resources.gdpak',
+      'scene-0.gdpak',
+      'scene-1.gdpak',
+    ]);
+    expect(manifest.files).toEqual({
+      'global.png': 0,
+      'menu.png': 1,
+      'level.png': 2,
+    });
+    expect(manifest.files['splash.png']).toBeUndefined();
+  });
+
+  it('writes contents that can be read back byte for byte', async () => {
+    // Sizes that exercise the padding between contents.
+    const contents = {
+      'a.png': 'a',
+      'b.png': 'b'.repeat(16),
+      'c.png': 'c'.repeat(1000),
+      'd.png': '',
+    };
+    const projectData = {
+      properties: { loadingScreen: { backgroundImageResourceName: '' } },
+      resources: {
+        resources: Object.keys(contents).map(file => makeResource(file, file)),
+      },
+      usedResources: Object.keys(contents).map(file => ({ name: file })),
+      objects: [],
+      layouts: [],
+    };
+    await writeExportFolder(projectData, contents);
+
+    await packResourcesInFolder({
+      exportDir,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    const packBytes = new Uint8Array(
+      await fs.readFile(path.join(exportDir, 'resources.gdpak'))
+    );
+    Object.keys(contents).forEach(filePath => {
+      expect(readFromPack(packBytes, filePath)).toBe(contents[filePath]);
+    });
+  });
+
+  it('does not lose a resource that no scene refers to', async () => {
+    const projectData = {
+      properties: { loadingScreen: { backgroundImageResourceName: '' } },
+      resources: {
+        resources: [makeResource('dynamic', 'dynamic.mp3', 'audio')],
+      },
+      // Referred to nowhere: only played by name from an expression.
+      usedResources: [],
+      objects: [],
+      layouts: [{ name: 'Menu', usedResources: [], objects: [] }],
+    };
+    await writeExportFolder(projectData, { 'dynamic.mp3': 'the sound' });
+
+    await packResourcesInFolder({
+      exportDir,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    const packBytes = new Uint8Array(
+      await fs.readFile(path.join(exportDir, 'resources.gdpak'))
+    );
+    expect(readFromPack(packBytes, 'dynamic.mp3')).toBe('the sound');
+    // The MIME type must survive, as a blob: URL has no extension to guess from.
+    const entry = parsePackIndex(packBytes).entries[0];
+    expect(entry.type).toBe('audio/mpeg');
+  });
+
+  it('skips a resource whose file is missing from the export', async () => {
+    const projectData = {
+      properties: { loadingScreen: { backgroundImageResourceName: '' } },
+      resources: {
+        resources: [
+          makeResource('present', 'present.png'),
+          makeResource('missing', 'missing.png'),
+        ],
+      },
+      usedResources: [{ name: 'present' }, { name: 'missing' }],
+      objects: [],
+      layouts: [],
+    };
+    await writeExportFolder(projectData, { 'present.png': 'here' });
+
+    await packResourcesInFolder({
+      exportDir,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    const dataJs = await fs.readFile(path.join(exportDir, 'data.js'), 'utf8');
+    expect(dataJs).toContain('"present.png":0');
+    expect(dataJs).not.toContain('missing.png":');
+  });
+
+  it('does nothing when the project has no resource', async () => {
+    const projectData = {
+      properties: { loadingScreen: { backgroundImageResourceName: '' } },
+      resources: { resources: [] },
+      usedResources: [],
+      objects: [],
+      layouts: [],
+    };
+    await writeExportFolder(projectData, {});
+
+    await packResourcesInFolder({
+      exportDir,
+      onProgress: (count: number, total: number) => {},
+    });
+
+    expect(await fs.readdir(exportDir)).toEqual(['data.js']);
+    const dataJs = await fs.readFile(path.join(exportDir, 'data.js'), 'utf8');
+    expect(dataJs).not.toContain('gdjs.resourcePacks');
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.js b/newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.js
new file mode 100644
index 000000000000..adbad2aa876b
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.js
@@ -0,0 +1,269 @@
+// @flow
+
+/**
+ * The ".gdpak" resource pack format.
+ *
+ * A pack is a single binary file holding the content of many game resources,
+ * so that an exported game stays below the file count limits of hosting
+ * services (itch.io refuses HTML5 archives containing more than 1000 files).
+ *
+ * Layout:
+ *
+ *   offset 0    "GDPK"                        4 bytes, ASCII magic
+ *   offset 4    uint32 LE version             format version (1)
+ *   offset 8    uint32 LE indexByteLength     byte length of the JSON index
+ *   offset 12   index JSON (UTF-8)            indexByteLength bytes
+ *               zero padding                  up to the next 16 bytes boundary
+ *               file contents                 each padded to 16 bytes
+ *
+ * The index is stored at the *beginning* of the file (unlike a zip, whose
+ * central directory is at the end) so that a future implementation can read it
+ * with a single HTTP range request.
+ *
+ * Contents are stored uncompressed: images, audio and 3D models, which make up
+ * nearly all of the bytes, are already compressed formats. This also keeps
+ * reading a file a simple `Blob.slice`, which the browser can do without
+ * copying anything into memory.
+ */
+
+export const PACK_MAGIC = 'GDPK';
+export const PACK_VERSION = 1;
+export const PACK_HEADER_SIZE = 12;
+
+/**
+ * Contents are aligned so that a `Blob.slice` never straddles a boundary
+ * unnecessarily, and so that the layout stays readable when debugging a pack.
+ */
+export const PACK_ALIGNMENT = 16;
+
+export type PackEntryInput = {|
+  /** The name of the file inside the pack. This is the `file` field of a resource. */
+  filePath: string,
+  /** The byte length of the file content. */
+  size: number,
+|};
+
+export type PackEntry = {|
+  path: string,
+  offset: number,
+  size: number,
+  type: string,
+|};
+
+export type PackLayout = {|
+  /** The bytes to write before any file content (magic, version, index, padding). */
+  headerBytes: Uint8Array,
+  /** The entries, in the order their content must be written. */
+  entries: Array<PackEntry>,
+  /**
+   * The number of padding bytes to write after each entry content, in the same
+   * order as `entries`.
+   */
+  paddings: Array<number>,
+  /** The total byte length of the resulting pack. */
+  totalSize: number,
+|};
+
+const encodeUtf8 = (text: string): Uint8Array => new TextEncoder().encode(text);
+
+const alignUp = (value: number): number => {
+  const remainder = value % PACK_ALIGNMENT;
+  return remainder === 0 ? value : value + (PACK_ALIGNMENT - remainder);
+};
+
+const RESOURCE_MIME_TYPES: { [extension: string]: string } = {
+  // Images
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  webp: 'image/webp',
+  gif: 'image/gif',
+  bmp: 'image/bmp',
+  avif: 'image/avif',
+  svg: 'image/svg+xml',
+  ktx: 'image/ktx',
+  ktx2: 'image/ktx2',
+  basis: 'application/octet-stream',
+
+  // Audio
+  mp3: 'audio/mpeg',
+  ogg: 'audio/ogg',
+  oga: 'audio/ogg',
+  opus: 'audio/ogg',
+  wav: 'audio/wav',
+  aac: 'audio/aac',
+  m4a: 'audio/mp4',
+  flac: 'audio/flac',
+  weba: 'audio/webm',
+
+  // Videos
+  mp4: 'video/mp4',
+  webm: 'video/webm',
+  ogv: 'video/ogg',
+  m4v: 'video/mp4',
+
+  // Fonts
+  ttf: 'font/ttf',
+  otf: 'font/otf',
+  woff: 'font/woff',
+  woff2: 'font/woff2',
+  eot: 'application/vnd.ms-fontobject',
+
+  // Data
+  json: 'application/json',
+  tmj: 'application/json',
+  tsj: 'application/json',
+  ldtk: 'application/json',
+  tmx: 'application/xml',
+  tsx: 'application/xml',
+  xml: 'application/xml',
+  fnt: 'text/plain',
+  atlas: 'text/plain',
+  txt: 'text/plain',
+  csv: 'text/csv',
+
+  // 3D models
+  glb: 'model/gltf-binary',
+  gltf: 'model/gltf+json',
+  obj: 'text/plain',
+
+  // Spine
+  skel: 'application/octet-stream',
+};
+
+/**
+ * Return the MIME type to give to the `Blob` holding this file's content.
+ *
+ * This matters: once packed, resources are handed to the game engine as `blob:`
+ * URLs, which carry no file extension. `<audio>` and `<video>` elements rely on
+ * the Blob type to pick a decoder.
+ */
+export const getResourceMimeType = (filePath: string): string => {
+  const lastDotIndex = filePath.lastIndexOf('.');
+  if (lastDotIndex === -1) return 'application/octet-stream';
+
+  const extension = filePath
+    .slice(lastDotIndex + 1)
+    .toLowerCase()
+    // Resource files can keep a query string or a fragment when they come from
+    // a URL.
+    .replace(/[?#].*$/, '');
+
+  return RESOURCE_MIME_TYPES[extension] || 'application/octet-stream';
+};
+
+const buildIndexJson = (entries: Array<PackEntry>): string =>
+  JSON.stringify({
+    files: entries.map(({ path, offset, size, type }) => ({
+      path,
+      offset,
+      size,
+      type,
+    })),
+  });
+
+/**
+ * Compute the layout of a pack containing the given files.
+ *
+ * The caller is responsible for writing, in order: `headerBytes`, then for each
+ * entry its content followed by `paddings[index]` zero bytes.
+ */
+export const buildPackLayout = (
+  entryInputs: Array<PackEntryInput>
+): PackLayout => {
+  const entries: Array<PackEntry> = entryInputs.map(({ filePath, size }) => ({
+    path: filePath,
+    offset: 0,
+    size,
+    type: getResourceMimeType(filePath),
+  }));
+
+  // The offsets are stored in the index, but the index length is what
+  // determines where the contents start - so the two depend on each other.
+  // Iterate until it settles, only ever growing the index length so that the
+  // computation is guaranteed to converge (a longer index can only push offsets
+  // further, which can only make the numbers longer or leave them unchanged).
+  let indexByteLength = 0;
+  let indexJsonByteLength = 0;
+  let indexJson = '';
+  for (let attempt = 0; ; attempt++) {
+    if (attempt > 8) {
+      throw new Error('Could not compute a stable resource pack layout.');
+    }
+
+    let offset = alignUp(PACK_HEADER_SIZE + indexByteLength);
+    for (const entry of entries) {
+      entry.offset = offset;
+      offset = alignUp(offset + entry.size);
+    }
+
+    indexJson = buildIndexJson(entries);
+    indexJsonByteLength = encodeUtf8(indexJson).length;
+    // Leaving the loop here guarantees that `entries` offsets were computed
+    // with the `indexByteLength` that is about to be written in the header.
+    if (indexJsonByteLength <= indexByteLength) break;
+    indexByteLength = indexJsonByteLength;
+  }
+
+  // The index may now be shorter than the length the offsets were computed
+  // with. Pad it with spaces, which `JSON.parse` ignores, rather than
+  // recomputing everything.
+  const indexBytes = encodeUtf8(
+    indexJson + ' '.repeat(indexByteLength - indexJsonByteLength)
+  );
+
+  const contentStart = alignUp(PACK_HEADER_SIZE + indexByteLength);
+  const headerBytes = new Uint8Array(contentStart);
+  for (let index = 0; index < PACK_MAGIC.length; index++) {
+    headerBytes[index] = PACK_MAGIC.charCodeAt(index);
+  }
+  const headerView = new DataView(headerBytes.buffer);
+  headerView.setUint32(4, PACK_VERSION, true);
+  headerView.setUint32(8, indexByteLength, true);
+  headerBytes.set(indexBytes, PACK_HEADER_SIZE);
+
+  const paddings = entries.map(
+    entry => alignUp(entry.offset + entry.size) - (entry.offset + entry.size)
+  );
+
+  const lastEntry = entries[entries.length - 1];
+  const totalSize = lastEntry
+    ? alignUp(lastEntry.offset + lastEntry.size)
+    : contentStart;
+
+  return { headerBytes, entries, paddings, totalSize };
+};
+
+/**
+ * Read back the index of a pack. Only used by tests and tooling - the game
+ * engine has its own reader in `GDJS/Runtime/ResourcePackManager.ts`.
+ */
+export const parsePackIndex = (
+  packBytes: Uint8Array
+): {| version: number, entries: Array<PackEntry> |} => {
+  const view = new DataView(
+    packBytes.buffer,
+    packBytes.byteOffset,
+    packBytes.byteLength
+  );
+
+  const magic = String.fromCharCode(
+    packBytes[0],
+    packBytes[1],
+    packBytes[2],
+    packBytes[3]
+  );
+  if (magic !== PACK_MAGIC) {
+    throw new Error(`Not a resource pack (unexpected magic "${magic}").`);
+  }
+
+  const version = view.getUint32(4, true);
+  const indexByteLength = view.getUint32(8, true);
+  const indexBytes = packBytes.slice(
+    PACK_HEADER_SIZE,
+    PACK_HEADER_SIZE + indexByteLength
+  );
+  const indexJson = new TextDecoder().decode(indexBytes);
+
+  return { version, entries: JSON.parse(indexJson).files };
+};
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.spec.js b/newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.spec.js
new file mode 100644
index 000000000000..eb817e07355d
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/PackFormat.spec.js
@@ -0,0 +1,196 @@
+// @flow
+import {
+  PACK_ALIGNMENT,
+  PACK_VERSION,
+  buildPackLayout,
+  getResourceMimeType,
+  parsePackIndex,
+  type PackLayout,
+} from './PackFormat';
+
+/**
+ * Assemble a whole pack the way the export pipelines do: the header, then each
+ * file content followed by its padding.
+ */
+const assemblePack = (
+  contents: Array<Uint8Array>
+): {| packBytes: Uint8Array, layout: PackLayout |} => {
+  const layout = buildPackLayout(
+    contents.map((content, index) => ({
+      filePath: `file-${index}.png`,
+      size: content.length,
+    }))
+  );
+
+  const packBytes = new Uint8Array(layout.totalSize);
+  packBytes.set(layout.headerBytes, 0);
+  layout.entries.forEach((entry, index) => {
+    packBytes.set(contents[index], entry.offset);
+  });
+
+  return { packBytes, layout };
+};
+
+const makeContent = (size: number, seed: number): Uint8Array => {
+  const content = new Uint8Array(size);
+  for (let index = 0; index < size; index++) {
+    content[index] = (index * 7 + seed) % 256;
+  }
+  return content;
+};
+
+describe('PackFormat', () => {
+  describe('getResourceMimeType', () => {
+    it('recognises the resource kinds used by the engine', () => {
+      expect(getResourceMimeType('player.png')).toBe('image/png');
+      expect(getResourceMimeType('Player.PNG')).toBe('image/png');
+      expect(getResourceMimeType('music.mp3')).toBe('audio/mpeg');
+      expect(getResourceMimeType('jump.ogg')).toBe('audio/ogg');
+      expect(getResourceMimeType('intro.mp4')).toBe('video/mp4');
+      expect(getResourceMimeType('title.ttf')).toBe('font/ttf');
+      expect(getResourceMimeType('level.json')).toBe('application/json');
+      expect(getResourceMimeType('character.glb')).toBe('model/gltf-binary');
+      expect(getResourceMimeType('hero.atlas')).toBe('text/plain');
+    });
+
+    it('falls back to a generic type for unknown or missing extensions', () => {
+      expect(getResourceMimeType('some-file.unknown')).toBe(
+        'application/octet-stream'
+      );
+      expect(getResourceMimeType('no-extension')).toBe(
+        'application/octet-stream'
+      );
+    });
+
+    it('ignores a query string left over from a URL', () => {
+      expect(getResourceMimeType('player.png?token=abc')).toBe('image/png');
+    });
+  });
+
+  describe('buildPackLayout', () => {
+    it('writes a readable header', () => {
+      const layout = buildPackLayout([{ filePath: 'a.png', size: 10 }]);
+      const { version, entries } = parsePackIndex(layout.headerBytes);
+
+      expect(version).toBe(PACK_VERSION);
+      expect(entries).toHaveLength(1);
+      expect(entries[0]).toEqual({
+        path: 'a.png',
+        offset: layout.entries[0].offset,
+        size: 10,
+        type: 'image/png',
+      });
+    });
+
+    it('aligns the contents and the header', () => {
+      const layout = buildPackLayout([
+        { filePath: 'a.png', size: 1 },
+        { filePath: 'b.png', size: 17 },
+        { filePath: 'c.png', size: 32 },
+      ]);
+
+      expect(layout.headerBytes.length % PACK_ALIGNMENT).toBe(0);
+      expect(layout.totalSize % PACK_ALIGNMENT).toBe(0);
+      layout.entries.forEach(entry => {
+        expect(entry.offset % PACK_ALIGNMENT).toBe(0);
+        expect(entry.offset).toBeGreaterThanOrEqual(layout.headerBytes.length);
+      });
+      // Contents must not overlap.
+      expect(layout.entries[1].offset).toBeGreaterThanOrEqual(
+        layout.entries[0].offset + layout.entries[0].size
+      );
+      expect(layout.entries[2].offset).toBeGreaterThanOrEqual(
+        layout.entries[1].offset + layout.entries[1].size
+      );
+    });
+
+    it('reports the padding needed after each content', () => {
+      const layout = buildPackLayout([
+        { filePath: 'a.png', size: 1 },
+        { filePath: 'b.png', size: 16 },
+      ]);
+
+      expect(layout.paddings[0]).toBe(PACK_ALIGNMENT - 1);
+      expect(layout.paddings[1]).toBe(0);
+      // Everything written must add up to the announced total size.
+      const writtenSize =
+        layout.headerBytes.length +
+        layout.entries.reduce(
+          (total, entry, index) => total + entry.size + layout.paddings[index],
+          0
+        );
+      expect(writtenSize).toBe(layout.totalSize);
+    });
+
+    it('handles an empty pack', () => {
+      const layout = buildPackLayout([]);
+
+      expect(layout.entries).toHaveLength(0);
+      expect(layout.totalSize).toBe(layout.headerBytes.length);
+      expect(parsePackIndex(layout.headerBytes).entries).toHaveLength(0);
+    });
+
+    it('keeps the index consistent with the offsets for a large pack', () => {
+      // Enough files that the index is long enough for the offsets to gain
+      // digits while the layout is being computed.
+      const layout = buildPackLayout(
+        Array.from({ length: 2000 }, (_, index) => ({
+          filePath: `some/rather/long/resource/name-${index}.png`,
+          size: 1000 + index,
+        }))
+      );
+
+      const { entries } = parsePackIndex(layout.headerBytes);
+      expect(entries).toHaveLength(2000);
+      entries.forEach((entry, index) => {
+        expect(entry.offset).toBe(layout.entries[index].offset);
+        expect(entry.offset).toBeGreaterThanOrEqual(layout.headerBytes.length);
+      });
+    });
+
+    it('supports non-ASCII file names', () => {
+      const layout = buildPackLayout([
+        { filePath: 'héros-épée.png', size: 4 },
+        { filePath: '主人公.png', size: 4 },
+      ]);
+
+      const { entries } = parsePackIndex(layout.headerBytes);
+      expect(entries.map(entry => entry.path)).toEqual([
+        'héros-épée.png',
+        '主人公.png',
+      ]);
+      expect(entries[0].offset).toBe(layout.entries[0].offset);
+      expect(entries[1].offset).toBe(layout.entries[1].offset);
+    });
+  });
+
+  describe('round trip', () => {
+    it('reads back exactly what was written', () => {
+      const contents = [
+        makeContent(1, 1),
+        makeContent(0, 2),
+        makeContent(1000, 3),
+        makeContent(16, 4),
+      ];
+      const { packBytes, layout } = assemblePack(contents);
+
+      expect(packBytes.length).toBe(layout.totalSize);
+
+      const { entries } = parsePackIndex(packBytes);
+      entries.forEach((entry, index) => {
+        const readContent = packBytes.slice(
+          entry.offset,
+          entry.offset + entry.size
+        );
+        expect(Array.from(readContent)).toEqual(Array.from(contents[index]));
+      });
+    });
+  });
+
+  describe('parsePackIndex', () => {
+    it('rejects a file that is not a pack', () => {
+      const notAPack = new Uint8Array(64);
+      expect(() => parsePackIndex(notAPack)).toThrow(/Not a resource pack/);
+    });
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/ProjectData.spec.js b/newIDE/app/src/ExportAndShare/ResourcePacking/ProjectData.spec.js
new file mode 100644
index 000000000000..0fd3cdcd28ae
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/ProjectData.spec.js
@@ -0,0 +1,116 @@
+// @flow
+import {
+  appendResourcePacksManifestToDataJs,
+  buildResourcePacksManifest,
+  readProjectDataFromDataJs,
+} from './index';
+
+/**
+ * Build a "data.js" exactly as `ExporterHelper::ExportProjectData` writes it.
+ */
+const makeDataJs = (projectData: Object, runtimeGameOptions: Object = {}) =>
+  'gdjs.projectData = ' +
+  JSON.stringify(projectData) +
+  ';\ngdjs.runtimeGameOptions = ' +
+  JSON.stringify(runtimeGameOptions) +
+  ';\n';
+
+describe('readProjectDataFromDataJs', () => {
+  it('reads back the project data written by the exporter', () => {
+    const projectData = {
+      firstLayout: 'Menu',
+      resources: { resources: [{ name: 'image', file: 'image.png' }] },
+      usedResources: [{ name: 'image' }],
+      layouts: [{ name: 'Menu', usedResources: [] }],
+    };
+
+    expect(readProjectDataFromDataJs(makeDataJs(projectData))).toEqual(
+      projectData
+    );
+  });
+
+  it('is not fooled by a project containing the assignment as a string', () => {
+    // A JavaScript event, or even a text object, can hold anything.
+    const projectData = {
+      firstLayout: 'Menu',
+      resources: { resources: [] },
+      usedResources: [],
+      layouts: [],
+      note: 'gdjs.runtimeGameOptions = {"tricky": true};',
+    };
+
+    expect(readProjectDataFromDataJs(makeDataJs(projectData))).toEqual(
+      projectData
+    );
+  });
+
+  it('throws a clear error when the file is not what is expected', () => {
+    expect(() => readProjectDataFromDataJs('some other content')).toThrow(
+      /does not have the expected content/
+    );
+  });
+});
+
+describe('appendResourcePacksManifestToDataJs', () => {
+  it('declares the packs to the engine without touching the project data', () => {
+    const projectData = {
+      firstLayout: 'Menu',
+      resources: { resources: [] },
+      usedResources: [],
+      layouts: [],
+    };
+    const dataJs = makeDataJs(projectData);
+
+    const manifest = buildResourcePacksManifest(
+      {
+        packs: [
+          {
+            name: 'resources.gdpak',
+            filePaths: ['image.png'],
+            isLoadedAtStartup: true,
+          },
+          {
+            name: 'scene-0.gdpak',
+            filePaths: ['missing.png'],
+            isLoadedAtStartup: false,
+          },
+        ],
+        fileToPackIndex: { 'image.png': 0, 'missing.png': 1 },
+        unpackedFilePaths: [],
+      },
+      // "missing.png" was not exported, so it must not be announced as packed.
+      new Set(['image.png'])
+    );
+
+    const newDataJs = appendResourcePacksManifestToDataJs(dataJs, manifest);
+
+    expect(readProjectDataFromDataJs(newDataJs)).toEqual(projectData);
+    expect(newDataJs).toContain('gdjs.resourcePacks = ');
+    expect(manifest).toEqual({
+      version: 1,
+      packs: ['resources.gdpak', 'scene-0.gdpak'],
+      files: { 'image.png': 0 },
+      startupPacks: [0],
+    });
+  });
+
+  it('does not ask the game to download a pack that was never written', () => {
+    const manifest = buildResourcePacksManifest(
+      {
+        packs: [
+          {
+            name: 'resources.gdpak',
+            filePaths: ['missing.png'],
+            isLoadedAtStartup: true,
+          },
+        ],
+        fileToPackIndex: { 'missing.png': 0 },
+        unpackedFilePaths: [],
+      },
+      new Set()
+    );
+
+    expect(manifest.startupPacks).toEqual([]);
+    expect(manifest.files).toEqual({});
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/ResourcePackPlanner.js b/newIDE/app/src/ExportAndShare/ResourcePacking/ResourcePackPlanner.js
new file mode 100644
index 000000000000..e899810bddff
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/ResourcePackPlanner.js
@@ -0,0 +1,348 @@
+// @flow
+
+/**
+ * Decides which resource goes into which ".gdpak" pack.
+ *
+ * The engine loads resources scene by scene (see `gdjs.ResourceLoader`), so
+ * packing everything into a single archive would force the whole game to be
+ * downloaded before the first scene starts. Instead we mirror the loading
+ * groups the exporter already computes:
+ *
+ *  - the resources used by the project itself (global objects...) go into a
+ *    global pack, loaded at startup. Resources that no loading group refers
+ *    to are put there too, see `PlannedPack.isLoadedAtStartup`;
+ *  - each scene gets its own pack, loaded when the scene is;
+ *  - each object marked as "preloaded manually" gets its own pack, so that
+ *    loading its resources from the events still downloads nothing more than
+ *    what the object needs;
+ *  - a file needed by several of these groups goes into a shared pack,
+ *    downloaded when the first of them is loaded - exactly when the engine
+ *    would have downloaded the file on its own.
+ *
+ * This is the same trade-off Defold makes for its HTML5 export: a handful of
+ * archives rather than one, so that lazy loading and incremental caching keep
+ * working.
+ */
+
+const GLOBAL_PACK_GROUP_NAME = 'global';
+const GLOBAL_PACK_NAME = 'resources.gdpak';
+const SHARED_PACK_NAME = 'shared.gdpak';
+export const PACK_FILE_EXTENSION = '.gdpak';
+
+export type PlannedPack = {|
+  /** The file name of the pack inside the exported game. */
+  name: string,
+  /** The files it contains, in a stable order. */
+  filePaths: Array<string>,
+  /**
+   * True for the pack that must be downloaded before the first scene starts,
+   * whether or not the engine has a loading task for its files.
+   *
+   * This is what makes resources that are only reachable dynamically work: a
+   * sound played by name from an expression appears in no `usedResources`
+   * list, so nothing ever triggers the download of its pack, and the engine
+   * asks for its URL synchronously when the sound is played. Those resources
+   * are put in this pack (see the "no group refers to it" rule below).
+   */
+  isLoadedAtStartup: boolean,
+|};
+
+export type ResourcePackPlan = {|
+  packs: Array<PlannedPack>,
+  /** Resource file -> index in `packs`. This is what the game engine reads. */
+  fileToPackIndex: { [filePath: string]: number },
+  /** Resource files deliberately left as individual files in the export. */
+  unpackedFilePaths: Array<string>,
+|};
+
+export type PlanOptions = {|
+  /**
+   * Resource kinds that must stay individual files. Used for resources whose
+   * loader needs a real file extension in the URL (a `blob:` URL has none).
+   */
+  excludedResourceKinds?: Array<string>,
+  /**
+   * Above this number of packs, the smallest ones are merged together, so that
+   * a project with hundreds of scenes does not defeat the purpose of packing.
+   */
+  maxPackCount?: number,
+|};
+
+const DEFAULT_MAX_PACK_COUNT = 100;
+
+const isUrl = (filePath: string): boolean =>
+  filePath.startsWith('http://') ||
+  filePath.startsWith('https://') ||
+  filePath.startsWith('data:') ||
+  filePath.startsWith('blob:');
+
+/**
+ * Read the names of the resources embedded in another one. Spine skeletons
+ * reference their atlas this way, and atlases their page images - see
+ * `gdjs.RuntimeGame._updateEmbeddedResourcesMappings`.
+ */
+const getEmbeddedResourceNames = (resource: Object): Array<string> => {
+  if (!resource.metadata) return [];
+
+  try {
+    const metadata = JSON.parse(resource.metadata);
+    const mapping = metadata ? metadata.embeddedResourcesMapping : null;
+    if (!mapping || typeof mapping !== 'object') return [];
+
+    // $FlowFixMe[incompatible-call] - values of a parsed JSON object.
+    return Object.keys(mapping)
+      .map(key => mapping[key])
+      .filter(name => typeof name === 'string');
+  } catch (error) {
+    // A resource with unparseable metadata simply has no embedded resource.
+    return [];
+  }
+};
+
+type ResourceGroup = {|
+  name: string,
+  packName: string,
+  resourceNames: Array<string>,
+|};
+
+/**
+ * The loading groups of the objects preloaded manually, one per object. Only
+ * these objects have their `usedResources` serialized by the exporter.
+ */
+const buildObjectsResourceGroups = (
+  objects: ?Array<Object>,
+  groupNamePrefix: string
+): Array<ResourceGroup> => {
+  if (!objects) return [];
+
+  const groups = [];
+  objects.forEach((object, objectIndex) => {
+    if (!object.usedResources) return;
+
+    const name = `${groupNamePrefix}-lazy-${objectIndex}`;
+    groups.push({
+      name,
+      packName: name + PACK_FILE_EXTENSION,
+      resourceNames: object.usedResources.map(({ name }) => name),
+    });
+  });
+  return groups;
+};
+
+/**
+ * Build the list of loading groups, in the order the engine loads them.
+ */
+const buildResourceGroups = (projectData: Object): Array<ResourceGroup> => {
+  const groups: Array<ResourceGroup> = [
+    {
+      name: GLOBAL_PACK_GROUP_NAME,
+      packName: GLOBAL_PACK_NAME,
+      resourceNames: (projectData.usedResources || []).map(({ name }) => name),
+    },
+    ...buildObjectsResourceGroups(projectData.objects, 'resources'),
+  ];
+
+  (projectData.layouts || []).forEach((layout, layoutIndex) => {
+    const name = `scene-${layoutIndex}`;
+    groups.push({
+      name,
+      packName: name + PACK_FILE_EXTENSION,
+      resourceNames: (layout.usedResources || []).map(({ name }) => name),
+    });
+    groups.push(...buildObjectsResourceGroups(layout.objects, name));
+  });
+
+  return groups;
+};
+
+/**
+ * Merge the smallest packs together until there are no more than
+ * `maxPackCount` of them. The global pack is never merged, as it is the one
+ * loaded at startup.
+ */
+const mergeSmallestPacks = (
+  packs: Array<PlannedPack>,
+  maxPackCount: number
+): Array<PlannedPack> => {
+  if (packs.length <= maxPackCount) return packs;
+
+  const [globalPack, ...otherPacks] = packs;
+  const mergeable = otherPacks.slice();
+  let mergedCount = 0;
+
+  while (mergeable.length + 1 > maxPackCount && mergeable.length > 1) {
+    mergeable.sort((a, b) => a.filePaths.length - b.filePaths.length);
+    const first = mergeable.shift();
+    const second = mergeable.shift();
+    if (!first || !second) break;
+
+    mergeable.push({
+      name: `merged-${mergedCount++}` + PACK_FILE_EXTENSION,
+      filePaths: [...first.filePaths, ...second.filePaths],
+      isLoadedAtStartup: false,
+    });
+  }
+
+  return [globalPack, ...mergeable];
+};
+
+/**
+ * Decide the pack each resource file belongs to.
+ */
+export const planResourcePacks = (
+  projectData: Object,
+  options?: PlanOptions
+): ResourcePackPlan => {
+  const excludedResourceKinds = new Set(
+    (options && options.excludedResourceKinds) || []
+  );
+  const maxPackCount =
+    (options && options.maxPackCount) || DEFAULT_MAX_PACK_COUNT;
+
+  const resourcesByName: Map<string, Object> = new Map();
+  (projectData.resources && projectData.resources.resources
+    ? projectData.resources.resources
+    : []
+  ).forEach(resource => {
+    // Resources without a file are ignored by the engine too
+    // (see `gdjs.ResourceLoader.setResources`).
+    if (!resource.file) return;
+    resourcesByName.set(resource.name, resource);
+  });
+
+  // Resources that must stay individual files in the export.
+  const unpackedFilePaths: Set<string> = new Set();
+  const isPackable = (resource: Object): boolean => {
+    if (isUrl(resource.file)) return false;
+    if (excludedResourceKinds.has(resource.kind)) return false;
+    return true;
+  };
+
+  const loadingScreen =
+    projectData.properties && projectData.properties.loadingScreen;
+  const loadingScreenResourceName = loadingScreen
+    ? loadingScreen.backgroundImageResourceName
+    : '';
+  if (loadingScreenResourceName) {
+    // The loading screen background is downloaded before the loading screen can
+    // be displayed (see `gdjs.RuntimeGame.loadFirstAssetsAndStartBackgroundLoading`).
+    // Packing it would mean waiting for the whole global pack before showing
+    // anything.
+    const resource = resourcesByName.get(loadingScreenResourceName);
+    if (resource) unpackedFilePaths.add(resource.file);
+  }
+
+  // The icons of the game are referenced by files the engine never reads: the
+  // web manifest of an HTML5 export, the config.xml of a Cordova export...
+  // They must stay where these files point.
+  const platformSpecificAssets =
+    projectData.properties && projectData.properties.platformSpecificAssets;
+  if (platformSpecificAssets && typeof platformSpecificAssets === 'object') {
+    Object.keys(platformSpecificAssets).forEach(assetKey => {
+      const resource = resourcesByName.get(platformSpecificAssets[assetKey]);
+      if (resource) unpackedFilePaths.add(resource.file);
+    });
+  }
+
+  resourcesByName.forEach(resource => {
+    if (!isPackable(resource)) unpackedFilePaths.add(resource.file);
+  });
+
+  // Resolve each loading group to a set of files, following embedded resources
+  // so that a Spine skeleton, its atlas and the atlas pages always end up in
+  // the same pack: the atlas manager reaches page textures synchronously and
+  // cannot wait for another pack to be downloaded.
+  const groups = buildResourceGroups(projectData);
+  const groupFiles: Array<Set<string>> = groups.map(group => {
+    const files: Set<string> = new Set();
+    const visitedResourceNames: Set<string> = new Set();
+
+    const visit = (resourceName: string) => {
+      if (visitedResourceNames.has(resourceName)) return;
+      visitedResourceNames.add(resourceName);
+
+      const resource = resourcesByName.get(resourceName);
+      if (!resource) return;
+      if (!unpackedFilePaths.has(resource.file)) files.add(resource.file);
+
+      getEmbeddedResourceNames(resource).forEach(visit);
+    };
+
+    group.resourceNames.forEach(visit);
+    return files;
+  });
+
+  // A file needed by more than one group cannot be duplicated in each pack:
+  // the engine resolves a file to a single pack, without knowing which scene
+  // or object asked for it. It goes to a shared pack instead, downloaded when
+  // the first group needing it is loaded - which is when the engine would have
+  // downloaded the file anyway. The files of the global group stay in the
+  // global pack, as it is downloaded at startup no matter what.
+  const globalFiles = groupFiles[0];
+  const sharedFiles: Set<string> = new Set();
+  const groupCountByFile: Map<string, number> = new Map();
+  groupFiles.forEach((files, groupIndex) => {
+    if (groupIndex === 0) return;
+    files.forEach(file => {
+      if (globalFiles.has(file)) return;
+      groupCountByFile.set(file, (groupCountByFile.get(file) || 0) + 1);
+    });
+  });
+  groupCountByFile.forEach((count, file) => {
+    if (count > 1) sharedFiles.add(file);
+  });
+  groupFiles.forEach((files, groupIndex) => {
+    if (groupIndex === 0) return;
+    files.forEach(file => {
+      if (globalFiles.has(file) || sharedFiles.has(file)) files.delete(file);
+    });
+  });
+
+  // Resources that no group refers to are only reachable dynamically (a sound
+  // played by name, an animation picked by an expression...). They must not be
+  // lost: put them in the global pack.
+  const assignedFiles: Set<string> = new Set(sharedFiles);
+  groupFiles.forEach(files => files.forEach(file => assignedFiles.add(file)));
+  resourcesByName.forEach(resource => {
+    if (unpackedFilePaths.has(resource.file)) return;
+    if (assignedFiles.has(resource.file)) return;
+    globalFiles.add(resource.file);
+  });
+
+  const packs: Array<PlannedPack> = groups
+    .map((group, groupIndex) => ({
+      name: group.packName,
+      filePaths: Array.from(groupFiles[groupIndex]),
+      // The global pack holds the resources that no loading task refers to, so
+      // it must be downloaded up front: nothing else would ever trigger it.
+      isLoadedAtStartup: group.name === GLOBAL_PACK_GROUP_NAME,
+    }))
+    // Keep the global pack even when empty, so that the pack list order is
+    // stable, but drop the scene packs that ended up with nothing.
+    .filter((pack, packIndex) => packIndex === 0 || pack.filePaths.length > 0);
+  if (sharedFiles.size) {
+    packs.push({
+      name: SHARED_PACK_NAME,
+      filePaths: Array.from(sharedFiles),
+      isLoadedAtStartup: false,
+    });
+  }
+
+  const mergedPacks = mergeSmallestPacks(
+    packs,
+    Math.max(1, maxPackCount)
+  ).filter(pack => pack.filePaths.length > 0);
+
+  const fileToPackIndex: { [filePath: string]: number } = {};
+  mergedPacks.forEach((pack, packIndex) => {
+    pack.filePaths.forEach(filePath => {
+      fileToPackIndex[filePath] = packIndex;
+    });
+  });
+
+  return {
+    packs: mergedPacks,
+    fileToPackIndex,
+    unpackedFilePaths: Array.from(unpackedFilePaths),
+  };
+};
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/ResourcePackPlanner.spec.js b/newIDE/app/src/ExportAndShare/ResourcePacking/ResourcePackPlanner.spec.js
new file mode 100644
index 000000000000..39e64625251f
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/ResourcePackPlanner.spec.js
@@ -0,0 +1,457 @@
+// @flow
+import {
+  planResourcePacks,
+  type PlannedPack,
+  type ResourcePackPlan,
+} from './ResourcePackPlanner';
+import { RESOURCE_KINDS_NEVER_PACKED } from './index';
+
+const makeResource = (name: string, file: string, options: Object = {}) => ({
+  name,
+  file,
+  kind: options.kind || 'image',
+  metadata: options.metadata || '',
+  userAdded: true,
+});
+
+const makeProjectData = ({
+  resources,
+  usedResources = [],
+  objects = [],
+  layouts = [],
+  loadingScreenBackground = '',
+  platformSpecificAssets = {},
+}: Object) => ({
+  properties: {
+    loadingScreen: {
+      backgroundImageResourceName: loadingScreenBackground,
+    },
+    platformSpecificAssets,
+  },
+  resources: { resources },
+  usedResources: usedResources.map(name => ({ name })),
+  objects,
+  layouts,
+});
+
+const makeLayout = (
+  name: string,
+  usedResources: Array<string>,
+  objects: Array<Object> = []
+) => ({
+  name,
+  usedResources: usedResources.map(resourceName => ({ name: resourceName })),
+  objects,
+});
+
+const getPackByName = (plan: ResourcePackPlan, name: string): ?PlannedPack =>
+  plan.packs.find(pack => pack.name === name);
+
+const getPackFilePaths = (
+  plan: ResourcePackPlan,
+  name: string
+): Array<string> => {
+  const pack = getPackByName(plan, name);
+  if (!pack) throw new Error(`The plan has no pack named "${name}".`);
+  return pack.filePaths;
+};
+
+const getPackIndex = (plan: ResourcePackPlan, name: string): number =>
+  plan.packs.findIndex(pack => pack.name === name);
+
+describe('ResourcePackPlanner', () => {
+  it('puts project-level resources in the global pack and scene ones in their own pack', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('shared', 'shared.png'),
+          makeResource('menuBg', 'menu-bg.png'),
+          makeResource('levelBg', 'level-bg.png'),
+        ],
+        usedResources: ['shared'],
+        layouts: [
+          makeLayout('Menu', ['menuBg']),
+          makeLayout('Level', ['levelBg']),
+        ],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['shared.png']);
+    expect(getPackFilePaths(plan, 'scene-0.gdpak')).toEqual(['menu-bg.png']);
+    expect(getPackFilePaths(plan, 'scene-1.gdpak')).toEqual(['level-bg.png']);
+
+    expect(plan.fileToPackIndex['shared.png']).toBe(
+      getPackIndex(plan, 'resources.gdpak')
+    );
+    expect(plan.fileToPackIndex['level-bg.png']).toBe(
+      getPackIndex(plan, 'scene-1.gdpak')
+    );
+  });
+
+  it('gives each manually preloaded object its own pack', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('sceneImage', 'scene.png'),
+          makeResource('heavyImage', 'heavy.png'),
+          makeResource('otherHeavyImage', 'other-heavy.png'),
+        ],
+        layouts: [
+          makeLayout(
+            'Level',
+            ['sceneImage'],
+            [
+              { name: 'NormalObject' },
+              { name: 'HeavyObject', usedResources: [{ name: 'heavyImage' }] },
+              {
+                name: 'OtherHeavyObject',
+                usedResources: [{ name: 'otherHeavyImage' }],
+              },
+            ]
+          ),
+        ],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'scene-0.gdpak')).toEqual(['scene.png']);
+    // Loading one object from the events must not download the other one.
+    expect(getPackFilePaths(plan, 'scene-0-lazy-1.gdpak')).toEqual([
+      'heavy.png',
+    ]);
+    expect(getPackFilePaths(plan, 'scene-0-lazy-2.gdpak')).toEqual([
+      'other-heavy.png',
+    ]);
+    // Nothing is downloaded at startup: the global pack is empty here, and the
+    // lazy packs must wait for their object to be loaded from the events.
+    expect(plan.packs.filter(pack => pack.isLoadedAtStartup)).toEqual([]);
+  });
+
+  it('gives manually preloaded global objects their own pack', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [makeResource('heavyImage', 'heavy.png')],
+        objects: [
+          { name: 'GlobalHeavy', usedResources: [{ name: 'heavyImage' }] },
+        ],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'resources-lazy-0.gdpak')).toEqual([
+      'heavy.png',
+    ]);
+    // The global pack is empty, and so is not written. The lazy pack must not
+    // be downloaded at startup: that is the whole point of manual preloading.
+    expect(getPackByName(plan, 'resources.gdpak')).toBeUndefined();
+    expect(plan.packs.map(pack => pack.isLoadedAtStartup)).toEqual([false]);
+  });
+
+  it('marks only the global pack as needed at startup', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('global', 'global.png'),
+          makeResource('menu', 'menu.png'),
+        ],
+        usedResources: ['global'],
+        layouts: [makeLayout('Menu', ['menu'])],
+      })
+    );
+
+    expect(plan.packs.map(pack => [pack.name, pack.isLoadedAtStartup])).toEqual(
+      [['resources.gdpak', true], ['scene-0.gdpak', false]]
+    );
+  });
+
+  it('puts resources referenced by no scene in the global pack', () => {
+    // Resources only reachable dynamically, for example a sound played by name
+    // from an expression, are listed nowhere - they must not be dropped.
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('menuBg', 'menu-bg.png'),
+          makeResource('dynamicSound', 'dynamic.mp3', { kind: 'audio' }),
+        ],
+        layouts: [makeLayout('Menu', ['menuBg'])],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['dynamic.mp3']);
+    expect(plan.fileToPackIndex['dynamic.mp3']).toBeDefined();
+  });
+
+  it('puts a file used by several scenes in a shared pack, not downloaded at startup', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('common', 'common.png'),
+          makeResource('menuOnly', 'menu.png'),
+        ],
+        layouts: [
+          makeLayout('Menu', ['common', 'menuOnly']),
+          makeLayout('Level', ['common']),
+        ],
+      })
+    );
+
+    // Without packing, the file is downloaded when the first scene using it is
+    // loaded - not before the game starts. The shared pack keeps it that way.
+    expect(getPackFilePaths(plan, 'shared.gdpak')).toEqual(['common.png']);
+    expect(getPackFilePaths(plan, 'scene-0.gdpak')).toEqual(['menu.png']);
+    expect(plan.fileToPackIndex['common.png']).toBe(
+      getPackIndex(plan, 'shared.gdpak')
+    );
+    expect(
+      plan.packs.filter(pack => pack.isLoadedAtStartup).map(pack => pack.name)
+    ).toEqual([]);
+    // Scene 1 only used the shared file, so it needs no pack of its own.
+    expect(getPackByName(plan, 'scene-1.gdpak')).toBeUndefined();
+  });
+
+  it('keeps a file used by the project and by scenes in the global pack', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [makeResource('common', 'common.png')],
+        usedResources: ['common'],
+        layouts: [
+          makeLayout('Menu', ['common']),
+          makeLayout('Level', ['common']),
+        ],
+      })
+    );
+
+    // The global pack is downloaded at startup anyway.
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['common.png']);
+    expect(getPackByName(plan, 'shared.gdpak')).toBeUndefined();
+    expect(getPackByName(plan, 'scene-0.gdpak')).toBeUndefined();
+  });
+
+  it('puts a file used by manually preloaded objects of several scenes in the shared pack', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [makeResource('boss', 'boss.png')],
+        layouts: [
+          makeLayout(
+            'Level1',
+            [],
+            [{ name: 'Boss', usedResources: [{ name: 'boss' }] }]
+          ),
+          makeLayout(
+            'Level2',
+            [],
+            [{ name: 'Boss', usedResources: [{ name: 'boss' }] }]
+          ),
+        ],
+      })
+    );
+
+    // Manual preloading must keep working: the file is not downloaded before
+    // one of the objects is loaded.
+    expect(getPackFilePaths(plan, 'shared.gdpak')).toEqual(['boss.png']);
+    expect(plan.packs.map(pack => pack.isLoadedAtStartup)).toEqual([false]);
+  });
+
+  it('keeps a spine skeleton, its atlas and its pages in the same pack', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('hero', 'hero.json', {
+            kind: 'spine',
+            metadata: JSON.stringify({
+              embeddedResourcesMapping: { 'hero.atlas': 'heroAtlas' },
+            }),
+          }),
+          makeResource('heroAtlas', 'hero.atlas', {
+            kind: 'atlas',
+            metadata: JSON.stringify({
+              embeddedResourcesMapping: { 'hero.png': 'heroPage' },
+            }),
+          }),
+          makeResource('heroPage', 'hero.png'),
+        ],
+        layouts: [makeLayout('Level', ['hero'])],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'scene-0.gdpak').sort()).toEqual([
+      'hero.atlas',
+      'hero.json',
+      'hero.png',
+    ]);
+    expect(getPackByName(plan, 'resources.gdpak')).toBeUndefined();
+  });
+
+  it('does not choke on unparseable resource metadata', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('image', 'image.png', { metadata: 'not json at all' }),
+        ],
+        usedResources: ['image'],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['image.png']);
+  });
+
+  it('leaves the loading screen background as an individual file', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('splash', 'splash.png'),
+          makeResource('other', 'other.png'),
+        ],
+        usedResources: ['splash', 'other'],
+        loadingScreenBackground: 'splash',
+      })
+    );
+
+    expect(plan.unpackedFilePaths).toEqual(['splash.png']);
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['other.png']);
+    expect(plan.fileToPackIndex['splash.png']).toBeUndefined();
+  });
+
+  it('leaves the game icons as individual files', () => {
+    // They are referenced by the web manifest, the Cordova config.xml... which
+    // the engine never reads.
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('icon', 'icon.png'),
+          makeResource('other', 'other.png'),
+        ],
+        usedResources: ['icon', 'other'],
+        platformSpecificAssets: {
+          'android-icon-36': 'icon',
+          'desktop-icon-512': 'icon',
+          'ios-icon-1024': 'does-not-exist',
+        },
+      })
+    );
+
+    expect(plan.unpackedFilePaths).toEqual(['icon.png']);
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['other.png']);
+  });
+
+  it('leaves excluded resource kinds as individual files', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('hero', 'hero.json', { kind: 'spine' }),
+          makeResource('image', 'image.png'),
+        ],
+        usedResources: ['hero', 'image'],
+      }),
+      { excludedResourceKinds: ['spine', 'atlas'] }
+    );
+
+    expect(plan.unpackedFilePaths).toEqual(['hero.json']);
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['image.png']);
+  });
+
+  it('never packs JavaScript source files, which index.html includes directly', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('extensionCode', 'MyExtension.js', {
+            kind: 'javascript',
+          }),
+          makeResource('image', 'image.png'),
+        ],
+        usedResources: ['extensionCode', 'image'],
+      }),
+      { excludedResourceKinds: RESOURCE_KINDS_NEVER_PACKED }
+    );
+
+    expect(plan.unpackedFilePaths).toEqual(['MyExtension.js']);
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['image.png']);
+  });
+
+  it('never packs a resource that is still a URL', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('remote', 'https://example.com/image.png'),
+          makeResource('local', 'local.png'),
+        ],
+        usedResources: ['remote', 'local'],
+      })
+    );
+
+    expect(plan.unpackedFilePaths).toEqual(['https://example.com/image.png']);
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['local.png']);
+  });
+
+  it('stores a file shared by two resources only once', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          makeResource('smoothed', 'shared.png'),
+          makeResource('pixelated', 'shared.png'),
+        ],
+        usedResources: ['smoothed', 'pixelated'],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['shared.png']);
+  });
+
+  it('ignores resources without a file, like the engine does', () => {
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: [
+          {
+            name: 'broken',
+            file: '',
+            kind: 'image',
+            metadata: '',
+            userAdded: true,
+          },
+          makeResource('image', 'image.png'),
+        ],
+        usedResources: ['broken', 'image'],
+      })
+    );
+
+    expect(getPackFilePaths(plan, 'resources.gdpak')).toEqual(['image.png']);
+    expect(plan.unpackedFilePaths).toEqual([]);
+  });
+
+  it('merges the smallest packs to stay under the pack count limit', () => {
+    const layoutCount = 20;
+    const plan = planResourcePacks(
+      makeProjectData({
+        resources: Array.from({ length: layoutCount }, (_, index) =>
+          makeResource(`image${index}`, `image${index}.png`)
+        ),
+        layouts: Array.from({ length: layoutCount }, (_, index) =>
+          makeLayout(`Scene${index}`, [`image${index}`])
+        ),
+      }),
+      { maxPackCount: 5 }
+    );
+
+    expect(plan.packs.length).toBeLessThanOrEqual(5);
+    // No resource may be lost when merging.
+    const packedFiles: Array<string> = [];
+    plan.packs.forEach(pack => packedFiles.push(...pack.filePaths));
+    expect(packedFiles.sort()).toEqual(
+      Array.from(
+        { length: layoutCount },
+        (_, index) => `image${index}.png`
+      ).sort()
+    );
+    packedFiles.forEach(file => {
+      expect(plan.fileToPackIndex[file]).toBeDefined();
+    });
+  });
+
+  it('handles a project without any resource', () => {
+    const plan = planResourcePacks(
+      makeProjectData({ resources: [], layouts: [makeLayout('Menu', [])] })
+    );
+
+    expect(plan.packs).toEqual([]);
+    expect(plan.fileToPackIndex).toEqual({});
+    expect(plan.unpackedFilePaths).toEqual([]);
+  });
+});
diff --git a/newIDE/app/src/ExportAndShare/ResourcePacking/index.js b/newIDE/app/src/ExportAndShare/ResourcePacking/index.js
new file mode 100644
index 000000000000..292fddc903fa
--- /dev/null
+++ b/newIDE/app/src/ExportAndShare/ResourcePacking/index.js
@@ -0,0 +1,122 @@
+// @flow
+import {
+  planResourcePacks,
+  type ResourcePackPlan,
+} from './ResourcePackPlanner';
+
+export { planResourcePacks };
+export type { ResourcePackPlan };
+
+/**
+ * Resource kinds that are never packed.
+ *
+ * - `PIXI.Assets`, used to load Spine skeletons and atlases, picks its loader
+ *   from the extension of the URL - and a `blob:` URL has none. These are only
+ *   a couple of files per Spine object, so leaving them out of the packs does
+ *   not threaten the file count. Their pages are plain images and are still
+ *   packed.
+ * - JavaScript resources are the source files of extensions, included by
+ *   `index.html` with a `<script>` tag: they must stay where the tag points.
+ */
+export const RESOURCE_KINDS_NEVER_PACKED = ['spine', 'atlas', 'javascript'];
+
+const PROJECT_DATA_PREFIX = 'gdjs.projectData = ';
+const RUNTIME_GAME_OPTIONS_PREFIX = 'gdjs.runtimeGameOptions = ';
+
+/**
+ * Read back the project data that the exporter wrote in `data.js`.
+ *
+ * The file is generated by `ExporterHelper::ExportProjectData` and always has
+ * the shape:
+ *
+ *   gdjs.projectData = {...};
+ *   gdjs.runtimeGameOptions = {...};
+ *
+ * This is the authoritative list of the resources of the exported game. The
+ * files present in the export folder cannot be used instead: the engine files
+ * are copied the same way as the resources.
+ */
+export const readProjectDataFromDataJs = (dataJsContent: string): Object => {
+  const projectDataStart = dataJsContent.indexOf(PROJECT_DATA_PREFIX);
+  const runtimeGameOptionsStart = dataJsContent.lastIndexOf(
+    RUNTIME_GAME_OPTIONS_PREFIX
+  );
+  if (projectDataStart === -1 || runtimeGameOptionsStart === -1) {
+    throw new Error(
+      'Could not read the project data of the exported game: "data.js" does not have the expected content.'
+    );
+  }
+
+  const json = dataJsContent
+    .slice(
+      projectDataStart + PROJECT_DATA_PREFIX.length,
+      runtimeGameOptionsStart
+    )
+    .trim()
+    // Remove the trailing ";" of the assignment.
+    .replace(/;$/, '');
+
+  return JSON.parse(json);
+};
+
+export type ResourcePacksManifest = {|
+  version: number,
+  packs: Array<string>,
+  files: { [filePath: string]: number },
+  /**
+   * Packs to download before the first scene starts, even though no loading
+   * task refers to their files. See `PlannedPack.isLoadedAtStartup`.
+   */
+  startupPacks: Array<number>,
+|};
+
+/**
+ * Build the manifest read by the game engine.
+ *
+ * `packedFilePaths` holds the files that were really written: a resource the
+ * export does not contain is skipped, and must not be announced as being in a
+ * pack. Pack names keep their index even when a pack ended up empty, so that
+ * the indexes of the manifest stay the ones the plan computed.
+ */
+export const buildResourcePacksManifest = (
+  plan: ResourcePackPlan,
+  packedFilePaths: Set<string>
+): ResourcePacksManifest => {
+  const files: { [filePath: string]: number } = {};
+  Object.keys(plan.fileToPackIndex).forEach(filePath => {
+    if (!packedFilePaths.has(filePath)) return;
+    files[filePath] = plan.fileToPackIndex[filePath];
+  });
+
+  const startupPacks = [];
+  plan.packs.forEach((pack, packIndex) => {
+    // A pack whose files were all missing is never written, so asking the game
+    // to download it would only produce a 404.
+    const wasWritten = pack.filePaths.some(filePath =>
+      packedFilePaths.has(filePath)
+    );
+    if (pack.isLoadedAtStartup && wasWritten) startupPacks.push(packIndex);
+  });
+
+  return {
+    version: 1,
+    packs: plan.packs.map(pack => pack.name),
+    files,
+    startupPacks,
+  };
+};
+
+/**
+ * Declare the packs to the game engine, which reads `gdjs.resourcePacks` when
+ * it sets up its resource loader (see `GDJS/Runtime/ResourcePackManager.ts`).
+ *
+ * This is appended to `data.js` rather than passed through
+ * `gdjs.runtimeGameOptions`, because a full export instantiates the game with
+ * an empty options object (see the `GDJS_ADDITIONAL_SPEC` placeholder in
+ * `GDJS/Runtime/index.html`).
+ */
+export const appendResourcePacksManifestToDataJs = (
+  dataJsContent: string,
+  manifest: ResourcePacksManifest
+): string =>
+  dataJsContent + 'gdjs.resourcePacks = ' + JSON.stringify(manifest) + ';\n';
diff --git a/newIDE/app/src/ExportAndShare/ShareDialog/ExportLauncher.js b/newIDE/app/src/ExportAndShare/ShareDialog/ExportLauncher.js
index bceda75fc1d8..e114d5d3acde 100644
--- a/newIDE/app/src/ExportAndShare/ShareDialog/ExportLauncher.js
+++ b/newIDE/app/src/ExportAndShare/ShareDialog/ExportLauncher.js
@@ -32,6 +32,9 @@ import inc from 'semver/functions/inc';
 import Toggle from '../../UI/Toggle';
 import AlertMessage from '../../UI/AlertMessage';
 import { type GameAndBuildsManager } from '../../Utils/UseGameAndBuildsManager';
+import PreferencesContext, {
+  type Preferences,
+} from '../../MainFrame/Preferences/PreferencesContext';
 
 type State = {|
   exportStep: BuildStep,
@@ -117,6 +120,9 @@ const getErrorMessage = (i18n: I18nType, exportStep: BuildStep) => {
  * of an export.
  */
 export default class ExportLauncher extends Component<Props, State> {
+  static contextType: React.Context<Preferences> = PreferencesContext;
+  context: Preferences;
+
   state: State = {
     exportStep: '',
     build: null,
@@ -271,6 +277,7 @@ export default class ExportLauncher extends Component<Props, State> {
         updateStepProgress: this._updateStepProgress,
         exportState: this.state.exportState,
         i18n,
+        packResources: this.context.values.packResourcesAtExport,
       };
 
       if (
diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js b/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js
index d22f9513cc82..e313ea6c6436 100644
--- a/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js
+++ b/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js
@@ -240,6 +240,11 @@ export type PreferencesValues = {|
   newProjectsDefaultStorageProviderName: string,
   useShortcutToClosePreviewWindow: boolean,
   watchProjectFolderFilesForLocalProjects: boolean,
+  /**
+   * Gather the resources of exported games into a few ".gdpak" archives, so
+   * that they stay below the file count limits of hosting services.
+   */
+  packResourcesAtExport: boolean,
   newFeaturesAcknowledgements: {
     [featureId: string]: {| dates: [number] |},
   },
@@ -362,6 +367,7 @@ export type Preferences = {|
   setNewProjectsDefaultFolder: (newProjectsDefaultFolder: string) => void,
   setUseShortcutToClosePreviewWindow: (enabled: boolean) => void,
   setWatchProjectFolderFilesForLocalProjects: (enabled: boolean) => void,
+  setPackResourcesAtExport: (enabled: boolean) => void,
   setNewFeaturesAcknowledgements: ({
     [featureId: string]: {| dates: [number] |},
   }) => void,
@@ -444,6 +450,7 @@ export const initialPreferences = {
     newProjectsDefaultStorageProviderName: 'Cloud',
     useShortcutToClosePreviewWindow: true,
     watchProjectFolderFilesForLocalProjects: true,
+    packResourcesAtExport: true,
     newFeaturesAcknowledgements: {},
     displaySaveReminder: { activated: true },
     editorStateByProject: {},
@@ -532,6 +539,7 @@ export const initialPreferences = {
   setNewProjectsDefaultStorageProviderName: () => {},
   setUseShortcutToClosePreviewWindow: () => {},
   setWatchProjectFolderFilesForLocalProjects: () => {},
+  setPackResourcesAtExport: () => {},
   setNewFeaturesAcknowledgements: () => {},
   setDisplaySaveReminder: () => {},
   getEditorStateForProject: (projectId: any): any => {},
diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js b/newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js
index a7ab698b33db..f717cc0437fa 100644
--- a/newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js
+++ b/newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js
@@ -80,6 +80,7 @@ const PreferencesDialog = ({
     setNewProjectsDefaultFolder,
     setUseShortcutToClosePreviewWindow,
     setWatchProjectFolderFilesForLocalProjects,
+    setPackResourcesAtExport,
     setDisplaySaveReminder,
     setFetchPlayerTokenForPreviewAutomatically,
     setPreviewCrashReportUploadLevel,
@@ -310,6 +311,20 @@ const PreferencesDialog = ({
               )}
             />
           </ColumnStackLayout>
+          <Text size="block-title">
+            <Trans>Export</Trans>
+          </Text>
+          <ColumnStackLayout expand>
+            <CompactToggleField
+              labelColor="primary"
+              hideTooltip
+              onCheck={setPackResourcesAtExport}
+              checked={values.packResourcesAtExport}
+              label={i18n._(
+                t`Pack the game resources into a few files when exporting (recommended: avoids the file count limits of itch.io and other hosting services)`
+              )}
+            />
+          </ColumnStackLayout>
           <Text size="block-title">
             <Trans>Events Sheet</Trans>
           </Text>
diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js b/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js
index a89d0adb745c..6d3dbaca9353 100644
--- a/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js
+++ b/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js
@@ -145,6 +145,7 @@ export const getInitialPreferences = (): {
   useShortcutToClosePreviewWindow: boolean,
   userShortcutMap: {},
   watchProjectFolderFilesForLocalProjects: boolean,
+  packResourcesAtExport: boolean,
 } => {
   let languageOrLocale = 'en';
   const browserLanguageOrLocale = getBrowserLanguageOrLocale();
@@ -374,6 +375,8 @@ export default class PreferencesProvider extends React.Component<Props, State> {
       this
     ): any),
     // $FlowFixMe[method-unbinding]
+    setPackResourcesAtExport: (this._setPackResourcesAtExport.bind(this): any),
+    // $FlowFixMe[method-unbinding]
     setNewFeaturesAcknowledgements: (this._setNewFeaturesAcknowledgements.bind(
       this
     ): any),
@@ -1254,6 +1257,18 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     );
   }
 
+  _setPackResourcesAtExport(enable: boolean) {
+    this.setState(
+      state => ({
+        values: {
+          ...state.values,
+          packResourcesAtExport: enable,
+        },
+      }),
+      () => this._persistValuesToLocalStorage(this.state)
+    );
+  }
+
   _setNewFeaturesAcknowledgements(newFeaturesAcknowledgements: {
     [featureId: string]: {| dates: [number] |},
   }) {