widget.newSwitch image sheet and sizes

Getting Started Newbie Questions
#1

I’m developing for Android and am fighting with a switch widget. I don’t understand how it is sized. According to the doc it cannot be sized by scaling or setting the width/height.

Fair enough, so I thought I could size it with the gfx in the image sheet. But no cigar. When I use the same gfx for the switch and image (as per source code below) I get two completely different sizes:

The small, almost unidentifiable square on top is how the switch ends up looking, while the same gfx (admittedly twice as wide because the whole image sheet is shown) shown as an unscaled image below.

So, how on earth is the switch widget supposed to look (nice)?

Build settings etc is attached as a zip file.

local widget = require( "widget" ) \_W = display.contentWidth \_H = display.contentHeight local options = { width = 80, height = 66, numFrames = 2, sheetContentWidth = 160, sheetContentHeight = 66 } local cbImgSheet = graphics.newImageSheet( "checkbox.png", options ) local newUserCB = widget.newSwitch { left = \_W/2, top = \_H\*0.2, style = "checkbox", sheet = cbImgSheet, frameOff = 1, frameOn = 2 } local button = display.newImage( "checkbox.png" ) button.x = \_W/2 button.y = \_H\*0.3
#2

Hi @runewinse,

At a glance, the widget switch and your static image is not a fair comparison, because the switch is using dynamic image selection (as it should be), but you’re comparing it to a non-dynamic image generated by “newImage()” instead of “newImageRect()”. Try putting this code in place and see if the size matches up…

[lua]

local button = display.newImageRect( cbImgSheet, 1, 80, 66 )

button.x = _W/2

button.y = _H*0.3

[/lua]

Now, as for why your switch seems compressed horizontally (squashed), I’m not sure. Are you using a content scaling like “zoomStretch”?

Brent

#3

With your code I get the one half of the image sheet, yes, but that was not my problem. The problem was that it apparently scales different than the switch. With your code it looks like this:

(Note: The above screenshot is from the real app, not the test app that I sent the source code for)

The problem isn’t the difference in scaling per se, but that the switch gfx is far too small. Yes, and also compressed in a way  (as none of my other gfx are).

As far as I know I use letterbox scaling (see zip file in the original post), so why it’s compressed in one direction I have no idea.

 

#4

Hi @runewinse,

I apologize, but this was a mistake in our documentation. The “width” and “height” parameters must be specified in the checkbox switch constructor, in your case, matching the frame size for each part of the switch (80x66). I’ll correct our documentation on this point very soon.

Thanks,

Brent

#5

Ok, thanks. It makes a bit more sense now  :slight_smile:

#6

Hi @runewinse,

At a glance, the widget switch and your static image is not a fair comparison, because the switch is using dynamic image selection (as it should be), but you’re comparing it to a non-dynamic image generated by “newImage()” instead of “newImageRect()”. Try putting this code in place and see if the size matches up…

[lua]

local button = display.newImageRect( cbImgSheet, 1, 80, 66 )

button.x = _W/2

button.y = _H*0.3

[/lua]

Now, as for why your switch seems compressed horizontally (squashed), I’m not sure. Are you using a content scaling like “zoomStretch”?

Brent

#7

With your code I get the one half of the image sheet, yes, but that was not my problem. The problem was that it apparently scales different than the switch. With your code it looks like this:

(Note: The above screenshot is from the real app, not the test app that I sent the source code for)

The problem isn’t the difference in scaling per se, but that the switch gfx is far too small. Yes, and also compressed in a way  (as none of my other gfx are).

As far as I know I use letterbox scaling (see zip file in the original post), so why it’s compressed in one direction I have no idea.

 

#8

Hi @runewinse,

I apologize, but this was a mistake in our documentation. The “width” and “height” parameters must be specified in the checkbox switch constructor, in your case, matching the frame size for each part of the switch (80x66). I’ll correct our documentation on this point very soon.

Thanks,

Brent

#9

Ok, thanks. It makes a bit more sense now  :slight_smile: