Tag Archives: opengl

Retina Display, Open GL, and You!

Over the long weekend, I took some time to code support for the iPad and iPhone 4’s Retina Display into Red Nova. It was a fairly painless process, after Paul Pridham pointed me in the right direction.

If you are using OpenGL for your app on the iPhone and are using an Orthographic projection for your 2D bits, you shouldn’t have to change much of your code to get it “Retina Ready”.

Setting the View Scale Factor

First, your Open GL View class if you add the following in your init code it will tell the OS that you want to display your graphics at 960×640:

if([[UIScreen mainScreen] respondsToSelector: NSSelectorFromString(@"scale")])
{
	if([self respondsToSelector: NSSelectorFromString(@"contentScaleFactor")])
	{
		self.contentScaleFactor = [[UIScreen mainScreen] scale];
	}
}

If you run your app at this point you should see the content running in the corner of the screen because your GL viewport is still running at 480×320. So that brings us to…

Setting up the Open GL Viewport

Note: If you haven’t already you may want to make a wrapper function that returns the current device scale factor. I did and it’s very useful in code that needs to properly deal with displaying your graphics at the right size.

Anyway, this is the next and pretty much final step.

Find your call to glViewport, and modify it thusly:

glViewport(0,0,usefulGetScreenWidthHelper()*usefulGetScreenScaleHelper(),
	usefulGetScreenHeightHelper()*usefulGetScreenScaleHelper());

Obviously change the width and the height to correspond to your app’s layout.

If the rest of your code sets up your projections (2D and 3D) based on 480×320, when you compile and run your app you should get glorious retina display goodness! You will of course have to adjust your 2D bitmapped assets (fonts and images) to reflect the higher resolution of the display, but the end result is that your app thinks in 480×320 (this is how Apple manages it with Cocoa Touch, as far as I can tell, amusingly enough) but displays at 960×640!

GameFontMaker

GameFontMaker Icon

GameFontMaker

July 9th Update: GamefontMaker is now at 1.0.0 beta 2 and it’s also been released under the GPLv2. You can find the latest version and source over here!

It’s been a while since I’ve posted anything to the blog, so I figured I’d do something a bit special to try and get into the swing of things. So, I present to you what I think may be the first native Cocoa bitmap font creation tool for games, GameFontMaker!

At least, I think it is… Maybe… I didn’t do a lot of research, but I have seen a lot of fellow iOS devs wishing something like this existed for OS X, as the only other alternative runs under Windows.

Even if it isn’t, I was getting sick and tired of my really awful bitmap font creation tool that used FTGL, SDL and duct tape and generally produced hideous bitmaps without a lot of fudging of numbers. This is much, much better than that.

Anyway, GameFontMaker is currently in “beta” so don’t come crying to me if your computer explodes or anything. Though in my defense it hasn’t caused my MacBook to explode, and it was way less stable when I started it about 12 hours ago!

This is also my first Cocoa app, so forgive me if it’s a bit rough around the edges.

That being said, if you do find a bug or have a suggestion you could always drop me an email at: colin[at]celsiusgs[dot]com.

So, you’re itching to create some decent bitmap fonts for your game? Well, GameFontMaker is pretty easy to use. From the main window:

GameFontMaker Main Window

GameFontMaker Main Window

You can select the font by clicking on the “Fonts” toolbar button, doing so updates the preview. Once you’re satisfied with your selection, click “Export Font” which opens a file dialog. Choose the file name here, it will automatically choose a .png extension. Once you make sure you’re not overwriting an important system file or your taxes or what have you, click “Save”. This will invoke an ancient spell designed to end the world (and generate fonts) and will cause GFM to spit out a PNG file with all the printable ASCII characters in a line, also it will produce <filename>.png.xml which is an XML file that describes all the character dimensions. It has the following format:

<?xml version="1.0"?>
<fontdata>
	<glyph>
		<character> </character>
		<width>7</width>
		<height>25</height>
		<offset>0</offset>
	</glyph>
...
</fontdata>

Right now the output isn’t ideal for using directly as a texture atlas, but hopefully the PNG plus the XML file can be put to some good use. Once I get some more time I will add support for defining the PNG size and altering the XML output.

Anyway, GameFontMaker is free to use for all sorts of purposes, however if you do find it useful you could always have a look at my games or maybe follow me on The Twitters. Enjoy!