Page 1 of 2

Image problems

Posted: Thu Sep 30, 2021 5:27 pm
by Gunroar:Cannon()
Hey, I got problems with...YOUR M- oh, I mean with drawing images ^^

1) When two different images are placed on top of each other with the same color I can differentiate between them because there's a border, but I want them to look like one image? How?

2) Okay...this one. I have an image1 that I resize to another image(image2)'s scale so it keeps its size relative to image2 and then position image1 so that image2 appears in the middle of image1.
But now my problem is that I want to rotate image2 around its center so that it spins(like a compass, not a spinning ball attached to a rope) but it's not working :brows:

Code: Select all



function resizeImage(img, nW, nH, extra)

  --should be no problems here
    local cw, ch
    if type(img) == "string" then
        img = game:getSource(img)
    end
    if type(img) == "number" then
        cw, ch = img, nW
        nW, nH = nH, extra
    else
        cw, ch  = img:getDimensions()
    end
    
    cw = nW/cw
    ch = nH/ch
    return cw,ch
end


--parentSource resolution = 160x256, image2
self._w, self._h = resizeImage(parentSource, parent.w, parent.h)

-- so larger image would appear in the middle of parentImage, surrounding it
local x = self.x-self._w*80
local y = self.y-self._h*128

local vw = source:getWidth()/(2+2)
local vh = source:getHeight()/(2+2) --?? 4 instead of 2 because of scale, see below

--image1, source resolution = 320x512, aka 2 times source
love.graphics.draw(source, x,y, angle, self._w, self._h, vw, vh)


Re: Image problems

Posted: Thu Sep 30, 2021 6:44 pm
by pgimeno
1) Can't reproduce.
2) The origin position is in coordinates local to the image. Default is 0, 0 which means the top left of the image, so if you rotate the image, it will spin around its corner. Similarly, W/2, H/2 is the centre of the image. That's regardless of scale, because it's image coordinates before applying scale, not after.

Re: Image problems

Posted: Thu Sep 30, 2021 6:48 pm
by Gunroar:Cannon()
1) Wow, really? It blended well for you?

2) but if I do

Code: Select all

love.graphics.draw(source,x,y,angle,sx,sy,source:getWidth()/2,source:getHeight()/2)
doesn't work.

Re: Image problems

Posted: Thu Sep 30, 2021 6:49 pm
by pgimeno
Both problems are image-specific. Maybe you can provide the images in question?

Re: Image problems

Posted: Thu Sep 30, 2021 7:05 pm
by Gunroar:Cannon()
Sure

Re: Image problems

Posted: Thu Sep 30, 2021 7:06 pm
by Gunroar:Cannon()
The rest...
(Oh, and it spins like a compass but the position is off)

Re: Image problems

Posted: Thu Sep 30, 2021 9:21 pm
by pgimeno
OK, now I see the problem that you mentioned in (1), and why. You have white opaque pixels next to black transparent pixels, and the black is bleeding when OpenGL interpolates, which happens when the image is rotated. An easy solution is to set the filter to nearest, but since it's likely that you want interpolation, the best solution is to fix the image.

That's easy with GIMP; not sure with other software. Open the image, go to the Layers List pane and tick "Lock Alpha Channel". Then use the bucket to fill the transparent area with white, and save.

Edit: Another solution might be to draw the nose with premultiplied alpha blending.

As for (2), the nose image you have posted doesn't rotate properly when the pivot is at the centre of the image. You have to find a suitable pivot point, and find the correct position with respect to the body to draw the nose at. That's assuming you want to rotate the nose without rotating the body. If that's not what you intended, better if you explain what you're trying to achieve.

Re: Image problems

Posted: Thu Sep 30, 2021 10:22 pm
by Gunroar:Cannon()
1) To get things clear you're saying I have color (0,0,0,0) next to color (255,255,255,0) ?

2)The hand image is the one I want to rotate...

Re: Image problems

Posted: Thu Sep 30, 2021 10:31 pm
by pgimeno
1) You have colour (0, 0, 0, 0) next to colour (255, 255, 255, 255). Every pixel with alpha = 0 has black colour.

When OpenGL interpolates, it interpolates both the colour and the alpha. Since you have fully opaque white next to fully transparent black, that results in a gradient of half-transparent grey, and that's what is visible in the image. That's what is called "bleeding". I've tried and premultiplied mode does get rid of it.

2) Here's a minimal test case:

Code: Select all

local body = love.graphics.newImage('0.png')
local hands = love.graphics.newImage('hands.png')
local nose = love.graphics.newImage('moleMask.png')

local a

function love.update(dt)
  local mx, my = love.mouse.getPosition()
  a = math.atan2(my - 300, mx - 400)
end

function love.draw()
  local bright = 1.5
  love.graphics.setColor(0.5*bright, 0.25*bright, 0.125*bright)
  love.graphics.draw(body, 400, 300,
    0, 1, 1, body:getWidth()/2, body:getHeight()/2)
  love.graphics.setBlendMode("alpha", "premultiplied")
  love.graphics.draw(hands, 400, 300,
    a, 1, 1, hands:getWidth()/2, hands:getHeight()/2)
  love.graphics.draw(nose, 400, 300,
    0, 1, 1, nose:getWidth()/2, nose:getHeight()/2)
  love.graphics.setBlendMode("alpha", "alphamultiply")
  love.graphics.setColor(1, 1, 1)
end
If I understand you right, you want the hands to have the pivot at a lower place, is that it? That starts to sound like a bone hierarchy :)

Re: Image problems

Posted: Thu Sep 30, 2021 10:38 pm
by Gunroar:Cannon()
Okay, thanx!! I'll check.
An easy solution is to set the filter to nearest, but since it's likely that you want interpolation, the best solution is to fix the image.
Anything bad with "easy method". Does it reduce quality or slow down game?

And if I fill the transparent area with white won't that make the whole thing white, since the rest of the image is pretty big but transparent...
That starts to sound like a bone hierarchy :)
Like all those games that have the rest of the body attached to the player? Then... yes :joker: ?