Difference between revisions of "love.graphics.rotate"

(See Also: Removed links that don't fit.)
(Examples: Improved examples a little.)
Line 12: Line 12:
 
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
+
 
 +
-- Draw a white rectangle slightly off center.
 
love.graphics.setColor(1, 1, 1)
 
love.graphics.setColor(1, 1, 1)
love.graphics.rectangle('fill', width/2-100, height/2-100, 300, 400)
+
love.graphics.rectangle("fill", centerX-100, centerY-100, 300, 400)
-- draw a five-pixel-wide blue point at the center
+
 
 +
-- 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, 1)
 
love.graphics.setColor(0, 0, 1)
love.graphics.points(width/2, height/2)
+
love.graphics.points(centerX, centerY)
end
 
 
 
function love.update(dt)
 
love.timer.sleep(.01)
 
angle = (angle + dt * math.pi/2) % (2*math.pi)
 
 
end
 
end
 
</source>
 
</source>
Line 41: Line 52:
 
=== Rotating the entire screen ===
 
=== 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.
 
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">
 
<source lang="lua">
function love.load()
+
-- Simple function for translating on-screen coordinates to in-game coordinates.
--get the width and height of the CANVAS, not of the DESKTOP
+
local function screenToGame(xOnScreen, yOnScreen)
width, height = love.graphics.getWidth(), love.graphics.getHeight()
+
local xInGame = love.graphics.getHeight() - yOnScreen
 +
local yInGame = xOnScreen
 +
 
 +
return xInGame, yInGame
 
end
 
end
  
 
function love.draw()
 
function love.draw()
love.graphics.translate(width/2, height/2)
+
local screenWidth, screenHeight = love.graphics.getDimensions()
love.graphics.rotate(-math.pi / 2)
+
 
love.graphics.translate(-height/2, -width/2)
+
-- 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)
  
love.graphics.setColor(255, 0, 0)
+
-- Draw some text in the (translated) top left corner.
love.graphics.points(0, 0)
+
love.graphics.setColor(1, 1, 1)
--It will require zoom to observe the 1 pixel point, but it goes to show that it works.
+
love.graphics.print("Lorem ipsum.", 5, 5)
end
+
 
 +
-- 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.
  
-- simple function for translating mouse input, for example
+
local isHovered = (mouseX >= rectX and mouseY >= rectY and mouseX < rectX+rectWidth and mouseY < rectY+rectHeight)
local function translate(_x, _y)
 
local y = _x
 
local x = height - _y
 
  
return x, y
+
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
--[[
 
--Say you are doing love.graphics.rectangle("fill", 150, 170, 125, 145), in the translated system, like above
 
--You would just need to translate(x, y) the mouse input and then check the x to be within
 
--[150, 275] and y within [170, 315] respectively. No inversion of width and height.
 
--]]
 
 
</source>
 
</source>
  

Revision as of 02:26, 7 February 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 love.draw() exits.

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