Image loading for controllers

[SimonVHB]

Hello, I love the usage to load images for buttons, but today I found CP5 has a really hard time loading images with transparent parts (alpha values). When I load the image in processing just with image() it works perfectly fine!

Greetings

[sojamo]

Hi, this works fine for me. circle on the left is a button, see code below. circle on the right is the same image but rendered with image(PImage,x,y)

cp5.addButton("a").setImage(loadImage("button.png")).updateSize().setPosition(20,20);
// button.img is a png-24 image with transparent background

(osx, p5 3.0.2, cp5 2.2.5, all renderers)

[SimonVHB]

Hello, that's pretty strange that it does that for me then. I took some pictures to show what happens:

pauseBut = cp5.addBang("pauseGame") .setPosition(10, hoogte-200) .setImage(pauseButton2) .updateSize() ;

image(pauseButton2, 10, hoogte-200);

pauseButton2 is a PImage that has the transparent borders. "breedte" and "hoogte" are variables I made that just gave the screensize in them.

(win10, p3 3.0.2, cp5 2.2.6)

[sojamo]

What image format are you using? gif or png-24? Could it be that the background in the first screenshot is not updated over time (inside draw()) hence the transparent part of the image leaves these artefacts. could you share a runnable example that highlights the issue?

[SimonVHB]

The image format is a png. And the first screenshot is in the draw(). I have a function running that should change the picture when my mouse is over the button (with cp5.isMouseOver() ), but when I do that it like "grows" the border around the book.

I'll make a runnable example as fast as I can!

[sojamo]

any updates, otherwise I should close this issue soon.