CCDrawNode Antialiasing problem

CCDrawNode Antialiasing problem
0.0 0

#1

Hi!
I’m using CCDrawNode in my project, but there are some difference between cocos2d and cocos2d-x.

Attached file shows that just draw circle using following code.

CCDrawNode* dNode = CCDrawNode::create();
addChild(dNode);
dNode->drawDot(ccp(1024/2, 768/2), 100, ccc4f(1.0, 0, 0, 1.0));

In cocos2d(Right Circle in attached file), it is very clear and antialiased circle but in cocos2d-x(Left Circle in attached file), it seems that Antialiasing parameter is not reflected in the circle.
They were also captured in IOS Simulator and also use cocos2d 2.1 version.
Is there any way to fix this problem?
Thank~


circle.png (42.3 KB)


Cocos2d-x v3 Anti-Aliasing for Primitives
How to draw anti-aliased line in cocos2d-x for android games?
#2

i got the same issue :frowning:


#3

I got the same issue too. I used CCDrawNode::drawPolygon method to draw a polygon, the edge effects are bad.
Any solutions?


Final topic about Anti-Aliasing disease
#4

Help me. I have the same problem!!! My polygon can’t go antialiased :frowning:


#5

I found a kind of solution- use CCRenderTexture and convert your poly to CCSprite- it is antialiased by default.


#6

I have the same problem.

I’ve tried to restore the commented code in ccShader_PositionColorLengthTexture_frag.h, but there’s no effect.

There’s some way to draw antialiased primitives with DrawNode without using a RenderTexture?


#7

In fact, I’m not able to draw an antialiased image of the layer using a RenderTexture either.
The image quality using a RenderTexture is low, and I don’t get a quality antialiasing if I scale down the node.

I have attached some images to show the problem.

void HelloWorld::update(float delta)
{
    Layer::update(delta);
    
    mRenderTextureSprite->setVisible(false);
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    mRenderTexture = RenderTexture::create(visibleSize.width, visibleSize.height, Texture2D::PixelFormat::RGBA8888);
    mRenderTexture->begin();
    visit();
    mRenderTexture->end();
    
    auto finalTexture = mRenderTexture->getSprite()->getTexture();
    finalTexture->setAntiAliasTexParameters();
    mRenderTextureSprite->setTexture(finalTexture);
    
    Rect rect = Rect::ZERO;
    rect.size = finalTexture->getContentSize();
    mRenderTextureSprite->setTextureRect(rect);
    //mRenderTextureSprite->cocos2d::Node::setScale(0.5);
    mRenderTextureSprite->setBlendFunc(BlendFunc::ALPHA_PREMULTIPLIED);
    mRenderTextureSprite->setVisible(true);
}

#8

I found it!:slight_smile:

In order to draw antialiased primitives, you have to force smoothstep:

"																															\n\
#ifdef GL_ES																												\n\
// #extension GL_OES_standard_derivatives : enable																			\n\
																															\n\
varying mediump vec4 v_color;																								\n\
varying mediump vec2 v_texcoord;																							\n\
#else																														\n\
varying vec4 v_color;																										\n\
varying vec2 v_texcoord;																									\n\
#endif																														\n\
																															\n\
void main()																													\n\
{																															\n\
// #if defined GL_OES_standard_derivatives																						\n\
	// gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));							\n\
// #else																														\n\
	// gl_FragColor = v_color*step(0.0, 1.0 - length(v_texcoord));																\n\
// #endif																														\n\
    gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));																\n\
}																															\n\
";

Final topic about Anti-Aliasing disease
#9

@Chano,
I tried the code on iOS device and I got this error :
cocos2d: cocos2d: ERROR: 0:29: Call to undeclared function 'fwidth'


#10

@barisatamer
It seems on iOS you have to enable GL_OES_standard_derivatives.
I don’t have an iOS device to test it, but probably if you uncomment all the commented code in the shader fwidth will work:
http://stackoverflow.com/questions/9671705/opengl-es-2-0-derivative-texture


#11

This helped me in iOS, but the anti-alias issues persists on Mac desktop (Mavericks). Any further ideas?


#12

Correction, it worked in the simulator, not in an ipad mini retina, for instance. =/


#13

Weird, I tested it some time ago on a Mac Mini with Mountain Lion and it worked without problems.


#14

@Chano I overlooked your actual code, i.e., the gl_FragColor definition is outside the conditional blocks. I see it working now, thanks! Will have to test it in Android now.

Cheers!


#16

I think I jumped the gun again, this worked in the Mac build, and never in the iOS device. Still sifting through options.


#17

@hcabral
I have it working on Windows and some Android devices like the Nexus 4 (in other Android devices the app is aborted because this: http://cocos2d-x.org/forums/6/topics/51698?r=51897).

As I said, I tested it on a Mac Mini too. But I haven’t tested it on an iOS device because I don’t have one :stuck_out_tongue:


#18

I will check it on Android, just for kicks now.


#19

It works on iOS, OSX, win32 and Android. Am using v2.2.2.


#20

@IslandPlaya it didn’t work for me in iOS 7.1.1. Works in the simulator, not in the actual device. I’ve tried an iPhone 5s and iPad Mini Retina.

@Chano Android worked too.


#21

Thanks for the info hcabral.
I don’t have a 7.1.1 device to test on, but I will be sure to look into this before my game is released.
Many thanks.