You missed the part 1? Keep calm and click here.
Long distance decals
The problem with the artillery in the game is that you don’t have a clear idea of its possibilities. For example, you’d like to park it behind a mountain and target the enemy base, forcing him to bypass the relief and loose a precious time. However, since it is impossible to have the base and your artillery in the same screen, you cannot know how your artillery would react to such an order. In fact, if not at range, it will move right into the enemy base and be destroyed. The point is, when you start thinking strategically and not just a-clicking the enemy, you need critical information, such as the range of a unit.
Now technically, how should we do it ? We could make a decal from a texture, as we did with the selection circle, but that would be a really large area, mostly empty, so it may not be the best option. What we can do, is using the GPU to render vector art on the screen. I’ll explain it later, but if you want to know more about it you can check this chapter from GPU Gems 3 : http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html.
But, what is a vector art?
The most common way to consider an image on a computer is basically with a table of colours. When you create an image you have to define its size, which is the number of pixels it contains, and each one of these pixels will have a colour. So all you have to write in the file are the colours of the pixels in the right order, and the GPU will be able to print the image whenever you need it. However, this induces a small problem when it comes to scaling the image.
Picture yourself in a FPS, and in front of you is a brick wall. You are a few meters away from the wall, and can admire the beautiful brick texture the graphic designer created. However, as you get closer, this texture takes a bigger part of your screen, since it is larger, in pixels, than its original size. At this point the details of the texture are less accurate since the colour of a pixel is extended to 5 or 6 adjacent pixels. We could increase the size of the texture, but then the file would be two times bigger, and we want to avoid a heavy file that will take longer to load.
The classic way to overcome this difficulty is vector art, used in the svg format that we need for large decals, such as ranges. The idea is to save a description of the image that doesn’t depend on its size in pixels. To do that we rather consider the curves that form the image, as “paths”. Each path is a command, a set of points, plus a colour and various options about fill, or stroke, or whatever you need, defined in the svg standard. But it will be easier with an example.
Please, draw me a triangle
Let’s make a simple triangle : all we have to do is draw three lines, with each end being the beginning of the next one. For instance,
M 0 0 L 0 100 L 100 0 Z.
This is what a path looks like, a set of letters that are commands to indicate a certain shape to draw. The numbers after it are the coordinates that describe this shape. M means “Move” the current point to this position. It represents the start of the shape, as if it was the position of a virtual mouse. Here we position this cursor in (0,0). L is the command for “Lineto”, that draws a line from the current point to the arguments. At this point we drew a line from (0,0) to (0,100) then from (0,100) to (100,0). Z is the command that closes the shape, by drawing a line to the start point. In this example the line joins (100,0) and (0,0).
We now have a triangle between the points (0,0), (0,100) and (100,0). We can add options like “fill: black” if we want to fill the shape in black, but basically that is how svg files work.
This way, we can always adapt the shape to how large our image appears on the screen, and then avoid the problem of resolution, but of course complex images can induce a lot of paths, so it is better to save it for something schematic, with only simple shapes.
Other commands (Q, C, A) are used to draw the Bezier curves that we will need for the large decals, and are a little more complex, as you will see in the next part. Yes, there will be a part 3! Wait for it.