UI buttons - how to work with 2x displays

Solar2D General Questions/Discussion
#1

The typical way of creating a button is this:

local btn = ui.newButton{  
 default = "images/buttonImage.png",  
 over = "images/buttonImageOver.png",  
 onEvent = levelSelected,  
 id = someId,  
 text = "someText",  
 size = 10,  
 emboss=false  
 }

But since display.newImageRect isn’t used, how can we create buttons that are compatible with different resolutions? [import]uid: 52127 topic_id: 12154 reply_id: 312154[/import]

#2

Actually, it’s available for a while (since William’s edit) if you use enhanced version.

Take a look at here:

http://developer.anscamobile.com/code/enhanced-ui-library-uilua [import]uid: 10478 topic_id: 12154 reply_id: 44233[/import]

#3

@PixelEnvision

Thanks for the link. I am trying it out, but can you provide an example usage? The only thing I found is this:

local btn = ui.newButton{  
defaultSrc = buttonimg,  
overSrc = overimg,  
overAlpha = .5,  
overScale = 1.1,  
onEvent = ButtonTouch,  
id = "Button",  
}

But what is buttonimg? Is it the @2x version of the image? How is it defined?

I tried this, but the button images ended being huge (larger than the iPad screen), even though the button image is only 201x75.

local levelBtn = ui.newButton{ defaultSrc = "images/myImage.png", overSrc = "images/myImage.png", onEvent = levelSelected, id = "myId", text = "buttonText", size = 10, emboss=false } [import]uid: 52127 topic_id: 12154 reply_id: 44240[/import]

#4

When using dynamic scaling you’ll also need to define default x/y size of the button image. Try that one:

[lua]local levelBtn = ui.newButton{
defaultSrc = “images/myImage.png”,
defaultX = 201,
defaultY = 75,
overSrc = “images/myImage.png”,
overX = 201,
overY = 75,
overScale = 1.2,
onEvent = levelSelected,
id = “myId”,
text = “buttonText”,
size = 10,
emboss=false
}[/lua] [import]uid: 10478 topic_id: 12154 reply_id: 44242[/import]

#5

ok thanks. I was confused because x and y are usually used for positioning. defaultWidth and defaultHeight might be better names for those properties. [import]uid: 52127 topic_id: 12154 reply_id: 44243[/import]

#6

You’re welcome…

I agree about x & y but that was coming from the first retina edit and when I was doing my version I didn’t change those to keep it compatible. For example Ghost & Monsters sample along with bunch of other stuff using it that way… [import]uid: 10478 topic_id: 12154 reply_id: 44244[/import]