Two objects with the same rotation look slightly offset

[10c8]

Hello, I'm currently working on a card game. The player's hand is drawn as a fan of cards.
I'm trying to make a card glow when it is playable by drawing a slightly bigger (correctly offset) glow image, and this works just fine when the card isn't at an angle:

Captura de tela de 2018-04-26 18-38-45.png (22.55 KiB) Viewed 2266 times

But once more cards are drawn to the hand and they start to angle, this happens:

Captura de tela de 2018-04-26 18-39-01.png (119.19 KiB) Viewed 2266 times

The glow image is offset by a tiny bit depending on the angle of the card for some reason, even though I'm drawing them with basically the same code, except for an offset (the glow image is 260x360, the cards are 200x300):

Code: Select all

function Card:draw()
    local sprite
    local x = self.x
    local y = self.y

    -- Check if we're offset visually
    if self.showX ~= self.dxShow or self.showY ~= self.dyShow then
        x = self.showX
        y = self.showY
    end

    if self:getParent():getParent().isMine then
        -- Our hand, draw the cards
        sprite = self.tex_image

        -- Glow if we're playable
        if self.isPlayable then
            local w, h = self.tex_glow:getDimensions()
            local o = (w - sprite:getWidth()) / 2

            love.graphics.draw(self.tex_glow, x - o / 2, y - o / 2, self.rotation, self.xscale, self.yscale, self.xpivot, self.ypivot)
        end
    else
        -- Their hand, draw card backs
        sprite = assets.images.cards['back']
    end

    love.graphics.draw(sprite, x, y, self.rotation, self.xscale, self.yscale, self.xpivot, self.ypivot)
end

EDIT: I tried using an outline glow shader, but I couldn't find any that worked.

[pgimeno]

The correct pivot point of the glow image is probably not self.xpivot, self.ypivot, since that's the card's pivot point. Find the right pivot of the glow image, and draw both the card and the glow at the same coordinates x, y.

You have not posted the code for calculating self.xpivot and self.ypivot, but if it is half the size of the card, then you need to do the same with the glow image's size for the glow image.

[10c8]

The correct pivot point of the glow image is probably not self.xpivot, self.ypivot, since that's the card's pivot point. Find the right pivot of the glow image, and draw both the card and the glow at the same coordinates x, y.

You have not posted the code for calculating self.xpivot and self.ypivot, but if it is half the size of the card, then you need to do the same with the glow image's size for the glow image.

You're right! I got it to work with this:

Code: Select all

self.xpivot = sprite:getWidth() / 2
self.ypivot = sprite:getHeight()
--
local w, h = self.tex_glow:getDimensions()
local o = (w - sprite:getWidth()) / 2
local xpivot = w / 2
local ypivot = h - o

love.graphics.draw(self.tex_glow, x, y, self.rotation, self.xscale, self.yscale, xpivot, ypivot)