[devel] Creating Hi-Res/Low-Res App in Cocos2D v0.99.4 and v0.99.5

cocos2d for iPhone » Programming » cocos2d internals

[devel] Creating Hi-Res/Low-Res App in Cocos2D v0.99.4 and v0.99.5

(194 posts) (42 voices)

Started 1 year ago by ishadow
Latest reply from luky300

Tags:

« Previous 1 234…7 Next »

MikeSz
Member

@riq - no, no, you're absolutely right :) didn't know CCFileUtils is that smart

actually our first retina display update is ready (for Tiki Totems), just adding some social features now. works beautifully, although there's a gigantic mess when loading sprite sheets (1 for normal, 1 for retina and 1 for iPad HD). what you're suggesting should really help :)

actually - just crossed my mind - if you can easily modify utils to automatically load @2x, then maybe same could be done for ipad ? menu@ipad.png for example

Posted 1 year ago #
riq
Key Master

@mikeSz: Ideally CCFileUtils should emulate the iOS behavior. I can't find the documentation right now, but I think the format for iPhone and iPad images is something like this:
image~ipad.png, image~iphone.png

Posted 1 year ago #
DerekTse
Member

@riq: I think you're talking about this document:
Supporting High-Resolution Screens

And this also helps:
Application Launch Images

Updating Your Image Resource Files

Applications running in iOS 4 should now include two separate files for each image resource. One file provides a standard-resolution version of a given image, and the second provides a high-resolution version of the same image. The naming conventions for each pair of image files is as follows:

Standard: <ImageName><device_modifier>.<filename_extension>
High resolution: <ImageName>@2x<device_modifier>.<filename_extension>
The <ImageName> and <filename_extension> portions of each name specify the usual name and extension for the file. The <device_modifier> portion is optional and contains either the string ~ipad or ~iphone. You include one of these modifiers when you want to specify different versions of an image for iPad and iPhone. The inclusion of the @2x modifier for the high-resolution image is new and lets the system know that the image is the high-resolution variant of the standard image.

Important: When creating high-resolution versions of your images, place the new versions in the same location in your application bundle as the original.

Posted 1 year ago #
idsky
Member

Can you set the OS to NOT scale everything? I was hoping to work with a 640x960 window on iPhone4 -- I could just use my iPad code but trim some of my margin spacing. I don't want to say 0.5 when I mean 1 pixel. Way too likely to get ugly off-by-1-pixel rounding errors.

If it were just scaling I can see the point but if handling aspect ratio as well in a universal iPhone/iPad app, I'd rather do layout and scaling myself. I guess it will make more sense when they release a 2x HD iPad.

Posted 1 year ago #
Matt Rix
Member

Hey Riq, I think using CCFileUtils is a great idea, and perhaps if an @2x graphic isn't available, it should fall back to the normal file.

Also, regarding points vs. pixels, I definitely think everything should be in points. That's the way Apple does it, and that way it makes it really easy to support 1x and 2x devices. I think the idea of having a macro to check it quickly is also a good idea.

There's been a bunch of feedback on my blog post and even this thread, so I know this is something people want, it'd be awesome if it could become officially supported somehow :)

Posted 1 year ago #
mrTortex
Member

One thing, I have an iPad and I'm buying my new iPhone 4 tomorrow. So I'll be able to test on HD devices. How can I test it works on an SD device, or do I have to also buy an SD device?

In which case, anyone have a 3rd gen iPod Touch they want to sell cheap :)

Posted 1 year ago #
Matt Rix
Member

mrTortex You could use the simulator, which obviously isn't 100% reliable. The only way to test on all devices is by testing on all devices ;) But seriously, just send some ad-hoc builds to your beta testers, and I'm sure they'll let you know if anything is messed up.

Posted 1 year ago #
itlgames
Moderator

Guys, thanks to @frogblast and @araker I realised there is a possible solution to the blurry images on iPhone 4 when using low resolution images. I understand we should use the retina display whenever we can, but to give 100% backward compatibility to old apps, would be good to have this option. In my case, using pixel art, was too obvious the blurriness.

Check this:

https://devforums.apple.com/message/250025#250025

So it seems that with CALayer.magnificationFilter = kCAFilterNearest and CALayer.contentsRect = CGRectMake(0.0001, 0.0001, 1, 1) we can solve the problem. They recommend to do this only on iPhone 4 devices.

The problem is since yesterday I have been trying to do it but I can't, supposedly those properties should be on the EAGLView, but I can't seem to get it working.

