How can i control TexturePack with rotation

[GBear]

hi..

i'm packing images to optimize

 

i packed UI images by spine packer..

 

i set like this

 

and i load like this

   var scope = this;        // create a new loader        var assetsToLoader = ["data/ui/packed/test.atlas"];        PIXI.loader            .add('ui_all', assetsToLoader[0])            .load(onAssetsLoaded);        // use callback        function onAssetsLoaded(loader, res) {            scope.loaded(Def.DataType.Icons);            console.log('LOADED ICONS');            var atlas_src = res.ui_all.data;            var atlas = new PIXI.spine.SpineRuntime.Atlas(atlas_src, 'data/ui/packed');            // create base textures            for (var i in atlas.pages) {                var page = atlas.pages[i];                atlas.updateUVs(page);                var base_texture = page.rendererObject;                var regions = atlas.regions;                for (var i in regions) {                    var region = regions[i];                    //var rotate	= region.rotate;                    var spriteRect = new PIXI.Rectangle(                        region.x,                        region.y,                        region.rotate ? region.height : region.width,                        region.rotate ? region.width : region.height);                    var texture = new PIXI.Texture(base_texture, spriteRect);                    //texture.rotate = region.rotate ;                    var ext_name = '.png';                                  var texture_name = 'data/ui/' + region.name + '.png';                    PIXI.Texture.addTextureToCache(texture, texture_name);                    console.log(texture_name);                }            }        }

and i can look rotated image on screen 

 

this is normal image.

if i pack with no rotation, then i can look like this..

 

but i wanna use rotation. becuase it is more good to optimize texture on packed

 

 

i find rotate value into PIXI.Texture..

 

but when i use this parameter,  it looks like changed width and height..

 

 

please give me a idea 

 

thx.. 

 

[ivan.popelyshev]

Yes I believe that this bug is somehow related to your method of loading. Can you please make a minimal demo that doesnt work like its suppose to? I just dont have time to make it, but if you will, I'll debug and determine the cause.

[GBear]

hi. ivan..

 

this image is part of packed by texturePackter

 

this image is rotated..

 

and i load like this

                    var spriteRect = new PIXI.Rectangle(                        region.x,                        region.y,                        region.rotate ? region.height : region.width,                        region.rotate ? region.width : region.height);                        //region.rotate ? region.height : region.width,                        //region.rotate ? region.width : region.height);                    var texture = new PIXI.Texture(base_texture, spriteRect);

in this case texture has rotated image.. 

 

but original image is like this

 

so i want to set on texture like original image from rotated image packed by texturepacker

 

 

and pixi.spine has same routine but it seem to control on PIXI.Spine

Spine.prototype.createSprite = function (slot, attachment){    var descriptor = attachment.rendererObject;    var baseTexture = descriptor.page.rendererObject;    var spriteRect = new PIXI.Rectangle(descriptor.x,                                        descriptor.y,                                        descriptor.rotate ? descriptor.height : descriptor.width,                                        descriptor.rotate ? descriptor.width : descriptor.height);    var spriteTexture = new PIXI.Texture(baseTexture, spriteRect);    var sprite = new PIXI.Sprite(spriteTexture);    var baseRotation = descriptor.rotate ? Math.PI * 0.5 : 0.0;    sprite.scale.x = attachment.width / descriptor.originalWidth * attachment.scaleX;    sprite.scale.y = attachment.height / descriptor.originalHeight * attachment.scaleY;    sprite.rotation = baseRotation - (attachment.rotation * spine.degRad);    sprite.anchor.x = (0.5 * descriptor.originalWidth - descriptor.offsetX) / descriptor.width;    sprite.anchor.y = (0.5 * descriptor.originalHeight - descriptor.offsetY) / descriptor.height;    sprite.alpha = attachment.a;    slot.sprites = slot.sprites || {};    slot.sprites[descriptor.name] = sprite;    return sprite;};

[ivan.popelyshev]

1) createSprite is not used in gpuPatch. 

 

2) Your code looks ok, I dont know whats wrong in this case. 

 

Please, make a working demo in separate HTML/JS files that loads spine model your way, that has the same pixi-spine version you are using.

Can you setup a dropbox folder and share with [email protected]?

 

In case you're wondering why cant I just do the same in my comp: I have spine TRIAL, it doesnt save anything.

 

UPD. If you do that, I will add something in pixi-spine that will allow usage of custom loaders.

[GBear]

ah~~^^.  this is not about spine issue..

 

this is only to load atlas

 

i'm using ATLAS file  to pack textures(image like UI);

 

my problem is  if some images of ui is rotated by TexturePacker,  i can't draw to not rotate image by texture..

 

i wanna draw not rotated Sprite when set texture that rotated by texturepackter.

 

 

i can know loaded texture is rotated. becuase it notified by 'ATLAS';

 

but i can't apply looks good...

 

 

 

 

 

[GBear]

hi..

 

this is aaaa.atlas 

 

this has rotation option

stripwhitespace(trim/crop) option

aaaa.pngsize: 128,32format: RGBA8888filter: Linear,Linearrepeat: nonecooltime_gauge33  rotate: true  xy: 2, 2  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge42  rotate: true  xy: 46, 2  size: 22, 40  orig: 42, 42  offset: 0, 2  index: -1cooltime_gauge51  rotate: false  xy: 88, 2  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1

and use this image of atlas

 

and this images are original before packing

  

 

in this case  i can see like this..

this images seem to change up and down.

 

i'm using this code in this case to create texture with trim/crop

