I have created a new Cocos2d project and I deleted the 'Hello World' label. I have added this image (320x480 px) and tested on iPhone 4, here is the result. The image's dimensions have been reduced to 1/4th of their original size, not sure what's going on. I never had this problem before with the previous version.
Source Image
Screen Shot from iPhone 4
You should enable retina display if it's not already enabled:
[director enableRetinaDisplay:YES];
And provide the retina version of the background image using the "-hd" suffix.
backgroundImage.png (320 x 480 px)
backgroundImage-hd.png (640 x 960 px)
By the way you can set your own suffix:
#define CC_RETINA_DISPLAY_FILENAME_SUFFIX #"-hd"
The reason is that iPhone 4 and 4S have retina displays - a display with a 4 times higher resolution as the previous models. Cocos2D, as opposed to iOS, doesn't use logical but physical screen sizes - you need to load another image with a 4 times higher resolution on iPhone 4 and 4S.
Related
I have a developer working on a game for me for ios for iPhone 5. He stated the resolution we must use for the game is 320 x 568, but the iphone 5 has a resolution of 640 x 1136 and he stated that this is the resolution for the graphics and not the game leveling design. The game is a 2D maze game.
I am still learning, so any help would be greatly appreciated. Which resolution is the correct resolution? Why is it half of what apple states?
Thanks in advance
Here's the story. When Apple introduced the iPhone 4, it introduced the "Retina Display". That is, the iPhone 4 had a screen with twice as many pixels on it than the previous iPhones. So to compensate, Apple came up with the screen points system. It works like this:
-On non-retina devices, 1 point = 1 pixel
-On retina devices, 1 point = 2 pixels
-On any device, the programmer's coordinates are done in points.
-On any device, the art assets should be done using pixels
Example: I have a 200x200 pixel image used on retina devices. When I load the image into a view, the size of the view is 100x100 points.
In order to make sure your image is loaded properly, you have to use the #2x suffix. If you have a 200x200 pixel image "myImage.png", it will be loaded as 200x200 points and will be scaled up on retina devices. If instead you name the image "myImage#2x.png", instead it will interpret the image as 100x100 points, and will scaled down on non-retina devices. You can also have two versions of an image (Apple recommends 2 images although it isn't strictly necessary). If you have both 100x100 pixel "myImage.png" and 200x200 pixel "myImage#2x.png", it will interpret them as two versions of the same image, and will use the #2x one on retina devices and the other one on non-retina devices. In both cases, the image will be interpreted as 100x100 points.
You might also want to take a look at Apple's High Resolution Guide.
I have a problem with my application ios. It is a universal application of cocos2d 6.0. It works on ipad, iphone 3GS, 4, 4S. Iphone 5 on I can start the application but cocos2d does not use the entire screen. Like iPhone 4. Do you have any idea??
Thank's
Have you added to your project the Default-568h#2x.png launch image? This will make your app use the full iPhone 5 screen.
If you do not include that launch image, then your app will work in boxed mode (i.e., centered on screen with black bands above and below to fill the entire area).
Note : this is due to the devices different screen resolutions :
iPhone 4 : 960x640 px.
iPhone 5 : 1136x640 px.
This happens due to screen size differences between iphone5 and iphone 3G, 4, 4s.
iPhone 4 :960 x 640 px
iPhone 5 1136 x 640 px
You should use Default-568h#2x.png image name for your launch image. On starting iphone 5 will load this image which will cover whole screen, While for other images in your game(If you have different images for iPhone5) use following code in your AppDelegate.m
[CCFileUtils setiPhoneFourInchDisplaySuffix:#"your suffix"];
And place images in project according to your suffix.
if I changed app graphics for iphone 5 , is it going to work for iphone 4, 3GS properly or the users have to resize the app like when you download iphone app in iPad ?
If you mean you are using both normal sized images and 2x images for retina display, you won't have a problem on older devices.
They'll just pickup the regular sized images while the ones with retina display will load the #2x ones.
What you do have to take into account is that if you don't include regular sized images (if you only use #2x images), older devices won't load them.
#2X will still work. However I did download xcode 4.5 with iOS 6 Gold Master seeds and played with it last night. The splash screen will include the new slightly higher resolution image 11??x640 as well as the 960x640 and 480x360.
For fullscreen images, you will have to supply at least two versions, better three.
One being 640 × 1136, one being 640 x 960 and one being 320 x 480.
For the 3.5" retina version, you may use the automatic selection (aka #2x). For the former 4" retina version it appears as if you will have to include your own code to select the right one.
The dimensions of the iPhone is 320x480
The dimensions of a Retina iPhone is 640x960
When designing a design for a retina device, do you set the size of your document to 320 x 480 or 640 x 960?
I would have thought you would have set the size to 320 x 480.
The reason for this is that although a retina device has more pixels, these are still being displayed on a 3" screen size. If you did set your size to 640 x 960, then when viewed on a retina display, all the text would be small, as although there are more pixels, the screen isn't physically bigger.
Is that correct?
UPDATED: Do you also use 320 x 480 as a base size for CSS (see comments below)
Yes, that's correct. I'm an iOS developer, not a web designer, but in iOS devices you specify everything in points (which is one pixel on a non-retina device, and a 2x2 pixel block on a retina device) so everything is the same size. The extra pixels on the retina display simply make everything look better.
You can get away with smaller text on a retina screen since you have more detail, but accessibility wise that's not a good move, since lots of people can't then see your text without zooming, whatever kind of display they have.
I am debugging an application using iPhone 4 Simulator. I have selected it from the simulator menu (device = iPhone 4). When I run the app, the screen size is reported as 480x320 !!??
Is there something I have to modify on this app of mine (originally built for 3G/3gs) in order to make it run on iPhone 4 (yes, I have recreated all artwork as 960x640 and the artwork is on the bundle, but it is scaling it down to half the size... because it is running on 3G/3GS mode, instead of hi res).
running
CGRect cgRect =[[UIScreen mainScreen] bounds];
will result in (0,0,480,320).
Any clues?
thanks for any help.
Recommended read: http://developer.apple.com/iphone/library/documentation/iphone/conceptual/iphoneosprogrammingguide/SupportingResolutionIndependence/SupportingResolutionIndependence.html
One point does not necessarily
correspond to one pixel on the screen.
A sample project, download here.
The iPhone is making the move into resolution independence. This means that things aren't measured in pixels, but in points. Points don't always correspond to pixels.
The screen size of the iPhone 3GS (and previous) is 480x320, in both points an pixels. They correspond on these devices, but in newer devices (like iPhone 4) they do not.
The iPhone 4's screen size is 960x640 in pixels, but its logical screensize is still 480x320 in points.
This allows you to keep your frame, point and size values in their original values and still support larger resolution devices.
On iPhone 4 you need to have #2x somewhere in the name of the image file and it will be used automatically on the higher resolution devices.
When #2x images are loaded, they are loaded as their original resolution, but their size property is halved to be able to work with the logical point measurments.
For instance, an image with an original size of 960x640 will report its size as 480x320 when it's asked for.
instead of bounds use currentMode
CGSize pixelBufferSize = [[[UIScreen mainScreen] currentMode] size];
you will get actual resolution