[SOLVED][HTML5] Skew for HTML5 targets?

Im trying to use skew on a sprite like this:

var test:Shape = new Shape();
test.graphics.beginFill(0x555555);
test.graphics.drawRect(100, 100, 300, 300);
test.graphics.endFill();
test.transform.matrix = new Matrix(1, 0, .5, 1, 0, 0);
addChild(test);

Resault is that in flash taget, skew works great. in HTML5 - no skew.
I also saw this bug issue is still open:
https://muut.com/i/openfl/bugs:matrix-skew-functionality-d

Tried -Dwebgl and -Ddom, nothing…

Is there anything im doing wrong? or is there still no support for this feature?

Here is an image of the results in flash player (right) and on the browser (left)

1 Like

Up…

Is there anything i can do?

I think it’s a combination of:

and:

These do not account for skew, we would have to look at including (perhaps?) a matrix for each object instead of separate properties, though I’m concerned about performance. This should be a start for taking a look

Hi @singmajesty,

I didn’t understand from your answer,

Can you explain how it works on flash player but not on other platforms?

Taking another look, it appears that right now, the display list is using x, y, scaleX, scaleY and rotation separately, it is not maintaining a matrix per object. There is a “world transform” that is a matrix, which is updated from the above properties as needed.

That means that as a downside, using the transform.matrix property, you should be able to skew, this not handled currently. It looks like we are going to need to test an architecture that uses a matrix per object (and sets this when using rotation, scaleX, scaleY, etc) rather than separate properties

I’ll put this on the list for the next big update

1 Like

Thanks for the in-depth explanation @singmajesty!

Hope you can address this issue soon… its a real pain :disappointed_relieved:

Thanks @singmajesty !

It will be great to see that fixed :+1:

1 Like

It still needs more testing, but check out:

https://github.com/openfl/openfl/commit/97471551186f0ad6cb4b1ffb6ae3fb28ef3856b7

If you’re on development builds, pull and see how it works with your code :slight_smile:

1 Like

Thanks!
Thats thrilling!!
Cant wait to test it…

OK,
After a bit of playing around with the beta, this seems to work really good. :sunny:
already tried it on a few moderately complex projects in Android and HTML5

for now i see that it fixed that issue!
Thanks for the update…!

2 questions if i might be a bit bold :blush:
Will it be included in the next update?
If so, is there an approximate release date for this update?

Thank you! This is awesome :smiley:

The plan is to include it in the next release, releases happen in a week or two, but usually it has to do with how stable I feel the code is, so I want to make sure we don’t introduce regressions in setting and getting scaleX/scaleY/rotation or introduce render bugs or mouse coordinate related issues due to this change :slight_smile:

Saw that this updated on the openfl update from yesterday (3.3.3).
Thanks for that @singmajesty!

1 Like

Please let me know if you encounter more issues! :smile:

1 Like