Diferences between tables and iPad

helloworld2013d · November 28, 2013, 2:17am

Hi everyone.

First let me wish you a happy thanks given to everyone.

I would like to learn how to put my apps in the android market.

I have been working with mac, and iPad & iPhone and I have 3 apps already. (working in my 4th one)

I only have them for Mac and iPhone and iPad series…

I want to release those apps in android.

I can see my app in the corona simulator and it looks great on all of them…

(except in – iPhone, Droid, and NexusOne)

– Are they very old?

–can I go by without worry about those three?

Now I see 5 [iPhones series] [droid, nexus,sensation,galaxy tab and S3] [and 3 kindle fire and nook color]

–is that it?

–are there more?

– when I release my app, should I say in the description… ( it works for this and this one…)

Finally…

When I build for Android… Do I need "profiles, certificates, and all that, or how do I send my app to Google play and Amazon?

Thanks for all your help. I really want to learn how to do this…

If this step works

I am going to upgrade for sure to Pro…

rob · November 28, 2013, 5:51am

Hi Victor. Corona SDK only have skins for a few devices. You are going to find that the world of Android is full of interesting challenges that you’ve been somewhat protected from in the Apple only world. The first one is screen shape. Apple has 3: a 2:3 ratio screen (iPhone 3, 4 series think of a 4x6 photo), the iPads at 4:5 (think of an 8x10 photo) and a 16:9 ratio (iPhone 5 series, think wide screen TV). This has nothing to do with size, but shape.

Android devices are all over the place, ranging from a 1:1.6 for things like the Kindle Fire to some Samsung devices which are supposidly 16:9 but by the time you factor the menu button bar in becomes almost 1:1.8 which is even wider than 16:9. There are hundreds of screen shapes in use by Android devices and for every screen shape there is a different resolution. This is one of the reasons Brent and I preach the “Ultimate Config.lua” tutorial along with its later updated and much improved “Moderinzing the ultimate config.lua” tutorial. You should be able to google “corona ultimate config.lua” and get both hits to come up near the top.

It means thinking about how you build your backgrounds and how you position things differently, but in the end, you can be full screen, edge-to-edge on all devices.

In general, I look at the Galaxy S3, the Droid, the Kindle Fire and the Kindle Fire HD skins when working with Android as that covers the more common screen shapes. The Droid is one of the tallest/thinest skins. The iPad’s being the shortest/widest.

Now for your finally question, please click on Documentation above, then “Guides” in the top menu and read very carefully the Building for Android guide.

Android is considerably different than iOS. You still have to digitally sign (i.e. encrypt) your app with a key. In the Android world this is known as a “keystore”. You generate it from the command line and save the file somewhere on your computer where you know it is. Then in Corona SDK, you pick the keystore file you want to sign your app with. This replaces the entire Apple Key/Certificate, provisioning file stuff. It’s much simpler. But the language is different, and working with Google play is different.

Rob

helloworld2013d · November 29, 2013, 10:29pm

Thanks Rob.

–The same way I learned how to put my 3 apps on Mac.

I will learn how to put them on google play.

I’m going to read the “guide” on work try to see if I can understand the “ultimate config.lua”

when I have more questions I will ask in this same post.

Thanks

helloworld2013d · November 30, 2013, 12:16am

Let’s see if I get it.

I have the ultimate config.lua in a folder.

I can see it works fine in all the devices. (finally I got it to work, after a few months. Actually I try this back in august 2013, I did not get it then. – And I had tried back in March after a month of starting to learn. It was like hieroglyphics, anyway)

The only thing I see it’s that I’m seeing only the bottom, right corner of the image.

My jpg, it’s 1024 x 768 – like the iPad – complete background.

I only see the bottom corner.

It looks like the config file it’s setting the reference point of the image, on the bottom right corner

and it’s showing only 1/4 of the image.

(imagine a dollar bill is the background. – not too long anyway)

I can only see the bottom right number 1, maybe the green circle, a little bit of the chin of George Washington and the ending of word dollar in the bottom ( like “llar”) I hope you understand what I’m trying to explain.