function createTextureByRegion(region) {    var spriteRect = new PIXI.Rectangle(        region.x,        region.y,        region.width,        region.height);    //region.rotate ? region.height : region.width,    //region.rotate ? region.width : region.height);    console.log(region);    var trimmed = false;    if(region.originalWidth != region.width || region.originalHeight != region.height) {        trimmed = true;    }    var crop = null;    var trim = null;    if(trimmed) {        var spriteSourceSizeHeight = region.originalHeight - region.offsetY - region.height;        crop = spriteRect.clone();        trim = new PIXI.Rectangle(region.offsetX, spriteSourceSizeHeight, region.originalWidth, region.originalHeight);    }    var base_texture = region.page.rendererObject;    return new PIXI.Texture(base_texture, spriteRect, crop, trim, region.rotate );}

is there a problem to create original texture with crom/trim?

 

thx a lot..

 

 

 

 

[GBear]

hi. i made mini example on jsfiddle..

http://jsfiddle.net/gbear/s7bj8y3x/3/

[ivan.popelyshev]

Thank you! Now i can debug it

[ivan.popelyshev]

OH! Its not the spine issue, its pixijs Texture.setUVs problem. I'm digging into it

[ivan.popelyshev]

I have found that if we use CanvasRenderer that thing isnt working at all, anchoring is all wrong: 

[ivan.popelyshev]

Issue #2230: https://github.com/pixijs/pixi.js/issues/2230

[ivan.popelyshev]

I'm testing this issue with ShoeBox at the moment ( http://renderhjs.net/shoebox/ )

 

I just leave it here: https://www.patreon.com/user?u=2384552&ty=h&u=2384552 .

[GBear]

hi.. ivan..

 

i changed like this and look good

TextureUvs.prototype.set = function (frame, baseFrame, rotate){    var tw = baseFrame.width;    var th = baseFrame.height;    if(rotate)    {        if(0){            this.x0 = (frame.x + frame.height) / tw;            this.y0 = frame.y / th;            this.x1 = (frame.x + frame.height) / tw;            this.y1 = (frame.y + frame.width) / th;            this.x2 = frame.x / tw;            this.y2 = (frame.y + frame.width) / th;            this.x3 = frame.x / tw;            this.y3 = frame.y / th;        }else {            this.x0 = frame.x / tw;            this.y0 = (frame.y + frame.width) / th;            this.x1 = frame.x / tw;            this.y1 = frame.y / th;            this.x2 = (frame.x + frame.height) / tw;            this.y2 = frame.y / th;            this.x3 = (frame.x + frame.height) / tw;            this.y3 = (frame.y + frame.width) / th;        }    }    else    {        this.x0 = frame.x / tw;        this.y0 = frame.y / th;        this.x1 = (frame.x + frame.width) / tw;        this.y1 = frame.y / th;        this.x2 = (frame.x + frame.width) / tw;        this.y2 = (frame.y + frame.height) / th;        this.x3 = frame.x / tw;        this.y3 = (frame.y + frame.height) / th;    }};

 

 

but i don't know it happed error somewhere.. 

but it's look good now for only this..

 

[GBear]

so i tested with atlas that more complicated 

 

this is image

 

this is atlas

aaaa2.pngsize: 2048,64format: RGBA8888filter: Linear,Linearrepeat: nonecooltime_gauge01  rotate: false  xy: 2, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge02  rotate: false  xy: 46, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge03  rotate: false  xy: 90, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge04  rotate: false  xy: 134, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge05  rotate: false  xy: 178, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge06  rotate: false  xy: 222, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge07  rotate: false  xy: 266, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge08  rotate: false  xy: 310, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge09  rotate: false  xy: 354, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge10  rotate: false  xy: 398, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge11  rotate: false  xy: 442, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge12  rotate: false  xy: 486, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge13  rotate: false  xy: 530, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge14  rotate: false  xy: 574, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge15  rotate: false  xy: 618, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge16  rotate: false  xy: 662, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge17  rotate: false  xy: 706, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge18  rotate: false  xy: 750, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge19  rotate: false  xy: 794, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge20  rotate: false  xy: 838, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge21  rotate: false  xy: 882, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge22  rotate: false  xy: 926, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge23  rotate: false  xy: 970, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge24  rotate: false  xy: 1014, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge25  rotate: false  xy: 1058, 20  size: 42, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge26  rotate: false  xy: 1102, 20  size: 39, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge27  rotate: false  xy: 1143, 20  size: 36, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge28  rotate: false  xy: 1181, 20  size: 33, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge29  rotate: false  xy: 1216, 20  size: 31, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge30  rotate: false  xy: 1249, 20  size: 28, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge31  rotate: false  xy: 1279, 20  size: 26, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge32  rotate: false  xy: 1307, 20  size: 24, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge33  rotate: false  xy: 1333, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge34  rotate: false  xy: 1357, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge35  rotate: false  xy: 1381, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge36  rotate: false  xy: 1405, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge37  rotate: false  xy: 1429, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge38  rotate: false  xy: 1453, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge39  rotate: false  xy: 1477, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge40  rotate: false  xy: 1501, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge41  rotate: false  xy: 1525, 20  size: 22, 42  orig: 42, 42  offset: 0, 0  index: -1cooltime_gauge42  rotate: false  xy: 1549, 22  size: 22, 40  orig: 42, 42  offset: 0, 2  index: -1cooltime_gauge43  rotate: false  xy: 1573, 26  size: 22, 36  orig: 42, 42  offset: 0, 6  index: -1cooltime_gauge44  rotate: true  xy: 1573, 2  size: 22, 33  orig: 42, 42  offset: 0, 9  index: -1cooltime_gauge45  rotate: false  xy: 1597, 31  size: 22, 31  orig: 42, 42  offset: 0, 11  index: -1cooltime_gauge46  rotate: false  xy: 1621, 34  size: 22, 28  orig: 42, 42  offset: 0, 14  index: -1cooltime_gauge47  rotate: false  xy: 1645, 36  size: 22, 26  orig: 42, 42  offset: 0, 16  index: -1cooltime_gauge48  rotate: false  xy: 1669, 38  size: 22, 24  orig: 42, 42  offset: 0, 18  index: -1cooltime_gauge49  rotate: false  xy: 1693, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge50  rotate: false  xy: 1717, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge51  rotate: false  xy: 1741, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge52  rotate: false  xy: 1765, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge53  rotate: false  xy: 1789, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge54  rotate: false  xy: 1813, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge55  rotate: false  xy: 1837, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge56  rotate: false  xy: 1861, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge57  rotate: false  xy: 1885, 40  size: 22, 22  orig: 42, 42  offset: 0, 20  index: -1cooltime_gauge58  rotate: true  xy: 1549, 2  size: 18, 22  orig: 42, 42  offset: 4, 20  index: -1cooltime_gauge59  rotate: true  xy: 2, 3  size: 15, 22  orig: 42, 42  offset: 7, 20  index: -1cooltime_gauge60  rotate: false  xy: 1608, 2  size: 12, 22  orig: 42, 42  offset: 10, 20  index: -1cooltime_gauge61  rotate: false  xy: 1909, 40  size: 10, 22  orig: 42, 42  offset: 12, 20  index: -1cooltime_gauge62  rotate: true  xy: 26, 11  size: 7, 22  orig: 42, 42  offset: 15, 20  index: -1cooltime_gauge63  rotate: true  xy: 1621, 27  size: 5, 22  orig: 42, 42  offset: 17, 20  index: -1cooltime_gauge64  rotate: true  xy: 1597, 26  size: 3, 22  orig: 42, 42  offset: 19, 20  index: -1

this is result

 

 

thx..

[ivan.popelyshev]

this.x2 = (frame.x + frame.height) / tw;

That part is strange. Height is not supposed to be added in X coord. I'm investigating it.

[ivan.popelyshev]

Yes, you are right. I think that code has been written for TexturePacker totate, and may be Spine's atlas "rotate" differs from it. For example, it rotates in opposite.

[GBear]

hi. 

 

i find problem with edited version of 'TextureUvs.prototype.set = function (frame, baseFrame, rotate)' on pixi.spine

 

 

 

PIXI.Spine don't use crop/trim.

 

it seems like to calucate sprite 

Spine.prototype.createSprite = function (slot, attachment){    var descriptor = attachment.rendererObject;        var baseTexture = descriptor.page.rendererObject;        var spriteRect = new PIXI.Rectangle(descriptor.x,            descriptor.y,            descriptor.rotate ? descriptor.height : descriptor.width,            descriptor.rotate ? descriptor.width : descriptor.height);        var spriteTexture = new PIXI.Texture(baseTexture, spriteRect);    var sprite = new PIXI.Sprite(spriteTexture);        var baseRotation = descriptor.rotate ? Math.PI * 0.5 : 0.0;        sprite.scale.x = attachment.width / descriptor.originalWidth * attachment.scaleX;        sprite.scale.y = attachment.height / descriptor.originalHeight * attachment.scaleY;        sprite.rotation = baseRotation - (attachment.rotation * spine.degRad);        sprite.anchor.x = (0.5 * descriptor.originalWidth - descriptor.offsetX) / descriptor.width;        sprite.anchor.y = (0.5 * descriptor.originalHeight - descriptor.offsetY) / descriptor.height;        sprite.alpha = attachment.a;    slot.sprites = slot.sprites || {};    slot.sprites[descriptor.name] = sprite;    return sprite;};

but if i use crop/trim and rotate from ATLAS, there is happed like this

it looks like position is wrong.

 

so i changed code like this  (createTextureByRegion Function is same above post)

this code is unnecessary part deleted like anchor and scale except rotation because it is calculated by trim/crop into createTextureByRegion

Spine.prototype.createSprite = function (slot, attachment){    var descriptor = attachment.rendererObject;    if(0){        var baseTexture = descriptor.page.rendererObject;        var spriteRect = new PIXI.Rectangle(descriptor.x,            descriptor.y,            descriptor.rotate ? descriptor.height : descriptor.width,            descriptor.rotate ? descriptor.width : descriptor.height);        var spriteTexture = new PIXI.Texture(baseTexture, spriteRect);    } else {        var spriteTexture = createTextureByRegion(descriptor);    }    var sprite = new PIXI.Sprite(spriteTexture);    console.log('CREATE SPRITE', descriptor);    if(0){        var baseRotation = descriptor.rotate ? Math.PI * 0.5 : 0.0;        sprite.scale.x = attachment.width / descriptor.originalWidth * attachment.scaleX;        sprite.scale.y = attachment.height / descriptor.originalHeight * attachment.scaleY;        sprite.rotation = baseRotation - (attachment.rotation * spine.degRad);        sprite.anchor.x = (0.5 * descriptor.originalWidth - descriptor.offsetX) / descriptor.width;        sprite.anchor.y = (0.5 * descriptor.originalHeight - descriptor.offsetY) / descriptor.height;        sprite.alpha = attachment.a;    } else {        var baseRotation = descriptor.rotate ? Math.PI * 0.5 : 0.0;        sprite.scale.x = attachment.scaleX;        sprite.scale.y = attachment.scaleY;        sprite.rotation = baseRotation - (attachment.rotation * spine.degRad);        sprite.anchor.x = (0.5);        sprite.anchor.y = (0.5);        sprite.alpha = attachment.a;    }    slot.sprites = slot.sprites || {};    slot.sprites[descriptor.name] = sprite;    return sprite;};

and i can look good image

 

this image is original image before code rewrited.(with origianl pixi.spine and pixi and not using rotation ATLAS);

 

 

thx

[ivan.popelyshev]

Ok, now we found the problem: spine rotations are differ from texturepacker rotations. I will fix that, thank you for preparing test cases for me!

[GBear]

hi. i find one more about this issue with mesh.Rope

 

if  i use mesh.Rope with ATLAS with rotation option.  i can't look good image..

this image is with ATLAS that rotation applied.

 

this image is single tree image

 

thx..

[ivan.popelyshev]

I'll help you tomorrow, dont worry

[GBear]

hi.. 

 

i changed for rotated Texture 

it looks good but this code is only for me..

 

uvs set is a little bit different if this code compare PIXI.mesh.Rope

PIXI.mesh.RopeVertical.prototype.refresh = function () {        var points = this.points;        // if too little points, or texture hasn't got UVs set yet just move on.        if (points.length < 1 || !this._texture._uvs)        {            return;        }        var uvs = this.uvs;        var lastPoint = points[0];        var indices = this.indices;        var colors = this.colors;        var textureUvs = this._texture._uvs;        var offset = new PIXI.Point(textureUvs.x0, textureUvs.y0);        var factor = new PIXI.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0);        if(this._texture.rotate) {            uvs[0] = 1*factor.x+ offset.x;            uvs[1] = 1*factor.y + offset.y;            uvs[2] = 1*factor.x + offset.x;            uvs[3] = 0 + offset.y;        } else {            uvs[0] = 0+ offset.x;            uvs[1] = 1*factor.y + offset.y;            uvs[2] = 1*factor.x + offset.x;            uvs[3] = 1*factor.y + offset.y;        }        colors[0] = 1;        colors[1] = 1;        indices[0] = 0;        indices[1] = 1;        var total = points.length,            point, index, amount;        for (var i = 1; i < total; i++) {            point = points[i];            index = i * 4;            // time to do some smart drawing!            amount = i / (total - 1);            if(this._texture.rotate) {                uvs[index] = (1-amount)*factor.x + offset.x;                uvs[index + 1] = 1*factor.y + offset.y;                uvs[index + 2] = (1-amount)*factor.x + offset.x;                uvs[index + 3] = 0 +  offset.y;            } else {                uvs[index] = 0 + offset.x;                uvs[index + 1] = (1 - amount)*factor.y + offset.y;                uvs[index + 2] = 1 * factor.x + offset.x;                uvs[index + 3] = (1 - amount)*factor.y + offset.y;            }            index = i * 2;            colors[index] = 1;            colors[index + 1] = 1;            index = i * 2;            indices[index] = index;            indices[index + 1] = index + 1;            lastPoint = point;        }        this.dirty = true;    };

rope uvs set like this image(default direction right to left);

 

ropeVertical uvs set like this image(default direction down to up);

 

thx.. 

[ivan.popelyshev]

Ok, I say this again: "rotate" uses only two options: texturePacker rotation and none. spine rotation works in the other direction. I'm making a patch that'll allow ro use different rotations in texture. 

 

So I'll change TextureUVs, Sprite, Mesh. What else do I need to change?

[ivan.popelyshev]

I will add D4 group, that will allow even more http://mathworld.wolfram.com/DihedralGroupD4.html

//old codesprite.scale.x = -1//new codetexture.rotate = 6;sprite.texture = texture;

[ivan.popelyshev]

Please check if its correct: http://jsfiddle.net/s7bj8y3x/10/

 

That's my pixi: http://ivanpopelyshev.github.io/examples/_site/js/pixi.js

 

Just use rotate=6

 

This is the demo: http://ivanpopelyshev.github.io/examples/index.html?s=demos&f=texture-rotate.js&title=Texture%20Rotate

 

Here is PR:  https://github.com/pixijs/pixi.js/pull/2237

[ivan.popelyshev]

I didnt fix the rope yet, but i'll do that soon!