Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SpriteSheet animation: Canot read proprety 'Trim' of undefined ???

See original GitHub issue

Hi why when import my sprite Sheet animation (JSON) from texturepacker i have error . do i make a mistake somewhere ? the Json test


{"frames": {

"Heroe1 Render IDLE_00000.png":
{
	"frame": {"x":0,"y":0,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00001.png":
{
	"frame": {"x":155,"y":0,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00002.png":
{
	"frame": {"x":310,"y":0,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00003.png":
{
	"frame": {"x":465,"y":0,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00004.png":
{
	"frame": {"x":620,"y":0,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00005.png":
{
	"frame": {"x":775,"y":0,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00006.png":
{
	"frame": {"x":0,"y":230,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00007.png":
{
	"frame": {"x":155,"y":230,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00008.png":
{
	"frame": {"x":310,"y":230,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00009.png":
{
	"frame": {"x":465,"y":230,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00010.png":
{
	"frame": {"x":620,"y":230,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00011.png":
{
	"frame": {"x":775,"y":230,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00012.png":
{
	"frame": {"x":0,"y":460,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00013.png":
{
	"frame": {"x":155,"y":460,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00014.png":
{
	"frame": {"x":310,"y":460,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00015.png":
{
	"frame": {"x":465,"y":460,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00016.png":
{
	"frame": {"x":620,"y":460,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00017.png":
{
	"frame": {"x":775,"y":460,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00018.png":
{
	"frame": {"x":0,"y":690,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00019.png":
{
	"frame": {"x":155,"y":690,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00020.png":
{
	"frame": {"x":310,"y":690,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00021.png":
{
	"frame": {"x":465,"y":690,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00022.png":
{
	"frame": {"x":620,"y":690,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00023.png":
{
	"frame": {"x":775,"y":690,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00024.png":
{
	"frame": {"x":0,"y":920,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00025.png":
{
	"frame": {"x":155,"y":920,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00026.png":
{
	"frame": {"x":310,"y":920,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00027.png":
{
	"frame": {"x":465,"y":920,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00028.png":
{
	"frame": {"x":620,"y":920,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00029.png":
{
	"frame": {"x":775,"y":920,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00030.png":
{
	"frame": {"x":0,"y":1150,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00031.png":
{
	"frame": {"x":155,"y":1150,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00032.png":
{
	"frame": {"x":310,"y":1150,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00033.png":
{
	"frame": {"x":465,"y":1150,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00034.png":
{
	"frame": {"x":620,"y":1150,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00035.png":
{
	"frame": {"x":775,"y":1150,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00036.png":
{
	"frame": {"x":0,"y":1380,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00037.png":
{
	"frame": {"x":155,"y":1380,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00038.png":
{
	"frame": {"x":310,"y":1380,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
},
"Heroe1 Render IDLE_00039.png":
{
	"frame": {"x":465,"y":1380,"w":155,"h":230},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":155,"h":230},
	"sourceSize": {"w":155,"h":230}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "dhrgedrh.png",
	"format": "RGBA8888",
	"size": {"w":930,"h":1610},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:069491d8096ccebef7112e97498ded8c:313ee95e5ab60fd61c63c55a9eb1203d:7ecbbadadcf5331331d4b91fbfdab0da$"
}
}

and the code for call and load

        PIXI.loader
        .add('img/pictures/avatar/dhrgedrh.json')
        .load(onAssetsLoaded);

        function onAssetsLoaded()
        {
            // create an array of textures from an image path
            var frames = [];

            for (var i = 0; i < 40; i++) {
                var val = i < 10 ? '0' + i : i;

                // magically works since the spritesheet was loaded with the pixi loader
                frames.push(PIXI.Texture.fromFrame('Heroe1 Render IDLE_000' + val + '.png'));
            }

            // create an AnimatedSprite (brings back memories from the days of Flash, right ?)
            var anim = new PIXI.extras.AnimatedSprite(frames);

            /*
            * An AnimatedSprite inherits all the properties of a PIXI sprite
            * so you can change its position, its anchor, mask it, etc
            */
            anim.x = 0;
            anim.y = 0;
            anim.anchor.set(0.5);
            anim.animationSpeed = 0.5;
            anim.play();

            $gameScreen.showPicture(200, '55', 0, 50, 50).addChild(anim); // CRASH

is the reference line of error in pixi ! **_

TypeError: Cannot read property ‘trim’ of undefined at AnimatedSprite._calculateBounds (VM92 pixi.js:20967) at AnimatedSprite.calculateBounds (VM92 pixi.js:9302) at Sprite_Picture.calculateBounds (VM92 pixi.js:9311) at Sprite_Picture.getBounds (VM92 pixi.js:9793)

_**

    Sprite.prototype._calculateBounds = function _calculateBounds() {
        var trim = this._texture.trim;
        var orig = this._texture.orig;

thank a lot for help guys

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
djmisterjoncommented, Aug 13, 2017

hey hey its solved omg By testing randomly and after 4 hours! lol

We need to add the AnimatedSprite inside a pixi container befor It would be good to inform people! Here is the code that works!

    _IntroScreen.prototype.testSpriteSheet = function(){
        var loader = PIXI.loader.add('spriteSheetTest', 'img/pictures/avatar/dhrgedrh.json').load(setup); // callback=>(setup) when loader has cached the spriteSheets
        function setup(){
            var frames = []; // create an array of textures from an image path
            for (var i = 0; i < 40; i++) {
                var val = i < 10 ? '0' + i : i; 
                frames.push( PIXI.loader.resources['spriteSheetTest'].textures['Heroe1 Render IDLE_000' + val + '.png'] );
            }
            var anim = new PIXI.extras.AnimatedSprite(frames); // creat a class obj animated from pixi (need to add in a pixi.Container obj)
            anim.x = 0;
            anim.y = 0;
            anim.anchor.set(0.5);
            anim.animationSpeed = 0.5;
            anim.play();
    
            var testContainer = new PIXI.Container(); // need container Befor ! ***********
            testContainer.addChild(anim);
            $gameScreen.showPicture(200, '55', 0, 50, 50).addChild(testContainer); // CRASH (fixed now with pixi container)
        }
    }
1reaction
djmisterjoncommented, Jul 7, 2018

@themoonrat Not a issue but a mistake on my side , this can close. related to how the stage and pixi display work. .

Read more comments on GitHub >

github_iconTop Results From Across the Web

SpriteSheet animation: Canot read proprety 'Trim' of undefined
Hi why when import my sprite Sheet animation (JSON) from texturepacker i have error ... TypeError: Cannot read property 'trim' of undefined
Read more >
TypeError: Cannot read property 'trim' of Undefined in JS
The "Cannot read property 'trim' of undefined" error occurs when calling the trim() on an undefined value. To solve the error, make sure...
Read more >
Cannot read property 'trim' of undefined in Jquery - Stack ...
You're getting error. Uncaught TypeError: Cannot read property 'trim' of undefined in Jquery. that means, the variable vname is undefined .
Read more >
"Cannot read property 'sprite' of undefined"? - Phaser 3
I'm trying to spawn sprites. function citizen(x,y) { guy = this.add.sprite(x, y,'guy'); this.anims.create({ key: 'walk', frames: this.anims.
Read more >
All.js loading error: Cannot read property 'trim' of undefined
when I set the data-options for <script src=“https://connect-cdn.atl-paas.net/all-debug.js” … I tried both all.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Need Documentation on JSON format - Online examples don't work

Next page

Can't import a spritesheet in React (w/webpack)