I tried different ways and it all worked the same. even the display.BottomLeftReferencePoint and all the reference points.

it look the same…

is there a way that I can see the complete background?

because this work well for blurry backgrounds, or just plain sky, but if I want to have more stuff in the background this is not working.

rob · November 30, 2013, 1:18am

What version of Corona are you using?

Can you post your config.lua and the code where you are loading the background?

Thanks

Rob

helloworld2013d · December 2, 2013, 8:44pm

Yes.

Corona Simulator – Version 2013.1076 (2013.4.3)

This is the config.lua file complete

system.getInfo("model") if ( string.sub( system.getInfo("model"), 1, 4 ) == "iPad" ) then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } elseif ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" and display.pixelHeight \> 960 ) then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } elseif ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" ) then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } elseif ( display.pixelHeight / display.pixelWidth \> 1.72 ) then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } &nbsp; else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } &nbsp; end

This is the home.lua file – the first scene I have in a storyboard.

-- --==\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*++-- -- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() ------------------------------------------------------------------------------------------ function scene:createScene( event ) &nbsp;&nbsp;&nbsp; local group = self.view &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; local bg = display.newImageRect ("bg.jpg", 1035, 785) &nbsp;&nbsp;&nbsp; bg.x = display.contentWidth - 200 &nbsp;&nbsp;&nbsp; bg.y = display.contentHeight - 150 &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; local myRectangle = display.newRect(200, 100, 40, 50) &nbsp;&nbsp; &nbsp;myRectangle.strokeWidth = 3 &nbsp;&nbsp; &nbsp;myRectangle:setFillColor(140, 140, 140) &nbsp;&nbsp; &nbsp;myRectangle:setStrokeColor(180, 180, 180) &nbsp;&nbsp; &nbsp;local myCircle = display.newCircle( display.contentWidth -250, display.contentHeight, 30 ) &nbsp;&nbsp; &nbsp;myCircle:setFillColor(128,128,128) end ------------------------------------------------------------------------------------------ function scene:enterScene( event ) &nbsp;&nbsp;&nbsp; local group = self.view &nbsp;&nbsp; &nbsp; end ------------------------------------------------------------------------------------------ function scene:exitScene() &nbsp;&nbsp; &nbsp; end ------------------------------------------------------------------------------------------ function scene:destroyScene( event ) &nbsp;&nbsp;&nbsp; local group = self.view&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; end ---------------------------------------------------------------------------------- scene:addEventListener( "createScene", scene ) scene:addEventListener( "enterScene", scene ) scene:addEventListener( "exitScene", scene ) scene:addEventListener( "destroyScene", scene ) return scene

It’s as simple as I can, just to make sure it works in all the devices.

The way it is right now all I can see it’s the center of the background (bg)

the background image it’s 1035x785

Let me know…

Thank you Rob

rob · December 3, 2013, 2:01am

Why do this:

    local bg = display.newImageRect (“bg.jpg”, 1035, 785)
    bg.x = display.contentWidth - 200
    bg.y = display.contentHeight - 150

instead of:

    local bg = display.newImageRect (“bg.jpg”, 1035, 785)
    bg.x = display.contentCenterX
    bg.y = display.contentCenerY

?

helloworld2013d · December 3, 2013, 7:05pm

Thank you Rob. Why did I do that? – because I did not know about – CenterX – thanks for telling me.

Now, if I do that I see the bg in the center. but I see it like this:

– I wanted to send you a picture…png, or jpg. both I got the message

you are not allowed to use this in this comunity.

So I have to use words…(a picture says more than a thousand words)

– is there a way to send pictures .jpg or png?

okay.

imagine a dollar bill…

all I see it’s the center face of washington

a littli bit of the top part of the text ONE DOLLAR

and a little bit of the bottom part of the text THE UNITED STATES OF AMERICA

by the way all I see it’s – ITED STATES OF AME

just the bottom part of that text.

--------------- and I don’t want this…

My real bg has to look like this:

– instead of the picture jpg

now imaging the full dollar bill, maybe not that long

