My client asked me to put a bunch of random background images on his iPhone app. So it's set up by putting a UIImageView on top of self.view, adding an FXBlurView on top of that (for blurring purposes, obviously), then putting a UIScrollView on top of THAT, and laying translucent UIViews containing control objects on top of all of it. it looks something like the yahoo weather app when all is said and done. my question is twofold. now that i've explained the situation, here are my two questions:
Question 1
the background images are very grainy. what size should they be for an iphone 5? and what size for an iPhone 6? i thought retina was 640x1136, which should be the minimum size right? why is it only showing the entire image for 320x568? from what i've read, they should be the following for a 5s:
320 x 568
640 x 1136
960 x 1704
when i do that, they appear very grainy. if i do any larger than that then the pictures are cut off. the whole picture isn't being shown.
Question 2
In iOS 7, the app ran fantastically. now that iOS 8 is out, the scrolling graphics are slow and choppy. I took the background image out completely and it sped right back up. I'm wondering what i can do to speed the scrolling up again with a background image staying stationery while the control objects scroll.
any ideas for me?
Answer to the first question
apple has you design your apps at 320x568. The extra pixels are used to make the text and images look sharper. Otherwise, everything would be smaller on a retina display and not sharper.
So you don't have direct control over that extra retina space. The iPhone uses it to digitally make the images sharper and clearer.
I'd still like to know why its choppy and the graphics are poor while scrolling
I use FXBlurView as well, and found that turning the dynamic option of the blur view to OFF fixes the issue. For some reason on iOS 8 FXBlurView uses 100% CPU when dynamic is ON.
Related
I am new to UI design, however a client wants an app ready for both iPhone 4s & 5.
I understand the iPhone 5 will create two bars if the image is not long enough. Many people said coding it at #2x will solve the problem. But I'm not sure exactly what that means.
Do I need to design two versions? What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Thanks.
First, in a couple of months you'll have to support the iPhone 5's screen size. Apple have announced that it'll be a requirement soon.
Adding a Default.png of the right size is enough to enable an app to support the new screen size but is likely not enough. You'll also need to make sure that all your views resize to fill the screen. There's the old "springs and struts" method and the newer "constraints." There are tutorials you can search for -- Stackoverflow is not a good place for that kind of thing. You'll also need to update any images.
In short, try it in the Simulator and see what happens.
Using #2x is referring to whether or not the image asset is being displayed on a 'retina' screen. For example, if you had a 50x50 pixel image, the 'retina' (#2x) version would be 100x100. This is because 1pt (point) is equal to 2px (pixel) on a retina screen.
There are a variety of ways you can determine is it is an iPhone5 or iPhone4.
In the viewDidLoad, you could check the self.view.frame.size.height to determine which background image to load based on the height of the screen. This would require you to have two different versions of the assets (not including #2x versions), i.e. bg_iphone5.png & bg_iphone4.png.
There are other ways to accomplish this, and people have explained it better than I have here - search StackOverflow and you will surely find what you're looking for.
What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Don't do this. Design for both.
Why do original iPhone applications (normal screen size like iPhone 4/4s) in Xcode resize perfectly for iPad automatically and not for the slightly larger iPhone 5 screen size?
To fit a iPhone 4 view into the iPad each point is scaled equally into two directions. The aspect ratio of a iPhone4-point doesn't change on the iPad screen.
To fit a iPhone 4 view onto the iPhone 5 screen, each point has to be scaled in vertical direction only. This will distort each point and the view, similar to the distortions you get when you watch a movie in the wrong aspect ratio. A circle on the iPhone 4 screen won't be a circle on the iPhone 5. So you can't physically resize the pixels like it's done on the iPad.
In iOS-Development Autoresizing Masks come to the rescue. But there is no way to figure out if your app looks good if the auto resizing scales the view to iPhone 5 size. You have to test each app on a iPhone 5 sized screen. Apple didn't want to do this, so they put an opt-in in place, which you actively had to enable. They choose to use the iPhone5 launch image for that.
If your app looks good when it's vertically scaled simply provide the appropriate launch image.
If you used best practices to develop your iPhone 4 app that's basically all that is needed.
iPhone 5 support needs to be explicitly added by supplying a "Default-568h" start image.
I have a multiplatform iOS/Android game that I programmed in Cocos2d-x. I have only one set of images to use (I'm only after high res devices) that get scaled according to the device's resolution. For example all images are for the iPad but if you are using a Galaxy S then the image locations and scaling are affected by GalaxyS_screenWidth/iPadscreenWidth.
This works fine for all Android devices and on iPad, iPad2 and old iPhones, but with Retina iPhone there is a problem. On the iPhone 4 all my images look extremely pixelated, a result from the images being scaled to iPhone non-retina resolution then scaled back up to fill the screen.
I tried enabling Retina Mode and the images are half of their intended size (maybe due to the usage of get winsize() which uses points) and scaling manually causes other sorts of problems. I tried playing with a lot of options and attributes but to no avail, so what should I do now?
EDIT:
This is not only a graphics issue, as text gets automatically scaled down then up and appears pixelated.
EDIT 2:
Fonts are bitmaps so my bad. But I don't want to use retina as all images are already retina by default. All of my images are set up for the iPad so for iPhone 4 I just scale them down a bit. This works with Android phones.
For example I have an image, depending on screen resolution obtained through getwinsize():
If current resolution width is 1024 then image stays the same.
If current resolution width is 900 then image gets scaled by 900/1024, no problem.
If device is iPhone 4 resolution width is 480, so image gets scaled by 480/1024, then cocos2d-x automatically scales the resulting image by 2 thus the pixelation. I tried using getwinsizeinpixels, I tried multiplying the screen size, I tried many things but nothing worked out of the box unless I am to redo many of my code.
So the question is, how can I just let the damn engine treat the iPhone 4 as an Android phone with resolution of 960x640?
If you want Retina resolution images to look like Retina resolution images, then those images need to be in Retina resolution (960x480).
If you first scale down the image to 480x320 and then upscale it on the device, it will of course look blurred. You can't magically make the Retina pixels appear from a lower resolution image by scaling it up.
SI couldn't get to the bottom of it so I employed a hack. I enabled Retina Display then I scaled everything x2 through code except for the text. Sounds stupid, but it worked, and pixelation is gone. Thanks everyone who spent time trying to help me.
I tried enabling Retina Mode and the images are half of their intended size
when you enable retina support, cocos2d gets images by appending #"-hd" to their provided filenames. Such images are meant to be double the "visual" size (in iOS terms, pixels vs. points), so that they can be sort of scaled down to make full use of device resolution.
If you have a look at the CCDirectorIOS class, you will find there a couple of methods dealing with this, especially those dealing with the scalingFactor. I don't know what kind of changes you should do to make it work, but if you step into those methods and look at the value of various objects, you might find a way to modify cocos2D default behavior for your specific case.
If this seems to complicated, one thing you could try is changing the CC_RETINA_DISPLAY_FILENAME_SUFFIX so that cocos2d will not look for specially-named files for the retina iPhone, but just use the normal ones.
For example all images are for the iPad but if you are using a Galaxy S then the image locations and scaling are affected by GalaxyS_screenWidth/iPadscreenWidth.
Another thing you might try is not using winSize, but winSizeInPixels, so that when you scale down, you down do it down to the point resolution, but just to the pixel resolution (which is double the point resolution).
Hope this helps.
So, I was creating an application for iOS with Xcode 4.2.1, I don't know why all of my icons are blurry, they are in high definition, but for some reason they looks blurry and in a bad quality.
even the background images looks bad..
Please help me, what can I do about it?
This is the original button image:
This is how it looks on the application:
Make sure you saved the high-resolution images with the ending #2x.png, if they aren't they won't work. Also remember that the images needs to be twice the size of the pixles on the screen, that means a 50px x 50px-button will need a 100px x 100px-#2x-file.
Read more about retina icons in the iOS Documentation here.
You should round the origin of each image. If you place image with coordinate like (250.34, 340.21) you get blurry effect.
This is very likely to happen when you use automatic position calculation as well as center property to place your views/images.
In the simulator, use the new Debug menu to check whether your images are misaligned. If they are, use NSRectIntegral to fix their frames.
I'm using some animated gifs on our mobile-site. It's a clock-animation and since the iOS 5 update it sometimes happens that the clock gets blue instead of red, as planned. Happens on iPhone4 and iPhone5 with the new os.
Any ideas what could cause the problems? It's hard to reconstruct this failure but it happens from time to time.
Any help would be appreciated.
Sometimes ios devices may not be able to process all the images because of its relatively low graphics ability compared to that of a computer. Instead of using a GIF I would suggest using an animated PNG. This has been more popular among the ios devices as using GIFs has become obsolete when working with ios devices. I am not sure how fast this would be, but I would say it can apply less stress then that of a gif. Another idea, because it is a clock gif is to analyze the gif in a program and determine any problems. Also use imgoptim (for mac) or pngcrush for windows to reduce the size of the gif to reduce the stress on the processor.
use GIF 128 Dither and Please make sure that images size has to be base on the resolution it happen some time if your images size is not depend on retina or normal resolutions. And if I am not wrong you facing problem only in retina device, may be below details will help
iPhone Retina Display
~~~~~~~~~~~~~~~~~~~~~~~
Width - 640px
Height - 960px : including 40px status bar
DPI - 326
You can use Cocos2D framework, Cocos2d and UIKIT both work great with out any graphic related errors... Sprite sheets reduces the memory usage and also support all transparant images , you can run animation ,stop and repeat them. Good luck..