Best way to implement panel background image?

[thegdog]

I am currently working on a menu system where I dynamically create panels that I then overlay text on top of to make buttons.

Currently, I am using this code in a loop:

categorySelectButton[i] = display.newRect( 0, 0, buttonWidth, buttonHeight ) categorySelectButton[i]:setFillColor( 0, 0, 0 )

buttonWidth and buttonHeight are variables that I set based on the contentWidth and contentHeight (which changes, using the ultimate config.lua tutorial setup).

What I would like to do is instead use an image instead of a solid color.

Since I won’t know the actual size that the panel will be, what would be the best way to accomplish this?

[bjsorrentino]

How about something like this?

[lua]

categorySelectButton[i] = display.newImage( “myButton-”…buttonWidth…"-"…buttonHeight…".png" )

[/lua]

Then your button image(s) may be named something like this:

myButton-220-40.png

Where 220 and 40 are the values you’ve assigned to “buttonWidth” and “buttonHeight” by whatever method or determination you’re using for that.

Brent

[thegdog]

Thanks, Brent.  I was afraid that I might just have to settle on some fixed sizes, which I was hoping not to do.

In my prototyping, this is how I am coming up with those values:

local buttonWidth = (display.contentWidth - 100 - 30 - 100) / 2 local buttonHeight = (display.contentHeight - 80 - modalHeadline.height - 40 - 80 - 60) / 3

It is basically sizing them based on the available space of the content area to get an equal 2 column, 3 row arrangement of panels.

I was hoping there was some way that you could formulate the sizes and then have the images just be positioned in that space with anything outside of the size get cut off.  Didn’t think so, but wasn’t sure.

[bjsorrentino]

Are the “images” more like a repeating fill, so it doesn’t matter if part of it gets cut off? If so, you can fill any size rectangle with that image…

[thegdog]

It doesn’t matter if part of the image gets cut off.  But it would not repeat.  I would size the images larger than the possible size, so they could just get cut off and that is fine with me.

I would not want the image stretched or the ratio changed, though.

[thegdog]

Hmm, after your comment, Brent, I think I can just use this:

http://docs.coronalabs.com/guide/graphics/path.html

And do the image paint method.  I think that would work.  Is that what you referring to, Brent?  That seems like the way to go.

(My first time looking at paths and fills.)

[bjsorrentino]

Yes, exactly. It would be either a “bitmap” paint or an “image sheet” paint:

http://docs.coronalabs.com/api/type/BitmapPaint/index.html

http://docs.coronalabs.com/api/type/ImageSheetPaint/index.html

[bjsorrentino]

How about something like this?

[lua]

categorySelectButton[i] = display.newImage( “myButton-”…buttonWidth…"-"…buttonHeight…".png" )

[/lua]

Then your button image(s) may be named something like this:

myButton-220-40.png

Where 220 and 40 are the values you’ve assigned to “buttonWidth” and “buttonHeight” by whatever method or determination you’re using for that.

Brent

[thegdog]

Thanks, Brent.  I was afraid that I might just have to settle on some fixed sizes, which I was hoping not to do.

In my prototyping, this is how I am coming up with those values:

local buttonWidth = (display.contentWidth - 100 - 30 - 100) / 2 local buttonHeight = (display.contentHeight - 80 - modalHeadline.height - 40 - 80 - 60) / 3

It is basically sizing them based on the available space of the content area to get an equal 2 column, 3 row arrangement of panels.

I was hoping there was some way that you could formulate the sizes and then have the images just be positioned in that space with anything outside of the size get cut off.  Didn’t think so, but wasn’t sure.

[bjsorrentino]

Are the “images” more like a repeating fill, so it doesn’t matter if part of it gets cut off? If so, you can fill any size rectangle with that image…

[thegdog]

It doesn’t matter if part of the image gets cut off.  But it would not repeat.  I would size the images larger than the possible size, so they could just get cut off and that is fine with me.

I would not want the image stretched or the ratio changed, though.

[thegdog]

Hmm, after your comment, Brent, I think I can just use this:

http://docs.coronalabs.com/guide/graphics/path.html

And do the image paint method.  I think that would work.  Is that what you referring to, Brent?  That seems like the way to go.

(My first time looking at paths and fills.)

[bjsorrentino]

Yes, exactly. It would be either a “bitmap” paint or an “image sheet” paint:

http://docs.coronalabs.com/api/type/BitmapPaint/index.html

http://docs.coronalabs.com/api/type/ImageSheetPaint/index.html