Discussion Forums  >  Uncategorized

Replies: 30    Views: 402

Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
08/15/11 06:44 PM (14 years ago)

iPhone 4 Retina Display. What is the best way to support it as much as possible?

I would like to make my splash screen images 960x640 to support iPhone 4 Retina display. I do not have an iPhone 3G to test with so I would like to know what will happen if I do this with my splash screen image? Also, can I double the resolution of images I use for image headers to support Retina display? Will the image downsize itself in the display on the 3G or will it go off the screen? What is everyone else doing to try and support iPhone 4 Retina Display?
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
08/16/11 12:26 AM (14 years ago)
Use larger retina type images..then.. in the splash screen settings, Background Image Scale option, choose Full Screen, Preserve Ratio. Bet it works nice on both devices.
 
cteselle
Apple Fan
Profile
Posts: 34
Reg: Jun 13, 2011
California
340
like
08/16/11 12:42 AM (14 years ago)
For backgrounds/icons/etc you can create 2 different versions of your images. For older devices name the image: image.png for the retina display name that image [email protected]. Only ever call the image.png file, iOS will display the appropriate image based on the hardware.
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
08/16/11 12:51 AM (14 years ago)
@cteselle: Great tip!!! Forgot all about this.
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
08/16/11 05:16 AM (14 years ago)
@cteselle - That is great information. Thank YOU!
 
cyrisneo
I hate code!
Profile
Posts: 12
Reg: Apr 19, 2011
location unknow...
120
like
10/11/11 06:17 AM (14 years ago)
1.5v I have tried using 320x480 [email protected] Full Screen, Preserve Ratio and 640x906 [email protected] Full Screen, Preserve Ratio. Both don't produce the clear splash screen. any ideas?
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
10/11/11 06:30 AM (14 years ago)
The 320x480 image should be named image.png and the 640x960 image should be named [email protected]. Also preserve ratio on using a 640x906 image would probably a blurry image because the iphone 4 screen is 640x960 and you are stretching a 640x904 image to 640x960 although you said preserve ratio I would think this would cause problems. May suggestion is to resize the 640x906 image to 640x960 and make sure you have the files name correctly.
 
cyrisneo
I hate code!
Profile
Posts: 12
Reg: Apr 19, 2011
location unknow...
120
like
10/11/11 07:05 AM (14 years ago)
Typo on the hi-res image size*640x960. I tried renaming the image file to [email protected] (http://theplacefordee.com/[email protected])with Full Screen, Preserve Ratio. The end result is just the center of the image is shown. No resizing for the screen. thoughts?
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
10/11/11 07:46 AM (14 years ago)
If the images are sized properly for the screens I leave the Background Image Scale / Position setting on the default which says Select. Also, what are you testing this on a device or the simulator? One more thing make sure in the control panel that when you specify the name of the background image you only use image.png and not [email protected] iOS will automatically use the @2x image when it detects a retina display device.
 
cyrisneo
I hate code!
Profile
Posts: 12
Reg: Apr 19, 2011
location unknow...
120
like
10/11/11 07:55 AM (14 years ago)
Testing on device. I am pulling the images from remote. So my question is how will the app know to pull [email protected] remotely?
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
10/11/11 08:09 AM (14 years ago)
Ahh that is the problem I don't think that is possible when pulling from remote server. You will need to use images locally stored on the device if you want to be resolution independent. Maybe some else knows a workaround, but I don't I always use locally stored images when creating apps.
 
cyrisneo
I hate code!
Profile
Posts: 12
Reg: Apr 19, 2011
location unknow...
120
like
10/11/11 08:24 AM (14 years ago)
I went ahead and added to project. Which fixed the splash screen. Any idea how to get a retina header image? sorry for the many questions
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
10/11/11 08:36 AM (14 years ago)
Do the same thing. When specifying your header image name use whatever.png and then include in the images directory [email protected] and then iOS will automatically use the appropriate image when retina display is detected. I would recommend creating the retina display image first and then save the image at 50% and use that for the regular image file. If you try to upscale the image you will probably pixelate the results.
 
johnnylonz
Aspiring developer
Profile
Posts: 26
Reg: Aug 11, 2011
Florida
260
like
10/28/11 07:03 AM (14 years ago)
I'm trying to do the same thing with my header image, but having problems. I made 2 images for my header, one is 300x80 and the one for retina is 600x160. In the header image settings in buzztouch I set the dimensions for the header to 300x80 and pointed it to logo.png in my BT_Images folder. In my BT_Images folder I put the logo.png at 300x80 and [email protected] at 600x160. The iPhone with the retina display is still showing the 300x80 image no matter what I try. If I completely remove the 300x80 image from my BT_Images folder and rename the 600x160 image to logo.png it doesn't scale the image down, you basically see the image much larger. I also tried changing the settings in buzztouch for the image to be 600x160, but its still showing the low res image. It's almost like rather than scaling the image properly it thinks its displaying the image on a non-retina iPhone. Any ideas?
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
10/28/11 07:37 AM (14 years ago)
In the Image Header > Image Name Small Device section you should have logo.png. Then in the BT_Images folder put logo.png and [email protected]. That is all you should have to do to make the header image retina display compatiable.
 
johnnylonz
Aspiring developer
Profile
Posts: 26
Reg: Aug 11, 2011
Florida
260
like
10/28/11 07:54 AM (14 years ago)
Yeah, no luck. It's still scaling the 300x80 image up on the retina display... Oh well.
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
10/28/11 10:44 AM (14 years ago)
Are you using the simulator or an actual device. I have always tested retina display images on a device and it works fine if I have the @2x image in the BT_Images folder. That might be the problem if you are using the simulator.
 
johnnylonz
Aspiring developer
Profile
Posts: 26
Reg: Aug 11, 2011
Florida
260
like
10/28/11 11:41 AM (14 years ago)
Actual device, iPhone 4S running iOS 5. We've tried the same thing with other images throughout the app and it seems to work OK in other places which makes me think there is something else going on. Short of redownloading the source code from the server and starting over I'm not sure where to look. But we're basically done with the app so if there is one low res image on it I'm willing to live with it. Who knows, maybe Apple will figure it out when I submit it for approval ;)
 
