SVG & JS – Light stopped by obstacle

I’m actually working on a little game and i’m trying to block map reveal with obstacle. Currently i have this : enter image description here

And i of course want this :

enter image description here

I tried SAT.js library which let me know when there is a collision but i don’t really know what yo do with this. My first idea was to create a black (or white just for hide) polygon behind the obstacle but i’m sure the is a better solution.

For this "light" effect i use trick like this in SVG :

   <clippath id="clips" >
        <path class="view" tokenname="" d="M 1 1000 L 250 1 L 500 1000 z"/>
    </clippath>
 <image xlink:href="https://i.pinimg.com/originals/46/3a/12/463a1244e2e2627c53ff9806e2012c84.jpg" width="1920" height="1080" x="0" y="0" class="one"/>
    <image xlink:href="https://i.pinimg.com/originals/46/3a/12/463a1244e2e2627c53ff9806e2012c84.jpg" width="1920" height="1080" x="0" y="0" clip-path="url(#clips)"/>

Thank you for your help.

99 thoughts on “SVG & JS – Light stopped by obstacle”

  1. naturally like your web site however you need to test the spelling on quite a
    few of your posts. Many of them are rife with spelling issues and
    I find it very troublesome to tell the truth
    then again I’ll certainly come again again.

    Reply
  2. I was suggested this blog by my cousin. I’m not sure whether this post is written by him as nobody
    else know such detailed about my trouble. You are amazing!

    Thanks!

    Reply
  3. Greetings from Florida! I’m bored to death at work so I decided to check out your website on my iphone during lunch break.

    I enjoy the information you present here and can’t wait to take a look when I get home.
    I’m amazed at how fast your blog loaded on my mobile .. I’m not even using
    WIFI, just 3G .. Anyways, great site!

    Reply

Leave a Comment