How to offset something, and draw the end product at the correct position.

[gcmartijn]

I have to say, love2d is fun !

Where can I find visual tutorial about transform and translate.
I'm trail and error now with a simple thing.

I have multiple images frames that I want to center using their max width (the frames don't have the same with).
That part is working, and the animation is playing perfect, and the animation is moving oke.

But what I don't want is that using a offset X and offset Y, will give the image the wrong x and y coordinates.
For example:

Code: Select all

local x = 400 -- dynamic
local y = 500 -- dynamic

local maxWidth = self:calcFrameMaxWidth()
local maxHeight = self:calcFrameMaxHeight()
local ox = (maxWidth / 2) - currentFrameOffset.x -- dynamic
local oy = (maxHeight / 2) - currentFrameOffset.y -- dynamic
        
love.graphics.draw(
        self.image,
        self:getQuad(),
        x, 
        y, 
        0,
        1,
        1,
        ox, -- some small dynamic alignments
        oy -- some small dynamic alignments
    )

I want that the offset is used, but the end product will be drawn at 10,10

So I think I need to use something like translate or transform. And try some trail and error things like

Code: Select all

love.graphics.push()

-- love.graphics.translate(?, ?)
-- local transform = love.math.newTransform(0, 0, 0, 1, 1, ox, oy)
-- love.graphics.applyTransform(transform)

love.graphics.draw(
        self.image,
        self:getQuad(),
        10, 
        10, 
        0,
        1,
        1,
        ox, -- some small dynamic alignments
        oy -- some small dynamic alignments
    )
    
love.graphics.pop()

Everything between a push() and pop() is a local transformation I though.

Then I though, maybe I need to re-create the image using another canvas, but I read that using multiple canvasses is not supported for all devices, so I don't want to use that.

[zorg]

I think that was "drawing at the same time to multiple canvases" is not supported on all systems, not having more than one canvas in memory and drawing those.

Not gonna say i completely understand what you want to do, but if you want to draw an animation to the coordinates 10,10 then your first code snippet should work fine with setting x and y to 10 instead of 400 or 500 and with NO offsets, since you should have those already done by making the quads cover the appropriate frame in the image... assuming you have one quad for each frame. (you do need frame dimensions / 2 offsets if you want to -center- the frames on 10,10 though)

As for the second snippet, you probably don't want to create a transform object because you're not going to want to edit the matrix directly; just doing love.graphics.translate(10,10) and then drawing at 0,0 would draw at 10,10.

[gcmartijn]

just doing love.graphics.translate(10,10) and then drawing at 0,0 would draw at 10,10.

I found the bug in my program, after that you say that.

I can now do the x and y offset and use translate to place the image at the location I want.
And because I don't want to do that for all images in the game, I will use something like this.

Code: Select all

love.graphics.push()
love.graphics.translate(x, y)
love.graphics.draw(
        self.image,
        self:getQuad(),
        x,
        y, 
        0,
        1,
        1,
        ox,
        oy
    )
love.graphics.pop()

Thanks !

[zorg]

That will draw at 2x and 2y respectively, just so you know; translating the coordinate system by x and y, and -then- drawing at x and y will draw at x+x,y+y.