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

Retina Display and Pixel Art (Bitmap) Graphics

12-17-2010, 09:17 AM
#1
Joined: Dec 2010
Posts: 55
Retina Display and Pixel Art (Bitmap) Graphics

Hello all,

I'm a new developer and I am currently developing a 2D RPG (turn-based with touch controls specific for the iPhone). The graphics style I decided to go with is the classic SNES, zelda-like ones.

My question is how do I make these images retina display compatible. Do the sprites need to be hi-res themselves or is there something I must do in terms of programming and can keep my 16-bit sprites?

Also, as I have never tried a 2D game (such as queen's crown or illusia or zenonia) with an iPhone 4, what do these games look like? and is it even possible to get Retina Display on these types of games (although I believe it is)?

Thank you in advance for all your replies.
12-17-2010, 10:04 AM
#2
Well, I know a thing or two about this topic

Rule #1 should be "know your enemy/market"... Even if you've made this style of game before, your first task should be to download and try out the competition. It will give you a feel for what can be done, what people like, what sells well, and you might just enjoy yourself too.

As far as retina display goes, stick with the standard OpenGL framebuffer that you would create for older devices (320x480). The OS will scale it automatically to fill 4th generation screens. With that said, hard lined Pixel-Art has a bit of a problem with upscaling bugs in iOS. This bug makes the game a bit "blurry" or excessively smoothed, as though you applied a filter to it in PhotoShop. I have talked about the cause and solution in this forum a few times, details here:

Quote:
Originally Posted by CommanderData View Post
This is actually the truth. I am very surprised no one else mentioned and noticed this.

Any game using OpenGL and will look smoothed over and lightly blurred on the iPhone 4 (and now the iPod Touch 4). Games that use CoreGraphics/Quartz drawing are unaffected.

This blur/smoothing is easiest to see with a "Pixel Art" game, such as my upcoming Spirit Hunter Mineko, where I discovered the problem. Ideally with pixel art you want hard lines and well defined dots. Mineko looked great on my 3GS, but once my iPhone 4 arrived, it almost looked out of focus despite the screen being so amazing!

It is a bug in handling of EAGL layers in iOS 4. I have found a work-around to kill that smoothing filter and get crisp graphics back. Apple is aware of the problem, but as far as I know it has not been fixed in 4.1... Also not fixed in 4.1 is the crippling slow CGContext draw speed that was introduced in iOS 4. Being a developer is tough when you have to keep jumping through hoops to compensate for bugs in the operating system

Quote:
Originally Posted by CommanderData View Post
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.
Both of these posts were made a number of months ago, but the bug and solution are still necessary even today with iOS 4.2 if you want crisp pixel art upscaling on an iPhone 4 or iPod Touch 4th Gen.

Note that forum member "itlgames" has used this technique in one of his games, and it has a nasty side effect of reversing/mirroring the graphics in his iPad version while keeping the touch mapping normal, which breaks gameplay in his case. Gotchas are everywhere. Hopefully Apple will fix the base issue so the workarounds above are no longer needed, but I'm not holding my breath because they have been around since the original betas for 4.0

--- ChronoSoft ---
Support your roguelikes! Play Rogue Touch today!
Spirit Hunter Mineko: Demons Reach --- Work in progress! Follow us on Twitter!
12-17-2010, 12:36 PM
#3
Joined: Dec 2010
Posts: 55
Thank you CommanderData, I was hoping you would reply and I read your posts about the bug before posting as well. The issue I'm having is deciding what resolution to start with 320 x 480 or make hi-res sprites and have them scaled down. The hi-res sprite I'm talking about is the Nighthawk from here: (http://blogs.capcomusa.com/blogs/dig...9/p349#more349) bottom of the site.

I would obviously need to do a ton of work as I'm a 1 man army, apart from a Sound Engineer that is working with me (thank God that part is getting handled). Also, as the bug exists, if a Hi-res sprite is scaled down rather than the low-res scaled up, can it help with the bug (is there a workaround)? The workaround you describe inverts controls and I don't need that to happen either. If not then the game just looks blurry on the iPhone 4 and there's no way to get it sharp?

Obviously the amount of work doing a hi-res sprite is tremendous especially as the world I wish to create is going to be top down for ingame and Final Fantasy-like in battle (character side vs monster side).

Thanks for your reply CommanderData (spirit hunter looks nice) and anyone else that can comment. Thank you also.

P.S. I just want to know what I should get myself into before I start doing the graphics (less re-doing this way)!
12-17-2010, 02:25 PM
#4
Honestly, if you have not started on graphics yet, you would probably be better off doing high resolution sprites and scaling them down for older devices. Then you can define an OpenGL area at 640x960 and draw them full size on 4th generation hardware and avoid the scaling bug completely, and then draw stuff half size on old devices.

I would go that way if I was starting fresh now. Unfortunately I had 6 months of artwork done and paid for before I saw the screen specs of 4th generation hardware. Too late for me, so I will adapt in any way I can

--- ChronoSoft ---
Support your roguelikes! Play Rogue Touch today!
Spirit Hunter Mineko: Demons Reach --- Work in progress! Follow us on Twitter!
12-17-2010, 02:34 PM
#5
Joined: Dec 2010
Posts: 55
Thanks, I will go that route then. Do you have an idea how this could work out for the iPad, if i decide to make my game run on it as the resolution is a whole new ballgame on it (1024-by-768-pixel resolution at 132 pixels per inch (ppi)).