Images not overlapping correctly

diyoyo

Hi, I am using Processing in an Android game. The renderer is P2D (at least for my phone) and I add the following line to the setup():

    hint(DISABLE_DEPTH_TEST);

The game is 2D but I make some artificial depth effects... In some cases, I have to breakdown a image into two, because I want to place another object in between. My current strategy is to have two images of the same size, one is photoshoped to remove the left half part (leaving alpha transparency) and the other to remove the right half part.

That way, I don't have to make any calculation and the position of the left image is exactly the position of the right image, since they have the same size. They overlap perfectly if I don't scale them.

But when I do scale them directly using something like:

    image(x, y, width*scale, height*scale)

Then, there is a grey line showing the border between the top image (the one that I draw last) and its supposedly transparent half. As if while scaling the image, it created a gradient of colors around my image, rather than keeping the borders intact...

How can I prevent that?

I tried removing a little less than half the images, so that I am sure there is no gap, but it just translated the problem to another part of the image...

You can see the bug for real in my app, on the google store: https://play.google.com/store/apps/details?id=net.yohanfarouz.friedchicken If you look at the farm panel, you'll notice that the white chicken seems cut in two parts.

PS: it's not an attempt the advertise it, it's just simpler/faster than making printscreens

koogs

anti-aliasing. i'm guessing it's a problem with scaling the semi-transparent pictures.

write a small sketch that shows the problem, give us something to debug rather than having to download and install some random app.

diyoyo

It seems even visible in Java Mode, though the effect seems a little attenuated. The problem only arose when I switch from JAVA2D to P2D.

Note: images have been compressed with TinyPNG! Could it matter?

PImage left, right, thumb;

void setup(){
  size(1080/2, 1920/2, P2D);
  imageMode(CENTER);

  left=loadImage("bird_default_left.png");
  right=loadImage("bird_default_right.png");

}


void draw(){
  background(0);
  image(left, width/2, height/2, left.width/2, left.height/2);
  image(right, width/2, height/2, right.width/2, right.height/2);


}

diyoyo

smooth() does not have any effect

diyoyo

Actually, could it be a problem of conversion from int to float?

    println(parseFloat(image.width)/parseFloat(image.height)); // returns 0.8428144

    float newHeight=500.0f;
    float newWidth= newHeight * parseFloat(image.width)/parseFloat(image.height);

    println(newWidth/newHeight); // returns 0.8428143

koogs

but you've designed it so that you can print the two images at the same position. so any inaccuracies apply to both images - shouldn't be a problem.

having run that i think it's exactly as i said - the image scaling code is creating semi transparent pixels at the join so the overlapping is no longer perfect. try it without the scaling and it's perfect.

i think the way around this is to only use images of the correct size. from the screenshots you only have two different sizes so this hopefully won't be too much of a problem.

PhiLho

Don't forget to choose a category when posting. Moved to proper category.

diyoyo

Well, I had this OutOfMemory error a while ago when loading too many images. I discovered "requestImage" and TinyPng compression and it solved my problem.

So here's what I have now: - thumbnails of the chickens - left and right non-scaled images of the chickens. These images are never scaled so it's ok

Except there is a place in my game where I show the entire chicken with a scale that depends on what is left available on the screen after I have placed the rest of the layout.

I didn't want to have to load the images of the chickens full-size because I tried and it brought back this OOM error I had before. So I decided to go for the trick of reusing the left and right, scaling them down and displaying them together...

And of course, if I scale up the thumbnails, the quality is not good enough.

Do you think I should keep working on this damn OOM and include another set of chickens? The problem appears especially on Galaxy S4, while it never happens on S5 or low-cost poor resolution phones!

PS: my question regarding the float approximation was more like: "maybe it is ok to scale an image only if the width/height ratio is exactly the same as the original?"

koogs

that's interesting... i resized your images from 563x668 to 564x668 (by adding another column of pixels to the right of each) and it's a lot better when resizing by /2, probably because the new width is divisible by 2

diyoyo

Yes, I agree it's probably "semi-transparent" pixels. In the game, different chickens have different aspect ratio, but the space left to display them has constant height. And it appears that the chickens that show the grey line in between "left" and "right" are among the widest. So I would say that the bigger the scale, the bigger the artifact. Unfortunately, adding columns of pixels is not an option, since it would have to be different for each screen size and pixel density.

koogs

so you aren't just scaling by 1/2?

it's probably not as simple as "the bigger the scale the bigger the artifact", it's probably to do more with remainders when you divide the one by the other. that'll affect how many semi-transparent pixels there are.

is it any better if you have one image and display it in two parts? scale the image, use get(0, 0, width/2, h); and get(width/2, 0, width, h); to get the left and right halves of the scaled image, print those.

(untested)

diyoyo

huh, seems like a super idea 0_o :D, I need to try.