How can I download remote texture in my game

How can I download remote texture, includes image and plist file and use it as normal resource in my game

@slackmoehrle @nite is it possible with Cocos Creator 1.9, I read through the API document but haven’t found anything

http://www.cocos2d-x.org/docs/api-ref/creator/v1.9/en/classes/loader.html#load

thanks for your reference, what I want to archive is download a sprite atlas from remote server to reduce binary file size

cc.loader.load(‘a.png||a.plist’, function (err, tex) {
cc.log('Result should be a texture: ’ + new cc.SpriteAtlas(tex)));
});

I think the code might look like that but it returns the raw text contained within the plist file instead of expected sprite atlas

Yeah sorry man, not sure how to achieve that.
Also as far as i know plist is raw text only, by which the png is sliced in cocos.

@jare can this be done in 1.9?

Sorry, Creator support raw texture only right now. plist will be supported at 2.x.

Hi @jare ,

Cocos Creator is already is 2.1, does it now support remote atlas?

Not support now…

Is there any alternative way to load atlas remotely?

You can load the atlas file simply with XMLHttpRequest.It works for me

@ balazsnemeth, how do you get spriteatlas from plist using XMLHttpRequest? can you give an example in sort?

A few relevant functions how to load atlas, hope you get build up the big picture:

const atlasTxt = await resourceManager.loadTextResource(atlasUrl, 'json', forceReload);
const spineJson = await resourceManager.loadTextResource(skeletonUrl, 'json', forceReload);

        var asset = new sp.SkeletonData();
        asset.skeletonJson = spineJson;
        asset.atlasText = atlasTxt;
        asset.textures = textures;
        asset.textureNames = this._getAtlasFileNames(atlasTxt);
        const skeletonImage = new sp.Skeleton();
        skeletonImage.skeletonData = asset; // asset is loaded with cc.loader.load(url... from remote
        if (file.defaultAnimation) {
            skeletonImage.defaultAnimation = file.defaultAnimation;
        }
        return skeletonImage;

Used Functions:

private _getAtlasFileNames(atlasTxt: string): string[] {

        // In the text of an atlas file, there always an empty row before a new image description
        const eol = '\n';
        const rows = atlasTxt.split(eol);
        const fileNames = rows.reduce((foundRows, rowText, index) => {
            if (!rowText.length && index + 1 < rows.length) {
                foundRows.push(rows[index + 1]);
            }
            return foundRows;
        }, []);

        return fileNames;
    }


    loadTextResource(remoteUrl, extension = 'json', forceReload = false): Promise<string> {
        // Load remotely or from cache
        if(hash in this.webMemoryRemoteSingleFileCache) {
            return Promise.resolve(this.webMemoryRemoteSingleFileCache[hash]);
        }

        return HTTPClient.request(remoteUrl + (forceReload ? '?rnd=' + new Date().getTime() : '')).then(text => {
            this.webMemoryRemoteSingleFileCache[hash] = text;
            return text;
        });
    }

And finally the HTTPClient networking class:

const {ccclass} = cc._decorator;

/**
 * Generic HTTP Client to send GET, POST, PUT, ... requests
 */
@ccclass
export default class HTTPClient {

    static request(url, method = "GET", body: any = null, headers = [], responseType: XMLHttpRequestResponseType = ''): Promise<any> {


        return new Promise((resolve, reject) => {

            // cc.log('Request: ', url);

            var xhr = new XMLHttpRequest();
            if (responseType) {
                xhr.responseType = responseType;
            }
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
                    var response = xhr.response;
                    // cc.log('Response: ', response);
                    resolve(response);
                }
            };
            xhr.onerror = () => {
                // cc.error('Config.json ERROR: ', xhr.statusText);                   
                console.error('Config.json ERROR: ', xhr.statusText);                   
                reject(xhr.statusText);
            };

            for (const headerName in headers) {
                xhr.setRequestHeader(headerName, headers[headerName]);
            }
            
            xhr.open(method, url, true);
            xhr.send(body);

        })

    }
}