Split up a screen into regions

Question

My task: I want to split up a screen into 3 regions for buffs-bar (with picked items), score-info and a game-map. It doesn't matter are regions intersect with each other or not.

For example: I have a screen with width=1; height=1 and the origin of coordinates (0;0) is the left bottom point. I have 3 functions: draw items, draw info, draw map. If I use it without any matrix transformations, it draws fullscreen, because it's vertex coordinates are from 0;0 to 1;1. (pseudo-code)

drawItems();
drawInfo();
drawMap();

And after that I see only map onto info onto items.

My goal: I have some matrixes for transformation vertexes with 0;0->1;1 coordinates to strict regions. There is only one thing, what I need to do - set matrix before drawing. So my call of drawItems-function is like: (pseudo-code)

adjustViewMatrixes_andSomethingElse(items.position_of_the_region_there_it_should_be_drawn, items.sizes_of_region_to_draw);
setItemsMatrix();
drawItems(); //the same function with vertex coordinates 0;0->1;1, 
             //but it draws in other coordinates, 
             //because I have just set the matrix for region

I know only some people will understand me, so there is a picture with regions which I need to make. Every region has 0;0 -> 1;1 inner coordinates.

Answer 1

This is basic arithmetic, really, and is easily extended to basic linear algebra if you're matrix-inclined.

If you have coordinates (X,Y) with range [0,1]. You want these to map to a screen region with range X:[Lx,Ux] and Y:[Ly,Uy]. You need only solve the simple algebraic expressions 0Sx+Tx=Lx and 1Sx+Tx=Ux (and then the same for the Y coordinates), where Sx is the amount you scale X from one coordinate basis to the other and Tx is the amount you translate X. These terms should look familiar to a game developer and you should be able to trivially see how to make a standard 2D affine transformation matrix out of these terms.

Example:

You want to make a region which is in the upper quarter of an 800x600 screen. So the ranges are X:[400,800] and Y:[0,300]. Solving for Sx and Tx:

0Sx+Tx=400   1Sx+Tx=800
Tx=400       Sx+400=800
Tx=400       Sx=400

X2=X1*400+400

And that's it. To take a [0,1] coordinate to the upper right quadrant in screen-space coordinates, multiply by 400 and add 400. If you need to translate to view-space coordinates, e.g. where the coordinate ranges are [-1,+1], the upper right quadrant is now X:[0,+1] and Y:[-1,0]. So now the math comes out:

0Sx+Tx=0     1Sx+Tx=1
Tx=0         Sx+0=1
Tx=0         Sx=1

X2=X1*1+0
X2=X1

And of course scaling by 1 is the identity scale and translating by 0 is the identity translation... so for the X component, mapping coordinates from [0,1] to the right-half of the screen is a no-op! Let's look at the slightly more interesting Y component:

0Sy+Ty=-1    1Sy+Ty=0
Ty=-1        Sy-1=0
Ty=-1        Sy=1

Y2=Y1*1-1
Y2=Y1-1

And indeed, that's the correct result. Mapping [0,1] to [-1,0] really is just a matter of subtracting 1.

If you need to find the region of the screen in view-space coordinates from screen-space coordinates (e.g. to map the pixel coordinates to the view-space coordinates), use the exact same approach. Just remember you're mapping from something like [0,800) to [-1,+1], e.g.

 0Sx+Tx=-1    800Sx+Tx=1
 Tx=-1        800Sx-1=1
 Tx=-1        800Sx=2
 Tx=-1        Sx=1/400

 X2=X1/400 - 1

And the 3x3 affine matrix in a column-major format:

 | Sx 0  Tx |
 | 0  Sy Ty |
 | 0  0  0  |

Answer 2

I see what you are saying, but it most likely would be simpler to just use the coordinates for the whole screen.

However one way you could implement would be to have three pairs of x and y floats, then offset them depending on how big your screen is.