1
\$\begingroup\$

I'm making a 2d game in which units occupy a dynamic area of the map.

This area will be a rectangular shape like in the following picture. The exact shape will change during gameplay.

Example shape

How should I draw these shapes?

Should I use a mesh for this? If so, how would I find the vertices of the shapes?

Can I somehow use a "mask" for this? Render a filled rectangular and then subtract those parts which are outside of the shape maybe?

Optional questions: How would I draw a stroke / outline around the whole outer edge of the shape?

\$\endgroup\$
2
\$\begingroup\$

I'm not sure, if I understand exactly what you are searching for but it would make your life a lot easier if you would use a grid of squares for the map. You could highlight different regions by simply changing the color of each grid peace that belongs to the area.

enter image description here

Regarding the outline: If you are using just one shape you should look into using Shaders for this. You could star here.

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

I'm not familiar with libgdx so the exact implementation in it is not something i could provide you. However, the concepts in play are pretty universal.

Assuming several things.

  • You only want to fill in the red area as that is how your question sort of reads.
  • You have the vertexes of the polygon you're looking to draw.
  • LibGDX cannot draw a concave polygon natively.
  • The polyons you're looking to draw have axially aligned points (more on that below)

You're looking for a function that can draw a concave polygon. Without that we will have to break the polygon into convex shapes.

An example would look like this with the shape you provided being divided into 5 polygons, Ill go over one but the idea can be carried over for each.

left area

A1 and A3 are the lowest points on the x axis(closest to 0, or they're the most negative)

A2 is aligned with A1 on the x axis.

A4 is aligned with A3 on the x axis.

A2 and A4 are the closest points that are axially aligned to A1 and A3.

Using this logic we've created a simple polygon any graphics library should be able to draw.

Repeat this logic for each cardinal direction, then use the inner most points (A2 and A4) to draw the inside polygon. A simple check to find which points are not on the outside should solve that for you

A1.x < A2.x < some further point

Hopefully this quick answer helps in some way!

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

As long as your shapes (edges of them) are actually AxisAligned the simplest way to draw it is to just draw multiple rectangles. They can overlay each other if they are the same color anyway. This can be as easy as drawing a 1x1 white texture with the desired Rectangle (Position,Size) and the required color. Your provided image would therefore consists of 4 rectangles overlapping each other.

To make an outline, you are basically doing the same but scaling the rectangles slightly in the outline color and after that just draw the actual rectangles over it. This will result in an outline over the whole construct

( I actually assume, that your desired shapes is logically made out of several rectangles anyway, if not and you only have the cornerpoints as in an single shape, other answers go in great detail about how to split them into single rectangles)

| improve this answer | |
\$\endgroup\$

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.