Cocos Creator之单个资源动态加载

一 , 环境

            CC 3.0.1

二 , 单资源加载 (本地)

            ①, 加载 SpriteFrame /  Texture2D

                 组织如下:

                                Cocos Creator之单个资源动态加载

           代码如下, 注意查看路径信息

resources.preload('test assets/image/spriteFrame', SpriteFrame);预加载

import { _decorator, Component, Node, Sprite, resources, SpriteFrame, Texture2D } from 'cc';
const { ccclass, property } = _decorator;

/**
 * 动态加载单个资源 (非AB包中资源)
 */
@ccclass('LoadSingleAsset')
export class LoadSingleAsset extends Component {

    @property( {type: Sprite} )
    // @ts-ignore
    private demoSprite: Sprite = null;

    @property({type:Sprite})
    // @ts-ignore
    private demoSprite1: Sprite = null;

    start () {
        //动态加载一个spriteFrame
        resources.load("images/head/spriteFrame" , SpriteFrame, ( error, image ) => {
            if( !error ){
                this.demoSprite.spriteFrame = image;
            }
        });
        //动态加载一个Texture
        resources.load("images/b/texture" , Texture2D, ( error ,  image) => {
            if( !error ){
                let sf: SpriteFrame = new SpriteFrame();
                sf.texture = image;
                this.demoSprite1.spriteFrame = sf;
            }
        });

    }
}

结果 :

Cocos Creator之单个资源动态加载


                        ②, 加载prefab , 组织如下

Cocos Creator之单个资源动态加载                        核心代码

resources.load( "prefabs/prefab_demo" , Prefab, ( error, prefab ) => {
    if( !error ){
        let node: Node =  instantiate( prefab );
        node.setPosition( -100, -200 );
        this.node.addChild( node );
    }
} );

                    ③, 加载 AudioClip , 组织如下

Cocos Creator之单个资源动态加载

                    代码如下:

resources.load("sounds/sound" ,  AudioClip , ( error , audio: AudioClip ) => {
    if( !error ){
        audio.setLoop( true );
        audio.play();
    }
});


三, 单资源加载 (远程)

      依然是使用angwhere进行远程模拟, 目前只在资源服务器下, 建立了一个images的文件夹, 下面放了一个B01.png的图片, 如下

Cocos Creator之单个资源动态加载

①, 加载图片, 核心代码如下:

assetManager.loadRemote( "http://192.168.0.103:8868/images/B01.png" , { type: `png` } , ( error, imageAsset ) => {
    if( !error ){
        const texture: Texture2D = new Texture2D();
        texture.image = imageAsset as ImageAsset;
        const sf: SpriteFrame = new SpriteFrame();
        sf.texture = texture;
        this.img.spriteFrame = sf;
    }else{
        console.log( `有错误 : \n ${error}` );
    }
} );

结果如下

Cocos Creator之单个资源动态加载

②, 加载音效

再在资源服务器根目录下, 新建一个 sounds 文件夹, 在文件夹中放一个open.mp3, 如下

Cocos Creator之单个资源动态加载

核心代码如下:

assetManager.loadRemote( "http://192.168.0.103:8868/sounds/open.mp3" ,  ( error, audioClip ) => {
    if( !error ){
        const sound: AudioClip = audioClip as AudioClip;
        sound.setLoop( true );
        sound.play();
    }else{
        console.log(`有错误 : \n ${error}`);
    }
});

③, 加载文本

    在资源服务器根目录下, 新建一个 configs文件夹 , 在文件夹中放置一个 demo.txt, 如下

Cocos Creator之单个资源动态加载

核心代码如下:

assetManager.loadRemote( "http://192.168.0.103:8868/configs/demo.txt" , ( error , textAsset ) => {
    if( !error ){
        const txt: TextAsset = textAsset as TextAsset;
        console.log( `我得到配置数据 : \n ${txt.text}` );
    }else{
        console.log(`有错误 : \n ${error}`);
    }
} );

结果

Cocos Creator之单个资源动态加载

上一篇:Cocos Creator之热更新


下一篇:如何实现自动化工作流?