Resizing picker wheels and imagesheets

[sdzafovic]

i am trying to make a resized picker wheel for my app. According to the documentation, the actual picker wheel widget can’t be resized or rescaled, but I can make different sized ones by changing the image sheet.

I have read through the tutorial on imagesheets. For something like a heath/power up bar it seems straightforward, with one element for each stage in the bar. What about for a picker wheel? How many elements are in the new imagesheet?

If anyone can point me to a tutorial where this is described, that would be great.

[rob]

See the “visual customization” block of the pickerWheel documentation:

http://docs.coronalabs.com/api/library/widget/newPickerWheel.html

It lists all the required images from the image sheet.

Rob

[sdzafovic]

Perhaps I don’t get it then. I looked at that page, and that’s where I ran into a wall.

In your tutorial at: http://www.coronalabs.com/blog/2013/05/14/sprites-and-image-sheets-for-beginners/ the health bar example is clear. For the image sheet, take each step in the bar and create the graphic, then put them together in one image. Simple.

For a picker wheel image sheet, I don’t know how many elements are in the sheet, what each one is supposed to look like, or where it’s located so I can alter the graphics to make the picker wheel the size I want. I made a white image at the size of the picker wheel I want (320 width x 150 height). I can place that in the simulator as my background frame, although the regular-sized picker wheel overlays it.

[rob]

That tutorial assumes that each frame is the same size, which is one way to build an image sheet.  The other way is to use different sized images.

Look at this image:  https://github.com/coronalabs/framework-widgets/blob/master/widget_theme_ios%402x.png

That is the imageSheet for the default widgets.  You can see that the images are packed in the sheet.  I think we used a 3rd party product called “Texture Packer” that can take a bunch of odd sized png files and it spits out a .lua file that you can then include that has all of the frame definitions in it.  

[rob]

See the “visual customization” block of the pickerWheel documentation:

http://docs.coronalabs.com/api/library/widget/newPickerWheel.html

It lists all the required images from the image sheet.

Rob

[sdzafovic]

Perhaps I don’t get it then. I looked at that page, and that’s where I ran into a wall.

In your tutorial at: http://www.coronalabs.com/blog/2013/05/14/sprites-and-image-sheets-for-beginners/ the health bar example is clear. For the image sheet, take each step in the bar and create the graphic, then put them together in one image. Simple.

For a picker wheel image sheet, I don’t know how many elements are in the sheet, what each one is supposed to look like, or where it’s located so I can alter the graphics to make the picker wheel the size I want. I made a white image at the size of the picker wheel I want (320 width x 150 height). I can place that in the simulator as my background frame, although the regular-sized picker wheel overlays it.

[rob]

That tutorial assumes that each frame is the same size, which is one way to build an image sheet.  The other way is to use different sized images.

Look at this image:  https://github.com/coronalabs/framework-widgets/blob/master/widget_theme_ios%402x.png

That is the imageSheet for the default widgets.  You can see that the images are packed in the sheet.  I think we used a 3rd party product called “Texture Packer” that can take a bunch of odd sized png files and it spits out a .lua file that you can then include that has all of the frame definitions in it.