Sign in to follow this  
GBear

How can i control TexturePack with rotation

Recommended Posts

hi..

i'm packing images to optimize

 

i packed UI images by spine packer..

 

i set like this

post-10357-0-05893900-1449606448.png

 

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 

post-10357-0-14181700-1449606762.png

 

this is normal image.

post-10357-0-01247500-1449606779.png

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

 

Share this post


Link to post
Share on other sites

hi. ivan..

 

this image is part of packed by texturePackter

post-10357-0-65296800-1449619378.png

 

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

post-10357-0-06849000-1449619569.png

 

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;};

Share this post


Link to post
Share on other sites

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 ivan.popelyshev@gmail.com?

 

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.

Share this post


Link to post
Share on other sites

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

 

 

 


 

 

Share this post


Link to post
Share on other sites

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

post-10357-0-52189400-1449637585.png

 

and this images are original before packing

post-10357-0-99868500-1449637680.png post-10357-0-23680300-1449637685.png post-10357-0-47577200-1449637689.png

 

in this case  i can see like this..

post-10357-0-96813200-1449637918.png

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

 

 

 

 

Share this post


Link to post
Share on other sites

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;    }};

post-10357-0-34402300-1449688437.png

 

 

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

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

 

Share this post


Link to post
Share on other sites

so i tested with atlas that more complicated 

 

this is image

aaaa2.png

 

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

post-10357-0-13274500-1449689525.png

 

 

thx..

Share this post


Link to post
Share on other sites

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

post-10357-0-63939800-1449694504.png

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

post-10357-0-79861600-1449694523.png

 

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

post-10357-0-57832200-1449694516.png

 

 

thx

Share this post


Link to post
Share on other sites

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.

post-10357-0-38090600-1449705863.png

 

this image is single tree image

post-10357-0-31381300-1449705873.png

 

thx..

Share this post


Link to post
Share on other sites

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

snake.png

 

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

post-10357-0-05970800-1449730898.png

 

thx..  :)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.