Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
Advertisement Create a free account Compendium in Game, Join Today

[Script] Walls - SVG Path importer for dynamic lighting. -- Now with Advanced Fog of War Support!

1569123856

Edited 1569124309
The Aaron
Forum Champion
API Scripter
Update v0.3.5 -- I've rewritten the heart of Walls to approximate B├ęzier Curves using Line Segments.&nbsp; This fixes the bug were Advanced Fog of War could see through Walls created Dynamic Lighting lines. (Note that the nature of AFoW still permits showing some amount of a cell beyond DL lines.)&nbsp; An added bonus is that the Line Segments are probably better performing for DL in general.&nbsp; (Thanks&nbsp; Dylan G. &nbsp;and&nbsp; Rotimer ) Original post:&nbsp; <a href="https://app.roll20.net/forum/post/1337473/script-walls-svg-path-importer-for-dynamic-lighting-revisited" rel="nofollow">https://app.roll20.net/forum/post/1337473/script-walls-svg-path-importer-for-dynamic-lighting-revisited</a> Prerequisites: The GIMP &nbsp;for creating and exporting the path SVG file for your map Post Processing Website &nbsp;for turning the SVG into commands to setup your walls. You may be able to use Photoshop or Inkscape or some other program to generate the path SVG file. PM me if you'd like to try and I'll try to help you. The Basic Process: In The GIMP Load your map. Generate a path for your walls. Export your path to a file (SVG). On the Post Processing Website Upload your SVG file from step 1.3 Copy the output commands In Roll20 On the map layer, select the image that is your map Paste the commands into the chat and send them. Wait about a minute (feel free to watch the log, there are status messages so you know it's working). Enjoy! Detailed Instructions: 1. In The GIMP 1. Load your Map From the menu, select&nbsp; File-&gt;Open...Browse to your map and click the&nbsp; Open &nbsp;button. 2. Generate a path for your walls and Export your path to a file There are several ways of doing this, the methods I like best involve selecting an area and turning it into a path. I'll cover two ways of doing that, but feel free to do more advanced things or experiment further. The Magic Wand Tool Selections on a Grid Select the&nbsp; Magic Wand &nbsp;tool from the toolbox. The&nbsp; Magic Wand &nbsp;creates a selection by flooding out from a point across all the pixels whose colors are "close" to the color of the pixel you clicked on. The "close" is controlled by the&nbsp; Threshold &nbsp;setting in the&nbsp; Tool Options &nbsp;dialog (From the menu, choose&nbsp; Windows-&gt;Dockable Dialogs-&gt;Tool Options ). You can hold Shift to add several regions to your selection, if you have walls multiple dungeon levels on the same map, or areas accessed through some other means than a door. The image I'm using here has a light grey grid in the background, so I have to adjust the Threshold up quite a bit to flood past the grid and hit the walls. In this case, I used a value around 48. The mouse cursor shows where I clicked to get this selection Now that I have a selection for my walls, I need to adjust it a bit. I want some of the texture of the wall to show through, so I'm going to move the selection back into the walls a little ways. From the menu, choose&nbsp; Select-&gt;grow... &nbsp;For my map, 15px allows a nice bit of the cave wall to show.&nbsp; You may need to play with the number a bit to get the effect you want. You can undo adjustments to the selection in the usual way (From the menu, choose&nbsp; Edit-&gt;Undo &nbsp;) Now you need to turn this selection into a path. From the menu, choose&nbsp; Select-&gt;To PathNext, open up the&nbsp; Path &nbsp;dialog. From the menu, choose&nbsp; Windows-&gt;Dockable Dialogs-&gt;Path You should see the path you just created, named&nbsp; Selection . Right click it and choose&nbsp; Export Path... &nbsp;Save the path to a file you will be able to find. That's it for the&nbsp; Magic Wand &nbsp;method! If your map is laid out on a grid and has lots of intervening details, it may be easier to just select the walls directly using the&nbsp; Rectangle Select Tool . You can turn on the grid to make this easier. (If you don't know the size of your grid, you can measure features of the map with the&nbsp; Measure Tool &nbsp;or just play with the size until it looks right.) From the menu, select&nbsp; Image-&gt;Configure Grid... Under&nbsp; Spacing , adjust the&nbsp; Width &nbsp;and&nbsp; Height &nbsp;to the correct size. The grid updates as you change it, so you should be able to match the grid on an image just by clicking the up and down arrows. (It may help to set the&nbsp; Foreground color &nbsp;to something especially distinct, like a bright red or blue.) If your map doesn't begin precisely on the grid, you can change the Offset in order to align it. If your map features a grid that isn't square, click the chain link ( see mouse cursor in above image ) below the&nbsp; Width &nbsp;and&nbsp; Height &nbsp;of&nbsp; Spacing &nbsp;or&nbsp; Offset &nbsp;in order to adjust&nbsp; Width &nbsp;and&nbsp; Height &nbsp;separately. Now that you have a grid you just need to select your walls. There are many ways of doing this, but I prefer to either select the individual walls with the Rectangle Select tool, or start with everything selected and deselect the rooms (On a Mac, hold down Command while selecting to subtract. On Windows, you can change to subtract mode in the&nbsp; Tool Options &nbsp;dialog. From the menu, choose&nbsp; Windows-&gt;Dockable Dialogs-&gt;Tool Options ). Now that I have my selection for the walls, I need to adjust it a bit. I want some of the texture of the wall to show through, so I'm going to move the selection back into the walls a little ways.&nbsp; In my example, I have selected the walls, but I think you get better effects from adjusting based on the floor. This is easily fixed by inverting the selection. From the menu, choose&nbsp; Select-&gt;Invert Now we can proceed as in the other example. From the menu, choose&nbsp; Select-&gt;grow... &nbsp;For my map, 5px allows a little of the dungeon wall to show. on this grid, 15px was more than I wanted to show, but use whatever you like. Now you need to turn this selection into a path. From the menu, choose&nbsp; Select-&gt;To Path Next, open up the&nbsp; Path &nbsp;dialog. From the menu, choose&nbsp; Windows-&gt;Dockable Dialogs-&gt;Path You should see the path you just created, named&nbsp; Selection . Right click it and choose&nbsp; Export Path... &nbsp;Save the path to a file you will be able to find. That's it for the&nbsp; Selections on a Grid &nbsp;method! 2. On the Post Processing Website Follow the instructions on the&nbsp; website &nbsp;to upload your SVG file and click 'Parse'. Click in the output box and copy the generated commands. Now we'll take those commands to Roll20. 3. In Roll20 With the Walls Roll20 API script installed, you can add your walls to the map. Start by selecting a map token on the map layer. The script will use that map for positioning and scaling. Because the commands all come through as separate api messages, it will have to do all of the work regardless of if you have selected a map, and then tell you afterwards that you didn't, so do yourself a favor and select one now. =D Paste the commands into the chat and hit enter. You can watch the log file to make sure it's actually doing something. Depending on the complexity of the Path, it can take a while to run. For the caves in the Magic Wand example above, it took about a minute to parse all the commands. This one took only a few seconds. Here is the view of the Dynamic Lights layer after running the commands. You can see the walls we added in red as well as their effects on the lights. 4. Enjoy! Current Limitations: Only the SVG commands M, C, and Z are supported. These are the absolute position commands for moving to a point, drawing a curve, and closing a curve. I couldn't actually get The GIMP to export a path with anything but these 3 commands in it, so this is only a limitation if you are coming from some other source. If other commands become necessary, I'm happy to add them in. PM me with details if you need this. No support for Rotation, Flip Horizontal, Flip Vertical. If you need these operations, you're either on your own with adjusting the paths afterwards, or you need to do them in TheGIMP and then export the path. Future Features: Support for Rotation -- this won't be terribly difficult, let me know if you need it and I'll prioritize it. Support for Flip Horizontal and Flip Vertical -- Also not too difficult Support for generating smaller path segments to allow post import customization. Support for applying a loaded path to a map if you forgot to select one. Support for color selection and stroke size. (You can do this on the webpage!) GitHub:&nbsp; <a href="https://github.com/shdwjk/Roll20API/blob/master/W" rel="nofollow">https://github.com/shdwjk/Roll20API/blob/master/W</a>... Support my work on If you use my scripts, want to contribute,&nbsp; and have the spare bucks to do so , go right ahead. However, please don't feel like you must contribute just to use them! I'd much rather have happy Roll20 users armed with my scripts than people not using them out of some sense of shame. Use them and be happy, completely guilt-free! Disclaimer:&nbsp; This Patreon campaign is not affiliated with Roll20; as such, contributions are voluntary and Roll20 cannot provide support or refunds for contributions.
So I'm not seeing any output to my API Output Console when running the script. Worked like a charm on the first map I did then on the second map which is larger mind you Firefox just gives me a Webpage is running slow message and do I wanna stop it or wait. So I click wait been at it for a bit though. Is there anything special I have to do to see the API output? Thanks in advance.&nbsp;
1569201721
The Aaron
Forum Champion
API Scripter
Hmm.. looks like I took those log messages out...&nbsp; It should come back after running for a bit.&nbsp; If it seems to be taking too long, copy the commands into a text document, and paste in only 20 or so at a time, and see if that sorts it out.&nbsp;&nbsp;
kk, I'll give it like 10 minutes and if it doesn't finish I'll do that thank you, sir.
1569201845
The Aaron
Forum Champion
API Scripter
No problem.&nbsp; I'll see about adding some sort of feedback back in.
Sounds good I'll let you know if anything else weird happens. It's a wonderful script though I can see it saving tons of time. :)
1570772731
Nick S.
Pro
Marketplace Creator
Translator
Hi Aaron, I'm working on adding support for your amazing script to my dungeon generator . I'm still working on it, but it's getting there: (don't pay attention to the awful-looking dungeon above, it's just a mask) In principle it's working well, but the large number of nodes I believe tends to lag large maps. It might be unfeasible, but have you considered adding an option to optimize the path for tile-perfect maps? (!walls begin --optimize ?) For example moving all nodes to the nearest grid vertex and removing the ones that now form a path to that same point so only nodes forming a path further away remain active, eliminating duplicates here as well. To illustrate, it could end up looking like this: I don't know if my explanation makes sense or if the idea is doable, but I thought I'd mention it and hear your thoughts. Cheers!
1570795796
The Aaron
Forum Champion
API Scripter
This version actually does a little of that while converting curves to lines. It does not collapse line segments that overlap or are near to one another. I'm not sure how well it could do that with the limited information it has. It doesn't actually know about grid points as it scales based on the selected image which may not be aligned to the grid (and the grid might not be on).&nbsp; It seems like it would be easier for the source system to to optimize the path data before passing it to walls.&nbsp;
1570909979
Nick S.
Pro
Marketplace Creator
Translator
Thanks for the reply Aaron, I'll see what I can do to minimize the points from my side before sending it to the script in that case. Cheers!
1571976947
Nick S.
Pro
Marketplace Creator
Translator
Done! Paths can now be generated and imported directly to Roll20 with your script:&nbsp; <a href="https://dungen.app/" rel="nofollow">https://dungen.app/</a> Short video showing how to do it:&nbsp;<a href="https://youtu.be/aXI0m_Or6Hc" rel="nofollow">https://youtu.be/aXI0m_Or6Hc</a>
1571978629
The Aaron
Forum Champion
API Scripter
Sweet!!
1571978765
The Aaron
Forum Champion
API Scripter
That looks great! &nbsp;Love what you did with the points on the external corners!
1572238908
Nick S.
Pro
Marketplace Creator
Translator
Thank you!