QuiggityBiggity
Aspiring developer
Profile
Posts: 38
Reg: Aug 05, 2011
Baltimore
980
like
02/20/12 02:40 PM (14 years ago)
Has anyone figured this out? I'm having the same problem. Nick
 
QuiggityBiggity
Aspiring developer
Profile
Posts: 38
Reg: Aug 05, 2011
Baltimore
980
like
02/20/12 04:06 PM (14 years ago)
From what I can tell, this must be a Buzztouch bug. I'm building my app for low res, hi res, and iPad devices supporting iOS 4.3 and above. My images are Header.png (300x130), [email protected](600x260), and LargeHeader.png (768x1024). Low res and iPad versions are fine, but I can't make any Retina headers display in the simulator or on the device. I've restarted xcode, redownloaded the source, deleted and re-added images, and tried the old extensions (Header~iphone.png, Header@2x~iphone.png) to no avail.
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
02/21/12 07:02 AM (14 years ago)
Are you switching the simulator to iPhone (Retina) under the hardware menu? The on screen simulator will look like the iPhone 4 but it is actually running at iPhone 3G resolution. You are doing everything right by adding the @2x to the file name, so check the hardware display setting mentioned above.
 
QuiggityBiggity
Aspiring developer
Profile
Posts: 38
Reg: Aug 05, 2011
Baltimore
980
like
02/21/12 07:57 AM (14 years ago)
Under the devices menu, I'm testing: iPhone for low res iPhone (retina) for high res retina displays iPad for iPad
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
02/21/12 08:02 AM (14 years ago)
When you select retina is it not showing the high res image? You are loading the images into the images folder in Xcode right? I don't think the @2x will work when pulling the image from a URL.
 
cyrisneo
I hate code!
Profile
Posts: 12
Reg: Apr 19, 2011
location unknow...
120
like
02/21/12 08:37 AM (14 years ago)
Moto110 is correct you have to add the image files to the xcode project.
 
johnnylonz
Aspiring developer
Profile
Posts: 26
Reg: Aug 11, 2011
Florida
260
like
02/21/12 09:07 AM (14 years ago)
When I had this issue with my project, my images were in the BT_Images folder in Xcode. I knew I was doing it right because it was working with other images throughout my project, just not the header image in my main menu.
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
02/21/12 11:07 AM (14 years ago)
You know come to think of it I ran in to a similar problem once where the image would not show the @2x image in place of it I got a Question Mark image. I worked around this problem by picking a new name for the image that was giving me problems and that resolved the problem. As to what caused that to happen is a mystery. I assume a bug in the code. Helpfully this helps.
 
QuiggityBiggity
Aspiring developer
Profile
Posts: 38
Reg: Aug 05, 2011
Baltimore
980
like
02/22/12 09:03 PM (13 years ago)
Tonight I tried renaming the header images as you said, changing the filetypes from png to jpg, and changing the header layout options all to no avail. In reading some other forum posts, it seems that others who have had this problem encountered it only on some screens, whereas on others the retina header would display correctly. If it provides any insight, on all five of my screens with headers, I have this problem. Since xcode automatically should select the @2x images, I think the problem must be somewhere in the Buzztouch settings... This problem is blocking me from releasing the final version of my app. I WILL PREVAIL. Nick
 
QuiggityBiggity
Aspiring developer
Profile
Posts: 38
Reg: Aug 05, 2011
Baltimore
980
like
04/23/12 09:09 PM (13 years ago)
My followup after precisely two months: I now have a Retina iPhone so I could extensively test this issue. I made a very, very clear distinction between the lowres and hires images that I'm using which helped greatly, but point to a different problem. The @2x image is technically pulled and referenced correctly, but it displays looking like crap! Totally pixelated hence why all this time I thought it was the low res header image. Anyone have any ideas or any tests I could try? Nick
 
johnnylonz
Aspiring developer
Profile
Posts: 26
Reg: Aug 11, 2011
Florida
260
like
08/02/12 12:25 PM (13 years ago)
QuiggityBiggity- I know this thread is ancient, but I was looking through the forums on an unrelated note and think I found the answer to this. If you have rounded edges turned on for the images, it will not show the high-res (@2x) version of the image. I deleted the value I had in "Image Corner Radius" fields under the "Header Image Layout" section in buzztouch and POOF! Hi res images after refreshing the app. Hope this helps you or anyone else who stumbles upon this thread.
 
QuiggityBiggity
Aspiring developer
Profile
Posts: 38
Reg: Aug 05, 2011
Baltimore
980
like
08/03/12 09:44 AM (13 years ago)
Johnnylonz, You are a genius. Under any screen, I selected "header image layout" and removed the value from "image corner radius". Hi-Res header image now displays. It seems that there's no way to have the rounded corners with a hi-res header image, (unless you edit the image with a photo editor). Thanks a million!
 
johnnylonz
Aspiring developer
Profile
Posts: 26
Reg: Aug 11, 2011
Florida
260
like
08/03/12 10:14 AM (13 years ago)
No problem! Actually all the credit goes to Moto110, he's the one who discovered the fix in another thread. Crazy how simple the solution ended up being. It is UNREAL how much time I spent struggling with this...
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.