Image problems

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Image problems

Post 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)

The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Image problems

Post 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.
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: Image problems

Post 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.
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Image problems

Post by pgimeno »

Both problems are image-specific. Maybe you can provide the images in question?
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: Image problems

Post by Gunroar:Cannon() »

Sure
Attachments
Image1, bigger image
Image1, bigger image
hands.png (3.88 KiB) Viewed 2650 times
Image2
Image2
0.png (3.19 KiB) Viewed 2650 times
Blending issue
Blending issue
Screenshot_20210929-171538.png (203.67 KiB) Viewed 2650 times
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: Image problems

Post by Gunroar:Cannon() »

The rest...
(Oh, and it spins like a compass but the position is off)
Attachments
nose mask thing in blending issue
nose mask thing in blending issue
moleMask.png (3.57 KiB) Viewed 2650 times
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Image problems

Post 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.
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: Image problems

Post 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...
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Image problems

Post 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 :)
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: Image problems

Post 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: ?
Last edited by Gunroar:Cannon() on Fri Oct 01, 2021 9:12 am, edited 1 time in total.
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 50 guests