Transparency Behavior

For developers using the Construct 2 Javascript SDK

Post » Wed Jan 08, 2014 3:00 am

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?
B
4
Posts: 10
Reputation: 270

Post » Wed Jan 08, 2014 2:50 pm

It won't be easy to change this: the engine only supports polygon collision masks, and there is a lot of code around that.
Scirra Founder
B
395
S
232
G
88
Posts: 24,371
Reputation: 193,772

Post » Wed Jan 08, 2014 4:07 pm

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?gbataille2014-01-08 16:08:51
B
4
Posts: 10
Reputation: 270

Post » Wed Jan 08, 2014 4:45 pm

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.
B
92
S
32
G
107
Posts: 5,274
Reputation: 69,959

Post » Wed Jan 08, 2014 11:32 pm

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...
B
4
Posts: 10
Reputation: 270

Post » Wed Jan 08, 2014 11:54 pm

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.
Scirra Founder
B
395
S
232
G
88
Posts: 24,371
Reputation: 193,772

Post » Thu Jan 09, 2014 12:08 am

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 :)


gbataille2014-01-09 00:09:55
B
4
Posts: 10
Reputation: 270

Post » Thu Jan 09, 2014 1:33 am

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:
http://consultationmagaliederouin.com/TestPNG/
B
4
Posts: 10
Reputation: 270

Post » Fri Jan 10, 2014 1:25 am

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:


Any idea on how to make it work on Iphones?
B
4
Posts: 10
Reputation: 270

Post » Fri Jan 10, 2014 2:47 am

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

Here's the bug on IPhone 5:



Have you ever seen this problem?

gbataille2014-01-10 02:47:38
B
4
Posts: 10
Reputation: 270

Next

Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests