The rectangle covers a large area but the brighter part is over the balls.
How is there a brighter part? Did you create 2 rectangles for testing?
Brent
No. The only think I did was Y+200 to make the rectangle over the game balls.
- local testRect = display.newRect( sceneGroup, display.contentCenterX, display.contentCenterY+200, 200, 300 )
- testRect:setFillColor( 1, 0, 0, 0.5 )
Since the target is over the table and the game balls touch the table logically I think the problem is in the way the graphic is sizing the table graphic. I have two sizes for the table and those two work great on all the other devices. I’ve tried everything I can t think of. But then again - I have limited experience.
Also, the same thing is happening on my end game screen. It is sizing it (the background photo) too small as well.
Thanks
Lori
Hi Lori,
I still don’t understand why there is a brighter red rectangle (shorter, about 20% the height) compared to a dimmer red rectangle.
Naturally, the rectangle won’t be in the vertical center if you’re adding 200 to its Y value…
What is the rectangle supposed to be aligned to (vertically)? The row of green balls, or the white ball?
Brent
The rectangle is not part of my code. I added it as a request in one of the responses above. I tried to align it over the balls since that is one of the problem area’s. If I do not add the 200 to the Y then the rectangle is in the center of the screen.
The game table is centered. It appears the table is not sizing correctly.
I have two table sizes that work on all the other devices. So the only thing I can logically deduce is that the png selected is not resizing in the same fashion as on the other devices. I’m not sure how all of that works behind the scene.
Do I need a third size for this device? But then it might mess up the sizing on all the other devices that are currently working. This is the last issue before I can release on Google. Apple is already accepted and in production.
Thanks
Lori
I know why the rectangle was off. I had the code in twice so there were two over lapping.
I reposted with one rectangle and it is definitely in the center. The first picture is incorrect (NEXUS ONE) and the second picture is correct (HTC Sensation).
I think the problem lies with the sizing on the table. It is like it should choose the larger of the two images or it is sizing the table too small.
Thanks
Lori
Lori, can you put some print statements in your code and run it on both devices and post the results:
display.contentWidth
display.contentHeight
display.actualContentWidth
display.actualContentHeight
display.pixelWidth
display.pixelHeight
Also print out the width and height of the background box that’s changing size on the different devices. Finally can you copy/paste your config.lua file (I know you published it earlier), but this time please click on the blue <> button the edit bar with Bold, Italic and such and paste it into the box that pops up. This feels like a syntax error in config.lua causing the content area to not get defined.
Rob
I have two sizes for the actual PNG for the table.
table.png = 768 x 768 pixels
table@2x.png = 1536 x 1536 pixels
Below is the prints from the terminal
HTC (From the Terminal)
Dec 20 10:58:43.029 ----------Pressed Level # = 1-------------
Dec 20 10:58:43.035 ++++++++++++++++++++ LEVEL #1 +++++++++++++++++++++++++++++++++++++
Dec 20 10:58:43.035 display.contentCenterWidth =
Dec 20 10:58:43.035 nil
Dec 20 10:58:43.042 -------------------------
Dec 20 10:58:43.042 display.contentHeight=
Dec 20 10:58:43.043 1422
Dec 20 10:58:43.043 -------------------------
Dec 20 10:58:43.043 display.actualContentWidth =
Dec 20 10:58:43.043 800
Dec 20 10:58:43.043 -------------------------
Dec 20 10:58:43.043 display.actualContentHeight=
Dec 20 10:58:43.043 1422.2221679688
Dec 20 10:58:43.043 -------------------------
Dec 20 10:58:43.043 display.pixelWidth=
Dec 20 10:58:43.043 540
Dec 20 10:58:43.043 -------------------------
Dec 20 10:58:43.043 display.pixelHeight=
Dec 20 10:58:43.043 960
Dec 20 10:58:43.043 -------------------------
Dec 20 10:58:43.044 ++++++++++++++++++++ LEVEL #1 +++++++++++++++++++++++++++++++++++++
Dec 20 10:58:43.044 +++++++++++++++++++++TABLE TOP WIDTH/HEIGHT++++++++++++++++++++++++++
Dec 20 10:58:43.044 Table Top Width =
Dec 20 10:58:43.044 768
Dec 20 10:58:43.044 ---------------------
Dec 20 10:58:43.044 Table Top HEIGHT =
Dec 20 10:58:43.044 768
Dec 20 10:58:43.044 +++++++++++++++++++++TABLE TOP WIDTH/HEIGHT++++++++++++++++++++++++++
NEXUS ONE ** (From the Terminal)**
Dec 20 10:59:32.654 ----------Pressed Level # = 1-------------
Dec 20 10:59:32.660 ++++++++++++++++++++ LEVEL #1 +++++++++++++++++++++++++++++++++++++
Dec 20 10:59:32.661 display.contentCenterWidth =
Dec 20 10:59:32.661 nil
Dec 20 10:59:32.669 -------------------------
Dec 20 10:59:32.669 display.contentHeight=
Dec 20 10:59:32.669 1333
Dec 20 10:59:32.669 -------------------------
Dec 20 10:59:32.669 display.actualContentWidth =
Dec 20 10:59:32.669 800
Dec 20 10:59:32.669 -------------------------
Dec 20 10:59:32.669 display.actualContentHeight=
Dec 20 10:59:32.669 1333.3332519531
Dec 20 10:59:32.669 -------------------------
Dec 20 10:59:32.669 display.pixelWidth=
Dec 20 10:59:32.669 480
Dec 20 10:59:32.669 -------------------------
Dec 20 10:59:32.669 display.pixelHeight=
Dec 20 10:59:32.670 800
Dec 20 10:59:32.670 -------------------------
Dec 20 10:59:32.670 ++++++++++++++++++++ LEVEL #1 +++++++++++++++++++++++++++++++++++++
Dec 20 10:59:32.670 +++++++++++++++++++++TABLE TOP WIDTH/HEIGHT++++++++++++++++++++++++++
Dec 20 10:59:32.670 Table Top Width =
Dec 20 10:59:32.670 512
Dec 20 10:59:32.670 ---------------------
Dec 20 10:59:32.670 Table Top HEIGHT =
Dec 20 10:59:32.670 512
Dec 20 10:59:32.670 +++++++++++++++++++++TABLE TOP WIDTH/HEIGHT++++++++++++++++++++++++++
config.lua
--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.floor( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.floor( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3, }, }, --------------------------------------------- license = { google = { key = "my google key", }, }, }
Let me know if I failed to include everything.
Thanks,
Lori
For the output, I wanted to see display.contentWidth, not display.contentCenterWidth (which doesn’t exist), but I suspect it would be 800 in both cases since that’s what it should be.
Personally I would recommend you do:
local tableTop = display.newImage Rect (“Images/borderYellowGreen2.png”, 768, 768 )
and loose the scaling. The difference between display.newImage() and display.newImageRect() is that the first loads the image at the physical pixels of the image. The second form you say how big you want the image relative to the content are. In this case you’re saying make it 768 of 800 pixels wide. Since the image is square, the height is also 768.
I almost never use display.newImage() unless I don’t know the size of the image before I load it. If I know the dimensions, I will always use the display.newImageRect() version.
Rob
Whooorayyyy!! Thank you Rob that did the trick.
To make sure I understand. Using the display.newImage Rect (“Images/borderYellowGreen2.png”, 768, 768 ) identifies the size of the object without question. Then the using the aspect ratio…in the config.lua (from the tutorial) the corona software resizes the object (table) to fit the device.
Correct?
Should I update all my objects to be like this even though they are working?
Thanks
Lori
The config.lua’s width and height defines your screen space.
This block of code:
imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, },
tells Corona based on the real size of the screen relative to what you defined. So if your screen is higher resolution than 800 x 1200 (the base you’re defining), then it will pick up your @2x or @4x versions of your file.
display.newImage() loads the image in at the size the file’s native dimensions but doesn’t handle content scaling well. You’re better to use newImageRect() because you’re in control over the image size instead of letting images update based on screen dimensions.
Should you go change what’s working? Probably not, but in future endeavours, work towards making display.newImageRect() your goto function when you know the size of the image.
Rob
Thank you so much Rob. I appreciate your taking the extra time to explain.
I think you forgot to attached your screenshots and config.lua code
I tried again and it keeps telling me the file is too big - even when I try to upload one screen shot. I tried making it smaller but same thing. Thoughts?
Lori
Hi Lori,
Do you have an image editing program to down-size the images?
If you can’t upload images, can you describe what you mean by “a few items in the Simulator that displays the assets incorrectly”? What does “incorrectly” mean here? Alignment? Resolution? Position? Any details you can provide should help squash this issue… my initial guess is that you need to change your image suffix value because the “misbehaving” devices aspect ratios are making some things fall outside of the range you’ve specified.
Brent
P.S. - Obviously, the “HTC Windows Phone 8S” has no relevance to Google. 
This is a good picture. HTC Sensation
This is a bad picture: NexusOne
The HTC Sensation is how it is supposed to look and the Nexus One is messed up. The balls go on the out edges of the table and the target is above the table. When I play the game on NexusOne Skin the ball goes to the outside of the table.
Since Windows HTC is not applicable to Google, I guess NexusOne is the only issue.
Sorry the pics are so small. That was the only way I could get them uploaded.
Thanks - I appreciate the help.
Lori
Click on “More Post Options” button below the exit box. There you can attach larger files.
This is the bad display. The balls are on top of the table and the boundaries of the table are actually outside the graphic so the “bumper” is outside of where it should be graphically. Also, the target hole is above the table. This is using the NexusOne Skin
[sharedmedia=core:attachments:4623]
This is the correct display (different level but same principle). The balls all align within the parameters of the table and the target hole is on the table and the boundaries for the bumpers align with the picture so the game plays as expected by the user. This works as it should on all skins except NexusOne
[sharedmedia=core:attachments:4622]
Every level has a different layout but the measurements of the table and assets are the same. This only a problem on the NexusOne skin.
Sorry for the poor quality of the picture.
Thanks
Lori
Hi Lori,
First, please add the following code somewhere in main.lua and run it on the NexusOne and then also on a device you know is working (where things are positioned where they should be). Then report back your results.
[lua]
print( “IMAGE SUFFIX: [”, display.imageSuffix, “]” )
[/lua]
Thanks,
Brent
NEXUS ONE came back IMAGE SUFFIX: [nil]
HTC Sensaation came back MAGE SUFFIX: [nil] as well but the screen is displayed correctly.
Thanks
Lori