0 Favourites

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

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
[BEHAVIOR] Chipmunk Physics
673 82,463
nelostic's avatar
nelostic
Unread hot topic
0 Favourites
[Behavior] LiteTween
672 169,801
manujorgo's avatar
manujorgo
Unread hot topic
564 105,175
rexrainbow's avatar
rexrainbow