NOTE: Widget stylizing has been merged into the respective widget documentation, along with full code examples. All future updates and available options pertaining to widget stylizing will be made to these core API pages.

  1. Is there a way to change the defaultFrame on the widget button? So for example, if I have a sprite sheet of 4 buttons (frame 1 being the default). When they release the button I want to switch to ether frame 3 or 4 but I can’t seem to get it working.

    (I’m probably missing something very basic).

    I did try setting it after I initialized the button by doing button.defaultFrame = 3 but that doesn’t seem to change it.

    Any ideas or feedback would be awesome!

    • Brent Sorrentino says:

      Hi Kenny,
      At this time, it’s not possible to change the default image to something other than what you created the button with (its starting default). This feature may be added in the future, but at this point you would need to recreate the button.


      • I remembered to come back and post the solution I’m using incase anyone else is looking for a solution. I created the button widget with a defaultFrame and overFrame. To then get the button to either show red or green (right or wrong button picked) I create a temp button right on top which looks like this:

        local function buttonPress(event)
        local btn =

        –Get the clicked button label, and set it on the tempOptions (used to define original buttons)
        btnWidgetOptions.label = btn:getLabel()
        btnWidgetOptions.defaultFrame = 3 –or whatever frame you need

        –Define a new buttonWidget
        –Use current btn.y to set tempBtn.y
        tempBtn = widget.newButton(btnWidgetOptions)
        tempBtn.x = halfW
        tempBtn.y = btn.y

        –Insert back into original display group

        It’s one of the solutions that I tried and it appears to be working perfectly. Hopefully it will be a good starting point for anybody else.

  2. Hi :)
    Thanks for this tutorial Brent!
    2 question :

    – If I have 3 imagesSheet, one for each resolutions ( normal, @2x, @4x)
    which “width” and “height” should I put in the buttons parameters? The smallest sizes from normal image sheet or the biggest sizes from @4x image sheet

    – In your example you use one imageSheet for one button. Could I use the same imageSheet with all interface stuffs for all my buttons? What is the best way to do?


    • Brent Sorrentino says:

      Hi Olivier,
      The width and height parameters should be the 1x size, in accordance to how you’ve set up your config.lua.

      Yes, you can put many button graphic images onto one sheet. Just reference the same sheet for different buttons, but specify the frames that are used for that specific button.

      Hope this helps,

  3. Hi,

    Thanks for this tutorial Brent!
    It would be very useful to have an example with a real image sheet and all the slices on it for the 9-Slice (ImageSheet) button’s example.
    As it is, it’s too theorical for me, and I don’t understand for example how should look like the middle fill image…
    Thanks for your help :)

    • Brent Sorrentino says:

      Hi Olivier,
      I’m glad you’re finding this useful. Although it may not appear so, the 9-slice sample is, in fact, an image sheet (it just looks like the actual button, but it’s a sheet). Just remember that the middle fill should be a texture/image which can “stretch” to whatever size you make your buttons… same with the side edges. The corners will not stretch/deform if you change the button size, but the other elements will.

      Hope this helps,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>