How Can I Use drawGL?

For discussion and help with the Construct 3 Plugin SDK

Post » Wed Apr 18, 2018 11:12 am

I'm trying to make a simple plugin. I want to design simple geometric shape. But I don't understand how I can create the drawGL function.

I can draw on canvas with instance.draw but I don't know I can do the same with drawGL. If I use gwl.quad I have only a black rectangle. And I can't set the color.

Code: Select all
instanceProto.draw = function (ctx) {
      var myx = this.x;
      var myy = this.y;
      var w = this.width;
      var h = this.height;
      ctx.fillStyle = "blue";
      ctx.fillRect(myx, myy, w, h);
   };

instanceProto.drawGL = function (glw) {
   };


There is not information in C3 manual (link). The same in C2 manual (link 1, link 2).
B
24
S
11
G
13
Posts: 156
Reputation: 9,081

Post » Wed Apr 18, 2018 4:35 pm

This code it's ok, draw a blue rectangle.
Code: Select all
instanceProto.drawGL = function(glw) {
    var q = this.bquad;
   
   glw.setColorFillMode(0,0,255,1); // colora
   glw.quad(q.tlx, q.tly, q.trx, q.try_, q.brx, q.bry, q.blx, q.bly);
};


But this doesn't draw 3 blue points: they're black.
Code: Select all
instanceProto.drawGL = function(glw) {
  glw.setColorFillMode(0,0,255,1);
  var a = glw.point(1,1,5,1);
  var b = glw.point(20,20,5,1);
  var c = glw.point(40,40,5,1);
};


And this code
Code: Select all
instanceProto.drawGL = function(glw) {
  var x1 = glw.point(80,80,5,1);
  var x2 = glw.point(100,100,5,1);
  var x3 = glw.point(100,200,5,1);

  glw.convexPoly(x1, x2, x3);
};

gives me this error:
Code: Select all
Uncaught TypeError: Cannot read property 'length' of undefined


I don't undertand how I can draw lines. I can't find a line function in c2/glwrap.js
B
24
S
11
G
13
Posts: 156
Reputation: 9,081

Post » Wed Apr 18, 2018 5:18 pm

The function glw.convexPoly takes an array of points in only one argument. See glwrap.js for more details.
Learning other engines, but C2 still rocks. Image Image Image Image
B
80
S
22
G
96
Posts: 2,461
Reputation: 58,314

Post » Wed Apr 18, 2018 5:47 pm

Colludium wrote:The function glw.convexPoly takes an array of points in only one argument. See glwrap.js for more details.


Thanks @Colludium

This works: :D :D :D
Code: Select all
instanceProto.drawGL = function(glw) {
   var q = this.bquad;
   glw.setColorFillMode(0,0,255,1);
   glw.convexPoly([q.tlx, q.tly, q.trx, q.try_, q.brx, q.bry]);
};


But, how I can draw a line? And points with color? Is this correct? Is the only way?
Code: Select all
  var point = glw.quad(50, 50, 55, 50, 55, 55, 50, 55);
  var line = glw.quad(150,150,151,150,251,251,250,250);
B
24
S
11
G
13
Posts: 156
Reputation: 9,081

Post » Wed Apr 18, 2018 7:23 pm

There's nothing in glwrap.js that enables the drawing of lines. You'd have to draw a quad with a quad thickness so that it appears like a line on screen...
Learning other engines, but C2 still rocks. Image Image Image Image
B
80
S
22
G
96
Posts: 2,461
Reputation: 58,314

Post » Tue Apr 24, 2018 11:48 pm

@Colludium - @Ashley


I have a problem to set colors in WebGL. I can draw with primary colors but not with other RGBA colors.

For exemple, if I want to draw a yellow quad, this works:

instance.js
Code: Select all
iRenderer.SetColorRgba(127,254,212, 1);
iRenderer.SetColorFillMode();
iRenderer.ConvexPoly([myx, myy, myx+w, myy, myx+w, myy+h, myx, myy+h]);


runtime.js
Code: Select all
instanceProto.drawGL = function(glw) {
    var myx = this.x;
    var myy = this.y;
    var w = this.width;
    var h = this.height;
   glw.setColorFillMode(255, 255, 0, 1);
   glw.quad(myx, myy, myx+w, myy, myx+w, myy+h, myx, myy+h);
  };


But if I change

instance.js iRenderer.SetColorRgba(127, 254, 212, 1);
runtime.js glw.setColorFillMode(127, 254, 212, 1);

I have a white quad.

Instead in instanceProto.draw I can draw a coloured quad simply changing ctx.fillStyle

Code: Select all
  // ctx.fillStyle = `rgba(255, 255, 0, 1)`;
  ctx.fillStyle = `rgba(127, 254, 212, 1)`;
  ctx.beginPath();
  ctx.moveTo(myx, myy);
  ctx.lineTo(myx+w, myy);
  ctx.lineTo(myx+w, myy+h);
  ctx.lineTo(myx, myy+h);
  ctx.closePath();
  ctx.fill();
 


What's wrong with what I'm doing?
B
24
S
11
G
13
Posts: 156
Reputation: 9,081

Post » Wed Apr 25, 2018 9:31 am

The renderer deals with colors as floats in the [0,1] range, not [0-255].
Scirra Founder
B
415
S
247
G
92
Posts: 25,284
Reputation: 200,847


Return to Plugin SDK

Who is online

Users browsing this forum: No registered users and 1 guest