because of the radio 1:2 or whatever radio a dollar bill is.

maybe just the dollar bill without the left and right number ones on the right side

and the left side

That’s the complete background I want.

------------------------this is what I want…

I notice that if I use this code…

local bg = display.newImageRect ("bg1200x800r300.jpg", 1200, 800) bg.x = display.contentCenterX bg.y = display.contentCenterY bg:scale(.5, .5)

I can see this in the iPhone5

– I can see the full dollar bill fine.

but I had to use the scale atributte (I think it’s attribute)

------------------ This is great, just what I want…

notice that my image it’s big, 1200 by 800 and resolution 300

on the iPad retina looks a little bit blurry. (it’s okay)

but all the other ones look fine. (great)

Do I always have to put the --scale (.5, .5)?

or what size do I have to make my jpg image and what resolution to make it look like I want.

The grey rectangle and the grey circle are just there so I can see objects moving.

I hope you get it, because I couldn’t sent you pictures

Thank you Rob.

rob · December 3, 2013, 10:52pm

You can upload photos to a web servers somewhere and then use the image button in the tool bar and provide the URL to the image, then it will show up.

Rob

helloworld2013d · December 3, 2013, 11:16pm

Okay, I will try that later…

what about the image background…

do I have to use always the scale(.5, .5)?

or what is the size of the jpg that I have to make to show the complete image?

rob · December 3, 2013, 11:27pm

For a background image, you should load it based on the content area of your app. This is why we support @2x and @4x type images. If you are support a 320px wide screen and a 640px/728px wide screen and a retina iPad sized, you would load the image using the dimensions of the small file while letting corona manage picking up the bigger ones for you.

If I were you I would rename this file: bg1200x800r300.jpg to bg@2x.jpg

Then make a version that is 600x400 and name it: bg.jpg.

Then in your code: local bg = display.newImageRect (“bg.jpg”, 600, 400)

and then you won’t need the scale option.

Rob

helloworld2013d · December 4, 2013, 3:34am

Rob, thank you very much, it works perfect!!!

last question on this subject.

when I go to iPad Retina, or Kindle fire HD

the BIG images looks blurry…

What size of file should I make and what resolution, to make it look really nice HD?

– so I have 600x400 resolution 200 = bg.jpg

– then 1200x800 resolution 200 = bg@2.jpg – this one it’s blurry

– and then [what] resolution [what] = bg@4.jpg – when do I use this one

And I guess it works the same for normal small images for png little buttons and stuff – right?

rob · December 4, 2013, 3:39am

