I need to have a radial gradient layer on my menu screen, and I would like to know if there is any way I can do that using GradientLayer, or if there is another class (maybe 3rd party) which I can use.
Thank you all!
solid or transparent?
White to transparent.
Why don’t you just make a radial gradient in photoshop and use a sprite to draw it? Is there any special requirements for it.
While I’d probably follow @UKDeveloper99 and just make an image, you could try adding a DrawNode with a circle drawn as the stencil to a GradientLayer node.
Same here. I’m noob in OpenGL… converting my game from Objective C cocos2d-iphone.
I’ve used built in iOS method:
- (UIImage *)radialGradientImageWithRadius:(CGFloat)radius StartColor:(UIColor*)startColor EndColor:(UIColor*)endColor
{
// Initialize
UIGraphicsBeginImageContextWithOptions(CGSizeMake(radius, radius), NO, 1.0);
CGContextRef context = UIGraphicsGetCurrentContext();
// bottom glow gradient
CGColorSpaceRef colourspace = CGColorSpaceCreateDeviceRGB();
// build color components
CGFloat red1 = 0.f, green1 = 0.f, blue1 = 0.f, alpha1 = 0.f;
[(startColor == nil ? [UIColor clearColor] : startColor) getRed:&red1 green:&green1 blue:&blue1 alpha:&alpha1];
CGFloat red2 = 0.f, green2 = 0.f, blue2 = 0.f, alpha2 = 0.f;
[(endColor == nil ? [UIColor clearColor] : endColor) getRed:&red2 green:&green2 blue:&blue2 alpha:&alpha2];
CGFloat cComponents[] = { red1, green1, blue1, alpha1, red2, green2, blue2, alpha2};
CGFloat cGlocations[] = { 0.f, 1.0f };
CGGradientRef gradient = CGGradientCreateWithColorComponents(colourspace, cComponents, cGlocations, 2);
CGPoint centerPoint = CGPointMake(radius * 0.5, radius * 0.5);
CGContextDrawRadialGradient(context, gradient, centerPoint, 0.f, centerPoint, radius * 0.5 , 0.f);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGGradientRelease(gradient);
CGColorSpaceRelease(colourspace);
UIGraphicsEndImageContext();
return image;
}
And create it just simply:
UIImage *img = [self radialGradientImageWithRadius: 873.0
StartColor: [UIColor colorWithRed:145.0/255.0 green:106.0/255.0 blue:209.0/255.0 alpha:0.55]
EndColor: nil];
My output image:
Cocos2d-x have only linear gradient in LayerGradient class. Is it possible to implement radial gradient?
I’m looking for mostly exactly the same gradient generation…
@slackmoehrle @zhangxm @zhangbin ? Can you please take a look at this problem? Maybe this can be helpful? Source: Radial Gradient Shader · SFML/SFML Wiki · GitHub I have no idea how ti implements radial gradient…
Yes, there’s no radial gradient in cocos2dx… anyway, it’s good to do one only if you plan to animate it, like an animated LayerGradient. I’ve used one some time ago, but i cannot track the sources back now. It takes a shader to do that, anyway; so it’s worth the effort for something nicely animated… otherwise take inkscape a get a radial gradient sphere as above…
I tried to generate such gradient in the Adobe Illustrator CC and Photoshop CC - both produced gradient with banding artifacts… that was really noticeable on the iPhone or iPad.
Banding(look at zoom carefully):
On device it’s something like this:
But programmatically for same color in a code I’ve got a nice gradient.
That’s curious. I’ll give it a look. I’m just tampering with nanovg and friends, i’d like to take vectors into my pipeline…
Thank you very much.
As I see no official support here 
Seems you are right
Generating a gradient with inkscape on my mac gives visible banding, yet before including it into a cocos project…
looks like it is quite common… Solved: Colour banding problem (stripes) in gradients - Im... - Adobe Support Community - 8134253
now I’ve used another tool and it looks much better… check if you see banding with the files I’ve included…
sun.zip (95.3 KB)
Yea, its like a common problem. But that main thing is to use that color I’ve used. You created really different gradient and it’s not about this problem. Try to create same as I did from code in previous post to match my output image. I need exactly it, it’s really depends which color used, because with different color and options you may not see banding.
Bump, please help
Thats not even answer…/ I need for some GradientLayer (radial…) from cocos2d-x. Is cocos2d devs able to do so? Or anyone?
try this. Call it with something like this:
void yourclass::layerSetup (){
//random colors, change for what you need
auto gCb = [](){
GLubyte val = RandomHelper::random_int(0, 255);
return val;
};
auto pmI = [](){
int val = RandomHelper::random_int(-1, 1);
return val;
};
Color4B startColor = Color4B(gCb(),gCb(),gCb(),(gCb()+128)/2);
Color4B endColor = Color4B(gCb(),gCb(),gCb(),(gCb()+128)/2);
auto dirVec = Vec2(pmI()*(RandomHelper::random_real(s_origin.x, s_visibleSize.width)),
(pmI())*(RandomHelper::random_real(s_origin.y, s_visibleSize.height)));
auto levelGradient = LayerGradient::create(startColor, endColor, dirVec);
levelGradient->setContentSize(s_visibleSize);
levelGradient->setPosition(s_origin);
levelGradient->setName("levelGradient");
addChild(levelGradient,-9999);
auto shaderLayer = ShaderLayer::create("game.glsl");
addChild(shaderLayer);
}
hope it helps. Ended up my tricks, man
Thanks. Thats looks very promising, but it’s not radial. How this can be modified to radial, like this:
I don’t know. Maybe you could use a clipping node like in cocos2dx 3.6 How to Mask sprite in circle
Nope, I mean that I need radial gradient, currently it’s linear gradient with direction… Clipping gives nothing, but just cut corers…
I believe that shader should be modified to something like here - https://github.com/SFML/SFML/wiki/Source:-Radial-Gradient-Shader but I have no idea how to implement this…
Is there some chance of official responce from cocos2d-x devs? @slackmoehrle this thread totally ignored, no help, why? I feels like when I post something on the forum it’s a really low chance get official response…