Radial Gradient

Radial Gradient
0.0 0

#1

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!


#2

solid or transparent?


#3

White to transparent.


#4

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.


#5

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.


#6

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? https://github.com/SFML/SFML/wiki/Source:-Radial-Gradient-Shader I have no idea how ti implements radial gradient…


#7

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…


#8

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.


#9

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…


#10

Thank you very much.
As I see no official support here :worried:


#11

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… https://forums.adobe.com/thread/2103468
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)


#12

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.


#13

Anyone? @zhangxm ? Any official comments? Can you add radial type of gradient?


#14

Bump, please help :worried:


#15

Use this


#16

Thats not even answer…/ I need for some GradientLayer (radial…) from cocos2d-x. Is cocos2d devs able to do so? Or anyone?


#17

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


#18

Thanks. Thats looks very promising, but it’s not radial. How this can be modified to radial, like this:


#19

I don’t know. Maybe you could use a clipping node like in cocos2dx 3.6 How to Mask sprite in circle


#20

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…