pasters webgl off\on

For developers using the Construct 2 Javascript SDK

Post » Mon May 02, 2016 6:07 pm

Hello. We need a man who knows how to write plugins or at least, familiar with Java srcipt logic
The fact that I need to change the plug-in (there are 4 functions: 1) the creation of 2) the action itself 3) function GLW "with WebGL" 5) function ctx "without WebGL")
I need to make so that the plug-in any case, that is, if webGl turned on or off doing as if webGl off
Code: Select all
// ECMAScript 5 strict mode
"use strict";

assert2(cr, "cr namespace not created");
assert2(cr.plugins_, "cr.plugins_ not created");

/////////////////////////////////////
// Plugin class
// *** CHANGE THE PLUGIN ID HERE *** - must match the "id" property in edittime.js
//          vvvvvvvv
cr.plugins_.rojoPaster = function(runtime)
{
   this.runtime = runtime;
};

(function ()
{
   /////////////////////////////////////
   // *** CHANGE THE PLUGIN ID HERE *** - must match the "id" property in edittime.js
   //                            vvvvvvvv
   var pluginProto = cr.plugins_.rojoPaster.prototype;
      
   /////////////////////////////////////
   // Object type class
   pluginProto.Type = function(plugin)
   {
      this.plugin = plugin;
      this.runtime = plugin.runtime;
   };

   var typeProto = pluginProto.Type.prototype;

   // called on startup for each object type
   typeProto.onCreate = function()
   {
   };

   /////////////////////////////////////
   // Instance class
   pluginProto.Instance = function(type)
   {
      this.type = type;
      this.runtime = type.runtime;
   };
   
   var instanceProto = pluginProto.Instance.prototype;

   
   // called whenever an instance is created                         Функция создания, если заменить glw на ctx то при включенном webgl в констракте будет чёрный экран
      instanceProto.onCreate = function()
   {
        this.visible = (this.properties[0] === 0);      // 0=visible, 1=invisible
       
        this.resx = this.width;
        this.resy = this.height;
      
      this.verts = [{x:0,y:0,u:0,v:0},
                 {x:0,y:0,u:0,v:0},
                 {x:0,y:0,u:0,v:0},
                 {x:0,y:0,u:0,v:0}];
      this.points=null;
      
      this.canvas2textureNextTick = 0;
      //this.runtime.tickMe(this);
       
        var glw = this.runtime.glwrap;
        if(glw)
        {
            assert2(this.resx <= glw.maxTextureSize && this.resy <= glw.maxTextureSize, "An image was used above the maximum texture size and cannot be displayed. Ensure all images are "+glw.maxTextureSize+"x"+glw.maxTextureSize+" or smaller");
         this.texture = glw.createEmptyTexture(this.resx, this.resy, this.runtime.linearSampling, false);
         this.temp_texture = glw.createEmptyTexture(this.resx, this.resy, this.runtime.linearSampling, false);
         
         this.quadtex = glw.createEmptyTexture(1, 1, this.runtime.linearSampling, false);
            glw.setTexture(null);
            glw.setRenderingToTexture(this.quadtex);
            glw.clear(0,0,0,1);
            glw.setRenderingToTexture(null);
            this.quadblend = new Object();
            this.quadblend.srcBlend = glw.gl.ONE;
            this.quadblend.destBlend = glw.gl.ONE_MINUS_SRC_ALPHA;
        }
        else
        {
            this.canvas = document.createElement('canvas');         
            this.canvas.width=this.resx;
            this.canvas.height=this.resy;
            this.ctx = this.canvas.getContext('2d');
         
         if (!this.runtime.linearSampling)
         {
            this.ctx.mozImageSmoothingEnabled = false;
            this.ctx.webkitImageSmoothingEnabled = false;
            this.ctx.msImageSmoothingEnabled = false;
            this.ctx.imageSmoothingEnabled = false;
         }
            this.fill="black";
        }
   };
   
   
   instanceProto.onDestroy = function ()
   {
   };

   // only called if a layout object - draw to a canvas 2D context     (instanceProto.draw) я так понимаю это вызывается при выключеном webgl
   instanceProto.draw = function(ctx)
   {
      ctx.globalAlpha = this.opacity;
        ctx.save();
      ctx.translate(this.x, this.y);
      
      var widthfactor = this.width > 0 ? 1 : -1;
      var heightfactor = this.height > 0 ? 1 : -1;
      if (widthfactor !== 1 || heightfactor !== 1)
         ctx.scale(widthfactor, heightfactor);
         
      ctx.rotate(this.angle * widthfactor * heightfactor);
      
      ctx.drawImage(this.canvas,
                    0 - (this.hotspotX * cr.abs(this.width)),
                    0 - (this.hotspotY * cr.abs(this.height)),
                    cr.abs(this.width),
                    cr.abs(this.height));
      
      ctx.restore();
   };
   
   // only called if a layout object in WebGL mode - draw to the WebGL context
   // 'glw' is not a WebGL context, it's a wrapper - you can find its methods in GLWrap.js in the install
   // directory or just copy what other plugins do. А это (instanceProto.drawGL) при включеном webgl
   instanceProto.drawGL = function (glw)
   {
        glw.setTexture(this.texture);
      glw.setOpacity(this.opacity);
            
      var q = this.bquad;
      //glw.point(q.tlx, q.tly, 1, 1);
      glw.quad(q.tlx, q.tly, q.trx, q.try_, q.brx, q.bry, q.blx, q.bly);
   };
   
//Пробовал заменить местами glw и ctx ничего не вышло, выдаёт ошибки
   //////////////////////////////////////
   // Conditions
   function Cnds() {};

   pluginProto.cnds = new Cnds();
   
   //////////////////////////////////////
   // Actions
   function Acts() {};
   
Acts.prototype.PasteObject = function (object) //ну это выновник торжества. Если тут glw заменить на ctx то при выключеном webgl всё работает, но если включить webgl то выдаёт ошибку.
//мне по идее нужно чтобы он вмысто glw вызывал ctx, но у меня ничего не вышло
   {
        // get instances
      var sol = object.getCurrentSol();
      var instances;
      if (sol.select_all)
         instances = sol.type.instances;
      else
         instances = sol.instances;
       
        this.update_bbox();
        var inst, i, len;
       
        var glw = this.runtime.glwrap;
        if(glw) //webgl
        {
            if(!this.texture) //bad tex
                return;
         
            var old_width = glw.width;
            var old_height = glw.height;
            glw.setSize(this.resx,this.resy);
           
         // set render target
            glw.setTexture(null);
            glw.setRenderingToTexture(this.texture);
           
         // transform to paster
            glw.resetModelView();
            glw.scale(this.resx/this.width, -this.resy/this.height);
            glw.rotateZ(-this.angle);
            glw.translate((this.bbox.left + this.bbox.right) / -2, (this.bbox.top + this.bbox.bottom) / -2);
            glw.updateModelView();
           
         var shaderindex = 0, etindex = 0;
            var e, elen;
            for (i = 0, len = instances.length; i < len; i++)
            {
                inst = instances[i];
                // Skip if itself, invisible or zero sized
                if (this == inst || !inst.visible || inst.width === 0 || inst.height === 0)
                    continue;
                // Skip if not in the viewable area
                inst.update_bbox();
                if( !this.bbox.intersects_rect(inst.bbox))
                    continue;

                // Draw using shaders
                if (inst.uses_shaders)
                {
                    for(e=0, elen=inst.active_effect_types.length; e<elen; ++e)
                    //if (inst.active_effect_types.length === 1 && !glw.programUsesCrossSampling(shaderindex) &&
                    //    !glw.programExtendsBox(shaderindex) && ((!inst.angle && !inst.layer.getAngle()) || !glw.programUsesDest(shaderindex)) &&
                    //    inst.opacity === 1 && !inst.type.plugin.must_predraw
                    {
                        // set target to temp
                  glw.setTexture(null);
                  glw.setRenderingToTexture(this.temp_texture);
                  glw.clear(0,0,0,0);
                  
                  shaderindex = inst.active_effect_types[e].shaderindex;
                        etindex = inst.active_effect_types[e].index;
                        glw.switchProgram(shaderindex);
                        glw.setBlend(inst.srcBlend, inst.destBlend);
                       
                        glw.setProgramParameters(this.temp_texture,    // backTex
                                     1.0 / inst.width,      // pixelWidth
                                     1.0 / inst.height,      // pixelHeight
                                     0, 1,                // destStartX, destStartY,
                                     1, 0,               // destEndX, destEndY,
                                     1,                  // this.getScale(),
                                     0,                  // this.getAngle(),
                                     0, 0,               // this.viewLeft, this.viewTop,
                                     0.5, 0.5,            // (this.viewLeft + this.viewRight) / 2, (this.viewTop + this.viewBottom) / 2,
                                     this.runtime.kahanTime.sum,
                                     inst.effect_params[etindex]);
                        inst.drawGL(glw);
                  
                  // draw temp to
                  glw.switchProgram(0);
                  glw.setTexture(null);
                  glw.setRenderingToTexture(this.texture);
                  glw.setTexture(this.temp_texture);
                  glw.resetModelView();
                  glw.scale(this.resx, -this.resy);
                  //glw.translate(this.resx/2, this.resy/2);
                  glw.translate(-0.5, -0.5);
                  glw.updateModelView();
                  glw.setOpacity(inst.opacity);
                  glw.setAlphaBlend();
                  //glw.setNoPremultiplyAlphaBlend();
                  //glw.setBlend(inst.srcBlend, inst.destBlend);
                  glw.quad(0,0, 1,0, 1,1, 0,1);
                  
                  // transform back to paster
                  glw.resetModelView();
                  glw.scale(this.resx/this.width, -this.resy/this.height);
                  glw.rotateZ(-this.angle);
                  glw.translate((this.bbox.left + this.bbox.right) / -2, (this.bbox.top + this.bbox.bottom) / -2);
                  glw.updateModelView();
                    }
                }
                else // Draw normally without any special shaders
                {
                    glw.switchProgram(0);      // un-set any previously set shader
                    glw.setBlend(inst.srcBlend, inst.destBlend);
                    inst.drawGL(glw);
                }
            }
            glw.setRenderingToTexture(null);
            glw.setSize(old_width, old_height);
        }
        else //canvas2d
        {
            var ctx = this.ctx;
            for(i = 0, len = instances.length; i < len; i++)
            {
                inst = instances[i];
                inst.update_bbox();
                if(inst.visible==false && this.runtime.testOverlap(this, inst)== false)
                    continue;
               
                ctx.save();
                ctx.scale(this.canvas.width/this.width, this.canvas.height/this.height);
                ctx.rotate(-this.angle);
                ctx.translate(-this.bquad.tlx, -this.bquad.tly);
                ctx.globalCompositeOperation = inst.compositeOp;
                inst.draw(ctx);
                ctx.restore();
            }
        }
       
        this.runtime.redraw = true;
   };
   
   pluginProto.acts = new Acts();
   
   //////////////////////////////////////
   // Expressions
   function Exps() {};

    Exps.prototype.getresx = function (ret)
    {
      ret.set_float(this.resx);
    };
    Exps.prototype.getresy = function (ret)
    {
      ret.set_float(this.resy);
    };
   pluginProto.exps = new Exps();

}());

Thank you very much for your help
B
4
S
2
Posts: 7
Reputation: 468

Post » Tue May 03, 2016 1:35 am

Look at the canvas plugin for an example of this. There are perfomance issues when having the plugin not use webgl when the rest of the game does use it. The issue is namely that the html5 canvas needs to be copied to a webgl texture to be able to be drawn.
B
92
S
32
G
106
Posts: 5,272
Reputation: 69,455

Post » Tue May 03, 2016 5:35 am

Thank you. Sorry, but as long as my knowledge of Java Script is not enough for a full write something new. I will teach, thanks again
B
4
S
2
Posts: 7
Reputation: 468


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests