Modding: allow for custom TechPortraits (#8300)

Co-authored-by: tunerzinc@gmail.com <vfylfhby>

core/src/com/unciv/ui/images/ImageGetter.kt

@@ -376,14 +376,46 @@ object ImageGetter {
         return iconGroup.surroundWithThinCircle()
     }
 
-    fun getTechIconGroup(techName: String, circleSize: Float): IconCircleGroup {
-        val techIconColor = ruleset.eras[ruleset.technologies[techName]?.era()]?.getColor()?.darken(0.6f) ?: Color.BLACK
-        val image =
-                if (imageExists("TechIcons/$techName")) getImage("TechIcons/$techName")
-                else getImage("TechIcons/Fallback")
-        return image.apply { color = techIconColor }
-            .surroundWithCircle(circleSize)
-            .surroundWithThinCircle(techIconColor)
+    fun getTechIconGroup(techName: String, circleSize: Float, isResearched: Boolean = false): Group {
+
+        val portrait: Image
+        val eraColor = ruleset.eras[ruleset.technologies[techName]?.era()]?.getColor()?.darken(0.6f) ?: Color.BLACK
+
+        // Inner part
+        if (imageExists("TechPortraits/$techName"))
+            portrait = getImage("TechPortraits/$techName")
+        else {
+            portrait = if (imageExists("TechIcons/$techName"))
+                getImage("TechIcons/$techName")
+            else
+                getImage("TechIcons/Fallback")
+            portrait.color = eraColor
+        }
+
+        // Border / background
+        if (imageExists("TechPortraits/Background")) {
+            val background = getImage("TechPortraits/Background")
+            val ratioW = portrait.width / background.width
+            val ratioH = portrait.height / background.height
+
+            if (isResearched)
+                background.color = Color.GOLD.cpy().brighten(0.5f)
+
+            background.setSize(circleSize, circleSize)
+            portrait.setSize(circleSize*ratioW, circleSize*ratioH)
+
+            val group = Group()
+            group.setSize(circleSize, circleSize)
+            group.addActor(background)
+            group.addActor(portrait)
+
+            background.center(group)
+            portrait.center(group)
+
+            return group
+        } else {
+            return portrait.surroundWithCircle(circleSize).surroundWithThinCircle(eraColor)
+        }
     }
 
     fun getProgressBarHorizontal(

core/src/com/unciv/ui/pickerscreens/TechButton.kt

@@ -6,6 +6,7 @@ import com.badlogic.gdx.scenes.scene2d.Touchable
 import com.badlogic.gdx.scenes.scene2d.ui.Image
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.utils.Align
+import com.unciv.Constants
 import com.unciv.logic.civilization.TechManager
 import com.unciv.models.ruleset.Building
 import com.unciv.models.ruleset.tile.TileImprovement
@@ -18,6 +19,7 @@ import com.unciv.ui.utils.extensions.addBorder
 import com.unciv.ui.utils.extensions.brighten
 import com.unciv.ui.utils.extensions.center
 import com.unciv.ui.utils.extensions.centerY
+import com.unciv.ui.utils.extensions.colorFromRGB
 import com.unciv.ui.utils.extensions.darken
 import com.unciv.ui.utils.extensions.setFontSize
 import com.unciv.ui.utils.extensions.setSize
@@ -50,8 +52,9 @@ class TechButton(techName:String, private val techManager: TechManager, isWorldS
 
         pad(0f).padBottom(5f).padTop(5f).padLeft(5f).padRight(0f)
 
-        if (ImageGetter.techIconExists(techName))
-            add(ImageGetter.getTechIconGroup(techName, 46f)).padRight(5f).padLeft(2f).left()
+        val isResearched = (techManager.isResearched(techName) && techName != Constants.futureTech)
+        add(ImageGetter.getTechIconGroup(techName, 46f, isResearched))
+            .padRight(5f).padLeft(2f).left()
 
         if (isWorldScreen) {
             val techCost = techManager.costOfTech(techName)

docs/Modders/Images-and-Audio.md

@@ -41,13 +41,15 @@ These work best if they are square, between 100x100 and 256x256 pixels, and incl
 
 For example, [here](https://github.com/yairm210/Unciv-leader-portrait-mod-example) is mod showing how to add leader portraits, which can complement the base game.
 
-### Adding Unit and Building Portraits
+### Adding Unit, Building and Tech Portraits
 
-The base game uses flat icons, colored to fit the civilization's flag colors, to denote units both on the map and in other UI elements. A mod can supply "Portraits" - static images that will remain uncolored - by adding their images to `/Images/UnitPortraits/` and `/Images/BuildingPortraits/`, which will be used in all UI elements except for the world map. The file name must correspond exactly with the unit/building name as defined in Units.json and Buildings.json, or they will be ignored.
+The base game uses flat icons, colored to fit the civilization's flag colors, to denote units both on the map and in other UI elements. A mod can supply "Portraits" - static images that will remain uncolored - by adding their images to `/Images/UnitPortraits/`, `/Images/BuildingPortraits/` and '/Images/TechPortraits/', which will be used in all UI elements except for the world map. The file name must correspond exactly with the unit/building/tech name as defined in Units.json, Buildings.json or Techs.json or they will be ignored.
 
-These work best if they are full RGB square, between 100x100 and 256x256 pixels, and include some transparent border within that area.
+If mod supplies '/Images/TechPortraits/Background.png' image, it will be used as a background for tech portraits instead of default circle. 
 
-For example, [here](https://github.com/vegeta1k95/Civ-5-Icons) is mod showing how to add unit portraits, which can complement the base game.
+Portraits and backgrounds work best if they are full RGB square, between 100x100 and 256x256 pixels, and include some transparent border within that area.
+
+For example, [here](https://github.com/vegeta1k95/Civ-5-Icons) is mod showing how to add custom portraits, which can complement the base game.
 
 ## Sounds