How to implement HD "Retina Display" graphics in Cocos2D - iphone

I am not quite sure how use HD images for sprites in cocos2d. I looked through the documentation, and downloaded the newest beta which supports points instead of pixels, but I don't understand the whole -hd suffix idea. In other word I need help and have no idea how to use retina quality graphics in my cocos2d game. I feel that it is very simple, but I cannot find anything on doing this. Any help would be greatly appreciated.
Ok so maybe this is asking too much but, it would be very helpful if someone could give me the code a tell me where to put it. (Thats probably too much to ask) But if it is a line or too, it would be great if you could post it. I am absolutely clueless here. One thing I did try, was to set the content scale factor. The image was hi-def, but the fps went way down to around 12fps on an iPod touch 4th gen. I really do not understand this.
Thanks,
Tate

If you're using the latest beta, the only change you should need to make is export all your images at twice the size and use the "-hd" suffix, similar to Apple's "#2x". The documentation also says you need to set the content scale factor of the director, but in my case I didn't seem to need to do that.
Though it sounds like you've already read through it, I'll link to the documentation in hopes that someone will benefit.

I think the "-hd" is for Cocos2D-iPhone, the "#2x" is for icons used by Apple (e.g. Default.png).
If you want to see the difference, 1) setup slightly diff images (e.g diff colour, add minor changes) between normal and the "-hd" version, then 2) run it in simulator with "iPhone" (for iPhone 3 GS) and then with "iPhone(Retina)" (for iPhone 4+) and you should see different one been displayed.
Hope this helps.

Related

Screen sizes in Xcode 7 the using SpriteKit

I am relatively new to sprite kit and have been attempting to create my first basic game. All physics and other basics seem ok, but for some reason whenever I build and run the screen dimensions are off (looks like default is 1024×768)?
Pretty sure I'm missing something fundamental here but it doesn't seem immediately obvious on how to adapt the screen to any size iPhone screen (this is my ultimate goal).
My question is whether this is actually just a setting issue or is it necessary to implement code?
Thanks in advance and have a great day!:)
To answer the first part, you can easily change the size of your scene.
If you take the default GameScene, click out of the scene and look at the Attributes Inspector. You will see the default size of 1024,768. Personally if landscape I tend to work with an iPhone 5 design resolution of 568,320.
Regarding multiple devices, SpriteKit works pretty well out the box. You should look at the documentation regarding scaleMode, take a look in the GameViewController.swift. .AspectFit worked really well, nearly pefect across all devices apart from a little letterboxing on iPad. However, for the amount of effort put in, more than good enough.
On a side note, I've found the following iPhone Resolution Guide resource useful in the past.

How can you change a picture on the iPhone to make it look comicy or black and white?

I was wondering, are there any libraries on the iPhone that allow you to take an image and apply some sort of filter to it so the image turns out black and white, or to make it look comicy, or to skew it?
Start by taking a look at CoreImage. Its available in iOS5. You'll probably want to explore third party options too.
Check out OpenCV. It's an open source library that can be compiled for iOS (there's plenty of tutorials all around the net) and it's specifically made for things like image manipulation.
While it's harder to set up, it's a lot more powerful than CoreImage will be!
There's also plenty of sample code around the net that does things like turn images comicy/black and white/find image outlines/thresholds images etc. There's a small learning curve, but for what you want to do, it's more than worth it :)

Is there a View Controller to show thumbnails like the Photos app?

I am looking to replicate the image gallery view that shows thumbnails, like in the photos app on the iPhone.
Is there a view controller or any examples that anyone can provide to replicate this?
There isn't one provided by Apple. I would recommend looking at Three20. It has a few things with look a lot like the Photos app.
Another option is AQGridView.
Take a look at the video of Session 104 from the WWDC 2010. It's basically a 40 minute tutorial on how to do the photo app.
Bear in mind that allowing users to zoom will greatly increase the space required. If you use CATiledLayers, that is, which, depending on your desired zoom level, you should consider doing.
Oh, and there is source code ;)
What they don't tell you is how they did their tiling. I found that you can
a) download ready-made tiles from the server with the app or with a content update (you can use ImageMagick's crop tileWidthXtileHeight - e.g. crop 100x100 - to do the tiling). This has the disadvantage of large downloads.
b) download ready-made tiles from the server as needed (may lead to lags in your app, but then MKMapView does it quite nicely, doesn't it?)
c) tile on the phone as needed (here you can also consider caching the results, although that will likely mean you have to check space left on the device)
I've recently given enormego's PhotoViewer a try. It's easy to use, and it's much more focused than the Three20 project. (Which I also use and like a lot.)

iPhone 3 v 4 v iPad ui. Raster vs vector

I'm the design guy on a new iPhone project and am curious on the eat practices for the up elements in the iPhone 3-4 dev. I know the dpi is different between the two and am curious how best to handle this with the dev guys. Do I need to make 2 of everything or do we need to figure how to make vectors of things like buttons , backgrounds and other images?
Any help , examples and links would be awesome. My goal is to do the best for the app with asking for dumb things from the developer
Thanks
Your only option right now is to generate PDF images, then draw them manually with core graphics if you absolutely need vector graphics. Otherwise, you can wait for someone (including myself) to get something written third-party like, or you can just make two of everything.
You need to make 2 files.
Lets say you have an image that is 48x48 called Hello.png
the hires version will be 96x96 called Hello#2x.png
The iPhone will automatically determine which image to use.
Thank you, come again.

iPhone 4.0 Screen Resolution and writing robust code

Does anyone know what will happen with existing apps when they run on the iPhone 4.0 in terms of the new screen resolution? I am assuming, just like developing for the iPad that there should be no hard coded screen resolutions in your code.
I'd also like advice on the best way of writing robust code to work well on any device. For instance, detecting the screen resolution is not enough - on the iPad the screen is physically bigger so you can display more items on it. On the new iPhone the screen is the same physical size but higher resolution, so the likely thing is that you wont want to display more items, just higher resolution versions of them.
Any help would be useful,
Regards
Dave
EDIT: I have read the other similar posts, I guess what I really would like to know is what is the recommended way to write code for all App Store devices in a robust way so they a) all work b) make best use of the device.
UIKit has be redesigned so that old apps just work unmodified in the iPhone 4. There are then several things you can do, some programmatic and some by just adding higher resolution images to you app bundle.
Firstly, and most simply you can include new double res images that are used by your app with a suffix of #2x in the name. i.e., Event.png as well as Event#2x.png. [UIImage ImageNamed:] will automatically look for the a file with this suffix if it is running at the higher res.
All the other UIKit stuff now uses points instead of pixels. So for both old and new apps full screen is still 320 x 480 points. This pretty much means everything will work including touches, etc. Although they may now return fractions of a point.
The only real gotcha so far seems to be if you use CGBitmapContextCreate as this uses pixels and requires some jiggery - pokery.