SDK drawing functions

For developers using the Construct 2 Javascript SDK

Post » Wed Sep 07, 2016 5:06 pm

Here are some functions that I use to draw shapes on the Construct 2 renderer.
Box:
Code: Select all
renderSquare(this, renderer,cr.RGB(0,0,255));

Code: Select all
function renderSquare(inst, renderer,color) {
   var q = inst.instance.GetBoundingQuad();
   renderer.Outline(q, color);
}

Circle:
Code: Select all
renderCircle(this, renderer,cr.RGB(0,0,0),18);

Code: Select all
function renderCircle(inst, renderer, color,segments) {
   var q = inst.instance.GetBoundingQuad();
   var xpos = (q.tlx + q.trx + q.blx + q.brx) / 4;
   var ypos = (q.tly + q.try_ + q.bly + q.bry) / 4;
   xsto = new cr.vector2(inst.instance.GetSize().x / 2, 0);
   ysto = new cr.vector2(inst.instance.GetSize().y / 2, 0);
   rcos = Math.cos((Math.PI / (segments/2)))
      rsin = Math.sin((Math.PI / (segments/2)))
      for (var i = 0; i < segments; i++) {
         xsto.x = ysto.x * rcos - ysto.y * rsin;
         xsto.y = ysto.x * rsin + ysto.y * rcos;
         renderer.Line(new cr.vector2(xpos + xsto.x, ypos + xsto.y), new cr.vector2(xpos + ysto.x, ypos + ysto.y), color);
         q.tlx = xpos + xsto.x;
         q.tly = ypos + xsto.y;
         q.trx = xpos + ysto.x;
         q.try_ = ypos + ysto.y;
         q.blx = xpos;
         q.bly = ypos;
         q.brx = xpos;
         q.bry = ypos;
         ysto = new cr.vector2(xsto.x, xsto.y);
      }
}

Polyline:
Code: Select all
drawPolyline("641 96 435 99 434 186 634 181 641 95 688 45 689 138 633 180 435 98 513 50 688 45",cr.RGB(255, 0, 0), this.instance,renderer);

Code: Select all
function drawPolyline(points,color, inst,rend)
{
         var q = inst.GetBoundingQuad();
         var xpos = (q.tlx + q.trx + q.blx + q.brx) / 4;
         var ypos = (q.tly + q.try_ + q.bly + q.bry) / 4;
         var fq = new cr.quad;
         var diffx,diffy;
         var pArray = [];
         pArray = points.split(" ");
         if (xpos > pArray[0]) {
            diffx = xpos - pArray[0];
            diffx *= -1;
         } else {
            diffx = pArray[0] - xpos;
         }
         if (ypos > pArray[1]) {
            diffy = ypos - pArray[1];
            diffy *= -1;
         } else {
            diffy = pArray[1] - ypos;
         }
         for (var i = 0; i < pArray.length; i += 2) {
            rend.Line(new cr.vector2(pArray[i] - diffx, pArray[i + 1] - diffy), new cr.vector2(pArray[i + 2] - diffx, pArray[i + 3] - diffy), color);
         }

}


You may find these useful when making your own plugins.
Banned User
B
17
S
7
G
24
Posts: 388
Reputation: 14,494

Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests