input, adding back examples
This commit is contained in:
Michael Freno
241
examples/04_responsive_units.lua
Normal file
241
examples/04_responsive_units.lua
Normal file
@@ -0,0 +1,241 @@
|
||||
--[[
|
||||
FlexLove Example 04: Responsive Units
|
||||
|
||||
This example demonstrates responsive unit systems in FlexLove:
|
||||
- Viewport units (vw, vh)
|
||||
- Percentage units (%)
|
||||
- Pixel units (px)
|
||||
- How elements resize with the window
|
||||
|
||||
Run with: love /path/to/libs/examples/04_responsive_units.lua
|
||||
Try resizing the window to see responsive behavior!
|
||||
]]
|
||||
|
||||
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 = "6vh",
|
||||
text = "FlexLove Example 04: Responsive Units - Try Resizing!",
|
||||
textSize = "4vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 1: Viewport Width Units (vw)
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "10vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Viewport Width (vw) - Scales with window width",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
local vwContainer = Gui.new({
|
||||
x = "2vw",
|
||||
y = "14vh",
|
||||
width = "96vw",
|
||||
height = "12vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
justifyContent = enums.JustifyContent.SPACE_EVENLY,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.3, 0.3, 0.4, 1),
|
||||
})
|
||||
|
||||
-- Elements with vw widths
|
||||
local vwWidths = { "10vw", "15vw", "20vw", "25vw" }
|
||||
local colors = {
|
||||
Color.new(0.8, 0.3, 0.3, 1),
|
||||
Color.new(0.3, 0.8, 0.3, 1),
|
||||
Color.new(0.3, 0.3, 0.8, 1),
|
||||
Color.new(0.8, 0.8, 0.3, 1),
|
||||
}
|
||||
|
||||
for i, width in ipairs(vwWidths) do
|
||||
Gui.new({
|
||||
parent = vwContainer,
|
||||
width = width,
|
||||
height = "8vh",
|
||||
backgroundColor = colors[i],
|
||||
text = width,
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
end
|
||||
|
||||
-- ========================================
|
||||
-- Section 2: Viewport Height Units (vh)
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "28vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Viewport Height (vh) - Scales with window height",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
local vhContainer = Gui.new({
|
||||
x = "2vw",
|
||||
y = "32vh",
|
||||
width = "96vw",
|
||||
height = "30vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
justifyContent = enums.JustifyContent.SPACE_EVENLY,
|
||||
alignItems = enums.AlignItems.FLEX_END,
|
||||
backgroundColor = Color.new(0.1, 0.15, 0.1, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.3, 0.4, 0.3, 1),
|
||||
})
|
||||
|
||||
-- Elements with vh heights
|
||||
local vhHeights = { "8vh", "12vh", "16vh", "20vh", "24vh" }
|
||||
|
||||
for i, height in ipairs(vhHeights) do
|
||||
local hue = (i - 1) / 4
|
||||
Gui.new({
|
||||
parent = vhContainer,
|
||||
width = "16vw",
|
||||
height = height,
|
||||
backgroundColor = Color.new(0.3 + hue * 0.5, 0.5, 0.7 - hue * 0.4, 1),
|
||||
text = height,
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
end
|
||||
|
||||
-- ========================================
|
||||
-- Section 3: Percentage Units (%)
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "64vh",
|
||||
width = "46vw",
|
||||
height = "3vh",
|
||||
text = "Percentage (%) - Relative to parent",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
local percentContainer = Gui.new({
|
||||
x = "2vw",
|
||||
y = "68vh",
|
||||
width = "46vw",
|
||||
height = "28vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.VERTICAL,
|
||||
justifyContent = enums.JustifyContent.SPACE_EVENLY,
|
||||
alignItems = enums.AlignItems.STRETCH,
|
||||
backgroundColor = Color.new(0.15, 0.1, 0.15, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.4, 0.3, 0.4, 1),
|
||||
padding = { top = 10, right = 10, bottom = 10, left = 10 },
|
||||
})
|
||||
|
||||
-- Child elements with percentage widths
|
||||
local percentWidths = { "25%", "50%", "75%", "100%" }
|
||||
|
||||
for i, width in ipairs(percentWidths) do
|
||||
local progress = (i - 1) / 3
|
||||
Gui.new({
|
||||
parent = percentContainer,
|
||||
width = width,
|
||||
height = "5vh",
|
||||
backgroundColor = Color.new(0.6, 0.4 + progress * 0.4, 0.7 - progress * 0.4, 1),
|
||||
text = width .. " of parent",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
end
|
||||
|
||||
-- ========================================
|
||||
-- Section 4: Pixel Units (px) - Fixed Size
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "50vw",
|
||||
y = "64vh",
|
||||
width = "48vw",
|
||||
height = "3vh",
|
||||
text = "Pixels (px) - Fixed size (doesn't resize)",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
local pxContainer = Gui.new({
|
||||
x = "50vw",
|
||||
y = "68vh",
|
||||
width = "48vw",
|
||||
height = "28vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
justifyContent = enums.JustifyContent.CENTER,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
gap = 10,
|
||||
backgroundColor = Color.new(0.1, 0.12, 0.15, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.3, 0.35, 0.4, 1),
|
||||
})
|
||||
|
||||
-- Fixed pixel size elements
|
||||
local pxSizes = {
|
||||
{ w = 80, h = 80 },
|
||||
{ w = 100, h = 100 },
|
||||
{ w = 120, h = 120 },
|
||||
}
|
||||
|
||||
for i, size in ipairs(pxSizes) do
|
||||
Gui.new({
|
||||
parent = pxContainer,
|
||||
width = size.w,
|
||||
height = size.h,
|
||||
backgroundColor = Color.new(0.8 - i * 0.2, 0.3 + i * 0.2, 0.5, 1),
|
||||
text = size.w .. "px",
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
})
|
||||
end
|
||||
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