Transparency Behavior

I'm trying to do a plugin for .png image with pixel collision.

But the problem at start is that the player will always collide with my .png level with Solid Behavior.

The JS code in Behaviors files are only calls to the C++ program and I can't really add a home made behavior?

Is is possible for Construct conceptors to modify the Solid Behavior to make a "Transparency Behavior" where an object can go through if alpha is zero?

It won't be easy to change this: the engine only supports polygon collision masks, and there is a lot of code around that.

Ok, but I think I found another way. I've made an Action "IsColliding(x,y)" to test a pixel.

Here my function that is not working yet:

function isPixelCollision( x2, y2 )

{

   // Create a canvas element

   var canvas = document.getElementById(this.layer);

   // Get the drawing context

   var context = canvas.getContext('2d');

   var pixel = this.runtime.context.getImageData(x2, y2, x2, y2);

   if (pixel.data[3]>0)

     return true

   else

     return false;

}

The problem is for accessing the layer. I've put my level on layer 1. Can you tell me a way to do it?

The layer texture only exists when the runtime is drawing and the layer has "force own texture", otherwise I'm pretty sure drawing is done on the main canvas.

If you just want to know the contents of a pixel in an image you can try the rgbaAt expession of the canvas plugin.

Thanks, the code in the Canvas Plugin helped me...

I have a begining of something:

consultationmagaliederouin.com/TestPNG/

But is hardcore because the Platform is not working with my plugin. So I must make all movements myself...

The code sample you posted is extraordinarily inefficient and will probably be far too slow to be useful. This is a reason we use polygon collisions in Construct 2.

Why do you need per-pixel collisions anyway? I've not seen a convincing case that polygon collisions can't cover.

Because this way you get your level in one shoot... No need to take hours to make all platforms...

This test is a first try. I can surely optimize... Like: maybe it's not nedeed to draw image on the context each time.

Also I will add a function do delete a part of the image...

Anyways, any optimizations suggestions are welcome :)

Well finally it's easy...

The alphaAt function does the job:

exps.alphaAt = function (ret, x, y)

     {

          var imageData= this.ctx.getImageData(x,y,1,1);

          var data= imageData.data;

          ret.set_int(data[3]);

     };

Or isColliding:

Cnds.prototype.IsColliding = function (rtype,x,y)

     {

          // Get the drawing context

               var pixel = this.ctx.getImageData(x, y, 1, 1);

               if (pixel.data[3]>0)

                    return true

               else

                    return false;

     };

My test should have a better performance now:

consultationmagaliederouin.com/TestPNG

Delete circle done:

Acts.prototype.DeleteCircle = function (x,y,radius)

     {

          var centerX=x;

          var centerY=y;

          var squareRadius = radius * radius;

          var ctx = this.ctx;

          var imageData= ctx.getImageData(centerX-radius,centerY-radius,radius+radius,radius+radius);

          var pos=0;

          for (y = -radius; y <= radius; y++)

              for (x = -radius; x <= radius; x++)

               {     

                    var total = (x * x) + (y * y);

                   if (total <= squareRadius)

                    {

                         imageData.data[pos] = 0;     // R

                         imageData.data[pos+1] = 0;     // G

                         imageData.data[pos+2] = 0;     // B

                         imageData.data[pos+3] = 0;     // A     

                    }

                    pos+=4;

               }

          ctx.putImageData(imageData,centerX-radius,centerY-radius);

          this.runtime.redraw = true;

        this.update_tex = true;     

     };

But on IPhone it shows just the BG:

<img src="http://consultationmagaliederouin.com/TestPNG/testIPhone.jpg" border="0" />

Any idea on how to make it work on Iphones?

Well seems it's working on IPhone 4 but not on 5.

Here's the bug on IPhone 5:

<img src="http://consultationmagaliederouin.com/iphone.jpg" border="0" />

Have you ever seen this problem?

I want to try your script, but it seems the website isn't working! Could you please post another link?

JoshyRobot

I want to try your script, but it seems the website isn't working! Could you please post another link?

gbataille hasn't been on this forum since his last post over a year ago, so is unlikely to get this request.