In this post I was asking how to program a map of a Risk-like game.

Now that the map is pretty coded, both client and server-side, I'd like to finally draw the map.

I'll try to keep least broad as possible in this question, and also avoid XY problem.

So, my X problem is that I need an interactive map, based on (irregular) polygons.

Now, since this question would be really broad (there is a heavy number of possible solutions and libraries for a skilled programmer), this is how I imagined my Y solution:

Since the polygons have to be 10, touch-interactive, filled with plain color, I think that OpenGL ES should go fine for me. I'm also attracted by Path and Point classes, but the problem is that

  1. The map should be displayed for lot of different screen sizes, but at the same time it should keep its ratio, instead of appearing more large or more little in the Activity.

  2. The polygons have to be drawn to fit each others.

  3. Every polygon should be touchable and the event should differ from the others. Also their color could change depending of the situation.

I don't know if Path and Point classes would fit for this. My intent is more game-like than generic, so I think I'll stick with OpenGL ES solution.

The problem is that I don't understand

  1. How can I map the polygons vertex and dimension for different screen sizes?

(considering we're talking about 10 polygons, there is a kind of environnment for doing this?)

  1. Should I use triangulation or not? I've done lot of research but this point wasn't clear to me.

I followed Android Open GL tutorial, but it only shows simple polygons and alone, I'd need 10 with lot of vertexes and above all that can fit each others.

How can I do this?

EDIT: I also tried to follow this tutorial. This is an image taken from that one:

(source: xamarin.com)

To me instead, it's more little and near top-left corner. This is another trouble I'd like to avoid (as I said in point 1 above): my polygons should always fit the screen (and this is also why I want to use OpenGL ES).

  • \$\begingroup\$ Can you elaborate on "How can I map the polygons vertex and dimension for different screen sizes? "? What do you want to map to what? And what do you imagine behind "map"? Project or associate or something completely different? As for 2) I suggest removing it from the question because it is purely opinion based and it will be more or less answered by the way you solve first problem. \$\endgroup\$
    – wondra
    Oct 10 '15 at 15:07
  • \$\begingroup\$ Hey thanks for interesting in the topic. Since polygons are made of vertexes and coordinates, I'd like to know how to actually represent them: If I use static points (like the Xamarin's tutorial), the polygon dimension vaires by the screen's size. How can I actually design a polygon and then code-draw it in a way that is not hardcoded by pixels? There aren't tools that help at this? If you know some please recommend me one. I don't need the best (I don't wanna end up in opinion-based post), just a good one. \$\endgroup\$ Oct 10 '15 at 15:11
  • \$\begingroup\$ Since you mentioned OpenGL ES, I suggest you study basics of ogl pipeline - it will tell you much about what were you actually doing in those tutorials. For example you would learn that screen goes from -1 to 1 in both dimension on all devices and its up to the programmer to compensate that(yes, there are no pixels!). How to do that is vast topic and very starter OpenGL tutorial tries to cover that. I am sorry I have to redirect you back to tutorials, you need many essential concepts. If you do not want to use(directly) OpenGL that would be whole different topic tied to chosen technology. \$\endgroup\$
    – wondra
    Oct 10 '15 at 15:22
  • \$\begingroup\$ Oh no, don't say sorry; I'm actually thankful to you. I know I don't know (xD) and I was looking for a more useful tutorial than the ones I found. The fact OpenGL does not use pixels is great for my purpose. I'm gonna read more about that. Just I'm a bit sad many of the resources of OpenGL are actually in C++, since I'm programming the app in Java. About the last thing you said, I think I'll stick to OpenGL unless there is something OBJECTIVELY better someone makes me aware of (I need to draw just 10 polygons!) \$\endgroup\$ Oct 10 '15 at 15:32
  • \$\begingroup\$ There is a tool which can actually help me at finding vertex coordinates? Or everything has to be done manually? \$\endgroup\$ Oct 10 '15 at 15:51

So you want to draw polygons that fit the screen and have touch support? Opengl can be used to draw the polygons, touch support can be realised independent from opengl by a thing that is called ray triangle intersection and requires you to understand a bit of math.

Here's how you maintain the correct size on different screen resolutions: you use what is called projection matrix. In your case an orthographic projection is sufficient. Please read about opengl matrices here: https://learnopengl.com/Getting-started/Coordinate-Systems

In depth what you do is you map from screenpixels to NDC range which is -1 to 1, where the center 0,0 is exactly the center of your screen. You then define your polygon 2d layout by relative positioning like starting from top left. Now in order to maintain correct relative sizes on different resolutions you have to adjust the orthographic size, think about it like optical zoom. For big screens you have bigger orthographic size. To calculate the orthographic size you must know your bounding rect in ndc and adjust your orthographic size according to it. Note that if you support landscape mode you have to adjust the orthographic size different because width is bigger than height, or you layout your polygons different.

How to touch those polygons? First you have to calculate a picking ray by going from screen pixel position aka the screen space to world space. Easiest way to understand the picking ray is to understand the projection matrix. Everything you see on screen starts at the near plane and ends at the far plane. So if you want to test if you are touching an object you have to project your screen position to the nearplane and the far plane, those 2 points form a 3d line which is the ray I'm talking about. Now you go through all your polygons and test each triangle for intersection with the ray. An example can be found on github in sharpdx repository and collision.cs. you can simplify the intersection test because you only need 2d test in which case it's enough to project screen coordinates to ndc space and test all triangles if the ndc touch coordinate is inside the triangle.

Or if you don't want to learn maths you can simply put your polygons as pictures and use them as backgrounds of buttons. Not very precise but maybe enough.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.