Overlays.

[Full Bleed]

Updating Original Post to link to some example overlays currently available:

1) Overlay Demo campaign.
2) The Inn Generator uses a menu on the Overlay.
3) Motion Tracker.


* * * *


I finally got around to checking out some of the available information on the new Wiki: Overlay_Function() and it was pretty much as I feared... there just isn't much information about how to use this (potentially) awesome feature.

I downloaded the available Overlay Demo campaign to get a peek and it was promising... but still not particularly useful to the uninitiated. I figured out that the Snow and Rain overlay effects are basically transparent gifs loaded into tables (though you can't see the assets in the tables). But I was wondering if there was some way to use some more advanced html5 overlays like these:

Misty: https://codepen.io/AdrienBachmann/pen/YXXyWL
Fireflies: https://codepen.io/Mertl/pen/GexapP
Ashfall (just the ash overlay, not the background): https://codepen.io/shubniggurath/pen/oPGyQw
Rain: https://codepen.io/arickle/pen/XKjMZY

[Full Bleed]

Ok, I'll soldier on for some additional info on how to use overlays.

In the above linked demo campaign a nice UI (Hotbar) overlay is demonstrated.

In it, there is a section where the clickable "hotspots" on the hotbar are defined:

Code: Select all

<map name="selectedSkill">
  <area shape="rect" coords="140,40,170,80" href="[r: linkSkill1]">
  <area shape="rect" coords="172,40,202,80" href="[r: linkSkill2]">
  <area shape="rect" coords="204,40,234,80" href="[r: linkSkill3]">
  <area shape="rect" coords="236,40,266,80" href="[r: linkSkill4]">
  <area shape="rect" coords="268,40,298,80" href="[r: linkSkill5]">
  <area shape="rect" coords="300,40,330,80" href="[r: linkSkill6]">  
  <area shape="rect" coords="332,40,362,80" href="[r: linkSkill7]">  
</map>

So, if you want to make your own hotbar overlay using this code as your base you need to know what those coordinates are and how to get them.

Here is what I've determined:

1) The coordinates reflect the pixel map of the overlay image in question. So know your image's pixel dimensions and have some image editing software on hand that will help you determine what x,y pixel you're looking for easily.
2) When setting up the clickable hot spot, the first two numbers in the coords' stringlist are the top left (x,y) corner of a rectangle and the 3rd and 4th is the bottom right (x,y) corner of the hot spot.


Additional FYI:

+ I found that the native resolution of the demo hotbar UI was 591x79. Given that the demo code is using a bottom right Y coordinate of 80, that leads me to believe that MT might not have a 0 row/column for X,Y coordinates. Your editing software probably does, so be prepared to add pixels accordingly.


PS: Feel free to share any overlays you've created. And if you've already mapped out the shapes and coordinates of relevant hotspots on those overlays that would be extremely useful to share.

[Phergus]

This is something that Reverend on the Discord server did. I put it into a campaign file to demo it.

MotionTrackerExample.png (290.31 KiB) Viewed 2546 times

MotionTrackerV2.cmpgn

(497.62 KiB) Downloaded 105 times

Click on the motion tracker token and run the motion_tracker macro from the selection window.

[Full Bleed]

This is something that Reverend on the Discord server did. I put it into a campaign file to demo it.

Click on the motion tracker token and run the motion_tracker macro from the selection window.

Very cool.

I'm already thinking that this might be adaptable to approximate Tremorsense and maybe Blindsense/sight in D&D 3/3.5/Pathfinder.

[bubblobill]

Another example use case. The Inn Generator uses a menu on the overlay.

[bubblobill]

This is something that Reverend on the Discord server did. I put it into a campaign file to demo it.

Click on the motion tracker token and run the motion_tracker macro from the selection window.

Very cool.

I'm already thinking that this might be adaptable to approximate Tremorsense and maybe Blindsense/sight in D&D 3/3.5/Pathfinder.

That was the idea of the tracker as it can also see through walls which is suited to other senses.

[wolph42]