Any ideas?

Posted 1 year ago #
jptsetung
Member

@Matt, tell me if I'm wrong but in your implementation, even in mode iPad x1, we are using the HD graphics ?

When updating a SD game to HD, tell me if I'm wrong but, in both methods (riq or Matt), we should be able to update only the most important graphics (those that looks horrible) and keep the others in SD ?

Posted 1 year ago #
mrTortex
Member

It seems to me this would be a perfect subject for the 1st online IRC meet up? It's very important to so many of us, and we are going around in circles attempting to make it work.

Posted 1 year ago #
itlgames
Moderator

ok, I think it's:

[[Director sharedDirector] openGLView].layer.magnificationFilter = kCAFilterNearest;
[[Director sharedDirector] openGLView].layer.contentsRect = CGRectMake(0.0001, 0.0001, 1, 1);

I haven't tested yet properly on a real iPhone 4, will do soon, but os far on the iPhone 3G builds and runs ok, seems not to be affecting.

Would be good to have a generic solution for all hi-res/low-res situations, including this one, when using low-res sprites on the iPhone 4 (it may help as well on the iPad, not sure)

Posted 1 year ago #
mrTortex
Member

Hello.

I've got this implemented into my game, it runs with no errors. However, it doesn't use the HD graphics, it is using the standard SD visuals but they are teeny. It sure does look good though, the display is incredible. I only got my iPhone 4 yesterday evening, so am still blown away by it. Gotta get this working. :)

But yeah, am I missing something?

Posted 1 year ago #
Matt Rix
Member
When updating a SD game to HD, tell me if I'm wrong but, in both methods (riq or Matt), we should be able to update only the most important graphics (those that looks horrible) and keep the others in SD ?

Right now this requires that you have SD and HD versions of all your graphics, it'd be possible to make it work with either, but you'd have to do some additional checks in CCSprite to make that happen.

However, it doesn't use the HD graphics, it is using the standard SD visuals but they are teeny

Assuming I know what you mean... you have to use the macro that loads the images with the HD suffix when the director's contentScaleFactor is 2.
```
#define GetPNGFileName(__imageName__) (([[CCDirector sharedDirector] contentScaleFactor] == 2) ? [NSString stringWithFormat:@"%@HD.png",__imageName__] : [NSString stringWithFormat:@"%@.png",__imageName__])
```
As Riq suggested, this is something that could be implemented directly into CCFileUtils in the future.
Posted 1 year ago #
slipster216
Moderator

My issue with Matt's solution is that your essentially making a high-res version for the iPad as well, but not getting universal app status from it. I think if we can standardize a solution in Cocos that would be great, but it needs to work as a universal binary as well as a hd/sd solution. Of course, the aspect ratio difference make it hard to make a single, universal solution to this issue..

Posted 1 year ago #
Matt Rix
Member

My issue with Matt's solution is that your essentially making a high-res version for the iPad as well, but not getting universal app status from it

Yeah that was kind of the point :) I mentioned it on this blog post http://struct.ca/2010/retinafy-your-game/ but basically my opinion is that apps marked as universal should be designed specifically for the iPad, not *just* scaled up. That being said, using this solution you can make it a universal app and it'll just look like the 2x zoom mode on the iPad, but without the 1x zoom option.

Posted 1 year ago #
mrTortex
Member

@Matt - I was using the Macro. I created a basic test scene and duplicated the layout of your project, but the HD version of the graphic would simply never get used. I'm on the latest dev seed of Cocos. I updated to the latest iPhone dev set this morning so I'll see if that makes any difference, although I doubt it.

It'll be me :)

Thank you for sharing this.

Posted 1 year ago #
bwilczyn
Member

Haven't got a chance to test it on a device, but my approach for supporting Retina display would be rather to prepare high-res images and then convert it to low-res automatically using a script. I wrote a blog post about it some time ago: http://xperienced.com.pl/blog/supporting-iphone-4-retina-display

Your thoughts?

Posted 1 year ago #
sabshire
Member

@bwilczyn the approach that @matt is trying to achieve is using 2 sets of images like you suggest, but using only a single set of coordinates in the app, so that you don't have to change any existing code. We simply need to create 2 sets of images, and it will get the best images regardless of device, and we code it for a single set of coordinates. Make sense?

Posted 1 year ago #
bwilczyn
Member

@sabshire I thought it is exactly working this way, coordinates are using logical units instead of pixels so regardless a device everything should work in the same way. Am I missing something? :) Thanks in advance for your clarifications.

Posted 1 year ago #
jbishop
Member

@riq: please keep the implementation as close as possible to the iOS solution (@2x for highres & points for positioning).

Using a macro or constant is 'ok' for converting between points and pixels (as with box2d), but shouldn't be required as the norm. I believe the priority should be uniform game code between high and low resolution devices, while allowing the developer the option to provide high resolution resources without altering code or pixel-precise placement only where explicitly desired.

Posted 1 year ago #
finder39
Member

yes, i would like to be able to do it by JUST adding the @2x files to the resources and then nothing else. i mean if possible, i know theres a lot of code behine it :)

my main hope is that we will be able to do some with highres and some with low res so that we dont need to upgrade EVERY picture

Posted 1 year ago #
riq
Key Master

@DerekTse: Thanks. That was the info I was looking for.

@jbishop: Yes. The idea is to support HD and SD images automatically (hooking CCFileUtils) and supporting Points. I'm still thinking if this will break any component.

In the meantime, if someone wants to go ahead with this implementation, I suggest creating a git fork. Please, post your commits in this thread so that we can review it / test it / continue to develop it. Thanks.

Posted 1 year ago #
sabshire
Member

@bwilczyn unfortunately not yet for Cocos2d. That's what we have been discussing. Hopefully we'll be able to get this worked out so we can. It will make everyone's life a lot easier for sure!

Posted 1 year ago #
Matt Rix
Member

Riq, my fork is here: http://github.com/MattRix/cocos2d-iphone/commits/develop

I'm new to Git and GitHub, and I used brute-force with how I changed things(more of a proof-of-concept than a real feature branch), but it works great for me. The number of actual changes that need to be made is really quite small, as you'll see. I haven't done the CCFileUtils thing in this branch. I also got rid of the Mac stuff(for now), because when I pulled it it was still in development, and I just wanted to focus on the Retina stuff without figuring which Cocoa libraries to import ;)

mrTortex: hmm. Try NSLogging the path of the PNG it's trying to grab to see if it's grabbing the right one. If it's not, then it means your contentScaleFactor isn't 2, which means there's probably an issue with how you initialized the Director. You have to get the order exactly the same as the test project or else there's a chance it won't work.

bwilczyn: Although it's a slightly different topic, I like your idea of just making @2x images and then pre-processing them into normal sized images, I think having a little script like that will be handy.

Posted 1 year ago #
mrTortex
Member

@Matt Rix: I got it working, it turned out Preview was saving PNG files that the device simply doesn't like. Loading and saving from Photoshop fixed the problem.

Posted 1 year ago #
bwilczyn
Member

@sabshire Got it, thanks. I thought it's working the same as in UIKit. Now it's clear. I keep my fingers crossed for having this implemented consistently in cocos2d.

Posted 1 year ago #
mrTortex
Member

OK, it's working on my IPhone 4 but not on my iPad. iPad starts to load, then displays a black screen.

Also, I have HD graphics loading, but to get them into position uses different figures from the 320x480 (landscape) project that I was working on first. So the loading is working, but the placement isn't.

An example, first up we have a screen cap of a 320x480 landscape project, this is not using your code.

Now, here is a project using your code, this is grabbed from an iPhone 4. It's loading the HD visuals, which is great, but the positioning is incorrect.

I'm using the exact same coordinates, which I believe is correct?

Posted 1 year ago #
riq
Key Master

@Matt-Rix: Thanks. I'll take a look at your repository.

Posted 1 year ago #
Matt Rix
Member

mrTortex: what are you using to do this? Did you grab my branch from github or use my sample project?

If your app is landscape, make sure you make this landscape fix(it's just changing one variable): http://github.com/MattRix/cocos2d-iphone/commit/521ab51667fd9761eba476ce11a43ba2fa6e7348

I'm not totally sure what is making it show up, so I guess it could be that landscape thing, although it might be something else.

Posted 1 year ago #
idsky
Member

The @2x trick is great for iPhone/iPod but what about universal apps? I want to use my "2x" graphics on iPad, not the low-res images. I don't have a whole lot of graphics so I'm only doing one universal target.

I guess it'd be OK to have an iPad special case and manually specify the @2x extension. If an HD iPad comes along I guess it'll look for a @2x@2x file.

Posted 1 year ago #

RSS feed for this topic

« Previous 1 234…7 Next »

Reply »

You must log in to post.