How can I download remote texture in my game

How can I download remote texture in my game
0
#1

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

#2

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

#3

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

#4

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

#5

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.

#6

@jare can this be done in 1.9?

#7

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

#8

Hi @jare ,

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

#9

Not support now…

#10

Is there any alternative way to load atlas remotely?

#11

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

#12

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

#13

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);

        })

    }
}