Image skewing?

[Taehl]

So, I'd like to make some grass in my game that gets blown around by the wind. Can Love draw skewed graphics?

[thelinx]

You could probably do some interesting stuff using love.graphics.translate, love.graphics.scale and love.graphics.rotate.

I fear that's all you can do in the way of skewing, though.

[TechnoCat]

The old issue tracker had an issue with image skewing in it. I recommend somebody add it to the tracker again because this is a feature most everybody wants to use at some point.

[pekka]

I didn't keep a copy of my shear patch, because I thought it'd be safe in the issue tracker. I was proved wrong on that point though.

However, you don't need to patch Löve to make use of general 2D affine transformation. This function, taken from the 3D dice roller app by way, implements such transformation.

Code: Select all

--applies a transformation that maps 
--  0,0 => ox, oy
--  1,0 => xx, xy
--  0,1 => yx, yy
-- via love.graphics.translate, .rotate and .scale

function love.graphics.transform(ox, oy, xx, xy, yx, yy)
  
  local ex, ey, fx,fy = xx-ox, xy-oy, yx-ox, yy-oy
  if ex*fy<ey*fx then ex,ey,fx,fy=fx,fy,ex,ey end
  local e,f = math.sqrt(ex*ex+ey*ey), math.sqrt(fx*fx+fy*fy)
  
  ex,ey = ex/e, ey/e
  fx,fy = fx/f, fy/f
  
  local desiredOrientation=math.atan2(ey+fy,ex+fx)
  local desiredAngle=math.acos(ex*fx+ey*fy)/2
  local z=math.tan(desiredAngle)
  local distortion=math.sqrt((1+z*z)/2)
  
  love.graphics.translate(ox, oy)
  love.graphics.rotate(desiredOrientation)
  love.graphics.scale(1, z)
  love.graphics.rotate(-math.pi/4)
  love.graphics.scale(e/distortion,f/distortion)

end

To use this for a shear transformation you call it with parameters transform(0, 0, 1, a, b, 1), where a and b are the x and y shear parameters. You probably want to write a program that allows you to change these values interactively and see what happens. Or you can learn the math:

http://www.coranac.com/tonc/text/affine.htm

Hope this helps.

[Taehl]

So, since that uses love.graphics.transform, I take it that would be kind of a skew-the-whole-screen-thing, instead of a skew-one-image deal?...

[Robin]

So, since that uses love.graphics.transform, I take it that would be kind of a skew-the-whole-screen-thing, instead of a skew-one-image deal?...

You mean love.graphics.translate/scale/rotate?
Not necessarily, see love.graphics.push/pop.

[pekka]

When you call draw with an image parameter, Löve will eventually use the function Image::drawv internally to complete the drawing operation. It is viewable in the Bitbucket repository at the address below. Line 317 or so.

https://bitbucket.org/rude/love/src/163 ... /Image.cpp

The long and short of it is that it uses the same push and pop functionality (as recommended by Robin) to temporarily set up a coordinate system that will end up placing the image in accordance with the parameters you used in the draw function call. So, it is quite legitimate to push and pop the coordinate system as many times as you need. Löve already does it.

Of course, that transform function can be a bit slower than doing it in C++ specifically for this purpose would be, as there is a fair bit of transcendental math in it, and it calls the math functions from Lua. But I think it should work fine for a lot of uses. That dice app used it a fair bit and still ran at a comfortable number of FPS.

[Taehl]

Okay, so, I would do my existing transforming and scaling, "push" it, skew it with a transform, draw the grass, then "pop" back to before the skew and keep going?

Is this fast enough that I could individually skew a few dozen clumps of grass? Or will I have to make big strips of grass that sway in unison?

[Robin]

I guess if you are using the built-in features of love.graphics.draw(), C++ is fast enough.
But if you want to do it manually, doing it all once is definitely better.