PIXI.loaders.Loader add custome Textures

[Nexus_Null]

I am currently working on something which uses Pixijs and it's Loader to load textures.

Because I am supporting different screen sizes, I construct everything that is tile-able big while the page is loading, and save it at least one tile bigger than the screen resolution. I do this because rendering 1 big texture is easier than 800 small textures. Now I wonder is there a neat way to add PIXI.Graphics objects or textures to the PIXI.loaders.Loader?

- Thankful NexusNull.

[ivan.popelyshev]

Are you developing your own texture packer? Better to use existing. Look at http://renderhjs.net/shoebox/ , https://www.codeandweb.com/texturepacker , demos at https://github.com/kittykatattack/learningPixi .

If you want to build custom texturepacker look here: https://github.com/pixijs/pixi-spine/blob/master/src/loaders/atlasParser.js , https://github.com/pixijs/pixi-spine/blob/master/src/SpineRuntime/Atlas.js

But really - please don't. Just use Texture Packer or shoebox.

[Nexus_Null]

Don't worry, I have better things to do than code my own Texture packer.

What I meant by,

On 8/14/2016 at 6:13 AM, Nexus_Null said:

I construct everything that is tile-able big while the page is loading,

is that I construct or render the background via a Graphics object. The only thing I want to do is have all the textures in a single objects, for conveniences.

I just don't know of a good way to load the textures into the PIXI.loaders.Loader.

[ivan.popelyshev]

Ugh.. still dont understand, I'm so slow today  Can you make an example?

[Nexus_Null]

Yeah I guess it is kind of hard to understand what I want.

This is basically what I have come up with. Probably could have done better with extending PIXI.loaders.Loader but it works either way. I know I lose a lot of functionality by doing this but I don't need it anyway.
 

var _Textures = function(basePath, concurrency){
    this.textures = {};
    this.creators = [];
    this.loader = new PIXI.loaders.Loader(basePath, concurrency);
};

_Textures.prototype.add = function(name, url){
    return this.loader.add(name, url);
};
_Textures.prototype.create = function(name, func){
    if(typeof func === "function"){
        if(this.creators[name] == undefined){
            this.creators[name] = func;
        } else {
            console.log("Adding creator with " + name + " that already exists. Texture is not going to get overwritten")
        }
    }
    return this;
};

_Textures.prototype.load = function(){
    var self = this;
    this.loader.load(function(){
        for(var key in self.loader.resources){
            self.textures[key] = self.loader.resources[key].texture;
        }

        for(var key in self.creators){
            var texture = self.creators[key]();
            console.log(texture);
            if(texture != undefined && texture.constructor != undefined && texture.constructor.name == "Texture"){
                self.textures[key] = texture;
            }
        }
    });
};

TB={};
TB.createBackground = function (width, height, box) {
    width = width || 1280;
    height = height || 960;

    var graphics = new PIXI.Graphics();

    graphics.lineWidth = 0.2;

    box = box || 16;
    var lineX = (width / box) + 2;
    var lineY = (height / box) + 2;
    for (var i = 0; i < lineX; i++) {
        graphics.moveTo(i * box, 0);
        graphics.lineTo(i * box, height + box);
    }
    for (var h = 0; h < lineY; h++) {
        graphics.moveTo(0, h * box);
        graphics.lineTo(width + box, h * box);
    }
    return graphics.generateCanvasTexture();
};