Properly rotating a texture around a point

Hello everyone. I’m attempting to create a mini-map/radar similar to the one found in some FPS games, but I’m having some difficulties explained below.

After searching the forum I found similar questions such as:

But I wasn’t able to get any of the existing answers to work with my problem, so I decided to create my own topic.

Problem:

Example from CS:GO:

img

Short clip from the game demonstrating the functionality in real time:

As the camera rotates in-game the radar follows by rotating the texture. During movement the texture is also properly offset to match the in-game position. I am attempting to copy both behaviours for my (future) game.

I’ve managed to recreate the texture ‘scrolling’ effect such that the position is correctly offset like in the game, however, I’m having trouble replicating the rotation properly.

Here’s how my version looks so far (using textures extracted from CS:GO for the sake of consistency.)

I’ve added the an instance of CameraHelper as well so that it’s clear the green icon is indeed at the centre.

Question:

How do I rotate this texture such that the rotation axis is where the green square is located?

Have you tried texture’s rotation and center properties?

2 Likes

Hi, thanks for answering. I found the center propety in the documentation before, but I’m not sure how to use it.

From what I understand it takes a number [0, 1], with the origin at the bottom-left corner of the texture. Do I have to map the centre position (my origin) to this range?

These range [0,1] is for texture coordinates. Horizontally the texture coordinates are from 0 to 1; vertically they are also 0 to 1. So, rotating around a center (0.5,0.5) will rotate the texture around its mid point; rotating around (0,0); (1,0); (0,1) or (1,1) will rotate it around its corners.