Difference between revisions of "love.graphics.rotate"

m (Add love.graphics.shear to See Also (and reorder for alphabetical ordering of the transform functions, except origin))
(Updated note about persistence.)
 
(8 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
Rotates the coordinate system in two dimensions.
 
Rotates the coordinate system in two dimensions.
  
Calling this function affects all future drawing operations by rotating the coordinate system around the origin by the given amount of radians. This change lasts until love.draw() exits.
+
Calling this function affects all future drawing operations by rotating the coordinate system around the origin by the given amount of radians.
 +
 
 +
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 ==
 
=== Synopsis ===
 
=== Synopsis ===
Line 11: Line 14:
 
=== Returns ===
 
=== Returns ===
 
Nothing.
 
Nothing.
 +
 
== Examples ==
 
== Examples ==
 +
 
=== Rotating a static scene ===
 
=== Rotating a static scene ===
 
This example shows how to rotate a static scene around a given point. Since the rotation is always around the origin, translating the center of the screen to the origin and back around the rotate operation makes the effective rotation point be the center of the screen. This is demonstrated by drawing a rectangle that shows the rotation and a point that is right in the center and thus does not move when the scene rotates. Note that the drawing commands have coordinates that depend solely on the screen size.
 
This example shows how to rotate a static scene around a given point. Since the rotation is always around the origin, translating the center of the screen to the origin and back around the rotate operation makes the effective rotation point be the center of the screen. This is demonstrated by drawing a rectangle that shows the rotation and a point that is right in the center and thus does not move when the scene rotates. Note that the drawing commands have coordinates that depend solely on the screen size.
 +
 
<source lang="lua">
 
<source lang="lua">
 
local angle = 0
 
local angle = 0
 +
 +
function love.update(dt)
 +
-- Rotate a quarter turn per second.
 +
angle = angle + .5*math.pi * dt
 +
end
  
 
function love.draw()
 
function love.draw()
local width = love.graphics.getWidth()
+
local width, height = love.graphics.getDimensions()
local height = love.graphics.getHeight()
+
 
-- rotate around the center of the screen by angle radians
+
local centerX = width/2
love.graphics.translate(width/2, height/2)
+
local centerY = height/2
 +
 
 +
-- Rotate around the center of the screen by angle radians.
 +
love.graphics.translate(centerX, centerY)
 
love.graphics.rotate(angle)
 
love.graphics.rotate(angle)
love.graphics.translate(-width/2, -height/2)
+
love.graphics.translate(-centerX, -centerY)
-- draw a white rectangle slightly off center
+
 
love.graphics.setColor(0xff, 0xff, 0xff)
+
-- Draw a white rectangle slightly off center.
love.graphics.rectangle('fill', width/2-100, height/2-100, 300, 400)
+
love.graphics.setColor(1, 1, 1)
-- draw a five-pixel-wide blue point at the center
+
love.graphics.rectangle("fill", centerX-100, centerY-100, 300, 400)
 +
 
 +
-- Draw some black text with the top left corner at the center.
 +
love.graphics.setColor(0, 0, 0)
 +
love.graphics.print("Lorem ipsum.", centerX, centerY)
 +
 
 +
-- Draw a five-pixel-wide blue point at the center.
 
love.graphics.setPointSize(5)
 
love.graphics.setPointSize(5)
love.graphics.setColor(0, 0, 0xff)
+
love.graphics.setColor(0, 0, 1)
love.graphics.point(width/2, height/2)
+
love.graphics.points(centerX, centerY)
 +
end
 +
</source>
 +
 
 +
=== Rotating the entire screen ===
 +
This example shows how you can rotate the screen 90 degrees, counter clockwise. Especially useful if you just distribute .love files for android, where the game always starts in landscape mode. After this, the width and height of the canvas will be "swapped". Don't forget to always translate the input and do all the screen bounds specific checks accordingly.
 +
 
 +
<source lang="lua">
 +
-- Simple function for translating on-screen coordinates to in-game coordinates.
 +
local function screenToGame(xOnScreen, yOnScreen)
 +
local xInGame = love.graphics.getHeight() - yOnScreen
 +
local yInGame = xOnScreen
 +
 
 +
return xInGame, yInGame
 
end
 
end
  
function love.update(dt)
+
function love.draw()
love.timer.sleep(.01)
+
local screenWidth, screenHeight = love.graphics.getDimensions()
angle = angle + dt * math.pi/2
+
 
angle = angle % (2*math.pi)
+
-- Transform the coordinate system so the top left in-game corner is in
 +
-- the bottom left corner of the screen.
 +
love.graphics.translate(0, screenHeight)
 +
love.graphics.rotate(-math.pi/2)
 +
 
 +
-- Draw some text in the (translated) top left corner.
 +
love.graphics.setColor(1, 1, 1)
 +
love.graphics.print("Lorem ipsum.", 5, 5)
 +
 
 +
-- Draw a rectangle that lights up when hovered.
 +
local rectX      = 150
 +
local rectY      = 250
 +
local rectWidth  = 180
 +
local rectHeight = 110
 +
 
 +
local mouseX, mouseY = love.mouse.getPosition()    -- On-screen.
 +
mouseX, mouseY      = screenToGame(mouseX, mouseY) -- In-game.
 +
 
 +
local isHovered = (mouseX >= rectX and mouseY >= rectY and mouseX < rectX+rectWidth and mouseY < rectY+rectHeight)
 +
 
 +
if isHovered then
 +
love.graphics.setColor(1, 1, 1)
 +
else
 +
love.graphics.setColor(1, 0, 0)
 +
end
 +
love.graphics.rectangle("fill", rectX, rectY, rectWidth, rectHeight)
 
end
 
end
 
</source>
 
</source>
Line 42: Line 100:
 
== See Also ==
 
== See Also ==
 
* [[parent::love.graphics]]
 
* [[parent::love.graphics]]
 +
* [[love.graphics.push]]
 
* [[love.graphics.pop]]
 
* [[love.graphics.pop]]
* [[love.graphics.push]]
 
 
* [[love.graphics.scale]]
 
* [[love.graphics.scale]]
 
* [[love.graphics.shear]]
 
* [[love.graphics.shear]]
Line 52: Line 110:
 
{{#set:Since=000}}
 
{{#set:Since=000}}
 
{{#set:Sub-Category=Coordinate System}}
 
{{#set:Sub-Category=Coordinate System}}
 +
 
== Other Languages ==
 
== Other Languages ==
 
{{i18n|love.graphics.rotate}}
 
{{i18n|love.graphics.rotate}}

Latest revision as of 18:23, 3 June 2022

Rotates the coordinate system in two dimensions.

Calling this function affects all future drawing operations by rotating the coordinate system around the origin by the given amount of radians.

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.rotate( angle )

Arguments

number angle
The amount to rotate the coordinate system in radians.

Returns

Nothing.

Examples

Rotating a static scene

This example shows how to rotate a static scene around a given point. Since the rotation is always around the origin, translating the center of the screen to the origin and back around the rotate operation makes the effective rotation point be the center of the screen. This is demonstrated by drawing a rectangle that shows the rotation and a point that is right in the center and thus does not move when the scene rotates. Note that the drawing commands have coordinates that depend solely on the screen size.

local angle = 0

function love.update(dt)
	-- Rotate a quarter turn per second.
	angle = angle + .5*math.pi * dt
end

function love.draw()
	local width, height = love.graphics.getDimensions()

	local centerX = width/2
	local centerY = height/2

	-- Rotate around the center of the screen by angle radians.
	love.graphics.translate(centerX, centerY)
	love.graphics.rotate(angle)
	love.graphics.translate(-centerX, -centerY)

	-- Draw a white rectangle slightly off center.
	love.graphics.setColor(1, 1, 1)
	love.graphics.rectangle("fill", centerX-100, centerY-100, 300, 400)

	-- Draw some black text with the top left corner at the center.
	love.graphics.setColor(0, 0, 0)
	love.graphics.print("Lorem ipsum.", centerX, centerY)

	-- Draw a five-pixel-wide blue point at the center.
	love.graphics.setPointSize(5)
	love.graphics.setColor(0, 0, 1)
	love.graphics.points(centerX, centerY)
end

Rotating the entire screen

This example shows how you can rotate the screen 90 degrees, counter clockwise. Especially useful if you just distribute .love files for android, where the game always starts in landscape mode. After this, the width and height of the canvas will be "swapped". Don't forget to always translate the input and do all the screen bounds specific checks accordingly.

-- Simple function for translating on-screen coordinates to in-game coordinates.
local function screenToGame(xOnScreen, yOnScreen)
	local xInGame = love.graphics.getHeight() - yOnScreen
	local yInGame = xOnScreen

	return xInGame, yInGame
end

function love.draw()
	local screenWidth, screenHeight = love.graphics.getDimensions()

	-- Transform the coordinate system so the top left in-game corner is in
	-- the bottom left corner of the screen.
	love.graphics.translate(0, screenHeight)
	love.graphics.rotate(-math.pi/2)

	-- Draw some text in the (translated) top left corner.
	love.graphics.setColor(1, 1, 1)
	love.graphics.print("Lorem ipsum.", 5, 5)

	-- Draw a rectangle that lights up when hovered.
	local rectX      = 150
	local rectY      = 250
	local rectWidth  = 180
	local rectHeight = 110

	local mouseX, mouseY = love.mouse.getPosition()     -- On-screen.
	mouseX, mouseY       = screenToGame(mouseX, mouseY) -- In-game.

	local isHovered = (mouseX >= rectX and mouseY >= rectY and mouseX < rectX+rectWidth and mouseY < rectY+rectHeight)

	if isHovered then
		love.graphics.setColor(1, 1, 1)
	else
		love.graphics.setColor(1, 0, 0)
	end
	love.graphics.rectangle("fill", rectX, rectY, rectWidth, rectHeight)
end

See Also



Other Languages