lib/simple_ui/element.lua

@@ -1,9 +1,22 @@
 local Rect = require "lib.simple_ui.rect"
 
+local function makeGradientMesh(w, h, topColor, bottomColor)
+    local vertices = {
+        { 0, 0, 0, 0, topColor[1],    topColor[2],    topColor[3],    topColor[4] },    -- левый верх
+        { w, 0, 1, 0, topColor[1],    topColor[2],    topColor[3],    topColor[4] },    -- правый верх
+        { w, h, 1, 1, bottomColor[1], bottomColor[2], bottomColor[3], bottomColor[4] }, -- правый низ
+        { 0, h, 0, 1, bottomColor[1], bottomColor[2], bottomColor[3], bottomColor[4] }, -- левый низ
+    }
+    local mesh = love.graphics.newMesh(vertices, "fan", "static")
+    return mesh
+end
+
 --- @class UIElement
---- @field bounds Rect Прямоугольник, в границах которого размещается элемент. Размеры и положение в *локальных* координатах
+--- @field bounds Rect Прямоугольник, в границах которого размещается элемент. Размеры и положение в экранных координатах
---- @field transform love.Transform Преобразование из локальных координат элемента (bounds) в экранные координаты
+--- @field overlayGradientMesh love.Mesh Общий градиент поверх элемента (интерполированный меш)
 local uiElement = {}
+uiElement.bounds = Rect {}
+uiElement.overlayGradientMesh = makeGradientMesh(1, 1, { 0, 0, 0, 0 }, { 0, 0, 0, 0.4 });
 uiElement.__index = uiElement
 
 function uiElement:update(dt) end
@@ -20,6 +33,7 @@ end
 --- @return T
 function uiElement.new(self, values)
     values.bounds = values.bounds or Rect {}
+    values.overlayGradientMesh = values.overlayGradientMesh or uiElement.bounds;
     return setmetatable(values, self)
 end
 
@@ -59,4 +73,14 @@ function uiElement:drawBorder(type)
     love.graphics.setColor(1, 1, 1)
 end
 
+--- рисует градиент поверх элемента
+function uiElement:drawGradientOverlay()
+    love.graphics.push()
+    love.graphics.translate(self.bounds.x, self.bounds.y)
+    love.graphics.scale(self.bounds.width, self.bounds.height)
+    love.graphics.setColor(1, 1, 1, 1)
+    love.graphics.draw(self.overlayGradientMesh)
+    love.graphics.pop()
+end
+
 return uiElement

lib/simple_ui/level/skill_row.lua

@@ -197,8 +197,12 @@ function skillRow:draw()
     --граница
     self:drawBorder("outer")
 
-    love.graphics.setColor(1, 1, 1)
+    love.graphics.setStencilTest()
 
+    --затенение
+    self:drawGradientOverlay()
+
+    love.graphics.setColor(1, 1, 1)
     love.graphics.setCanvas()
 
     local alpha = 1