★ TouchArcade needs your help. Click here to support us on Patreon.

How difficult it is to switch to Retina Graphics?

09-28-2010, 07:22 PM
#1
Joined: Aug 2010
Posts: 207
How difficult it is to switch to Retina Graphics?

Hello everyone!

I've just assembled a team to start our first project for the iPhone!
We have experience in game making (in all areas) but are new to the iOS platform. So we kinda have a few doubts about the whole thing. Some of them are quite the newbie ones! :-P

My biggest concern is about the retina display right now. We are in the process of getting an iPhone 4, but due to shipping (I'm not in the US) it may take a while for us to get it.

My question is: How difficult it is to build a game with support for the retina display? Should we start building the game with the common resolution, then perform the necessary changes to add the retina display?

I suspect this may be simple as several games have been updated to take these advantages, but I'm not a developer so I figured I should ask.

Thanks in advance!
09-28-2010, 07:31 PM
#2
Joined: Dec 2009
Location: Montreal
Posts: 2,013
I'm not a developer, so don't take my word for this. But from my experience, it's a lot easier to reduce the quality of something (whether it's sound quality, image quality or video quality) than to increase it. Hell, it's pretty much impossible to increase the quality of something.

Most 2D games are just images. The menu, menu buttons, etc are just images. So I think most devs generally just make a very large image, then just resize it accordingly. I'm not exactly sure how 3D games work, but yea :P

Personally, I wouldn't aim for a specific resolution. I would make the image as big as possible because there will always be a better retina display.

09-28-2010, 07:42 PM
#3
Joined: Dec 2008
Location: Sacramento, CA
Posts: 4,568
Well I know Vector images can be infinitely scaled and they won't show pixels and can be resized to whatever you want.

See this image:



So maybe that's a possibility of not having to worry about it? But I have no idea if that's possible.
09-28-2010, 07:59 PM
#4
Joined: Aug 2010
Posts: 207
Hey guys! Thanks for the quick feedback!

Just for the record, we are of course developing the art on the retina resolution - even bigger, to make sure the quality will be kept should we decided to port it to whatever system we desire.

My questions are more related to the programming part of it - how easy it is to change your game code and switch the non-retina to retina textures.
09-28-2010, 08:08 PM
#5
Quote:
Originally Posted by gammabeam View Post
Hey guys! Thanks for the quick feedback!

Just for the record, we are of course developing the art on the retina resolution - even bigger, to make sure the quality will be kept should we decided to port it to whatever system we desire.

My questions are more related to the programming part of it - how easy it is to change your game code and switch the non-retina to retina textures.
It's very easy to include retina graphics. You can have 1 set for normal displays, and then a 2nd set with "@2x" attached to the end of the filename. It will automatically used the higher res images when they are available. It's really that simple! It just doubles the size of your app, unless you choose to write some code to scale down for older devices. Since you're starting a new app, you could go either way, but if you already have an app developed, I'd think it would be easier to do the @2x method.

I make games at PixelCUBE Studios! Follow me @naveen_pcs
09-28-2010, 08:42 PM
#6
Joined: May 2009
Location: Rochester Hills, MI
Posts: 17
Quote:
Originally Posted by simplymuzik3 View Post
It's very easy to include retina graphics. You can have 1 set for normal displays, and then a 2nd set with "@2x" attached to the end of the filename. It will automatically used the higher res images when they are available. It's really that simple! It just doubles the size of your app, unless you choose to write some code to scale down for older devices. Since you're starting a new app, you could go either way, but if you already have an app developed, I'd think it would be easier to do the @2x method.
Here's code you can use in your UIView code to switch to the 2x OpenGL graphics on devices that support it. It might look intense, but the gobbledy-gook is to have devices older than 4.0 run it without crashing (if you're into that sort of thing):

Code:
// Check if we can actually support high resolution screens, and set things up accordingly
SEL scaleSelector = NSSelectorFromString(@"scale");
SEL setContentScaleSelector = NSSelectorFromString(@"setContentScaleFactor:");
SEL getContentScaleSelector = NSSelectorFromString(@"contentScaleFactor");
if ([self respondsToSelector: getContentScaleSelector] && [self respondsToSelector: setContentScaleSelector])
{
	// Get the screen scale
	float screenScale = 1.0f;
	NSMethodSignature *scaleSignature = [UIScreen instanceMethodSignatureForSelector: scaleSelector];
	NSInvocation *scaleInvocation = [NSInvocation invocationWithMethodSignature: scaleSignature];
	[scaleInvocation setTarget: [UIScreen mainScreen]];
	[scaleInvocation setSelector: scaleSelector];
	[scaleInvocation invoke];
		
	NSInteger returnLength = [[scaleInvocation methodSignature] methodReturnLength];
	if (returnLength == sizeof(float))
		[scaleInvocation getReturnValue: &screenScale];
		
	// Set the content scale factor
	typedef void (*CC_CONTENT_SCALE)(id, SEL, float);
	CC_CONTENT_SCALE method = (CC_CONTENT_SCALE) [self methodForSelector: setContentScaleSelector];
	method(self, setContentScaleSelector, screenScale);	
}

GaiamarkGames.com
Art of Deflection - $0.99
09-28-2010, 08:47 PM
#7
If you use glviewport and glortho, make sure those values are correct for the higher res screens. Took me a while to figure out why just changing content scale didn't do anything for me.
09-28-2010, 09:33 PM
#8
Joined: Mar 2009
Location: Canada
Posts: 1,079
All you need to do in your UIView / EAGLView is this:

self.contentScaleFactor = 2.0f;

That tells Quartz to use 2 screen pixels for each point. Any NSImages will use "@2x" pngs automatically. The only other thing to remember is to do glViewport(0,0,640,960) after you've set your rendering context (if your app is OpenGL).

😈
09-30-2010, 10:00 AM
#9
A lot will depend on the type of game you are creating. If you go 2d I would recommend using the cocos2d library. It is free and widely supported and the latest beta uses points instead if pixels to specify placement making it much easier to code for retina and older devices. The @x2 technique is a bit of a hack and is not going to run well in my experience.

If you are going 3d I would seriously look at the unity 3D engine. It's cross platform and there is a free limited version to get you started. I figure 3d is a challenge without an experienced team so my current project is 2d only.

Good luck!
09-30-2010, 12:50 PM
#10
Joined: Sep 2009
Location: Vancouver, Canada
Posts: 977
Send a message via MSN to MindJuice Send a message via Skype™ to MindJuice
If your game is using UIImages instead of OpenGL, then all you need to do is add @2x versions of all your images to the project and things will "just work" on iPhone 4 and iPod touch.

If you have an image called spaceship.png, then you just add spaceship@2x.png to the project. Do the same for all image.

That is what I did for my puzzle game, Charmed, and it worked perfectly (the retina graphics update is "In Review" with Apple right now).

It will also let you use a combination of normal and @2x graphics. If there is an @2x image, it gets loaded instead. If there is no @2x version, then it loads the original image and scales it.

This is handy, because I was able to upgrade the graphics one by one and test that everything switched over cleanly.

Last edited by MindJuice; 09-30-2010 at 05:40 PM. Reason: Added example of @2x filename.