Bundle of cocosCreator (2)

The built-in Bundle will be generated when it is packaged and built after it is set in the build release. Take main and resources as an example:

After the build, it will be generated in the directory of build’s android-001:

The directory structure of Bundle is similar, the main content:

• Code The code related will generate an entry script file of index.js or game.js according to the platform
• Resources Resources and dependent resources will be placed in the import or native directory
• Resource Configuration Resource configuration information is placed under config.json

Configuration

Bundle In addition to the official built-in, it also supports custom configuration. Its configuration is based on folder. When we select a folder in the Explorer, the Property Inspector will An option to Configure as Bundle appears.

After checking the Configure as Bundle option

The official gave a good hint, its configuration parameters:

For the compression type, there are mainly the following types:

Regarding priority, the levels of the built-in Bundle are:

Note: The custom Bundle should not have higher priority than the built-in Bundle, so as not to share the resources of the built-in Bundle.

In addition, Script also supports Bundle. If Bundle is set, all script files will be merged into one .js file, which will be loaded when Bundle is loaded This js file.

For example, taking assets/scripts as an example, after setting up the Bundle, publish build through android build:

The index.js file contains all the content related to the script file.

Script loading

Bundle is used in the script, mainly through cc.assetManager, its main methods are:

export const assetManager: AssetManager;
export class AssetManager {<!-- -->
  // Get the loaded bundle collection
  bundles: __private.cocos_core_asset_manager_cache_ICache<AssetManager.Bundle>;
  // Get the built-in main package
  get main(): AssetManager. Bundle | null;
  // Get the built-in resources package
  get resources(): AssetManager. Bundle | null;
  // Get loaded subpackages
  getBundle(name: string): AssetManager. Bundle | null;
  // Remove the specified bundle package
  removeBundle(bundle: AssetManager. Bundle): void;
  // load package
  loadBundle(name, options, onComplete);
}

Simple example:

// load script Bundle
assetManager.loadBundle("DemoBundle", (err: Error, data) => {<!-- -->
  console.log("loadBundle data:", data);
});

// Get the loaded bundle
let scriptBundle = assetManager. getBundle("DemoBundle");
console.log("loaded scriptBundle:", scriptBundle);

Notice:

• Except for the built-in main and resources Bundles, other custom Bundles must be loaded before they can pass getBundle code> get
• For scripts, it is best not to refer to each other, which may cause the script to not be found at runtime

For the use of Bundle, it is probably similar to the use of resources. The specific methods are:

• load load resources
• loadDir load resources in batches
• preload preload resources
• preloadDir preload resources in the directory

For more information, please refer to the resources (1) of the previous blog cocosCreator, a simple example:

protected onLoad(): void {<!-- -->
  // load Bundle
  assetManager.loadBundle("DemoBundle", (err: Error, bundle) => {<!-- -->
    if (err) {<!-- -->
      return console. error(err);
    }
    this.initBundle(bundle);
  });
}

private initBundle(bundle: any) {<!-- -->
  console.log("bundle name:", bundle.name);
  console.log("bundle root path:", bundle.base);
  console. log(bundle);

  // preload bundle resources
  bundle.preload("sound/click", (err, data) => {<!-- -->
    if (err) {<!-- -->
      return console. error(err);
    }
    console.log("localConfig data:", data);
  });

  // Preload directory resources
  bundle.preloadDir("spine", (err, data) => {<!-- -->
    if (err) {<!-- -->
      return console. error(err);
    }
  })

  // load resources
  bundle.load("sound/click", (err, data) => {<!-- -->
    if (err) {<!-- -->
      return console. error(err);
    }
    console. log(data);
  });
}