Search code examples
cocos2d-androidcocos2d-js

Displaying a rectangle with a border using Cosos2d Js

I am new to Cocos 2d js..... I want to know how can I draw a rectangle having a border to it using cocos2d js??.. I tried to google but didn't find any sample code or something similar.. which is quite simple to do using HTML and CSS... Thanks.

Solution

  • Yo need to add a draw node to your scene/layer and draw a rectangle on it. For example, say you have the following method within your layer:

    {
  ...
  var dn = new cc.DrawNode();
  this.addChild(dn);
  dn.drawRect(cc.p(50,50), cc.p(200,300), cc.color(255,0,0,255), 3, cc.color(0,255,0,255));
  ...
}

    The function call parameters are: drawRect(origin, destination, fillColor, lineWidth, lineColor).

    This is from the samples found in the samples/js-tests folder that should be in your cocos2d-js folder. For more information, check out the API on the drawing nodes here: http://www.cocos2d-x.org/reference/html5-js/V3.3/symbols/cc.DrawNode.html

    PS: if you want to draw a filled circle with a line color, however, note that there's not a function for that currently. There are a few workarounds, the best one I've found is to use a drawDot for the "inner solid part" of the circle, and a drawCircle for the outer part.