the motion tracker is epic! certainly gonna use that. you can easily combine it with onTokenMove to make it work perfectly.

[bubblobill]

Sweet, I don't think I have ever rated an "epic" before.

[wolph42]

yup, epic is a good denominator! It might help that my main rpg game is W40K where this fits in quite nicely

I've made some minor adjustments, still need to figure out the js although it appears relatively simple I'm just not used to js nor css. I've changed the color to more military standard and 'gave' the 'Hero' the motion tracker. It updates on every move so you have real time tracking.

Next I'd like to generalize some settings and then create an input screen where you can setup the tracker...

btw, there's one thing that eludes me:

Code: Select all

[h: rangeHeight	= 20]
[h: rangeRadius	= 1+math.hypot(rangeHeight, rangeHeight)]

I know what it does, I don't understand the *why*. Why do you use this? Why the hypothenusa and why the +1 ?

It effectively sets the range of the tracker to ~29, so why not just set the tracker range to x instead of sqrt(x^2+x^2)+1 ??

[bubblobill]

It's been a while since I wrote this, but my recollection is that it works like this (refer to pic);

From the origin, (i.e. the user of the scanner) the scanner can display as far as the height/range out to the corner, i.e. the hypotenuse. For convenience the scanner display is a 2:1 rectangle.

getTokens uses range "from" to "upto". Add one to the range was probably to ensure everything on the limit was not excluded. So from 0 upto Hypot+1.

Get all tokens within that range and plot them as blips; one <div class="blip"> for each token.

Blips are displayed in <div class="blipbox"> which is rotated according to token facing.

This lives inside <div class="blipscreencrop"> which then hides everything outside the window/mask.

This letterbox view and the range text is then displayed over the top of the scanner image.

pic.png (47.05 KiB) Viewed 2407 times

[wolph42]

ah ok. thnx for the explanation. I've rewritten that part for the most of it with a different philosophy, first tried it with trigonometry functions but those were too inaccurate (that was before someone pointed out that *I* (of all people) wrote this article) so I used a different method. What I've introduced is a scan range and sortof 'resolution' or visual range of the scanner. Everything withing scanrange but out of visual range is shown on the outer arc of the scanner, everything closer is shown (relatively) inside the arcs (like you designed it).
I'm currently doing the last bit where the ontokenmove updates the scanner for those clients that are using one (with the settings they have entered).
I've removed the hypot part as that does make little sense in this setup (you ask for a tracker range and then use something else). I've also changed the range into 'distance per cell' instead of #cells, which was slightly more tricky than I expected.

[bubblobill]

I think it would benefit from the addition of controls so the user can set the range, range units, use colours instead of blip-size, mute the sound (which is cute, but actually really annoying), alter the position on screen, etc.

Q: Why did you remove the button to minimise/hide the tracker?

Oh yeah, if you didn't think the colours were military issue, I suggest you take that up with the Colonial Marines and James Cameron.

[wolph42]

Q: Why did you remove the button to minimise/hide the tracker?

im not aware that I did, never noticed that button... and never realised that I removed it. Note that I started with Phergus campaign implementation, its possible that it was removed then. Can you share the original lib so I can have a look?
edit: i checked the campaign file and there was nothing there, I also found the original lib in discord but nothing there as well. So I'm curious what you're referring at.

Oh yeah, if you didn't think the colours were military issue, I suggest you take that up with the Colonial Marines and James Cameron.

pfff..., the only military that counts is from the universe where they utter 'blood for the bloodgod'. Epic stuff for epic settings!

edit: hmm: https://images.app.goo.gl/2n1STmSQ9rt9qCzA8

[bubblobill]

Okay, mea culpa, it looks like the minimise button wasn't published.

[bubblobill]

Q: Why did you remove the button to minimise/hide the tracker?

Okay, mea culpa, it looks like the minimise button wasn't published.

edit: hmm: https://images.app.goo.gl/2n1STmSQ9rt9qCzA8

Probably because it was an exercise that I never originally intended for distribution for that very reason. I shall have to create my own art now that it's gone public.