input, adding back examples
This commit is contained in:
Michael Freno
281
examples/09_styling_visual_effects.lua
Normal file
281
examples/09_styling_visual_effects.lua
Normal file
@@ -0,0 +1,281 @@
|
||||
--[[
|
||||
FlexLove Example 09: Styling and Visual Effects
|
||||
|
||||
This example demonstrates styling and visual effects:
|
||||
- Corner radius (uniform and individual corners)
|
||||
- Borders (different sides)
|
||||
- Opacity levels
|
||||
- Background colors
|
||||
- Blur effects (contentBlur and backdropBlur)
|
||||
|
||||
Run with: love /path/to/libs/examples/09_styling_visual_effects.lua
|
||||
]]
|
||||
|
||||
local Lv = love
|
||||
|
||||
local FlexLove = require("../FlexLove")
|
||||
local Gui = FlexLove.Gui
|
||||
local Color = FlexLove.Color
|
||||
local enums = FlexLove.enums
|
||||
|
||||
function Lv.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 }
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "2vh",
|
||||
width = "96vw",
|
||||
height = "5vh",
|
||||
text = "FlexLove Example 09: Styling and Visual Effects",
|
||||
textSize = "3.5vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 1: Corner Radius
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "9vh",
|
||||
width = "46vw",
|
||||
height = "3vh",
|
||||
text = "Corner Radius",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- Uniform corner radius
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "13vh",
|
||||
width = "14vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.6, 0.3, 0.7, 1),
|
||||
cornerRadius = 5,
|
||||
text = "radius: 5",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
x = "17vw",
|
||||
y = "13vh",
|
||||
width = "14vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.3, 0.6, 0.7, 1),
|
||||
cornerRadius = 15,
|
||||
text = "radius: 15",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- Individual corner radius
|
||||
Gui.new({
|
||||
x = "32vw",
|
||||
y = "13vh",
|
||||
width = "16vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.7, 0.6, 0.3, 1),
|
||||
cornerRadius = {
|
||||
topLeft = 0,
|
||||
topRight = 20,
|
||||
bottomLeft = 20,
|
||||
bottomRight = 0,
|
||||
},
|
||||
text = "Individual\ncorners",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 2: Borders
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "50vw",
|
||||
y = "9vh",
|
||||
width = "48vw",
|
||||
height = "3vh",
|
||||
text = "Borders",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- All borders
|
||||
Gui.new({
|
||||
x = "50vw",
|
||||
y = "13vh",
|
||||
width = "14vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.8, 0.4, 0.4, 1),
|
||||
text = "All sides",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- Top and bottom borders
|
||||
Gui.new({
|
||||
x = "65vw",
|
||||
y = "13vh",
|
||||
width = "14vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.2, 0.3, 0.2, 1),
|
||||
border = { top = true, bottom = true },
|
||||
borderColor = Color.new(0.4, 0.8, 0.4, 1),
|
||||
text = "Top & Bottom",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- Left border only
|
||||
Gui.new({
|
||||
x = "80vw",
|
||||
y = "13vh",
|
||||
width = "16vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
border = { left = true },
|
||||
borderColor = Color.new(0.4, 0.4, 0.8, 1),
|
||||
text = "Left only",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 3: Opacity
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "27vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Opacity Levels",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
local opacityLevels = { 1.0, 0.75, 0.5, 0.25 }
|
||||
|
||||
for i, opacity in ipairs(opacityLevels) do
|
||||
Gui.new({
|
||||
x = (2 + (i - 1) * 24) .. "vw",
|
||||
y = "31vh",
|
||||
width = "22vw",
|
||||
height = "12vh",
|
||||
backgroundColor = Color.new(0.8, 0.3, 0.5, 1),
|
||||
opacity = opacity,
|
||||
text = "Opacity: " .. opacity,
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 8,
|
||||
})
|
||||
end
|
||||
|
||||
-- ========================================
|
||||
-- Section 4: Background Colors
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "45vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Background Colors",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- Gradient-like colors
|
||||
for i = 1, 8 do
|
||||
local hue = (i - 1) / 7
|
||||
Gui.new({
|
||||
x = (2 + (i - 1) * 12) .. "vw",
|
||||
y = "49vh",
|
||||
width = "11vw",
|
||||
height = "18vh",
|
||||
backgroundColor = Color.new(
|
||||
0.3 + hue * 0.5,
|
||||
0.5 + math.sin(hue * 3.14) * 0.3,
|
||||
0.8 - hue * 0.5,
|
||||
1
|
||||
),
|
||||
text = tostring(i),
|
||||
textSize = "3vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
})
|
||||
end
|
||||
|
||||
-- ========================================
|
||||
-- Section 5: Blur Effects (if supported)
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "69vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Blur Effects (contentBlur & backdropBlur)",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- Content blur example
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "73vh",
|
||||
width = "46vw",
|
||||
height = "22vh",
|
||||
backgroundColor = Color.new(0.3, 0.4, 0.6, 0.8),
|
||||
contentBlur = { intensity = 5, quality = 3 },
|
||||
text = "Content Blur\n(blurs this element)",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 10,
|
||||
})
|
||||
|
||||
-- Backdrop blur example
|
||||
Gui.new({
|
||||
x = "50vw",
|
||||
y = "73vh",
|
||||
width = "46vw",
|
||||
height = "22vh",
|
||||
backgroundColor = Color.new(0.6, 0.4, 0.3, 0.6),
|
||||
backdropBlur = { intensity = 10, quality = 5 },
|
||||
text = "Backdrop Blur\n(blurs background)",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 10,
|
||||
})
|
||||
end
|
||||
|
||||
function Lv.update(dt)
|
||||
Gui.update(dt)
|
||||
end
|
||||
|
||||
function Lv.draw()
|
||||
Lv.graphics.clear(0.05, 0.05, 0.08, 1)
|
||||
Gui.draw()
|
||||
end
|
||||
|
||||
function Lv.resize(w, h)
|
||||
Gui.resize(w, h)
|
||||
end
|
||||
Reference in New Issue
Block a user