[REL] Supreme Commander icons (FAF)

Discussion in 'Released Mods' started by tatsujb, June 22, 2013.

  1. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Supreme Commander (FAF) conversion Icon Pack :


    https://forums.uberent.com/threads/rel-pa-mod-manager-cross-platform.59992/

    UPDATE LOG:
    -Updated to comply with build version [50000] of PA- 06/20/2013
    -Updated to comply with build version [50083] of PA- 06/25/2013
    -Updated to comply with build version [50256] of PA- 06/29/2013
    -Updated to comply with build version [50355] of PA- 07/03/2013
    -Updated to comply with build version [50742] of PA- 07/16/2013
    -Updated to comply with build version [51118] of PA- 07/24/2013
    -Updated to comply with build version [51464] of PA- 08/02/2013
    -Updated to comply with build version [51531] of PA- 08/03/2013 <-this point onwards uses uber mod system
    -Updated to comply with build version [51853] of PA- 08/10/2013
    -Updated to comply with build version [52168] of PA- 08/17/2013
    -Updated to comply with build version [52512] of PA- 08/25/2013
    -Updated to comply with build version [52973] of PA- 09/04/2013
    -Updated to comply with build version [53072] of PA- 09/06/2013 (updated for pamm 1.5)
    -Updated to comply with build version [54382] of PA- 16/07/2013 (test beta build)
    -Updated to comply with build version [54412] of PA- 12/09/2013
    -Updated to comply with build version [61250] of PA- 19/02/2014
    -Updated to comply with build version [61450] of PA- 21/02/2014
    -Updated to comply with build version [61694] of PA- 26/02/2014
    -Updated to comply with build version [62168] of PA- 03/03/2014
    -Updated to comply with build version [62168] of PA- 03/03/2014
    -Updated to comply with build version [66567] of PA- 24/05/2014 <-Galactic War
    -Updated to comply with build version [66943] of PA- 06/06/2014 <-changed size redrew some (white line bug gone)
    -Updated to comply with build version [67099] of PA- 09/06/2014 <-redrew everything from scratch new shader
    -Updated to comply with build version [78071] of PA- 08/03/2015 <-MONSTER PATCH. finally back, redrew everything again, added 6 icons, fixed 9, got shader working with the new code for select/deselect/mouseover + switch on dark colors + switch on yellow + switch on white + switch on black.

    GitHub Repo : https://github.com/tatsujb/FAFicons

    I am aware of a couple quirks:
    • missing supcom mass end energy icons in cost tooltip, mousover consumption rate and in lobby. attempting to fix.
    • nuke color dos not yet change on yellow and orange (perhaps maybe white also needs to be in this case) FIXED
    • aiming to fix white and black so as to get pure white and pure black at which point the only white border colors will be black and brown. (perhaps also purple). for the moment the following colors are with white borders: black, brown, purple, blue. FIXED
    Last edited: March 10, 2015
    galaxyisos, ozonexo3 and Hamstie like this.
  2. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    Nice work. It takes a fair amount of time to make everything look nice and consistent.

    Only thing is to have these icons work for black. You can have a look at the code I used for my icons, where I have the border being either black or white depending on how bright the team colour is. Or you can cook up your own code, it isn't hard. You just need to edit
    Code:
    Planetary Annihilation\PA\media\shaders\textured_unlit_bgra_colorized.fs
  3. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    Oh.. My.. Goodness THANK YOU!!

    I was looking for this exactly!

    EDIT: it works right off the bat for me!!! greatt !!! x)
    please test this and report any bugs

    ideally i'd like to remove the light blue bit, but if I could just ask you one last favor and do it, I'll read the differences and from there I'll be able to know what means what and manage on my own.

    EDIT 2: TT_TT I'm so ashamed : I edited light blue to -> "1.0,1.0,1.0" (white) and it worked and I said to myself good *sob* enouuuuuuuuuuuugh *sob*
    Last edited: August 3, 2013
  4. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    Using the exact same code I wrote won't give you exactly what you want, I don't think. The reason is I'm using icons that use all channels (red/green/blue), looking like this:
    [​IMG]
    whereas the icons you're using are just in shades of grey:
    [​IMG]
    I've done this to allow me to use more colours. But if you just want team colour and black/white border, you don't need this complication.


    Here's something that does what you want: it turns white into team colour, and black into either black (if team colour is bright) or white (if team colour is dark).

    Code:
    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform sampler2D Texture;
    uniform vec4 Color;
    varying vec2 v_TexCoord;
    varying vec3 f_Color;
    
    vec3 combo(in vec3 col, in vec3 col0, in vec3 colr, in vec3 colg, in vec3 colb)
        {
        return ((1-(col.r+col.g+col.b))*col0 + col.r*colr + col.g*colg + col.b*colb);
        }
    
    void main() {
        vec3 Black = vec3(0.0,0.0,0.0);
        vec3 White = vec3(1.0,1.0,1.0);
        float luma = 0.3*Color.r + 0.59*Color.g + 0.11*Color.b;
    
        vec4 texel = texture2D(Texture, v_TexCoord);
    
        // NOTE: it seems that texel.r and texel.b are switched?!
        // this is why I'm using texel.bgr instead of texel.rgb
        if (luma > 0.25)
        {
            f_Color = combo(texel.bgr, Black, Color, Black, Black);
        }
        else
        {
            f_Color = combo(texel.bgr, White, Color, White, White);
        }
    
        gl_FragColor = Color.a * texel.a * (vec4(f_Color.r, f_Color.g, f_Color.b, 1));
    }
    
  5. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    OMG ! THANK YOU!! ^^
    Last edited: August 3, 2013
  6. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    Oh, one other thing. If you want these icons to look particularly similar to the SupCom ones, you'll want the T1/T2 indicator to be white and not team coloured (or black if the team colour is black...).

    It's for these kind of reasons I made icons with many different colours. The easiest is to take black/red/green/blue and assign them a colour (black -> black/white, red -> team colour, green -> white/black, blue -> yellow/...). If you have that you can just take my shader code and modify your cases to your liking.
  7. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    exactly right

    *Braces himself as he thinks about redoing every icon with t2/t3*

    Ok i'm gonnna do that but first I need to know what colors to use.

    Would you recommend red and green for themed black and white for static and yellow for the nukes?

    btw Supcom didn't have black they had dark gray and faf edited that out ^^.
    Last edited: August 3, 2013
  8. lilbthebasedlord

    lilbthebasedlord Active Member

    Messages:
    249
    Likes Received:
    80
    Re: Sup Com Strategic icons by tatsu

    AW YEAAAH awesome! :D
  9. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    OK, here's some code for you.

    Code:
    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform sampler2D Texture;
    uniform vec4 Color;
    varying vec2 v_TexCoord;
    varying vec3 f_Color;
    
    vec3 combo(in vec3 col, in vec3 col0, in vec3 colr, in vec3 colg, in vec3 colb)
        {
        return ((1-(col.r+col.g+col.b))*col0 + col.r*colr + col.g*colg + col.b*colb);
        }
    
    float norm(in vec3 vect)
        {
        return ( sqrt ( pow(vect.x,2) + pow(vect.y,2) + pow(vect.z,2) ) );
        }
    
    bool isClose(in vec3 vect, in vec3 col)
        {
        return ( (norm (vect - col)) < 0.15);
        }
    
    void main() {
        vec3 Black = vec3(0.0,0.0,0.0);
        vec3 White = vec3(1.0,1.0,1.0);
        vec3 Yellow = vec3(1.0,1.0,1.0);
        vec3 DarkRed = vec3(0.8,0.0,0.0);
        vec3 DarkGrey = vec3(0.25,0.25,0.25);
    
        vec4 texel = texture2D(Texture, v_TexCoord);
    
        // NOTE: it seems that texel.r and texel.b are switched?!
        // this is why I'm using texel.bgr instead of texel.rgb
        if (isClose (Color, Black))
        {
            f_Color = combo(texel.bgr, White, Color, Yellow, Black);
        }
        else if (isClose (Color, White))
        {   
            f_Color = combo(texel.bgr, Black, Color, Yellow, DarkGrey);
        }
        else if (isClose (Color, Yellow))
        {
            f_Color = combo(texel.bgr, Black, Color, DarkRed, White);
        }
        else 
        {   
            f_Color = combo(texel.bgr, Black, Color, Yellow, White);
        }
        
        gl_FragColor = Color.a * texel.a * (vec4(f_Color.r, f_Color.g, f_Color.b, 1));
    }
    
    Essentially, you want your icons to be as follows: black for the border, red for what you want to be team-coloured, green for what you want to be yellow (the nuke symbols etc), and blue for the T1/T2 pips.

    Then from the code you can see what happens. In normal circumstances, black remains black (for the icon border), red becomes team colour, green becomes yellow, and blue becomes white. If the team colour is close to black, instead the border becomes white and the T1/T2 symbols become black. If the team colour is close to yellow, it uses dark red instead of yellow for the nuke symbols, etc.

    The code for checking similarity of colours is very naive. Ideally I should convert to Lab colour space and be able to check there, but this should do for now.
  10. bgolus

    bgolus Uber Alumni

    Messages:
    1,481
    Likes Received:
    2,298
    Re: Sup Com Strategic icons by tatsu

    I'm passing primary and secondary colors to the strategic icon shader now. We don't use it yet (may never) but it's available for you guys to play with. It'll show up in build numbered 49966 or greater, whenever that gets to you guys.

    Check the textured_unlit_bgra_colorized.fs in that build to see the change to access both.
  11. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    Thanks! That's great.
  12. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    Thanks for coming over here :) at first I'm not finding what killed compatibility with my icons. let me delve a little further. And xedi THANK YOU VERY MUCH!

    EDIT : YEEEEEEEEEEEEEEEEEEEEEEEEEEEEES !

    I edited my first bit of code and succeded ! xᴗx even though what I'm doing is completely random

    Code:
    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform sampler2D Texture;
    uniform vec4 TeamColor_Primary;
    uniform vec4 TeamColor_Secondary;
    varying vec2 v_TexCoord;
    varying vec3 f_Color;
    
    vec3 combo(in vec3 col, in vec3 col0, in vec3 colr, in vec3 colg, in vec3 colb)
        {
        return ((1-(col.r+col.g+col.b))*col0 + col.r*colr + col.g*colg + col.b*colb);
        }
    
    float norm(in vec3 vect)
        {
        return ( sqrt ( pow(vect.x,2) + pow(vect.y,2) + pow(vect.z,2) ) );
        }
    
    bool isClose(in vec3 vect, in vec3 col)
        {
        return ( (norm (vect - col)) < 0.15);
        }
    
    void main() {
        vec3 Black = vec3(0.0,0.0,0.0);
        vec3 White = vec3(1.0,1.0,1.0);
        vec3 Yellow = vec3(1.0,1.0,1.0);
        vec3 DarkRed = vec3(0.8,0.0,0.0);
        vec3 DarkGrey = vec3(0.25,0.25,0.25);
    
        vec4 texel = texture2D(Texture, v_TexCoord);
    
        if (isClose (TeamColor_Primary, Black))
        {
            f_Color = combo(texel.bgr, White, TeamColor_Primary, Yellow, Black);
        }
        else if (isClose (TeamColor_Primary, White))
        {   
            f_Color = combo(texel.bgr, Black, TeamColor_Primary, Yellow, DarkGrey);
        }
        else if (isClose (TeamColor_Primary, Yellow))
        {
            f_Color = combo(texel.bgr, Black, TeamColor_Primary, DarkRed, White);
        }
        else 
        {   
            f_Color = combo(texel.bgr, Black, TeamColor_Primary, Yellow, White);
        }
        
        gl_FragColor = TeamColor_Primary.a * texel.a * (vec4(f_Color.r, f_Color.g, f_Color.b, 1));
    }
    
    [​IMG]
    Last edited: June 26, 2013
  13. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    Next in line: would it be possible to give the si shader access to the data of whether a unit is selected or not? So that which units are selected is clearly visible from the strategic icons being highlighted.
  14. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    ....or simply by mouse hover..... oh boy do I want that feature!
    Last edited: August 3, 2013
  15. zaphodx

    zaphodx Post Master General

    Messages:
    2,350
    Likes Received:
    2,409
  16. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    technical issues, the shader stopped working, a new vers will be along in a couple of hours.

    EDIT as of 6/26/2013 00:41 final 50000build version is live, enjoy + started update log.
    Last edited: September 11, 2013
  17. xedi

    xedi Active Member

    Messages:
    135
    Likes Received:
    25
    Re: Sup Com Strategic icons by tatsu

    Nice job, the icons are very readable. I guess there are still a few odd colour combinations that throw it off (for black team colour, the white detail vs yellow nuke is not very readable...).

    You can try tweaking the code some more, adding various special cases you might need. For instance, change yellow to some darker yellow/orange in the case of black team colour?

    There seems to be a glitch floating around though, same with my icons too: some icons sometimes have a small black bar appear and disappear above them. I'm not sure what causes this at all. I initially thought this happened because some icons go right up to the edge of the 32x32 pixels, but I looked through your icons and all of your icons have some transparent space on the side, so it's not that...

    Very annoying nitpick: your nuke icon doesn't seem to be exactly centered in the nuke launcher and nuclear submarine icons... it's a bit off to the right!

    Personal opinion 1: you've decided to have T2 indicators, but not T1 indicators. I think the whole thing looks a bit more consistent if you have both T1 and T2 indicators.
    Personal opinion 2: I think you should change the blip to something smaller, a bit more innocuous.
    Personal opinion 3: I think you should give some kind of border to the land/sea barriers, otherwise they can be hard to see (e.g. black team colour on a black background).
    Personal opinion 4: I think you should change the energy storage icon, I don't like it very much.
  18. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    Re: Sup Com Strategic icons by tatsu

    Hehe indeed all of that is true and I picked up on it myself, for the nukes on blakck i'm thinking putting another colour to allow an extra exception and leave the interior black while the borders go white.

    as for the logo being of center i'm fighting over pixels on my very small icons, i'll see if i can get a perfect center but I liked the readibility of this vers.

    And finally for those annoying border glitches (that the normal uber icons don't seem to get) it probably provoked by our icons being smaller. I'm hoping Uber gives us a fix there.

    But overall I gotta say I'm quite astounded by the result, it looks gorgeous to me, and I owe allmost all of it to you!

    oh ya one more thing, I didn't do the Tech bars correctly if they are to stay black and white (I'll end up having to re-redo the icon pack (#゚Д゚)ノ ┻━┻ ) I'll need (yet another) colour for end-result black on the bottom border. am i hitting limitations here?

    EDIT :I agree with the three first opinions (so it is confirmed i shall have to re-redo the icons TT__TT ). The fourth I don't really, (maybe just not yet) i like it so far, didn't you recognise the new mass storage and energy icons ? theyre the ones from th UI. I figured it was time to put a little something of PA into these icons and would seem logical since they are the physical embodiment of what's contained in those bars, so it is instinctive for them to have the same icon. no?
    I can make them fit more into the box...
  19. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    added orbital fighter also. I can't guess the "icon_si" name for the orbital satellite. can someone tell me?
  20. tatsujb

    tatsujb Post Master General

    Messages:
    12,879
    Likes Received:
    5,374
    OK big update here folks! noone must have been trying it out because you were getting wrong .js and .ini files which explains the issues Iampetard experienced, please, if you do try my icon pack, give feedback, Ok so this new version includes new mass icon, orbital fighter icon, orbital launcher station, nuke projectile, nuke defense projectile and changed mass and energy icon in "eco bar" and in "new game" and "lobby". Enjoy!

Share This Page