Design resolution of 256x144: How to get sharp pixels?

cocos2d-x C++
#1

Hi everyone!

I want to make a game with a design resolution of about 256px width and 144px height. I have sprites at sizes like 16x16 pixels, and my main font is at size 8px.
Of course I still want it to fill the whole screen on for example an iPad, and not be a small frame in the middle. I would like to have the pixels as sharp squares on the screen, making full use of the device’s resolution.

What would be the best way to achieve this? I’ve tried setting this resolution in the “HelloCpp” project, and the contentScaleFactor was 8 (which seems correct). The first problem was that I had to set my CCLabelBMFont’s scale to 8 (by hand) to make the font the right size…Otherwise it would be really really small. And the upscaling was really blurry. I would like simple nearest-neighbor interpolation: One of my design pixels should become a crisp 8x8 square on the device. Is it possible? :slight_smile: I don’t want to scale all my assets up by *8 for many reasons…

I’m using cocos2d-x v2.2.3 and tested this on OSX.

#2

First, you should try the setAliasTexParameters() method in CCTexture2D.

I don’t think there is a global way to disable anti-aliasing (I’m almost certain it’s on by default), but you could probably modify CCTexture2d or CCTextureCache so that all your textures are aliased by default.

For the CCLabelBMFont, you want to check that there is only a 1 bit alpha channel (or put in another term, the transparency must be either 0 or 100%, not anything in-between) in your spritesheet.

Last, try to see if there are some OpenGL global functions that work better. A good place to try them is in CCDirector::setGLDefaultValues.

#3

You could render your game to a 256x144 texture,
and stretch that to fill the entire screen (with anti-aliasing disabled / nearest-neighbour filtering on)

#4

Okay, thank you! I got rid of the aliasing by modifying CCTexture2D::initWithData around line 212-213 so it calls glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST ); instead of GL_LINEAR. The same for MAG_FILTER. Now CCSprites and the CCLabelBMFont is aliased and sharp.

I still have to call setScale, though…I don’t want to do this because it changes the coordinates. If I write:

CCDirector::sharedDirector()->getVisibleOrigin().x + CCDirector::sharedDirector()->getVisibleSize().width - 1

It should be one square to the left of the screen’s right border.

Sorry if that’s a beginner question…

#5

bump