2D Lighting system (canvas2D)

  • Hey there!

    I am currently developing a 2D lighting system in javascript for canvas2D.

    The goal is to create an identical thing for webgl as soon as it properly works.

    I've gotten as far as to have a light working perfectly, except when adding more than 1 light gives a problem.

    The system works by drawing a sprite (yes I copied the Sprite plugin, it was the fastest way) and clipping away where shadow should be.

    but when using more than 1 light, the cliping path subtracts when overlapping

    Works Fine:

    <img src="http://s17.postimg.org/cyqxmq1rj/works_fine.png" border="0" />

    Subtracting paths:

    <img src="http://s13.postimg.org/4zx3hs15j/problem.png" border="0" />

  • Do you have a code snippet to show? Hard to offer suggestions without it. Except that you need to restrict clipping to the current light sprite obviously.

  • You cannot implement a lighting system by clipping for this exact reason. You need to render each light separately with additive blending.

  • Do you have a code snippet to show? Hard to offer suggestions without it. Except that you need to restrict clipping to the current light sprite obviously.

    This is exactly what I want to do.

    Right now I draw a path in with the canvas context element, then simply clip();

    //for each object type

    for (i = 0, leni = this.type.obstacleTypes.length; i < leni; i++)

    {

        //for each instance

        instances = this.type.obstacleTypes.instances;

        for (j = 0, lenj = instances.length; j < lenj; j++)

        {

         rinst = instances[j];

         //if overlapping

         if (runtime.testOverlap(this, rinst)){

    //have to draw the path around the object first (set it to the viewsize, because if they overlap, it basicly cuts every light according to 1)

                ctx.beginPath();

                ctx.lineTo(0, 0);

                ctx.lineTo(0, myy + runtime.height + this.height);

                ctx.lineTo(myx + runtime.width + this.width, myy + runtime.height + this.height);

                ctx.lineTo(myx + runtime.width + this.width, 0);

                ctx.lineTo(0,0);

    //Draw a path that needs to be cut out of the image

    //this part has a lot of conditional lineTo(); which is omitted

                ctx.moveTo(endpoint.x, endpoint.y);

                ctx.lineTo(imgp1X, imgp1Y);

                ctx.lineTo(imgp0X, imgp0Y);

                ctx.lineTo(endpoint.x, endpoint.y);

                                                        

                ctx.closePath();

                ctx.clip();

    // after this it draws the image

                                            }

                        }

                  ?}              

    You cannot implement a lighting system by clipping for this exact reason. You need to render each light separately with additive blending.

    How would I go about doing this? is there a way to manipulate the cur_image, or even in webgl?

    I would like to be able to specify a region that will not be rendered.

  • I am currently developing a 2D lighting system in javascript for canvas2D.

    The goal is to create an identical thing for webgl as soon as it properly works.

    have you checked the paster plugin thread?

  • No I haven't, I'll do that right now.

    EDIT: I don't see how this helps, but I should be able to replicate my code in webgl which may allow me to do this per image instead of canvas wide.

  • You could use the ctx.save() before clipping and ctx.restore() after clipping to reset the clipping region. I may be a problem when making the webgl version as webgl doesn't appear to have an equivalent to clip().

    Another way to go about it is drawing to a canvas and using a blend to combine the images in various ways.

    Look here:http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

    The idea can easily be used with webgl as well.

  • Thanks for the reply!

    although using restore seems to cut performance to an unworkable level, even when using only 2 sprites, the blending options might be just what i need.

  • 2D lighting in webgl would be awesome! I'll follow your progress closely :)

  • 2D lighting in webgl would be awesome! I'll follow your progress closely :)

    Thank you, I will keep this thread updated. I also have a rather elaborate prototype due in the next 2 weeks, so I won't be updating this soon.

    The current system works IF you use separate layers for the lights (because of the source-out drawing). The performance of canvas2D rendering this way instead of clip() makes for less performance, though I tested about 6 lights and it worked fine. There is some drop in frame-rate.

    Node-webkit export does have major performance issues with this method.

    My best option is to implement a WebGL version, since this would increase performance and will probably have more efficient image manipulation tools available.

    If interested I will post the Canvas2D version with a tutorial on how to use it, for testing purposes.

  • That's great! I'd love to try the the Canvas version to see what it could look like.

    I'm currently trying to make a 2D stealth game and 2D lighting is essential. I tried using the plugin Canvas but the framerate was too low so I just gave up. If you check my blog (see signature), you will see what the game is going to look like.

    I have been waiting for a webgl solution for months so I really hope you'll succeed :)

  • I'd be really interested in a WebGL implementation too.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • My support to the claim too!

    Currently I'm learning C# and using Unity / Blender, to be able to use 3D light effects over sprites, but would be awesome to have it on C2.

  • webgl implementation will be a dream *-*

    great job ^^

    you have my full approvation e support ^^

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)