How to draw empire border like in this game ?

Getting Started
1

1200×675 90.9 KB

Refert to the above image, we can see 3 races and their border, im wondering how that is done ? the main problem is when 2 empire border suppose to overlap each other but they dont, they push each other’s border backwards, how the algorithm works and how to draw that ? thanks.

2

Well, calculating it is pretty easy. Each system generates some “influence” for that player that falls off with distance. You add these up for all star systems, and whoever has the most influence at any point in space, controls that point. You also threshold it so that if the total isn’t above some value, then nobody controls it.

To draw it, I’d use a shader. In fact, it’s very similar to painting zones in High Frontier…

…and that’s exactly how we do it. A custom shader draws a color that’s chosen based on the highest of the three color channels (you could add another texture if you need more channels than that). We also use the alpha channel to control zone density, though I don’t think that would apply here.

1 Like
3

how to use shader to do that ? I did try watch few youtube video bout shader, but i cant get the idea.

4

Yeah, shaders are tricky and not very well documented. But, here’s basically our zone shader (I’ve only removed the parts that draw a stripe or crosshatch pattern depending on the zone density).

Shader "Custom/ZoneShader" {
    Properties {
        _MainTex ("Base (RGBA)", 2D) = "white" {}
        _ResColor ("Res Color", Color) = (0,1,0,0.5)
        _ComColor ("Com Color", Color) = (0,0,1,0.5)
        _AgrColor ("Agr Color", Color) = (1,0,0,0.5)
    }
    SubShader {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" }
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass {
            CGPROGRAM
               #pragma vertex vert
            #pragma fragment frag
            #pragma target 3.0
           
            #include "UnityCG.cginc"

            float4 _ResColor;
            float4 _ComColor;
            float4 _AgrColor;
            sampler2D _MainTex;

            struct v2f {
                float4 pos : SV_POSITION;
                float4 scrPos : TEXCOORD2;
                float2 uv : TEXCOORD0;
            };

            float4 _MainTex_ST;

            v2f vert (appdata_base v)
            {
                v2f o;
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                o.scrPos = ComputeScreenPos(o.pos);
                o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);
                return o;
            }

            half4 frag (v2f i) : COLOR
            {
                float2 xypos = floor((i.scrPos.xy/i.scrPos.w) * _ScreenParams.xy);
                half4 texcol = tex2D (_MainTex, i.uv);

                // TODO: rewrite the following to avoid all those branches!
                half4 result;
                if (texcol[0] > texcol[1]) {
                    // 1 (green) is out of the running...
                    if (texcol[0] > texcol[2]) {
                        // red wins
                        result = texcol[0] > 0.1 ? _AgrColor : half4(0,0,0,0);
                    } else {
                        // blue wins
                        result = texcol[2] > 0.1 ? _ComColor : half4(0,0,0,0);
                    }
                } else {
                    // 0 (red) is out of the running...
                    if (texcol[1] > texcol[2]) {
                        // green wins
                        result = texcol[1] > 0.1 ? _ResColor : half4(0,0,0,0);
                    } else {
                        // blue wins
                        result = texcol[2] > 0.1 ? _ComColor : half4(0,0,0,0);
                }
            }
           
            return result;
            }
            ENDCG
        }
    }
    FallBack "Unlit"
}

HTH,

  • Joe
1 Like
5

Thanks for your response, i dont understand most of the code perhaps im still too far behind, ill try to get more reading material into my head 1st.

6

Well, it’s true that if you’re new to Unity — or, worse, new to programming in general — then this is fairly Big Magic. It’s an advanced technique, not something you should probably be trying for your first game.

7

im pretty good in programming, just totally new in making games or anything related to graphics.

can you roughly explains how the magic works ? just a bit, like for every single pixels on the map terrain, ill need to decide it belongs to whom then apply different shader ?

8

No, it’s all one shader. (You assign a shader to a material, and assign a material to a mesh.) The vert method gets called for each vertex, and in this shader, just works out the uv coordinates (these are the coordinates within the texture). Er, my code above also calculates and assigns the screen position — that was for my stripe/crosshatch feature, which you probably don’t need, so you could remove that (lines 28, 38, and 45).

Then the frag method gets called for each pixel, and its job is to return the color (including alpha) of that pixel. This code does that by looking up the color in the texture map, and then just comparing the red, green, and blue channels.

9

So who trigger to change the color of the map ? Lets say a planet of the blue empire was taken over by the orange fraction, what should the code in unity do b4 shader knows its time to change color ?

10

You would change the colors in the texture map. That’s, er, not exactly beginner-level stuff either, but you can do it (pixel by pixel) via the methods of the Texture2D class.

11

I would ignore the shader to start with. Start just by drawing out the boundaries on a texture. Put the texture on a quad behind your game.

It’s crude, but it’s a valid first step.

1 Like
12

ya, a step at a time. actually im not doing it, im just wondering how things are done, its good to know what techniques are there.