Asset Loading

    • All resources that need to be dynamically loaded by script must be placed in the resources folder or one of its sub-folders. resources needs to be created manually in the assets folder and must be located in the assets root directory, like this:

    • The second to note is that compared to previous Cocos2d-JS, dynamic loading of resources in Creator is asynchronous, you need to get the loaded resources in the callback function. This is done because in addition to the resources associated with the scene, Creator has no additional resources preload list, and the dynamically loaded resources are really dynamically loaded.

    After the image is set to a spriteframe, texture or other image types, an asset of the corresponding type will be generated in the Assets Panel. But if test_assets/image is loaded directly, and the type will be ImageAsset. You must specify the full path of sub asset, then the generated SpriteFrame can be loaded.

    1. // load a SpriteFrame, image is ImageAsset, spriteFrame is image/spriteFrame, texture is image/texture
    2. resources.load("test_assets/image/spriteFrame", SpriteFrame, (err, spriteFrame) => {
    3.     this.node.getComponent(Sprite).spriteFrame = spriteFrame;
    4. });

    For an atlas imported from a third-party tool such as TexturePacker, if you want to load the SpriteFrame, you can only load the atlas first, and then get the SpriteFrame. This is a special case.

    1. // load SpriteAtlas, and get one of them SpriteFrame
    2. // Note Atlas resource file (plist) usually of the same name and a picture file (PNG) placed in a directory,
    3. // So should need to in the second parameter specifies the resource type.
    4. resources.load("test_assets/sheep", SpriteAtlas, (err, atlas) => {
    5.     const frame = atlas.getSpriteFrame('sheep_down_0');
    7. });

    After importing the FBX model or glTF model into the editor, it will parse out the related resources which includes meshes, materials, skeletons, animations, etc. contained in the model, as shown in the following figure.

    model

    resources.loadDir can load multiple resources under the same path:

    1. // loading all resource in the test_assets directory
    2. resources.loadDir("test_assets", function (err, assets) {
    3.     // ...
    5. // Load all SpriteFrames in the `test_assets` directory and get their urls
    6. resources.loadDir("test_assets", SpriteFrame, function (err, assets) {
    7.     // ...
    8. });

    Starting with v2.4, in addition to scenes that can be preloaded, other resources can also be preloaded. Preloading has the same loading parameters as normal loading, but it will only download the necessary resources, and will not perform deserialization or initialization. Therefore, it consumes less performance and is suitable for use during the game.

    resources provides preload and preloadDir for preloading resources.

    Use the preload related interface to load resources in advance, without waiting for the preload to finish. Then use the normal load interface to load, the normal load interface will directly reuse the content that has been downloaded during the preload process to shorten the load time.

    For more information on preloading, please refer to the Preloading and Loading documentation.

    1. // Remote texture url with file extensions
    2. let remoteUrl = "http://unknown.org/someres.png";
    3. assetManager.loadRemote<ImageAsset>(remoteUrl, function (err, imageAsset) {
    4.     const spriteFrame = new SpriteFrame();
    5.     const texture = new Texture2D();
    6.     texture.image = imageAsset;
    7.     spriteFrame.texture = texture;
    8.     // ...
    9. });
    11. // Remote texture url without file extensions, then you need to define the file type explicitly
    12. remoteUrl = "http://unknown.org/emoji?id=124982374";
    14.     const spriteFrame = new SpriteFrame();
    15.     const texture = new Texture2D();
    16.     texture.image = imageAsset;
    17.     spriteFrame.texture = texture;
    18.     // ...
    20. // Use absolute path to load files on device storage
    21. let absolutePath = "/dara/data/some/path/to/image.png"
    22. assetManager.loadRemote<ImageAsset>(absolutePath, function (err, imageAsset) {
    23.     const spriteFrame = new SpriteFrame();
    24.     const texture = new Texture2D();
    25.     texture.image = imageAsset;
    26.     spriteFrame.texture = texture;
    27.     // ...
    28. });
    30. // Remote Audio
    31. remoteUrl = "http://unknown.org/sound.mp3";
    32. assetManager.loadRemote(remoteUrl, function (err, audioClip) {
    33.     // play audio clip
    34. });
    36. // remote Text
    37. remoteUrl = "http://unknown.org/skill.txt";
    38. assetManager.loadRemote(remoteUrl, function (err, textAsset) {
    39.     // use string to do something
    40. });

    There still remains some restrictions currently, the most important are:

    1. This loading method supports only native resource types such as textures, audios, text, etc., and does not support direct loading and analysis of resources such as SpriteFrame, SpriteAtlas, TiledMap. (If you want to load all resources remotely, use the Asset Bundle)