[SOLVED]How to skew a sprite and move it

hello there!
I am working on:
openfl - 2.2.8
lime - 2.1.3
hxcpp - 3.1.68

and I am making a racing game and I need to give the impression that there are things on the floor, for that I need to know how to skew a sprite and move it around without it rotating.

I know it sounds silly but I don’t get what is happening:
I made a small test project and here’s the codes.

var mSkewx:Matrix = new Matrix(1, 0, -10 / 15, 1);
var s3:Sprite = new Sprite();
s3.graphics.lineStyle(1, 0);
s3.graphics.drawRect(0, 0, bmd.width, bmd.height);
s3.x = 200;
s3.y = 200;
s3.transform.matrix = mSkewx;

when I run this code, I have my skewed sprite but at something that looks like at point 0,0.
if I apply the transform matrix, this line s3.transform.matrix = mSkewx; before repositionning my sprite (before these lines s3.x = 200; and s3.y = 200;) my sprite rotates at the given positions :disappointed_relieved:
so I am kind of lost. can anyone help me?

What target are you using? Does it do what you expect in Flash?

I mainly target neko, but even with flash it does the same thing.
So I concluded that I don’t know how to properly skew a sprite.
What I want to do is simply skew a sprite and change its x and y coordinates, as I please, without it rotating.
Because when I apply a skewing matrix to the sprite.transform.matrix, my sprite got skewed but ends up being stuck at coordinates (0,0)

I havent used matrixes much lately but I vaguely remember having to do what is called ‘translation’ both before, and after, what I actually want to do. For example

// create the matrix, this is called an 'identity' matrix when no args are supplied on instantiation. // think of it as a blank slate. and everything you want to do is to be done in steps. // As you perform each step on the matrix, its inner numbers are adjusted and when you finally // apply it, it should come out the way you wanted it to. This way debugging is easier as you can apply // the matrix each step of the way to see if it is working up to that point as you want it to. // before writing your next step into it var mSkewx:Matrix = new Matrix();

// this line effectively moves the ‘origin point’ from the top left of the image, to the center
// (but I like to think of it more as moving the image itself)
mSkewx.translate(-(s3.width/2), -(s3.height/2));

// then you do what you wanna do to it, for skews you can manipulate the b (x axis skewing - left to right)
// and c (y axis skewing - up and down) values directly
mSkewx.b = 0;
mSkewx.c = -10/15;
// I assume this is the desired value you were putting in for “c” parameter in Matrix(a,b,c,d,tx,ty)

// then you put the image ‘origin’ point back to the top left corner
// Unless, of course, you want the origin point to be at the ‘center’ of the image that you see,
// which does have its perks but also drawbacks if you forget that you did that to it
mSkewx.translate(s3.width/2, s3.height/2);

// now you give it the final coordinates that you want it to end up at on the screen,
// or display object container, or bitmapdata, etc.

// mSkewx.translate(s3.worldX), s3.worldY); //commented out so your code still works

//finally applying it
s3.transform.matrix = mSkewx;

// alternatively, if you had a bitmapData canvas or something, and you wanted to draw an entity
// onto that using a matrix, it would be the 2nd parameter of the bitmapData.draw(1param, 2param, …)

// canvasBitmapData.draw(s3, mSkewx);

Hope that helps / sheds some light on whats up with matrixes (they were confusing to me too at first).

  • Disclaimer here for any incorrect aspects, like I said I havent used them in awhile xD if anyone sees something wrong please correct me!

All that said, for a racing game like that you probably want the smoothest experience possible, and for that copyPixels() and bitmapData.draw() are your friends for flash target. For other targets (I see you are hitting neko?) having recently played around with TileSheet.drawTiles() myself, I can attest to its speed on windows target at the very least (beating copypixels) but I dont know if the blendmodes (subtract, multply, lighten, hardlight etc) are working yet - they are def coming in the future, so to switch to using it would serve you well should you move onto more advanced aspects of display and special effects etc. And they got scaling (not sure about skewing)

1 Like

thank you so much! I had tried almost all that you have wrote except for the lines you commented
and this line:

is what I needed.
Thanks again for your help
About the racing game, I like to work targetting neko for development purposes because (from my experience so far) neko builds fast and react almost the same for windows and android (which are my true targets).
I am only using copyPixels(), but the problem with Tilesheet is the fact that some pictures, whether bilboards, cars, trees and such are clipped somewhere.
so I cannot really use Tilesheets unfortunately.
but thanks.