[CODE] draw rectangles by percent of window dimensions.

[Yenoxel]

Code: Select all

-- love version 11.5
-- file: main.lua - simple implementation of percentual scaling of rectangles like in CSS,HTML
-- Date: 2023/01/14
--os.execute("clear") -- clear console previous output for *nix OS'es
function love.load()
--<GLOBALS>--------------------------------------------------------------------
--[[
	HOW TO:
	1.Create your own rectangle with percentual scaling and positioning by filling lua table with 4 values and 
	passing this table to function 'drawPlayZone( table )'

	2.Create child rectangle to parent rectangle, for relative (parent) positioning and scaling of rectangle by
	passing parent table into function 'drawChildRectangle' 
	Synopsis:
		drawChildRectangle( table , xpos, ypos, xsize, ysize, unit)
	#1 table of parent
	#2,3,4,5 for positioning and size set of rectangle
	#6(unit) must be string "px" or "pc" -- px for pixel, pc for percent
]]

--<PlayCard_zones>
player1Zone    = {20, 80, 60, 20}--bottom
player2Zone    = {0 , 21, 20, 58}--left
player3Zone    = {20, 0 , 60, 20}--top
player4Zone    = {80, 21, 20, 58}--right
centerbaseZone = {33, 33, 33, 33}--center
--</PlayCard_zones>

--<old_positioning_style>  of html webpage
		 --xpos ypos xwidth/yheight
header    = { 1 , 1 , 98 , 20 } --percent values, scale by window size (any screen size resolution)
leftmenu  = { 1 , 22, 20 , 68 }
content   = { 22, 22, 56 , 68 }
rightmenu = { 79, 22, 20 , 68 }
footer    = { 1 , 91, 98 , 8  }
--</old_positioning_style>

--</GLOBALS>------------------------------------------------------------------

	love.graphics.setBackgroundColor(.4, .5, .3, 1) -- greeny

	function drawPlayCardZones()
--		drawPlayZone( table ) -- return nothing
		drawPlayZone(player1Zone)
--		drawChildRectangle(table, xpos, ypos, xsize, ysize, unit[px or pc])
		drawChildRectangle(player1Zone, 1, 1, 50, 50, "pc") -- pc values is percentual pixels of given table
	
		drawPlayZone(player2Zone)
		drawChildRectangle(player2Zone, 1, 1, 50, 50, "pc")
	
		drawPlayZone(player3Zone)
		drawChildRectangle(player3Zone, 1, 1, 50, 50, "pc")

		drawPlayZone(player4Zone)
		drawChildRectangle(player4Zone, 1, 1, 50, 50, "pc")

		drawPlayZone(centerbaseZone)
		drawChildRectangle(centerbaseZone, 1, 1, 50, 50, "px")
	end


	function drawHtmlBlocks()
		drawPlayZone(header)
		drawPlayZone(leftmenu)
		drawPlayZone(content)
		drawPlayZone(rightmenu)
		drawPlayZone(footer)
	end
	
	function drawPlayZone(zone)
		local x, y, width, height = transformPixelsInPercents(zone)
		love.graphics.rectangle("line", x, y, width, height)
	end

	function transformPixelsInPercents(zone)
		local percentWidth, percentHeight = getCurrentWindowDimensions()
		local x, y, width, height = zone[1], zone[2], zone[3], zone[4]
		local x = x * percentWidth
		local y = y * percentHeight
		local width = width * percentWidth
		local height= height* percentHeight
		return x, y, width, height
	end

	function getCurrentWindowDimensions()
		local percentWidth = love.graphics.getWidth() /100 --pixels in 1% width
		local percentHeight = love.graphics.getHeight() /100 --pixels in 1% height
--fix	local percentWidth, percentHeight = love.graphics.getDimensions()
		return percentWidth, percentHeight
	end

	function drawChildRectangle(table, xpos, ypos, xsize, ysize, unit)
		if unit == "px" then
			px(table, xpos, ypos, xsize, ysize)
		elseif unit == "pc" then
			pc(table, xpos, ypos, xsize, ysize)
		end
	end

	function px(table, xpos, ypos, xsize, ysize)
		local xposParent, yposParent, _, _ = transformPixelsInPercents(table)
		local xpos = xpos + xposParent
		local ypos = ypos + yposParent

		love.graphics.setColor(1,1,0,1)
		love.graphics.rectangle("line", xpos, ypos, xsize, ysize)
		--love.graphics.print("xpos = "..xpos.." ypos = "..ypos.." xsize = "..xsize.." ysize = "..ysize.." unit==px", xpos, ypos)
		love.graphics.setColor(1,1,1,1)
	end

	function pc(table, xpos, ypos, xsize, ysize)

		local xposParent, yposParent, xSizeParent, ySizeParent = transformPixelsInPercents(table)
		local pcXParent = xSizeParent / 100
		local pcYParent = ySizeParent / 100
		local xpos = (xpos * pcXParent) + xposParent
		local ypos = (ypos * pcYParent) + yposParent

		local pcXposParent = xposParent / 100
		local pcYposParent = yposParent / 100
		local xsize = (xsize * pcXParent) + pcXposParent
		local ysize = (ysize * pcYParent) + pcYposParent

		love.graphics.setColor(0,0,1,1)
		love.graphics.rectangle("line", xpos, ypos, xsize, ysize)
		--love.graphics.print("xpos = "..xpos.." ypos = "..ypos.." xsize = "..xsize.." ysize = "..ysize.." unit==pc", xpos, ypos)
		love.graphics.setColor(1,1,1,1)
	end		


end
-- ---------------------------------------------------------------------------------------
function love.update()
	
	function love.keypressed( key )
		if key == "escape" then
			love.event.quit()

		elseif key == "f" then
			if not fullscreen then
				fullscreen = true
				love.window.setFullscreen( fullscreen )
			else
				fullscreen = false
				love.window.setFullscreen( fullscreen )
			end
		end
			
	end

end
-- -------------------------------------------------------------------------------------------
function love.draw()

	love.graphics.print("F - fullscreen(on/off)\nESC - leave my love", 10, 10)
	
	--drawPlayCardZones()
	drawHtmlBlocks()

	
end

Read HOW TO comment section for description.

[Yenoxel]

Useful with addition of library "svglover" (https://www.love2d.org/wiki/svglover) For drawing *svg images on any window resolution without quality loosing.