App on the device behaves different than on the simulator

I just installed my app on my device but it doesn’t work like on simulator, here are some of the problems:

  • The background images on every one of the screens are set to be 640 x 960 pixels but they only occupy 1/4 of my iPhone 4 screen ( it works fine on the simulator and the buttons placed over the backgrounds all have the right proportion ) why is that?

  • My app consists of a menu with different buttons to open more screens and play sound effects, again everything works on the simulator but on the device the buttons that trigger the sounds don’t work, also when I press the “back” button it takes me to the “menu” screen but then all the buttons appear on that “menu” screen, any ideas why I’m having this buttons running free on my app?

Thank you [import]uid: 30766 topic_id: 13432 reply_id: 313432[/import]

1, Did you use the display.newImageRect(“imageName.png”, x, y, imageWidth, imageHeight) for the background?

2, Do you have two sets of images for the background, (bgImg.png and bgImg@2x.png)?

3, In the config.lua did you set the imageSuffix?

4, Do you use the director.lua class?

5, Do you remove and nil the buttons when transitioning between scenes?

Post some code so it’s easier to help. [import]uid: 13560 topic_id: 13432 reply_id: 49332[/import]

1, This is a portion of my menu.lua file:

module(…, package.seeall)

function new()

local localGroup1 = display.newGroup()

local bg = display.newImage( “Menu1.png” )

local Selectbutton1 = display.newImage(“Selectbutton1.png”)
Selectbutton1.x = 550
Selectbutton1.y = 300
Selectbutton1.scene = “page1”;

function changeScene(e)
if(e.phase == “ended”) then
director:changeScene(e.target.scene);

end

return true;
end

Selectbutton1:addEventListener(“touch”, changeScene);

2, No, I don’t have 2 sets of images for the bg, is that a must?

3, This is my config.lua file:

application =
{
content =
{
width = 640,
height = 960,
scale = “zoomeven”
},
}

4, yes, I use the director.lua class and about remove and nil the buttons how can I do it?

thank you [import]uid: 30766 topic_id: 13432 reply_id: 49334[/import]

1, Set the width/height to 320x480 in your config.lua

2, Add the imageSuffix params to the same file, it should now look something like this;

application =   
{  
 content =   
 {   
 width = 320,  
 height = 480,  
 scale = "letterbox",  
 fps = 30,  
  
 imageSuffix = {  
 ["@2x"] = 2,  
 }  
 }  
}  

3, For your background, make 2 sets of the same image, one 320x480px and the other 640x960px. Add the imageSuffix to the larger image (Menu1@2x.png) and the smaller without the @2x. Do the same thing with your button. I assume the background image cover the entire screen?

4, In your code use

local bg = display.newImageRect( "Menu1.png", 0, 0, 320, 480 )   
  
-- For the button;  
local Selectbutton1 = display.newImageRect( "Selectbutton1.png", xPos, yPos, buttonWidth, buttonHeight )   

5, if you look at the files that came with the director.lua class, there should be a file named template.lua use that file as a reference or just copy the entire thing. At the bottom of the file there’s a cleanup function, either you remove all your objects there or in your code you posted add remove the button and the background in the changeScene function.

bg:removeSelf()  
bg = nil  
  
Selectbutton1:removeSelf()  
Selectbutton1 = nil  

6, Having 2 sets of images is not a must, but if you intend to make an app for iphone4 then it’s recommended otherwise the app wont look very “crisp” on Retina devices. Look how I set up the background image, I just set the width and height of the smaller image. The reason it is done is because the screen “estate” is still 320x480 on all iphone and ipods. On iphone4 and the new ipod the images get “scaled down” automatically because it has a higher ppi.
This might be a little confusing but there’s plenty of tutotials and blogposts about this or head over to Apple developer. Also read about it in the Corona docs.

The problem you had with the image was in the config.lua, width/height should be set to 320x480. [import]uid: 13560 topic_id: 13432 reply_id: 49338[/import]

Thanks a lot! you’re a life saver, I’ll make sure to read the Corona docs…thanks again [import]uid: 30766 topic_id: 13432 reply_id: 49340[/import]

Any suggestions how to solve this issue? I did everything here, but have not been able to solve the problem. The worst is that the problem seems to occur only with some images or scenes from the director class.

For example: My program begins with a scene which has the logo of my company. I call the image like this:

background = display.newImageRect(“image/”…theme…"/abertura.png", 320, 480)

Works fine.

In the end, the scene called the next scene (with director), which is the main game menu. In this scene, there is a title I call the same way:

