How to update ui.lua to allow @2x graphics?

Getting Started Newbie Questions
#1

Hello, I’m really getting into the swing of learning Lua and trying to take advantages of the neat little tricks that Corona has waiting to be used.

One of the things I really like is its ability to select the higher-resolution files whenever a @2x (or whatever suffix) is available, but it appears to only be used with display.newImageRect and not display.newImage.

Upon looking closely in ui.lua where I’m implementing my menu buttons, it’s using display.newImage:

[code]---------------
– Button class

function newButton( params )
local button, default, over, size, font, textColor, offset

if params.default then
button = display.newGroup()
default = display.newImage( params.default )
button:insert( default, true )
end

if params.over then
over = display.newImage( params.over )
over.isVisible = false
button:insert( over, true )
end
…
[/code]

I’m trying to change it to default = display.newImageRect( params.default ) but it’s crashing. I believe display.newImageRect requires the dimensions to be passed along with the file, but display.newImage does not.

So, how can I automatically include the dimensions, or what other code do I have to change/implement to make it work? Do I have to manually pass dimensions into the function beforehand?

Thanks in advance. [import]uid: 6084 topic_id: 5859 reply_id: 305859[/import]

#2

You’re using an older version of ui.lua; I’m assuming the version that comes with the sample code (they should really update that.) Best place to get the latest version is in the Ghosts vs Monsters sample. [import]uid: 12108 topic_id: 5859 reply_id: 20128[/import]

#3

Fantastic, it works beautifully!

For those who are just joining us, you can download the Ghost vs. Monsters template here: http://developer.anscamobile.com/assets/ghostsvsmonsters.zip

From there, you need to make the following changes to your app:

local returnSelect = ui.newButton{ defaultSrc = "menuButton.png", overSrc = "menuButtonOver.png", defaultX = 298, defaultY = 56, overX = 298, overY = 56, onEvent = buttonHandler, id = "mainmenu", text = "RETURN TO MAIN MENU", font = "Trebuchet-BoldItalic", textColor = { 255, 255, 255, 255 }, size = 18, offset = -4, emboss = true }

  • default becomes defaultSrc
  • defaultX and defaultY are the image dimensions that must be pre-specified
  • optional over becomes overSrc , but if you’re using it, you have to pre-specify the dimensions as well with overX and overY
    [import]uid: 6084 topic_id: 5859 reply_id: 20135[/import]
#4

Thanks BTT,

Your addition to the thread has been very helpful! I don’t know why this information isn’t easier to find. And why Ansca keeps throwing old libraries in with sample code… :slight_smile: [import]uid: 10361 topic_id: 5859 reply_id: 26220[/import]

#5

@BeyondtheTech How do you pre-specify the dimensions? I’ve got this up and running but my button image is squashed. Should I specify them after defaultSrc? Here’s what I’ve got:

local bt01 = ui.newButton{ defaultSrc = "introtitle.png", overSrc = "introtitleover.png", defaultX = 160, defaultY = 100, overX = 160, overY = 100, onEvent = bt01t, id = "button1", }

Thanks!

[import]uid: 20687 topic_id: 5859 reply_id: 27974[/import]

#6

Yes, you need to specify the dimensions you want for defaultSrc and overSrc using the defaultX/Y and overX/Y arguments, respectively.

On a side note, you can also specify defaultSrc and overSrc to be the same file, but make the values for overX/Y to be larger than defaultX/Y. That’s one way of showing you’re pressing on the button - it just gets bigger!

Open your png file with Preview to get the original dimensions using Preview’s Inspector feature, then pop in the values and adjust as needed. [import]uid: 6084 topic_id: 5859 reply_id: 27975[/import]

#7

I totally figured it out, thank you!!! I’ve been trying to get these @2x graphics to show up on the iPad simulator for the past 24 hours…and thanks to this thread they are finally in place!

On a related note, what is the “id”? I just put in something as a default answer to what I thought it should be, but is it somehow related to your function when it needs to be identified?

Thanks again man!!! [import]uid: 20687 topic_id: 5859 reply_id: 27977[/import]