Button Image Stretching

I have a button in which the image used for the button does not fill the whole button and seems to scale with whatever button sizes I use, leaving a 'background' of the game's making(?) behind the image I want to use as the whole button. I've tried making the texture StretchToFill for loading, but this doesn't seem to work. Am I missing how to 'stretch' the image or is it an aspect of the image I am using?

 

greetings @tervalas it sounds like your issue is aspect ratio. the button controls the scaling and only scales down, not up. if you dont want any button gray to show, your image has to be the same aspect as the button and the size of the image has to be the largest size you expect. also keep in mind that if you have text on the button that will cause a shift in the width scaling. if you dont want text in the button and you really want to stretch/shrink an image to fit any button dimension you can mimic that by using ShroudDrawTexture after ShroudButton and draw the image over the button (leaving some edges for the button edge to show). if you want text in this situation you will need to manually draw that to with a label.

 

Hmm.....so when I load a test texture into SOTA with just a simple ShroudLoadTexture("texture.png",false) and use ShroudGetTextureSize on it, I'm getting 30 width and 30 height. When I create the button, I'm using 30 and 30 for the height and width. But I'm still getting the button gray. There is no text on the button. The file info for the image says it is 30x30 pixels too.

 

is there any image showing at all on the button? can you maybe post a little code and/or screenshots?

 

Not sure why this board doesn't like me using a dropbox link for an image url. But try this https://www.dropbox.com/s/7gwx5vcwwwvl0uf/Capture.PNG?dl=0

The button I'm testing first is the second from left. Ignore the others as they are in various states of being updated but nothing is clamped to anything else .

I'm using libsota, so the code takes from there.

Code:

PM.nextTexture = ui.texture.add(0,0,"Placemarker/assets/next.png")

Code:

PM.nextButton=ui.guiButton.add(PM.SCREEN_W - (PM.BUTTON_WIDTH * 8),PM.SCREEN_H - (PM.BUTTON_HEIGHT),PM.nextTexture,"","Next Page",PM.BUTTON_WIDTH,PM.BUTTON_HEIGHT)

PM.BUTTON_WIDTH and PM.BUTTON_HEIGHT are both initialized as 30 with nothing else changing them at this time.

 

ya very finicky. i have taken to using imgur.com and found that using the direct image link works here.

after looking at your code and image i think you might be experiencing the border of the button. every button has a built-in border around any image. the border is around 5 pixels each edge. i replicated your setup and here are some screenshots with a 30x30 image on a button.



that second one is with the button click held down so you can see the built-in border. there will be no way around the border unless you switch to overlaying the image on top of the button instead of in the button.

 

Ugh.....wish they would have implemented borderless buttons. But yeah, guess I either live with it or do the overlay.

 

https://imgur.com/a/sy8r1h6

Images still not working for me...but there is my next conundrum.

Top button with left arrows is:

Code:

ButtonTexture = ShroudLoadTexture("/PM/assets/transparent_1x1.png",false)
    testTexture = ShroudLoadTexture("/PM/assets/prev.png", false)
  
    if ShroudButton(1600,1000,30,30,ButtonTexture) == true then
        ui.consoleLog("CLICK WORKS")
    end
    ShroudDrawTexture(1600,1000,30,30,testTexture)

Bottom button with left arrows using libsota is:

Code:

PM.TransTexture = ui.texture.add(0,0,"PM/assets/transparent_1x1.png",false,StretchToFill,30,30)
PM.lastTexture = ui.texture.add(0,0,"PM/assets/prev.png",false,StretchToFill,30,30)


PM.lastButton=ui.guiButton.add(PM.SCREEN_W - (PM.BUTTON_WIDTH * 9)-14,PM.SCREEN_H - (PM.BUTTON_HEIGHT),PM.TransTexture,"","Previous Page",PM.BUTTON_WIDTH,PM.BUTTON_HEIGHT)
PM.lastTexture:moveTo(PM.SCREEN_W - (PM.BUTTON_WIDTH * 9)-14,PM.SCREEN_H - (PM.BUTTON_HEIGHT))



PM.lastButton:visible(true)
PM.lastTexture:visible(true)

Spaces added to denote other code but all this is in order in the function.

So...uses the same texture, overlays properly for button use, but for some reason the button texture seems to draw over the image texture.

Also, I've tried loading the texture without the clamping, stretching or sizing included but still get the same result.

 

i will try to look tomorrow but my first thought is you need to change the zindex of the button to be behind the overlay image. look into libsota for the zIndex function and set the zIndex on the button and overlay textures so that the image is above.

on a side note, i see you are using imgur now. if you use the second link for your image (the direct image link) you can use that link with the forum image link and it will work.