Colored circle sprite, best way?

cocos2d-x JavaScript
1

Hi guys,

I need to create circle with custom color (color is programmatically defined) and different size. These will be under Chipmunk control (cc.PhysicsSprite). See for instance this example: http://www.openxrest.com/demos/balls/, this is what I’d like to reproduce with cocos2d-js

I can think about several solutions:

  • have a PNG image with a small white circle, then try to scale it on a circle body (how ?), then use sprite.color = cc.color(r,g,b,a) to colorize
  • subclass Sprite class and override draw method (I’ve seen some examples, I’m wondering if this is proper way to go).

What would be the “cocos2d-js” way of doing this ? Some are also talking about using a ClippingNode to mask eveything except what’s in the circle…

Thanks & Cheers
Seb

1 Like
2

Well, I have yet to experiment with physics engine integration, but I can tell you couple of things about drawing, namely:

a. You can adjust a sprite’s size via it’s scale property
b. You can find examples of the drawing system in the tests folder of cocos2d-js (ie, samples/js-tests) under “DrawPrimitives Test” and then the physics under “Chipmunk Test” and “Box2D Test”.
c. I’m not sure I understand what you are trying to accomplish with the ClippingNode… Is it because you want the interior of the circle to be filled? If that’s the case, take look at this function and use it in the draw method of your custom sprite, is an old feature I proposed but never got implemented (althought there should be a better way to do this by now).

3

Thanks for your reply. I’ve tested scaling a sprite, I think that’s the easiest way to go, though I’d need many sprite sizes to avoid pixelization while scaling. Thanks for pointing to your function, maybe I can use it overriding sprite’s draw() function. As for ClippingNode, I’ve imagined having a stencil with a circle inside, I could have drawn a rectangle and put the clipping node over, only drawing what’s inside, that is a solid circle…

Cheers
s.

4

Well, I made Circle Class for you.
I hope this code is what you wanted.
Don’t forget to set renderMode to Canvas drawing at ‘project.json’ file.

var MyCircle = cc.Node.extend({
_isDrawLineToCenter : false,
_lineWidth : 1,
_fillColor : null,
_lineColor : null,

ctor:function(size){
    this._super();
    this.setContentSize(size);
    this._center = cc.p(size.width/2,size.height/2);
    this._radius = size.width/2;
    this._drawingUtil = cc._drawingUtil;
    this._fillColor = new cc.Color(0,255,0,255);    // alpha is not working
    this._lineColor = new cc.Color(255,0,0,255);
},
draw:function(ctx){

    this._super();
    this._drawingUtil.setDrawColor(this._lineColor.r,this._lineColor.g,this._lineColor.b,this._lineColor.a);

    //drawCircle: function (center, radius, angle, segments, drawLineToCenter)
    this._drawingUtil.setLineWidth(this._lineWidth);
    this._drawingUtil.drawCircle(this._center,this._radius, 0, 0,this._isDrawLineToCenter);
    var colorStr = "rgba(" + (0 | this._fillColor.r) + "," + (0 | this._fillColor.g) + "," + (0 | this._fillColor.b);
    ctx.fillStyle = colorStr + ",1)";
    ctx.fill();
}});

Usage:
var circle = new MyCircle(cc.size(200,200));
circle.setPosition(cc.p(400,90));
this.addChild(circle,1);

good luck.

p.s
or you can use cc.DrawNode.

1 Like
5

Ho, great, thank you ! I’ll test this asap. Very useful to learn as well.
Cheers
s.

6

I’ve been able to test your class, it’s working great. I had to subclass cc.PhysiscsSprite so I could attach a physic body.
Thanks again !
Cheers
s.

7

Hi again,
I tested this on iOS and Android devices, unfortunately my colored circles won’t get displayed. Is it expected ? (is draw() function cross-platform ?). I may stick to scaled sprite in the end.
Thanks
s.

8

Hmm, that’s strange. It should be cross-platform… (what you’ve done does work in the browser, right?). Are you getting any feedback in the console?

Maybe we should be trying with cc.DrawNode… Since I remember something about the “drawing utils” going to be declared deprecated at some point… I’ll put this in my personal to-do list, I’ve been meaning to test out PhysicsSprite and improve the drawing API since I’ve known of their respective existences, but never been a priority for me…

I’ll let you know if I find something useful!

9

It can’t draw in openGL render mode. and ios and android device use opengl.

this._drawingUtil.drawCircle(this._center,this._radius, 0, 0,this._isDrawLineToCenter); var colorStr = "rgba(" + (0 | this._fillColor.r) + "," + (0 | this._fillColor.g) + "," + (0 | this._fillColor.b);

This source use html tag. you should fix to opengl.

10

Hi guys,

Sorry for the late reply. Now I understand why it doesn’t work on iOS or Android.
I’ll see what I can do with that, maybe I’ll stick to scaled sprites because I may need some kind of textures.
Anyway, thanks again.

Cheers
s.