[PLUGIN] Canvas

Post your completed addons to share with the community

Post » Sat Feb 20, 2016 1:42 pm

I had made a behavior to help user tests pixel overlapping between sprite and canvas easily.
Demo
- drag to draw circles on the canvas
- red ball will bounce off and erase some pixels while overlapping any pixels on canvas
B
97
S
22
G
176
Posts: 4,108
Reputation: 103,019

Post » Tue Feb 23, 2016 12:17 am

Is there a c2addon format anywhere cuz,i cant install this for some reason
B
20
S
5
G
4
Posts: 162
Reputation: 3,655

Post » Tue Feb 23, 2016 12:18 am

@Ayolabi12345: Drag it into Construct2 when it's open. It'll ask you to install it. :) Cheers!
B
46
S
15
G
3
Posts: 199
Reputation: 4,584

Post » Wed Mar 02, 2016 6:21 am

@R0J0hound

These code could fix the bug of loading.

Code: Select all
   // called when loading the full state of the game
   instanceProto.loadFromJSON = function (o)
   {
        var canvasWidth = this.canvas.width = o["canvas_w"];
        var canvasHeight = this.canvas.height = o["canvas_h"];
       
        var img_data = this.ctx.createImageData(canvasWidth, canvasHeight);
        var data = img_data.data;
        var cnt = data.length;
        for(var i=0; i<=cnt; i++)       
            data[i] =o["image"][i];   
       
        this.ctx.putImageData(img_data, 0, 0);
   };
B
97
S
22
G
176
Posts: 4,108
Reputation: 103,019

Post » Wed Mar 02, 2016 6:22 am

Which bug?
B
46
S
15
G
3
Posts: 199
Reputation: 4,584

Post » Wed Mar 02, 2016 6:24 am

@Nitro187

Loading by official load action.
plugin-canvas_p1016108?#p1016108
B
97
S
22
G
176
Posts: 4,108
Reputation: 103,019

Post » Wed Mar 02, 2016 6:29 am

@rexrainbow: Works great - you mentioned that "putImageData" has better performance... is this just for the loadFromJSON, or would this also increase performance for PasteLayer? Cause I'm noticing a lot of CPU usage when using it... especially on every tick.
B
46
S
15
G
3
Posts: 199
Reputation: 4,584

Post » Wed Mar 02, 2016 6:38 am

@Nitro187

Here is the origin code of loading, ( downloaded in 1st post )
Code: Select all
   // called when loading the full state of the game
   instanceProto.loadFromJSON = function (o)
   {
        var canvasWidth = this.canvas.width = o["canvas_w"];
        var canvasHeight = this.canvas.height = o["canvas_h"];
        var data = this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height).data;
        for (var y = 0; y < canvasHeight; ++y) {
            for (var x = 0; x < canvasWidth; ++x) {
                var index = (y * canvasWidth + x)*4;
                for (var c = 0; c < 4; ++c)
                data[index+c] = o["image"][index+c];
            }
        }
      // load from the state previously saved by saveToJSON
      // 'o' provides the same object that you saved, e.g.
      // this.myValue = o["myValue"];
      // note you MUST use double-quote syntax (e.g. o["property"]) to prevent
      // Closure Compiler renaming and breaking the save format
   };



"ctx.getImageData" only copy image data, not get the reference. Any modification of this data array would not affect the canvas image.
Code: Select all
var data = this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height).data;


The solution of change the image of this canvas is using "ctx.putImageData", imo. Since this method needs an image data parameter, I use "ctx.createImageData" to create a new one, then fill it by saving data. Finally put this new image data back by "ctx.putImageData",
B
97
S
22
G
176
Posts: 4,108
Reputation: 103,019

Post » Wed Mar 02, 2016 6:42 am

@rexrainbow: Ahh, gotcha. Thanks.
B
46
S
15
G
3
Posts: 199
Reputation: 4,584

Post » Thu Mar 10, 2016 3:23 pm

rexrainbow wrote:@TheWyrm
@Somebody

I had made a behavior rex_canvasext to load image in rojo's canvas plugin.

Not working for me =(
Image
ImageImageImageImage
B
26
S
7
G
7
Posts: 572
Reputation: 6,097

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 1 guest