Jump to content

PIXI.loaders.Loader add custome Textures


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
        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]();
            if(texture != undefined && texture.constructor != undefined && texture.constructor.name == "Texture"){
                self.textures[key] = texture;

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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...