Sprites are blurred

cocos2d-x C++
#1

Hello friends,

I have a problem with rendering CCSprite sprite :slight_smile:
I noticed that some of my sprites are blurred. It is more visible on device. But I found out, that if the sprite is near the center of the display it is perfect. So blurred are only sprites that are near to edges.

I tried find information about this, but I found only one suggestion for cocos2d-iphone - it’s autoscale parameter of CCDirector::init() method. But there is no such parameter in cocos2d-x.

Any suggestions?

Thank you very much.

Swap

#2

cocos2d-x has its autoscale mechanism, and it’s different between platforms. ( A little ugly, I admit, aha).
A wiki page is here: [[How does cocos2d-x support multi-resolution]]
You situation hasn’t been reported before, so a screenshot or a photo would explain this stuff better. And an unit test, simply hack helloworld to reproduce this bug will be highly recommended!

#3

Hello,
thanks for answer.

I’ve added the test project (simple with 5 sprites) and two screenshots from the simulator.

It is rather different that I wrote before, because now are blurred sprites in the center (the second image). Zoom the screenshot to perfect view of the defect.
The first image is different. There are blurred sprites at the top and the bottom. Centered one is quite good but not perfect.

I was testing only on ios platform without retina display enabled. I used template from cocos2d-x. I am using XCode4.

Swap

#4

I am tracing this bug, but haven’t resolved it.
The bad thing is that, cocos2d-iphone has the same problem. cocos2d-x inherit this bug.

I use cocos2d-iphone 1.0.0-rc3. and translate your code to

#define WIDTH 320
#define HEIGHT 480

CCSprite* sprite1 = [CCSprite spriteWithFile:@"something.png"];
sprite1.position = ccp(WIDTH/2, HEIGHT/2);
[self addChild:sprite1];

CCSprite* sprite2 = [CCSprite spriteWithFile:@"something.png"];
sprite2.position = ccp(WIDTH/2,HEIGHT/4);
[self addChild:sprite2];

CCSprite* sprite3 = [CCSprite spriteWithFile:@"something.png"];
sprite3.position = ccp(WIDTH/2,HEIGHT/4*3);
[self addChild:sprite3];

CCSprite* sprite4 = [CCSprite spriteWithFile:@"something.png"];
sprite4.position = ccp(WIDTH/4,HEIGHT/2);
[self addChild:sprite4];

CCSprite* sprite5 = [CCSprite spriteWithFile:@"something.png"];
sprite5.position = ccp(WIDTH/4*3, HEIGHT/4);
[self addChild:sprite5];

No matter running on iphone3 simulator or ipad simulator, it looks the same as your tiff pictures.
I run it on iphone4, and get the screenshot

#5

Hello,

do you have any solution to workaround the problem? I do not understand that anybody does not find the same problems before. The behaviour seems to be random :frowning:

Thanks.

Swap

#6

Hi, Jiri, I just learn this from Riq.

  1. edit ccConfig.h
  2. #define CC_COCOSNODE_RENDER_SUBPIXEL 0

This will work for you. Have a try!

#7

Hello,
thanks fo reply. But I think that there is no effect setting CC_COCOSNODE_RENDER_SUBPIXEL to 0 :frowning:

Swap

#8

oops, :frowning: too

#9

One of my friend met the same problem, and he told me CCDirector::sharedDirector()->setProjection(kCCDirectorProjection2D) will fix this, while the default setting is kCCDirectorProjection3D.

#10

Hello,
thank you very much. It works perfectly now!:slight_smile:

#11

Hi, sorry to resuscitate this thread, but I think that

CCDirector::sharedDirector()->setProjection(kCCDirectorProjection2D

only works if the sprite in pixels are even? odd sizes give me blurred images.
I’m doing something wrong? I am using a RenderTexture and sprites from a big texture map.
Thanks!

#12

This is happening on HD for me. The fixes above may help, and try this: add 0.5 or some similar between-1-and-0 value. This is a known issue with the iPhone trying to render halfway between pixels, not just OpenGL. The iOS manuals may provide some help, but I don’t think they’ll provide much for you. In the meantime, try to figure out where/why it’s doing the half-pixel thingy and adjust the scale/width/size

#13

Hi guys!
i have a same problem, I have setup resolution to 768x1280 in AppDelegate.cpp and create a Sprite with a HD PNG file size is 768x1280, but when i deploy my game to device with screen resolution 768x1280, these Sprite look very bad with lowly quality image.

Image in my design:

Image in my device:

My code in AppDelegate.cpp

// Set the design resolution
cocos2d::Size designResolutionSize = cocos2d::Size(768, 1280); 
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);

Please tell me some way or how to fix it ! Thanks you so much.

#14

Did you solve it? I’ve tried to setProjection but it doesn’t help. Still getting poor graphic rendered after using setScale or setContentSize

#15

@tomsawyer Please try with the following -

Director::getInstance()::setContentScaleFactor(value);

By default, the content scale factor of the director is internally set to 1(one) by cocos2d-x.In the above code snippet you can vary the value to be lesser than 1 or greater than 1.A value greater than 1 indicates a zoom-out whereas a value lesser than 1 indicates a zoom-in.A value of 1 indicates equal zoom-in and zoom-out.

#16

@Alwyn I already have setContentScaleFactor = 2. It doesn’t work that way.
I’ve tested with many image sizes, it only look better when the image size is closer to the setContentSize value.

setContentSize 512x512 → 32x32 (bad quality)

setContentSize 64x64 → 32x32 (good quality)

#17

You are setting content size of the sprite explicitly?

#18

Which device/resolutions are you targeting to build this game?

#19

@Alwyn I target all screen resolutions. So i need to set sprite size depend on the screen size.
Android devices has many screen resolutions, right?

Ie: Sprite size is equal to screen width * 0.1.

I’m testing on iPhone 7. screen size 640 x 1136 - scale factor = 2. And in this case, i need to draw sprite with size = 640*0.1 = 64x64 = 32x32 (after scaling)

setContentSize gives poor graphic?

#20

If you are targeting Android,then the best way to satisfy all the screen resolutions in Android is based on the aspect ratio of the device.That is, the currently available aspect ratios are 4:3,3:2,16:9,16:10,etc. I forgot few more.Please check the list of available aspect ratios for Android in Google.Have a standard sprite size for each aspect ratio.Like for instance, for all devices targeting 4:3 aspect ratio, have a standard sprite size of 640:480.Then using setScaleX() an setScaleY() on the sprite, scale the size to fit the actual device width.So your code should be like -

auto aspect_ratio_Android = Director::getInstance()::getVisibleSize().width/ Director::getInstance()::getVisibleSize().height;
if(aspect_ratio_Android == 1.33333){
if(Director::getInstance::getVisibleSize.width == 1280){

mySprite->setScaleX(1280/640);
mySprite->setScaleY(960/320);

}

}

Here,mySprite is the reference sprite with resolution 640:480 and director visible size is dependant on the design resolution size you have set on glView of the Director.

Continue in this way for all possible aspect ratios.

For iOS resolutions, it is relatively simpler because there are just four or five sets of standard resolutions which you can directly take care without calculating aspect ratio an scaling the sprite.You can have one sprite for each standard resolution of iOS device.

Hope this helps you.