Difference between revisions of "love.graphics.scale"

(Some people might not realize this, but it's important.)
m (Code was not working properly, needed to draw the rectangle in love.draw() instead of love.update())
 
(13 intermediate revisions by 9 users not shown)
Line 7: Line 7:
 
Scale and translate are not commutative operations, therefore, calling them in different orders will change the outcome.
 
Scale and translate are not commutative operations, therefore, calling them in different orders will change the outcome.
  
Scaling lasts until love.draw() exits.
+
This change lasts until the next [[love.draw]] call, or a [[love.graphics.pop]] reverts to a previous [[love.graphics.push]], or [[love.graphics.origin]] is called - whichever comes first.
  
 
== Function ==
 
== Function ==
Line 20: Line 20:
 
=== Returns ===
 
=== Returns ===
 
Nothing.
 
Nothing.
 +
 +
== Examples ==
 +
Draw two lines of text, one scaled and one normal. Uses [[love.graphics.push]] and [[love.graphics.pop]] to return to normal render scale.
 +
<source lang="lua">
 +
function love.draw()
 +
  love.graphics.push()
 +
  love.graphics.scale(0.5, 0.5)  -- reduce everything by 50% in both X and Y coordinates
 +
  love.graphics.print("Scaled text", 50, 50)
 +
  love.graphics.pop()
 +
  love.graphics.print("Normal text", 50, 50)
 +
end
 +
</source>
 +
 +
=== Example with translate and scale ===
 +
<source lang="lua">
 +
function love.load ()
 +
-- if your code was optimized for fullHD:
 +
window = {translateX = 40, translateY = 40, scale = 2, width = 1920, height = 1080}
 +
width, height = love.graphics.getDimensions ()
 +
love.window.setMode (width, height, {resizable=true, borderless=false})
 +
resize (width, height) -- update new translation and scale
 +
end
 +
 +
function love.update (dt)
 +
-- mouse position with applied translate and scale:
 +
local mx = math.floor ((love.mouse.getX()-window.translateX)/window.scale+0.5)
 +
local my = math.floor ((love.mouse.getY()-window.translateY)/window.scale+0.5)
 +
-- your code here, use mx and my as mouse X and Y positions
 +
end
 +
 +
function love.draw ()
 +
-- first translate, then scale
 +
love.graphics.translate (window.translateX, window.translateY)
 +
love.graphics.scale (window.scale)
 +
-- your graphics code here, optimized for fullHD
 +
love.graphics.rectangle('line', 0, 0, 1920, 1080)
 +
end
 +
 +
function resize (w, h) -- update new translation and scale:
 +
local w1, h1 = window.width, window.height -- target rendering resolution
 +
local scale = math.min (w/w1, h/h1)
 +
window.translateX, window.translateY, window.scale = (w-w1*scale)/2, (h-h1*scale)/2, scale
 +
end
 +
 +
function love.resize (w, h)
 +
resize (w, h) -- update new translation and scale
 +
end
 +
</source>
 +
 
== See Also ==
 
== See Also ==
 
* [[parent::love.graphics]]
 
* [[parent::love.graphics]]
Line 25: Line 74:
 
* [[love.graphics.push]]
 
* [[love.graphics.push]]
 
* [[love.graphics.rotate]]
 
* [[love.graphics.rotate]]
 +
* [[love.graphics.shear]]
 
* [[love.graphics.translate]]
 
* [[love.graphics.translate]]
 +
* [[love.graphics.origin]]
 
[[Category:Functions]]
 
[[Category:Functions]]
 
{{#set:Description=Scales the coordinate system in two dimensions.}}
 
{{#set:Description=Scales the coordinate system in two dimensions.}}
 +
{{#set:Since=000}}
 +
{{#set:Sub-Category=Coordinate System}}
 
== Other Languages ==
 
== Other Languages ==
 
{{i18n|love.graphics.scale}}
 
{{i18n|love.graphics.scale}}

Latest revision as of 04:53, 13 November 2022

Scales the coordinate system in two dimensions.

By default the coordinate system in LÖVE corresponds to the display pixels in horizontal and vertical directions one-to-one, and the x-axis increases towards the right while the y-axis increases downwards. Scaling the coordinate system changes this relation.

After scaling by sx and sy, all coordinates are treated as if they were multiplied by sx and sy. Every result of a drawing operation is also correspondingly scaled, so scaling by (2, 2) for example would mean making everything twice as large in both x- and y-directions. Scaling by a negative value flips the coordinate system in the corresponding direction, which also means everything will be drawn flipped or upside down, or both. Scaling by zero is not a useful operation.

Scale and translate are not commutative operations, therefore, calling them in different orders will change the outcome.

This change lasts until the next love.draw call, or a love.graphics.pop reverts to a previous love.graphics.push, or love.graphics.origin is called - whichever comes first.

Function

Synopsis

love.graphics.scale( sx, sy )

Arguments

number sx
The scaling in the direction of the x-axis.
number sy (sx)
The scaling in the direction of the y-axis. If omitted, it defaults to same as parameter sx.

Returns

Nothing.

Examples

Draw two lines of text, one scaled and one normal. Uses love.graphics.push and love.graphics.pop to return to normal render scale.

function love.draw()
   love.graphics.push()
   love.graphics.scale(0.5, 0.5)   -- reduce everything by 50% in both X and Y coordinates
   love.graphics.print("Scaled text", 50, 50)
   love.graphics.pop()
   love.graphics.print("Normal text", 50, 50)
end

Example with translate and scale

function love.load ()
	-- if your code was optimized for fullHD:
	window = {translateX = 40, translateY = 40, scale = 2, width = 1920, height = 1080}
	width, height = love.graphics.getDimensions ()
	love.window.setMode (width, height, {resizable=true, borderless=false})
	resize (width, height) -- update new translation and scale
end

function love.update (dt)
	-- mouse position with applied translate and scale:
	local mx = math.floor ((love.mouse.getX()-window.translateX)/window.scale+0.5)
	local my = math.floor ((love.mouse.getY()-window.translateY)/window.scale+0.5)
	-- your code here, use mx and my as mouse X and Y positions
end

function love.draw ()
	-- first translate, then scale
	love.graphics.translate (window.translateX, window.translateY)
	love.graphics.scale (window.scale)
	-- your graphics code here, optimized for fullHD
	love.graphics.rectangle('line', 0, 0, 1920, 1080)
end

function resize (w, h) -- update new translation and scale:
	local w1, h1 = window.width, window.height -- target rendering resolution
	local scale = math.min (w/w1, h/h1)
	window.translateX, window.translateY, window.scale = (w-w1*scale)/2, (h-h1*scale)/2, scale
end

function love.resize (w, h)
	resize (w, h) -- update new translation and scale
end

See Also


Other Languages