I’m an absolute beginner in cocos2d and game programming for that matter. I’ve been checking out tutorials in Cocos2d-html5 and found cc.DrawNode class to draw basic shapes. Is it possible to draw stuff like dotted or dashed lines in Cocos2d HTML5?
Yes. You can draw using primitives to make dashed lines etc
I’ve just hacked together a class to draw a dashed line.
pass startx,starty endx and endY as well as an array that specifies the dash lengths and gaps. (if no dash length array is passed it defaults to equal spaced dashes)
The Code is based on this posting on stackoverflow http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
Note. I’m not sure about the co-ordinate system I’ve used. It uses bottom left as 0,0 and Y values upwards (this may not be cocos2D standard)
var DashedLineSprite = cc.Sprite.extend(
{
_dashArray:null,
_startX:null,
_endX:null,
_startY:null,
_endY:null,
ctor:function (startX,startY,endX,endY,dashArray)
{
this._super();
this._startX= startX * cc.CONTENT_SCALE_FACTOR();
this._startY =startY * cc.CONTENT_SCALE_FACTOR() * -1;
this._endX = endX * cc.CONTENT_SCALE_FACTOR();
this._endY =endY * cc.CONTENT_SCALE_FACTOR() * -1;
if (!dashArray)
{
this._dashArray=[10,5];
}
else
{
this._dashArray=dashArray;
}
},
draw:function () {
cc.renderContext.fillStyle = "rgba(255,255,255,1)";
cc.renderContext.strokeStyle = "rgba(255,255,255,1)";
cc.renderContext.beginPath();
var x=this._startX;
var y=this._startY;
var x2=this._endX;
var y2=this._endY;
if (dashLength==0)
{
dashLength = 0.001;
} // Hack for Safari
var dashCount = this._dashArray.length;
cc.renderContext.moveTo(x , y );
var dx = (x2-x), dy = (y2-y);
var slope = dy/dx;
var distRemaining = Math.sqrt( dx * dx + dy * dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1)
{
var dashLength = this._dashArray[dashIndex++ % dashCount];
if (dashLength > distRemaining)
{
dashLength = distRemaining;
}
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0)
{
xStep = -xStep;
}
x += xStep
y += slope*xStep;
if (draw)
{
cc.renderContext.lineTo(x ,y );
}
else
{
cc.renderContext.moveTo(x ,y );
}
distRemaining -= dashLength;
draw = !draw;
}
cc.renderContext.closePath();
cc.renderContext.stroke();
}
}
)
Thanks for the response… So does cocos2d advocate to using raster sprites instead of vector shapes? Seems like it’s not straightforward drawing/filling shapes etc. Also, will the example above work for a context other than canvas, say using Android and javascript bindings?
Hi Hari G
I think it depends on what you are trying to achieve. I just posted a solution about how to draw something like a dashed line for cocosd-html5
Simple shapes may render faster than raster graphics.
AFIK, Android (or iOS) with JS bindings is something completely different to cocos2d-html5, you’d need to post to the JSBindings forum ( http://www.cocos2d-x.org/projects/cocos2d-x/boards/20 ) for questions about that.
Hi Roger,
Thanks again. I’m trying to render an overlay that denotes positions on a board, but this needs to be dynamic, based on some logic. So I need to do some drawing. The reason I stumbled on to cocos2d is that it can support various platforms with minimal coding (using javascript). So I thought it’d be best to use something in cocos2d rather than use canvas specific stuff.
Cocos2d-html5 has CCDrawNode, if you plan to publish to native apps, then you need to stick with Cocos2d API.
I cant figure out how to draw dotted line with DrawNode, maybe you can try to draw smething else?