examples

2025-10-09 18:39:48 -04:00
parent f5d716bf38
commit 9ad3f058a7
3 changed files with 339 additions and 0 deletions
--- a/examples/AutoScalingWithExplicitSize.lua
+++ b/examples/AutoScalingWithExplicitSize.lua
@@ -0,0 +1,107 @@
+-- Example: Auto-scaling with explicit textSize values
+-- By default, even explicit pixel sizes will auto-scale with window
+
+package.path = package.path .. ";?.lua"
+require("testing/loveStub")
+local FlexLove = require("FlexLove")
+local Gui = FlexLove.GUI
+local Color = FlexLove.Color
+
+print("=== Auto-Scaling with Explicit textSize ===\n")
+
+-- Example 1: Default behavior - auto-scales even with explicit pixel size
+print("1. Default: textSize=40 auto-scales")
+local elem1 = Gui.new({
+  text = "Pause Menu",
+  textSize = 40,  -- Explicit pixel size
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600: textSize = " .. elem1.textSize)
+print("   (Converted to " .. string.format("%.2f", elem1.units.textSize.value) .. "vh internally)")
+
+love.window.setMode(1600, 1200)
+Gui.resize()
+print("   At 1600x1200: textSize = " .. elem1.textSize)
+print("   (Scales proportionally!)\n")
+
+-- Example 2: Disable auto-scaling for truly fixed size
+print("2. Fixed: textSize=40 with autoScaleText=false")
+Gui.destroy()
+love.window.setMode(800, 600)
+local elem2 = Gui.new({
+  text = "Fixed Size",
+  textSize = 40,
+  autoScaleText = false,  -- Disable auto-scaling
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600: textSize = " .. elem2.textSize)
+
+love.window.setMode(1600, 1200)
+Gui.resize()
+print("   At 1600x1200: textSize = " .. elem2.textSize)
+print("   (Stays fixed)\n")
+
+-- Example 3: Use viewport units explicitly
+print("3. Explicit viewport units: textSize='5vh'")
+Gui.destroy()
+love.window.setMode(800, 600)
+local elem3 = Gui.new({
+  text = "Large Title",
+  textSize = "5vh",  -- 5% of viewport height
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600: textSize = " .. elem3.textSize .. " (5% of 600)")
+
+love.window.setMode(1600, 1200)
+Gui.resize()
+print("   At 1600x1200: textSize = " .. elem3.textSize .. " (5% of 1200)\n")
+
+-- Example 4: Your Pause Menu use case
+print("4. Pause Menu Example")
+Gui.destroy()
+love.window.setMode(800, 600)
+
+local pauseMenu = Gui.new({
+  x = "25%",
+  y = "25%",
+  width = "50%",
+  height = "50%",
+  positioning = "flex",
+  flexDirection = "vertical",
+  justifyContent = "center",
+  alignItems = "center",
+  background = Color.new(0.1, 0.1, 0.1, 0.9),
+})
+
+local title = Gui.new({
+  parent = pauseMenu,
+  text = "Pause Menu",
+  textSize = 40,  -- Auto-scales by default!
+  textColor = Color.new(1, 1, 1),
+})
+
+local closeButton = Gui.new({
+  parent = pauseMenu,
+  text = "X",
+  textSize = 40,  -- Auto-scales by default!
+  padding = { horizontal = 8 },
+  textColor = Color.new(1, 1, 1),
+})
+
+print("   At 800x600:")
+print("   Title textSize: " .. title.textSize)
+print("   Button textSize: " .. closeButton.textSize)
+
+love.window.setMode(1600, 1200)
+Gui.resize()
+print("   At 1600x1200:")
+print("   Title textSize: " .. title.textSize .. " (scaled 2x!)")
+print("   Button textSize: " .. closeButton.textSize .. " (scaled 2x!)")
+print()
+
+print("=== Summary ===")
+print("• textSize with pixel values NOW AUTO-SCALES by default")
+print("• To disable: set autoScaleText = false")
+print("• Pixel values are converted to viewport units (vh) internally")
+print("• This makes text responsive without any extra configuration!")
+print("• Your Pause Menu will now scale perfectly at any resolution")
--- a/examples/BaseScaling.lua
+++ b/examples/BaseScaling.lua
@@ -0,0 +1,151 @@
+-- Example demonstrating base scaling feature
+-- Design your UI at a base resolution and it scales proportionally
+
+package.path = package.path .. ";?.lua"
+require("testing/loveStub")
+local FlexLove = require("FlexLove")
+local Gui = FlexLove.GUI
+local Color = FlexLove.Color
+
+print("=== Base Scaling Examples ===\n")
+
+-- Example 1: Without base scaling (default behavior)
+print("1. Without Base Scaling")
+print("   Elements use actual pixel values")
+local elem1 = Gui.new({
+  x = 100,
+  y = 50,
+  width = 200,
+  height = 100,
+  text = "No Scaling",
+  textSize = 16,
+  autoScaleText = false,
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600:")
+print("   x=" .. elem1.x .. ", y=" .. elem1.y .. ", width=" .. elem1.width .. ", height=" .. elem1.height .. ", textSize=" .. elem1.textSize)
+love.window.setMode(1600, 1200)
+elem1:resize(1600, 1200)
+print("   After resize to 1600x1200:")
+print("   x=" .. elem1.x .. ", y=" .. elem1.y .. ", width=" .. elem1.width .. ", height=" .. elem1.height .. ", textSize=" .. elem1.textSize)
+print("   (No scaling applied)\n")
+
+-- Example 2: With base scaling
+print("2. With Base Scaling (baseScale = {width=800, height=600})")
+print("   Design at 800x600, scales to any resolution")
+love.window.setMode(800, 600)
+Gui.destroy()
+Gui.init({
+  baseScale = { width = 800, height = 600 }
+})
+
+local scaleX, scaleY = Gui.getScaleFactors()
+print("   Initial scale factors: x=" .. scaleX .. ", y=" .. scaleY)
+
+local elem2 = Gui.new({
+  x = 100,      -- Designed for 800x600
+  y = 50,
+  width = 200,
+  height = 100,
+  text = "Scaled UI",
+  textSize = 16,
+  autoScaleText = false,
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600 (base resolution):")
+print("   x=" .. elem2.x .. ", y=" .. elem2.y .. ", width=" .. elem2.width .. ", height=" .. elem2.height .. ", textSize=" .. elem2.textSize)
+
+love.window.setMode(1600, 1200)
+elem2:resize(1600, 1200)
+scaleX, scaleY = Gui.getScaleFactors()
+print("   After resize to 1600x1200:")
+print("   Scale factors: x=" .. scaleX .. ", y=" .. scaleY)
+print("   x=" .. elem2.x .. ", y=" .. elem2.y .. ", width=" .. elem2.width .. ", height=" .. elem2.height .. ", textSize=" .. elem2.textSize)
+print("   (Everything scaled 2x!)\n")
+
+-- Example 3: Padding and margins are NOT scaled
+print("3. Padding/Margins NOT Scaled")
+love.window.setMode(800, 600)
+Gui.destroy()
+Gui.init({
+  baseScale = { width = 800, height = 600 }
+})
+
+local elem3 = Gui.new({
+  x = 100,
+  y = 50,
+  width = 200,
+  height = 100,
+  padding = { horizontal = 10, vertical = 5 },
+  text = "Padding Test",
+  autoScaleText = false,
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600:")
+print("   width=" .. elem3.width .. ", padding.left=" .. elem3.padding.left .. ", padding.top=" .. elem3.padding.top)
+
+love.window.setMode(1600, 1200)
+elem3:resize(1600, 1200)
+print("   After resize to 1600x1200:")
+print("   width=" .. elem3.width .. " (scaled 2x), padding.left=" .. elem3.padding.left .. ", padding.top=" .. elem3.padding.top .. " (NOT scaled)")
+print()
+
+-- Example 4: Percentage units still work
+print("4. Percentage Units with Base Scaling")
+love.window.setMode(800, 600)
+Gui.destroy()
+Gui.init({
+  baseScale = { width = 800, height = 600 }
+})
+
+local elem4 = Gui.new({
+  x = "10%",     -- Percentage of viewport
+  y = "10%",
+  width = "50%",
+  height = "20%",
+  text = "Percentage",
+  autoScaleText = false,
+  textColor = Color.new(1, 1, 1),
+})
+print("   At 800x600:")
+print("   x=" .. elem4.x .. ", y=" .. elem4.y .. ", width=" .. elem4.width .. ", height=" .. elem4.height)
+
+love.window.setMode(1600, 1200)
+elem4:resize(1600, 1200)
+print("   After resize to 1600x1200:")
+print("   x=" .. elem4.x .. ", y=" .. elem4.y .. ", width=" .. elem4.width .. ", height=" .. elem4.height)
+print("   (Percentage units scale with viewport, not base scale)\n")
+
+-- Example 5: Designing for 1920x1080 and scaling down
+print("5. Design for 1920x1080, Scale to 800x600")
+love.window.setMode(800, 600)
+Gui.destroy()
+Gui.init({
+  baseScale = { width = 1920, height = 1080 }
+})
+
+scaleX, scaleY = Gui.getScaleFactors()
+print("   Scale factors at 800x600: x=" .. string.format("%.3f", scaleX) .. ", y=" .. string.format("%.3f", scaleY))
+
+local elem5 = Gui.new({
+  x = 960,      -- Center of 1920x1080
+  y = 540,
+  width = 400,
+  height = 200,
+  text = "HD Design",
+  textSize = 24,
+  autoScaleText = false,
+  textColor = Color.new(1, 1, 1),
+})
+print("   Designed for 1920x1080 (x=960, y=540, width=400, textSize=24)")
+print("   At 800x600:")
+print("   x=" .. string.format("%.1f", elem5.x) .. ", y=" .. string.format("%.1f", elem5.y) .. ", width=" .. string.format("%.1f", elem5.width) .. ", textSize=" .. string.format("%.1f", elem5.textSize))
+print("   (Scaled down proportionally)\n")
+
+print("=== Summary ===")
+print("• Call Gui.init({baseScale = {width=W, height=H}}) in love.load()")
+print("• Design your UI at the base resolution")
+print("• All pixel values (x, y, width, height, textSize) scale proportionally")
+print("• Padding and margins do NOT scale (stay at designed pixel values)")
+print("• Percentage/viewport units work independently of base scaling")
+print("• Perfect for responsive UIs that maintain proportions")
--- a/examples/BaseScalingSimple.lua
+++ b/examples/BaseScalingSimple.lua
@@ -0,0 +1,81 @@
+-- Simple example demonstrating base scaling
+
+package.path = package.path .. ";?.lua"
+require("testing/loveStub")
+local FlexLove = require("FlexLove")
+local Gui = FlexLove.GUI
+local Color = FlexLove.Color
+
+print("=== Base Scaling Demo ===\n")
+
+-- Initialize with base scale (call this in love.load())
+Gui.init({
+  baseScale = { width = 800, height = 600 }
+})
+
+print("Designing UI for 800x600 base resolution\n")
+
+-- Create UI elements using base resolution coordinates
+local button = Gui.new({
+  x = 100,
+  y = 50,
+  width = 200,
+  height = 60,
+  text = "Click Me!",
+  textSize = 20,
+  autoScaleText = false,
+  padding = { horizontal = 16, vertical = 8 },
+  textAlign = "center",
+  border = { top = true, right = true, bottom = true, left = true },
+  borderColor = Color.new(1, 1, 1),
+  textColor = Color.new(1, 1, 1),
+})
+
+print("At 800x600 (base resolution):")
+print(string.format("  Button: x=%d, y=%d, width=%d, height=%d, textSize=%d", 
+  button.x, button.y, button.width, button.height, button.textSize))
+print(string.format("  Padding: left=%d, top=%d (NOT scaled)", 
+  button.padding.left, button.padding.top))
+
+-- Simulate window resize to 1600x1200 (2x scale)
+print("\nResizing window to 1600x1200...")
+love.window.setMode(1600, 1200)
+Gui.resize()  -- This updates all elements
+
+local sx, sy = Gui.getScaleFactors()
+print(string.format("Scale factors: x=%.1f, y=%.1f", sx, sy))
+print(string.format("  Button: x=%d, y=%d, width=%d, height=%d, textSize=%d", 
+  button.x, button.y, button.width, button.height, button.textSize))
+print(string.format("  Padding: left=%d, top=%d (NOT scaled)", 
+  button.padding.left, button.padding.top))
+
+-- Simulate window resize to 400x300 (0.5x scale)
+print("\nResizing window to 400x300...")
+love.window.setMode(400, 300)
+Gui.resize()
+
+sx, sy = Gui.getScaleFactors()
+print(string.format("Scale factors: x=%.1f, y=%.1f", sx, sy))
+print(string.format("  Button: x=%d, y=%d, width=%d, height=%d, textSize=%d", 
+  button.x, button.y, button.width, button.height, button.textSize))
+print(string.format("  Padding: left=%d, top=%d (NOT scaled)", 
+  button.padding.left, button.padding.top))
+
+print("\n=== Usage ===")
+print("In your main.lua:")
+print([[
+function love.load()
+  local FlexLove = require("game.libs.FlexLove")
+  local Gui = FlexLove.GUI
+  
+  -- Initialize with your design resolution
+  Gui.init({ baseScale = { width = 800, height = 600 } })
+  
+  -- Create UI using base resolution coordinates
+  -- Everything will scale automatically!
+end
+
+function love.resize(w, h)
+  Gui.resize()  -- Update all elements for new window size
+end
+]])