local titulo = display.newImageRect(“image/”…theme…"/titulo.png", 320, 120)
titulo.x = background.width / 2
titulo.y = titulo.height /2 + 20
localGroup:insert( titulo )

Does not work.

I already set config.lua as the example, but still not work.

When I put the program on the Droid, the result is even worse: I can only see images out of scale and glitches. You can see my android (device) screenshot here:

http://www.evoluhost.com/img_test/20111001_030426.jpg

IN the simulator, does not work fine, but in the device, the result is terrible.

Ideas?
Thanks! [import]uid: 9133 topic_id: 13432 reply_id: 58535[/import]

I’m not an expert or anything but try calling it like this:

[code]local background = display.newImageRect("???.png",320,480)
background:setReferencePoint(display.TopLeftReferencePoint)
background.x = 0 ;background.y = 0 [import]uid: 30766 topic_id: 13432 reply_id: 58588[/import]

Just to understand: How this is different? I need “theme” variable there, because this changes once in a while. The problem persist even if I put the variable outside, like:

[lua]var = “image/”…theme…"/titulo.png"
local titulo = display.newImageRect(var, 320, 120)[/lua]

My problem is: In some images works well and another, dont.

My images are PNG. Does anyone know if there is some sort of problem with images in this format? Size, or any internal element?

I cant explain why this is happening. Im using ratio 1.7 because I want the same result to all device, Droid, iPhone with retina, ecc…

Some code here:

[lua]application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
fps = 30,
imageSuffix =
{
["-x2"] = 1.7
}
}

}[/lua]

I have two sets os images in my directory: titulo.png and titulo-2x.png

Did I gave the wrong name for the images? It only put the suffix, right ?

And the result on my device: Is that creepy image ok? I dont think so.

Thanks for your help! But I did solve (yet!) :smiley: [import]uid: 9133 topic_id: 13432 reply_id: 58608[/import]

Hey bsdrago,

I think you are in trouble with that “suffix” you are using…“maybe”!

Look this example below of a setup of the config.lua file:

[lua]application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,

imageSuffix =
{
["@2"] = 2,
["@3"] = 3,
["-bar"] = 3.3,
["-foo"] = 4.5,
},
},
}[/lua]

For better understanding of all about these config files, have a look here - http://developer.anscamobile.com/content/configuring-projects - there at the about middle of the page you can get info about the file called build.settings too.

Hope that helps man!

Regards,
Rodrigo. [import]uid: 89165 topic_id: 13432 reply_id: 58633[/import]

Hi Rodrigo, how`s Manaus? Im in Sao Paulo :smiley:

I have no idea why you thought about the suffix as a solution to my problem.

The fact is: I changed the suffix, and started working (at least in the simulator).

I did not test the result in the device yet. Thanks for the suggestion. I will test the device and then tell you what happened.

Thanks man!
Regards! [import]uid: 9133 topic_id: 13432 reply_id: 58674[/import]

Still dont work in the device. Damm it. :frowning:

If someone wants to try in android, this is the apk:

http://www.evoluhost.com/img_test/app2.apk

Maybe the problem is in my droid. I will leave there in the next 2 days.

Thansk for any help. [import]uid: 9133 topic_id: 13432 reply_id: 58675[/import]

Hi bsdrago!

Haha…São Paulo? Cool! I am from Rio de Janeiro and have moved to Manaus… :smiley:

So…I just thought about the sufix. :slight_smile: Glad that works (at least in the simulator).

BTW the problem in the device is really disturbing I believe as I am in trouble right now with one small project and my images that must scroll looks completely wrong also even in the simulator as the device as well.

My images are showing HALF-SIDE of the screen only! :frowning: I would like to know why too. My images looks like “compressed” in one side of the display in the X axis as in the Y axis. :frowning:

See yah,
Good Lucky!
Rodrigo. [import]uid: 89165 topic_id: 13432 reply_id: 58679[/import]

Hey!

Ive found what was happening in my devices. I hope people form ANSCA read this, because I reported a Bug and actually, it is not entirely truth.

The problem was ALL DEVICES I tested was with a program called Chain 3d. This app is to resize e donwncale textures in memory. I didnt know that (even the existence of this app in my devices). So, all images apear strange.

When I turn off this app, Corona start to work right again.

Sorry people!

Thanks for your help!

  • Drago [import]uid: 9133 topic_id: 13432 reply_id: 59013[/import]

I know Rodrigo has now solved his issue, so I am glad to hear you have too Drago.

Thanks for posting; it might help others in the future :slight_smile: [import]uid: 52491 topic_id: 13432 reply_id: 59281[/import]