bg@4x.png (make sure to have the x, it’s important. It has to match what is in your config.lua which is “@4x” and “@2x”. If you just have the files named “@4” and “@2” then it won’t find them. Then if your @2x images are 1200x800, I would make your @4x 2400x1600. Small images need to have their @2x and @4x versions as well that are 2x and 4x the size.

Any file that you do not have an @4x or @2x version of will be scaled up 4 times on the retina iPads. That’s too much to blow an image up, which is why we have this scaling method.

Rob

helloworld2013d · December 4, 2013, 5:32pm

I got it.

I test a few images and now I think I understand it.

So every image, even a little button, I have to have 3 different sizes per image. Correct?

if I have 40 images total in my app –

now I have to have 120 images total –

Wouldn’t that increase a lot the total MB per app? like 48.5 MB compare to 120.5 MB (something like that)

is it worth it, – to support HD Retina with 3 images of each, even if it means more MB?

What would you reccomend?

rob · December 4, 2013, 11:07pm

Its a trade off that you have to balance. Adding the extra higher resolution images will increase your app size. You can do a few things to keep your app size down.

For images that don’t need transparency, use JPEG’s and not PNGs. Play with the compression on the JPEGs to find the balance between quality and file size.
Don’t provide @4x images for @2x images that look good enough.
Consider downloading images where practical.
For Audio files, don’t use 44khz stereo sounds, 11khz mono sounds are generally good enough.

Rob

helloworld2013d · December 5, 2013, 2:27am

Thank you for those advices Rob.

I will be working on my first app that will be for ALL devices…

So far I have been doing okay.

Thanks

I will let you know if I need more things…

Victor

helloworld2013d · December 5, 2013, 9:36pm

Hi Rob…

Why the text in “Sensation” phone or tablet

looks “tilted to the left” and it’s hard to read?

also it display the text totally different the all the other phones and tablets.

a normal display.newText looks fine everywhere but “sensation”

is there a way to correct that?

I got it!

I just had to give more space in the frame of the text.

– instead of this

(“text goes here”, 0, 0, 320, 0, native.systemFont, 12")

I put this

(“text goes here”, 0, 0, 400, 0, native.systemFont, 12")

That works perfect. It was strange anyway. but I got it.

rob · November 28, 2013, 5:51am

Hi Victor. Corona SDK only have skins for a few devices. You are going to find that the world of Android is full of interesting challenges that you’ve been somewhat protected from in the Apple only world. The first one is screen shape. Apple has 3: a 2:3 ratio screen (iPhone 3, 4 series think of a 4x6 photo), the iPads at 4:5 (think of an 8x10 photo) and a 16:9 ratio (iPhone 5 series, think wide screen TV). This has nothing to do with size, but shape.

Android devices are all over the place, ranging from a 1:1.6 for things like the Kindle Fire to some Samsung devices which are supposidly 16:9 but by the time you factor the menu button bar in becomes almost 1:1.8 which is even wider than 16:9. There are hundreds of screen shapes in use by Android devices and for every screen shape there is a different resolution. This is one of the reasons Brent and I preach the “Ultimate Config.lua” tutorial along with its later updated and much improved “Moderinzing the ultimate config.lua” tutorial. You should be able to google “corona ultimate config.lua” and get both hits to come up near the top.

It means thinking about how you build your backgrounds and how you position things differently, but in the end, you can be full screen, edge-to-edge on all devices.

In general, I look at the Galaxy S3, the Droid, the Kindle Fire and the Kindle Fire HD skins when working with Android as that covers the more common screen shapes. The Droid is one of the tallest/thinest skins. The iPad’s being the shortest/widest.

Now for your finally question, please click on Documentation above, then “Guides” in the top menu and read very carefully the Building for Android guide.

Android is considerably different than iOS. You still have to digitally sign (i.e. encrypt) your app with a key. In the Android world this is known as a “keystore”. You generate it from the command line and save the file somewhere on your computer where you know it is. Then in Corona SDK, you pick the keystore file you want to sign your app with. This replaces the entire Apple Key/Certificate, provisioning file stuff. It’s much simpler. But the language is different, and working with Google play is different.

Rob

helloworld2013d · November 29, 2013, 10:29pm

Thanks Rob.

–The same way I learned how to put my 3 apps on Mac.

I will learn how to put them on google play.

I’m going to read the “guide” on work try to see if I can understand the “ultimate config.lua”

when I have more questions I will ask in this same post.

Thanks

helloworld2013d · November 30, 2013, 12:16am

Let’s see if I get it.

I have the ultimate config.lua in a folder.

I can see it works fine in all the devices. (finally I got it to work, after a few months. Actually I try this back in august 2013, I did not get it then. – And I had tried back in March after a month of starting to learn. It was like hieroglyphics, anyway)

The only thing I see it’s that I’m seeing only the bottom, right corner of the image.

My jpg, it’s 1024 x 768 – like the iPad – complete background.

I only see the bottom corner.

It looks like the config file it’s setting the reference point of the image, on the bottom right corner

and it’s showing only 1/4 of the image.

(imagine a dollar bill is the background. – not too long anyway)

I can only see the bottom right number 1, maybe the green circle, a little bit of the chin of George Washington and the ending of word dollar in the bottom ( like “llar”) I hope you understand what I’m trying to explain.

I tried different ways and it all worked the same. even the display.BottomLeftReferencePoint and all the reference points.

it look the same…

is there a way that I can see the complete background?

because this work well for blurry backgrounds, or just plain sky, but if I want to have more stuff in the background this is not working.