How do I skew a Sprite? [bug?]

pie

I'd like to apply a transformation to a sprite like in the attached image: from 1 to 2.

I tried using Sprite:setSkew from GiderosCodingEasy and using Matrix with the first example from the reference manual, but I couldn't skew my sprite.

I'd say both methods give the same result:
it seems that I can only rotate the sprite of the given angle using setSkewY, while setSkewX seems to apply just a slight scaling.

http://docs.giderosmobile.com/reference/gideros/Matrix

local angle = math.rad(30) -- create skew matrix local m = Matrix.new(1, math.tan(angle), math.tan(angle), 1, 0, 0) --aply to Sprite local sprite = Sprite.new() sprite:setMatrix(m)

Thank you

totebo

I noticed skewing has changed in the latest updates. The skew still worked, but the skew itself was more pronounced than before in my tests. In my case it made sense to simply stop using it, but an explanation would be cool for future reference.

pie

I don't know if I am doing something wrong or if there is some bug; I am almost sure I tried skew in the past and it was working. Can you still skew sprites?

Thanks

pie

I tried skewing sprites with both methods on 2014.10 and it works:

@hgy29 could this be a bug coming from your matrix updates or do we have to use different parameters/approach? (if this is the case the reference manual needs to be updated too )

Thank you

[edit: 2015.06.30 is the latest release where matrix skew works, but GiderosCodingEasy Sprite:setSkew just rotates the sprite ]

hgy29

@pie, I will have a look. There have been a few versions between 2015.03.26 and some other release which had issues with user matrices. I thought it was fixed, but may be wrong..

pie

Thank you @hgy29

In 2015.06.30 matrix skew seems to be working, if this could help.

hgy29

In fact the fix we did was not enough to handle skew. I fixed it in a better way now: https://github.com/gideros/gideros/commit/4698c98c14ce6d60d03c4b7b30e17a579219534f

It will be in next release.

pie

Great! Thank you

totebo

Can I confirm that skewing a sprite is no longer working/supported? When skew a sprite in 2016-04 it's only rotated, like @pie mentioned above for an older version.

This is the code I'm using:

local shape = Shape.new() shape:setFillStyle(Shape.SOLID, 0xff0000, 1) shape:beginPath() shape:moveTo(0,0) shape:lineTo(100, 0) shape:lineTo(100, 200) shape:lineTo(0, 200) shape:lineTo(0, 0) shape:endPath() shape:setPosition(150, 650) shape:setSkewY(10) stage:addChild(shape)

Using these helper functions:
https://github.com/ar2rsawseen/GiderosCodingEasy/blob/master/GiderosCodingEasy.lua#L627

Test project is attached.

pie

@totebo as a workaround skewing with Matrix works for me
Matrix.new(1, math.tan(skewangleY), math.tan(skewangleX), 1, 0, 0)
try

local angle = math.rad(30) -- create skew matrix local m = Matrix.new(1, 0, math.tan(angle), 1, 0, 0) --apply to Sprite shape:setMatrix(m)

I agree that gideroscodingeasy needs some cleaning/updating, but most of the helper functions still works

totebo

I am trying to skew a game world, containing hundreds of sprites. So Matrix probably won't work for me in this case.

hgy29

@totebo, why wouldn't it work ? The Matrix will get applied to children Sprites as well...

pie

@totebo I just tried on my game world: as long as you apply the matrix to a sprite (ie. "scene") it works

tkhnoman

I think i remembered this case, since 3D introduced, matrix for skew somehow won't work anymore.
Probably it would work if frustum is 0.

totebo

@hgy29, did you try out the example project I attached? I can't get it to work for some reason.

hgy29

@totebo, just tried and it doesn't work because GCE calls setRotation after calling setMatrix, ruining the setMatrix.

Let me explain what happens under the hood: gideros sprites use position, scale, rotation and anchorPosition coordinates internally to build a transform matrix, which means that when you give the matrix directly, gideros has to compute position, rotation and translation from it, in case you'd like to query one of these parameters afterwise. If you do setRotation or setScale afterwise, the matrix previously set will be replaced by a new scale,rotate,translate matrix, thus you lose skew or other effects.

Notre that you can do setPosition freely, because when just translating only the translate part of the matrix is updated.