2d tile map render rotation math?

by Mclog21   Last Updated January 03, 2018 09:13 AM

I am working on a personal project and am trying to make a 2d tile map render that needs to handle rotation.

I am using raylib to handle the drawing stuff onto the screen and am using this function to draw a tile:

void DrawTexturePro(Texture2D texture, Rectangle sourceRec, Rectangle destRec, Vector2 origin, float rotation, Color tint);

How do I calculate the new coordinates of the tiles after the rotation and the individual rotation of each tile if I want to rotate the tile map?

I also need to figure how to do mouse click detection for tiles when they are rotated with their new coordinates and how to do ‘collision detection with cursor’ with rotated squares/tiles.

And due to the way the project is set up I cannot rotate the camera.

Extra info/diagram:

Extra info



Answers 2


get rotation flag from tile,parse it and swap coordinates from your vertexes

Here good engine and good example where you can find how to do it

https://github.com/oxygine/oxygine-framework/commit/3d02d81e0b3851bab705aaea72d5a0375c9ea432

Yahor10
Yahor10
January 03, 2018 13:35 PM

You will need to transform the point by a rotation/transformation matrix.

Wikipedia has good information about using rotation matricies https://en.wikipedia.org/wiki/Rotation_matrix

θ is your angle
X,Y are your coordinates of your object (represented as a column vector/1D matrix)
X',Y' are your new, rotated coordinates

[X'] = [cosθ -sinθ][X]
[Y'] = [sinθ  cosθ][Y]

This is a small amount of matrix math equating to

X' = [cosθ * X] + [-sinθ * Y]
Y' = [sinθ * X] + [ cosθ * Y]

You can use transformation matrices for lots of operations such as translations, scaling, rotation, skewing, etc. They are widely used in 3D graphics

CobaltHex
CobaltHex
January 03, 2018 21:56 PM

Related Questions


Prevent tile layout gaps

Updated September 11, 2017 10:13 AM


What's happening with my tile engine?

Updated August 31, 2017 22:13 PM