Jump to content

I have added a function called PIXI.getJsonObject to get the json Data. Is it a good idea?


Recommended Posts

I had a lot of trouble trying to get the json data (due to the fact i couldn't get a spritesheet to work), so I added my own little function in PIXI.js called "PIXI.getJsonObject". I hope it is a good idea and a helpful function to anyone trying to get the Json data, But anyways here it is:


In "pixi.js" file i have added:


PIXI.assetJsonHolder = [];
PIXI.getJsonObject = function(id){
    for (var i = 0; i < PIXI.assetJsonHolder.length; i++){
        if(PIXI.assetJsonHolder.id === id){
            PIXI.assetJsonHolder.jsonData.length = PIXI.assetJsonHolder.length;
            return PIXI.assetJsonHolder.jsonData;
            return null;
and in the :
PIXI.JsonLoader.prototype.onJSONLoaded = function () 
this is the change or add i have added

    var countFrames = 0;
                for (var i in frameData) {
                    var rect = frameData.frame;
                    if (rect) {
                        PIXI.TextureCache = new PIXI.Texture(this.texture, {
                            x: rect.x,
                            y: rect.y,
                            width: rect.w,
                            height: rect.h
                        // check to see ifthe sprite ha been trimmed..
                        if (frameData.trimmed) {
                            var texture =  PIXI.TextureCache;
                            var actualSize = frameData.sourceSize;
                            var realSize = frameData.spriteSourceSize;
                            texture.trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h);
                var jsonID = this.url.replace(this.baseUrl,'');
                PIXI.assetJsonHolder.push({id:jsonID, jsonData: this.json, length:countFrames});
and to call the function:
var jsonData = new PIXI.getJsonObject('jsonfile.json');
It works for me and i can get the jasonData i want. Give me a feedback and let me know what you think?

P.s i still can't get my spritesheet animation to work.

Link to comment
Share on other sites

SebastianNette : Oh right i just cant seem to get the data to create a movie clip or a spritesheet. I keep getting error message, however i recently managed to get a movie clip animation working using the function i made


enpu: In pixi MovieClip and Spritesheet example (http://www.goodboydigital.com/pixijs/examples/3/ and http://www.goodboydigital.com/pixijs/examples/2/). You have to load the spritesheet then add an array of PIXI.Texture.fromFrame then add it to the movieClip to use: 



for(var i = 0; i < 29; i++){

      var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");




var explosion = new PIXI.MovieClip(explosionTextures);


I thought it might be easier doing it with the json data just to loop adding the frame name using the json, Because in the Spritesheet for example you have a SpriteSheet.json loadded in and in that spriteSheet you have you have 4 different .png frames



var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];


So instead of me typing it out and checking what .png i have i would just use the json to loop through and add that frame, but because i found it had to get the json i just added my own function to grab the json data. But since you guys say it isn't need could you give me an example how to use that PIXI.JsonLoader?

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...