|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | 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:
| |
| − |
| |
| − | <source lang="lua">
| |
| − | 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 @ (0,0)
| |
| − | end
| |
| − | </source>
| |
| − |
| |
| − | == Order of Transformations ==
| |
| − |
| |
| − | Graphic transformations may or may not be commutative. This means the call order affects the
| |
| − | final result.
| |
| − |
| |
| − | Here's an example:
| |
| − |
| |
| − | <source lang="lua">
| |
| − | 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 @ 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 @ global (-20,-20)
| |
| − | end
| |
| − | </source>
| |
| − |
| |
| − | 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 @ (-10,-10). Lastly, the translation moves the new
| |
| − | point to (0,0).
| |
| − |
| |
| − | {{#set:LOVE Version=Any}}
| |
| − | {{#set:Description=Covers the basic of using graphic transformations}}
| |
| − |
| |
| − | [[Category:Tutorials]]
| |
| − |
| |
| − | == Other Categories ==
| |
| − | {{i18n|Tutorial:Graphic Tranformations}}
| |
