How Can I Use drawGL?

  • 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.

    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) {
    	};
    [/code:2h5eova9]
    
    There is not information in C3 manual ([url=https://www.construct.net/it/make-games/manuals/addon-sdk/search?q=drawGL]link[/url]). The same in C2 manual ([url=https://www.scirra.com/manual/search?q=drawGL]link 1[/url], [url=https://www.scirra.com/manual/23/runtime-functions]link 2[/url]).
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • This code it's ok, draw a blue rectangle.

    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);
    };[/code:3g8azeha]
    
    But this doesn't draw 3 blue points: they're black.
    [code:3g8azeha]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);
    };
    [/code:3g8azeha]
    
    And this code
    [code:3g8azeha]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);
    };
    [/code:3g8azeha]
    gives me this error:
    [code:3g8azeha]Uncaught TypeError: Cannot read property 'length' of undefined[/code:3g8azeha]
    
    I don't undertand how I can draw lines. I can't find a line function in c2/glwrap.js
  • The function glw.convexPoly takes an array of points in only one argument. See glwrap.js for more details.

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

    Thanks Colludium

    This works:

    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]);
    };
    [/code:305dxzse]
    
    But, how I can draw a line? And points with color? Is this correct? Is the only way?
    [code:305dxzse]
      var point = glw.quad(50, 50, 55, 50, 55, 55, 50, 55);
      var line = glw.quad(150,150,151,150,251,251,250,250);
    [/code:305dxzse]
  • 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...

  • 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

    iRenderer.SetColorRgba(127,254,212, 1);
    iRenderer.SetColorFillMode();
    iRenderer.ConvexPoly([myx, myy, myx+w, myy, myx+w, myy+h, myx, myy+h]);
    [/code:jfq526sl]
    
    [b]runtime.js[/b]
    [code:jfq526sl]
    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);
      };
    [/code:jfq526sl]
    
    But if I change 
    
    [b]instance.js[/b] iRenderer.SetColorRgba(127, 254, 212, 1);
    [b]runtime.js[/b] glw.setColorFillMode(127, 254, 212, 1);
    
    I have a white quad.
    
    Instead in [b]instanceProto.draw[/b] I can draw a coloured quad simply changing [i]ctx.fillStyle[/i]
    
    [code:jfq526sl]
      // 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();
     [/code:jfq526sl]
    
    What's wrong with what I'm doing?
  • The renderer deals with colors as floats in the [0,1] range, not [0-255].

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)