How difficult it is to switch to Retina Graphics?

Discussion in 'Public Game Developers Forum' started by gammabeam, Sep 29, 2010.

  1. gammabeam

    gammabeam Well-Known Member

    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!
  2. ChrisL

    ChrisL Well-Known Member

    Dec 12, 2009
    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.
  3. Zincous

    Zincous Well-Known Member

    Dec 23, 2008
    Sacramento, CA
    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.
  4. gammabeam

    gammabeam Well-Known Member

    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.
  5. simplymuzik3

    simplymuzik3 Well-Known Member

    Aug 12, 2009
    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.
  6. 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):

    // 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);	
  7. MrBlue

    MrBlue Well-Known Member

    Sep 3, 2008
    iPhone Developer
    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.
  8. sticktron

    sticktron Well-Known Member

    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).
  9. Beyondtool

    Beyondtool Active Member

    Sep 30, 2010
    Games developer
    Gold Coast
    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!
  10. #10 MindJuice, Sep 30, 2010
    Last edited: Sep 30, 2010
    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.
  11. TapMeJared

    TapMeJared Member

    May 6, 2010
    Business Development / Producer
    Chicago, IL
    we did exactly what mindjuice suggested, and it works perfectly
  12. sticktron

    sticktron Well-Known Member

    In conclusion, Apple has made it dead simple for devs to add Retina support.

    Any OpenGL games require two lines of code to enable 960x640 rendering. Thats it.

    2D games require re-exported images, but even doing a Photoshop bicubic resize batch job will result in better-than-default quality.

    The question becomes, devs what's your excuse?
  13. mr.Ugly

    mr.Ugly Well-Known Member

    Dec 1, 2009
    Berlin, Germany
    #13 mr.Ugly, Oct 4, 2010
    Last edited: Oct 4, 2010

    LOL, yeah.. bicubic resize.. definatly the way to go.. and then even using a 1000$ app todo it.. yes!
    sadly you can't just download an ipad like one can warez photoshop right..

    any opengl game needs just 2 additional lines of code riight.. that would push the complete code length to 4 lines! thats crazy , thats like 50% more work..

    devs should just press the little button in xcode "create great game"
    and put their stuff on the appstore asap.

    well one thing one can't do anything about is stupid customers..
    sadly apple does not have an approval process for them

    at the end you answered your questions yourself already. over and over.
  14. sticktron

    sticktron Well-Known Member

    I don't understand your post.

    1. Bicubic resizing is available free I you want using say imagemajick. The point was it's a fast way to improve your assets if you don't have large masters.

    2. Switching to retina graphics in an OpenGL app *is* only two lines of code (one to set the scale factor of the CAEAGLLayer, one to increase the viewport size).

    Don't speak for developers if you clearly have no experience on the subject.

    PS: retinasizing is so easy, I've written a tweak to retinsize games for people tired of waiting for older games to be updated. If I can do it afterwards, trust me I know how easy it is to before compiling.
  15. mr.Ugly

    mr.Ugly Well-Known Member

    Dec 1, 2009
    Berlin, Germany
    #15 mr.Ugly, Oct 5, 2010
    Last edited: Oct 5, 2010
    blowing up youre assets does not improve them at all..

    i don't have any experience, only 10 years of developing fullprice retail pc games that is..

    just changing youre resolution output doesnt make a game retina compatible. naive people might think thats all you need and this IS
    ill information on youre side

    if i render 4x times the pixel there are alot of things to be considered

    how is my performance, how does my game look with low res textures etc.
    rendered in higher resolution, does everything go well with my gui, what happens to hardcoded transitions etc. etc.
    what you say is rubbish, sure you can change the rendering resolution so what?! if youre game is optimized for 480*320 this does not mean thats all the work to be done.
    and i neglect youre comment on bicubic resize, thats one of the worst things one can make to his art. if you want to resize it that way you can leave retina optimization out for good..makes no big difference anyway on a 3,5" screen if you don't do it right, especialy for 3d games with rich gfx

    most older games won't be updated.. and your great results can be seen
    in youre thread.. wow you upped the resolution. now go and redo all other assets of the game to be a true retina update.

    at the end if can even look worser than before because if you upp the resolutions low poly assets are clearer and more visible, looking edgyier(sp?) than before

    it shows you lack any quality of judging the work that needs to be done to offer an !!! QUALITY !!! retina support. its not just 2 line of code and a higher rendering resolution output.. that defines a retina game.

    i do NOT want such cheap ass hacks that leave me unsatisfied with blurry textures, wonky performance and an unpolished feel to it..

    if you are a cheap and feel thats enough for you, go ahead continue to meddle around with if, feel free todo so.. i as a developer put higher standards to my work than to devliver such an cheap hack and call it retina support. i would be embarrased to offer such crap to my customers.

    quality is always work, there is no magical button for that.
  16. GlennX

    GlennX Well-Known Member

    May 10, 2009
    My 'excuse' is that the GL1.1 emulation is pretty bad. When I run Ground Effect at iPad resolution the frame rate drops to 13 FPS. Retina would probably not be quite so bad but still not a two line change.

    I could have just dropped the fog and shoved out an update but I think it lost a lot of atmosphere. Instead I've done a massive rewrite to support GLES2.0 and will be releasing a new 'universal' version with some cool shaders that will run on all capable devices, not only iPad and Retina but also cool shaders (probably antialised) on 3gs/iPod3g.

    My only problem is what to call it? 'HD' makes no sense.
  17. sticktron

    sticktron Well-Known Member

    Here's how it works in iOS 4.x (I have no PC OpenGL experience):

    All drawing units are virtual points, not pixels. All OpenGL views are backed by a special CoreAnimation layer called a CAEAGLLayer. This layer has a property that holds a scale factor. When OpenGL buffers are created, they are sized based on the view's bounds (480x320) multiplied by the layer's scale factor. When you set your OpenGL viewport to 960x640 you get fullscreen native resolution output.

    If you don't increase the scale factor, the OpenGL output will be scaled by Quartz to fill 960x640. This resizing is low quality and gives a blurred, blocky image.

    The translation between points and screen pixels is handled by the OS. As is loading hi-res bitmaps automatically for NSImages. Many games will "just work" after setting the proper scale and viewport size. Some apps will obviously need a bit more tinkering, but you would be surprised how good the results are. Your artwork is being scaled by OpenGL instead of Quartz, so it's getting the bicubic treatment to begin with.

    Examples of games that render correctly "automagically" after setting scale and viewport: Pro Evolution Soccer 2010, Zombie Infection, F.A.S.T., etc. (games I overrode in memory to set scale factors).

    PS: I brought up offline resizing because you can finely control the resulting product to increase quality over the base (eg. a DVD blown up to 1920x1080 via a lanczos resize looks better than your TV/DVDs built in scaling). I was only suggesting it in the case of creating double-sized retina assets for NSImages if you don't have larger masters to work with.
  18. sticktron

    sticktron Well-Known Member

    Glenn you are the kind of developer who doesn't need an excuse. You did the requisite work to examine the feasibility of retinasizing.

    Also my Retinasizer project is number one: for me to enjoy my favorite non-retina games in hd, and two: to bring awareness to the fact that investing in a retina update may be alot more feasible than they thought.

    If PES works perfectly, and looks amazing with 5 minutes of effort, then I think it's jmportant people know that.
  19. mr.Ugly

    mr.Ugly Well-Known Member

    Dec 1, 2009
    Berlin, Germany
    but its only pes

    in your own thread you wrote you have performance issues with zombie infection..

    did you test the complete game.. did you check every corner of the game inclusive intensive bossfights to see if the desired performance is still avaiable? did you invest time and money to evaluate what is needed to get
    the same gameplay experience as in low res?

    no,you did not..

    you generalize with sloppy tag lines and can create the illusion to the already
    dumb mass thats everything is easy "hey two lines"... where it is NOT!

    jeez people are already complaining why their 99cent game is not the next halo3 or gears of war, ridiculous

    and then ,wow you've found a few games where it might be easy, so what youre thread by yourself shows that there is more lingering than just 2 lines of code

    GlennX also just showed you on tiny fraction of what work it can be to create a retina version.

    there is NO general easy way to create retina version of all OGL games.
    if anyone states this , he is lying. there is more to a game than just the resolution you render it at. if you create a game you need to think about 3 generations of hardware if you go iphone only

    our current game in production is a bastard child which had the bad luck to be in the middle of production when the new specs of the iphone4 came out.
    we didn't plan for high resolution neither did we have all assets in high resolution to start with.
    we made a stable beta of the low res version , created the support for retina resolution on newer devices and have not yet created all content in hd. its now over a month for the additional art creation and i see another month coming before we are finished. this is a huge delay for a tiny fraction of customers we are doing.

    this IS alot of work and i dislike it if people generalize the work thats needed to make "old" games support the retina devices PROPERLY!
  20. CommanderData

    CommanderData Well-Known Member
    Patreon Indie

    Actually this is incorrect, or at least incomplete information. You can change the quality of and type of scaling done to your frame by changing the CAEAGLLayer.magnificationFilter. It defaults to kCAFilterLinear scaling, but you can choose kCAFilterTrilinear filtering for enhanced results.

    You can also choose kCAFilterNearest if you want to maintain the hard, blocky style of pixel art like I do in my upcoming game (there's a catch however, continue reading)...

    If you've played a pure pixel art game on an iPhone 4 you might have noticed the soft and fuzzy feel to most of them. Turns out iOS 4 has a bug that prevents kCAFilterNearest from doing what you want unless you trick it with a funny contentsrect for your CAEAGLLayer like (0.0001, 0.0001, 1, 1). Only then will it render the sharp edged sprites exactly as you'd see on 3rd gen and lower devices. Apple is aware of the issue, but I don't believe its been fixed yet in the public 4.1 or new beta (thought I haven't tried my code on either one yet).

    The takeaway here is pretty much what these other guys are arguing. Changing a couple of lines of code does not make a *quality* retina enabled game. To do that requires far greater investments of time/effort and money.

Share This Page