Images don't display on buttons using shape construct!

Solar2D Widgets
#1

I have a circular button that displays on my screen, but when I add an image for both the “defaultFile and overFile” I only see a blank button. When using a normal button the image can be added and the button works fine but I need circular buttons for my app. This is the code for the circular button.

local optionsButton = widget.newButton { id = "optionsButton", label = "options", onEvent = handleOptionsButtonEvent, emboss = false, shape="circle", width = 500, height = 500, defaultFile = "Sun3.png", overFile = "Sun3over.png", fontSize = 50, radius = 250, }
#2

Hi @killian.moore1,

When you create a vector shape button (shape=“circle”), you can’t add images to the button in the same declaration. Basically, there are two “types” of buttons… image-based and vector-based… and these are exclusive.

If you want to add an image to a vector-based button, you’ll need to create the images as separate display objects and place them over the vector buttons. Alternatively, you could just create your buttons as pure image-based and make the circle as part of the actual image. As a final alternative, you could create the buttons as image-based with the “sun” images having a transparent background, and then create an additional vector circle (display.newCircle()) and place that behind the buttons.

Best regards,

Brent

#3

Hi @killian.moore1,

When you create a vector shape button (shape=“circle”), you can’t add images to the button in the same declaration. Basically, there are two “types” of buttons… image-based and vector-based… and these are exclusive.

If you want to add an image to a vector-based button, you’ll need to create the images as separate display objects and place them over the vector buttons. Alternatively, you could just create your buttons as pure image-based and make the circle as part of the actual image. As a final alternative, you could create the buttons as image-based with the “sun” images having a transparent background, and then create an additional vector circle (display.newCircle()) and place that behind the buttons.

Best regards,

Brent