Tutorial:Graphic Transformations

This tutorial covers the basics of using graphic transformations.

love.graphics.push/love.graphics.pop

These two functions allow you to save and return to the previous transformation state. Every push must be paired up with a pop, and each pair can also be called within another push/pop.

Here's an example:

function love.draw()
    love.graphics.push() -- Store the previous transformation state
        -- Shift the coordinate system down 10, right 10
        love.graphics.translate(10,10)
        love.graphics.point(0,0)
    love.graphics.pop() -- Return to the previous transformation state
    love.graphics.point(0,0) -- The origin is back at (0,0)
end

Order of Transformations

Graphic transformations are not commutative. This means the call order affects the final result.

Here's an example:

function love.draw()
    love.graphics.push()
        love.graphics.translate(10,10)
        love.graphics.scale(-1,-1)
        love.graphics.point(10,10) -- The point is located at global (0,0)
    love.graphics.pop()
   
    love.graphics.scale(-1,-1)
    love.graphics.translate(10,10)
    love.graphics.point(10,10) -- The point is located at global (-20,-20)
end

There are two ways to visualize the above code.The first way is to think of each transformation as relative to the new coordinate system from previous transformations. For example, the scaling to the first point would be applied relative to the new origin at (10,10).

The second way (which is more intuitive in my humble opinion) is to visualize each transformation in REVERSE ORDER relative to the global coordinate system. Let's take the first point as an example. Scaling is applied first and places the new point at (-10,-10). Lastly, the translation moves the new point to (0,0).

See Also


Other Languages

Dansk – Deutsch – English – Español – Français – Indonesia – Italiano – Lietuviškai – Magyar – Nederlands – Polski – Português – Română – Slovenský – Suomi – Svenska – Türkçe – Česky – Ελληνικά – Български – Русский – Српски – Українська – עברית – ไทย – 日本語 – 正體中文 – 简体中文 – Tiếng Việt – 한국어
More info

Retrieved from "http://www.love2d.org/wiki/Tutorial:Graphic_Transformations"
Personal tools