# Drawing image with an angle

Edit: the images below aren't supposed to have whitespace. I am just trying to show you that i am trying to create a rectangle from a 1x64 image, positioned as shown in the second picture

I know how to rotate an image like that in XNA

But how is it possible to draw a sprite in this angle this way ?

I can't seem to be able to find an answer on that and i'm sort on ideas

• I am not using monogame or xna, but when they support it, using a projection matrix could help. Jan 19, 2015 at 8:45
• Looks to me like a rotation and skewing operation. Jan 19, 2015 at 10:24

What you want is a skew matrix. XNA has no built-in mechanism for creating one. Fortunately we can write our own:

Matrix CreateSkewX(float angle)
{
Matrix skew = Matrix.Identity;
skew.M12 = (float)Math.Tan((double)angle);
return skew;
}

Matrix CreateSkewY(float angle)
{
Matrix skew = Matrix.Identity;
skew.M21 = (float)Math.Tan((double)angle);
return skew;
}


(Note: These are untested, and I might have X and Y reversed.)

Check out this answer for more details.

• is it bad for performance if i keep making different spriteBatch.Begins just to use the skew i need i every time ? this is going to be used in something like a particle engine where i will have at least 100 of those sprites Jan 20, 2015 at 3:29
• gamedev.stackexchange.com/questions/92489/… this is what i am going to be using this for. (Its because if i dont skew the image and simply rotate it, i create blank spots in the animation) Jan 20, 2015 at 3:35
• @Shiro Yes. For a particle system calling Begin for each particle is going to be horrible for performance. In your particular case you probably want to use a DynamicVertexBuffer to construct exactly the data you want (a full explanation is beyond the scope of a commment). Jan 20, 2015 at 12:54
• do you have any good example of the "dynamic vertex buffer" i can't really understand how it works, there isn't too much on google for that as far as i can tell... Jan 22, 2015 at 14:43
• @Shiro DynamicVertexBuffer and VertexBuffer should behave the same, with one exception: DynamicVertexBuffer requires that you recreate the buffer on its ContentLost event (or when IsContentLost is true, or simply recreate it every frame before use). DynamicVertexBuffer performs better if you are changing its contents regularly. (SpriteBatch, for example, is built on top of a DynamicVertexBuffer.) Jan 23, 2015 at 2:39

You could draw it in 3d. Actually rotate it around the "up" axis. What's actually quite ironic though, is that you're already showing how it could also be done: You could split your sprite in strips vertically, drawing them at a small y offset from eachother. Note however that this skews the sprite, rather than actually rotating it. Not knowing if that's good enough for your application, I'm not sure what you should do. I would say that if you have to rotate it more that 45 degrees, you would probably be better off making a quad of "VertexPositionTexture", which you can freely position and rotate however you please, set up a camera (projection matrix), and rendering it, using the texture you want.

• What i am trying to do is draw a solid block, not strips, of black color, from 1x64 image of black color, to create a rectangle position like the second picture (ignore whitespace in my image) Jan 19, 2015 at 8:58
• right now i have the start/end points, my 1x64 texture, and my rotation (angle) vector2 Jan 19, 2015 at 9:02
• I think you should then declare 6 vertices of the type "VertexPositionColor". 6 because the rectangle you're making consists of two triangles: One consisting of the topleft, topright, and bottomleft vertices, and the other consisting of the bottomleft, topright and bottomright vertices. I know you're asking "Why not 4 vertices", but I'll explain that once you've done this. VertexPositionColor takes two parameters: (Position is a vector3, just pass 1 as the z coordinate) and color(Color.Black).Create an ortographic camera (projection matrix) and draw them with graphicsdevice.drawuserprimitives Jan 19, 2015 at 9:22
• But it is a lot easier to just draw a png drawing with your black block in it. PNG because you can make the rest of the image (the white part) transparent. This way, you can draw it like you draw everything else. Jan 19, 2015 at 9:24
• I am going to draw tons of black blocks, with different angles each Color.Black doesn't do what i need thought... I am simply using it for an example, i have a 1x64 png image Jan 19, 2015 at 9:24