Dynamic Zone Highlighting

Hi all,

I’ve got an area based map where I’d like to be able to click somewhere on the TEM (the 38/+2 in the circle) and have it dynamically shade the area on and off. Sometimes the boundaries of these area based maps can be difficult to distinguish at a glance, so I thought this would be handy.

I’ve seen what Clash of Giants II did using global toolbar buttons, but I’d like to avoid that because there are simply too many and it doesn’t look very nice. I was thinking perhaps an invisible piece that I could lay over the TEM circle with an Action Button so that the user can click directly on the map, but I’m not sure if that’s the right approach or, if it is, how to implement it.

Any ideas?



I did something similar in the Warriors of god module. It’s a pain, creating the pieces, but the results look quite good.

I had 2 colours, red and blue to highlight ownership, so I used a Layer trait where the base layer had no image and the 2 coloured images filled the next 2 layers. Then I could manipulate the colour showing by changing layers. This is easier that using the Invisible trait, which are still visible to the piece owner.

Then I created a separate counter with a non-rectangular shape the same as the control area (in my case a shield of arms in each area) with an action button that sends a GKC to the coloured layer piece to rotate through the layers.

1 Like

That looks pretty nice, thanks.

I don’t suppose there’s an easier way using the baked in Zone Highlighters is there? Perhaps used with a SetGlobalProperty?

Currently it’s looking like this:

Brent’s approach is what I thought of immediately, I lifted it from his WoG module for To The Last Man!.

You should be able to do something with Zone Highlighters. I don’t know about easier. Most of the work was in the creation of the shapes. The trade-off is defining the shape of the zones in Vassal (Urrgh) as opposed to creating a piece of the correct shape in an image processing program like Gimp, which was actually quite easy using the Magic Wand selection tool.

Can you provide some hints for how to do it? I’ve tried a few things but am not having any luck.

Hmm, perhaps not so easy with your map. The WoG map has fairly well defined zones with borders and internally fairly homogeneous coloring that allows repeated shift-clicks of the Fuzzy Select Tool (Magic Wand) to pick up most of the zone. Then tidied it up with the other selection tools (rectangle and lasso) using Shift or Ctrl to add or remove small areas from the selection.

Once I had the zone selected, I filled it with a single color, then cut it and pasted it as a new image with transparency enabled so the unselected area withing the image rectangle became transparent. Then I selected the colored part of the image and made that semi-transparent to give a colored wash effect.

Save that as a zone image, add to your layer of the control piece and adjust the x,y offset so that it matches the map (painful part).

Sorry, I meant is there a way to do it just using the baked in Zone Highlighters instead of using layers?

You would just use them in the standard way you use Zone Highlighters.

Create a Zoned Highlighter named BLUE and give it a Blue colour 50% transparency.

Create your Zone so that it’s boundaries exactly match the boundaries of the Zone you are working on. In the Zone, click ‘Use Highlighting’ and specify the name of a property to use, say CURRENT

Create a Global Property in the zone named CURRENT.

Create a Control piece in the Zone that sits over the TEM display. (No Image, Non-Rectangular, non-stacking or selecting, action button, appropriate triggers.

Your control piece can now manipulate the highlight by using Set Global Property (Current Zone/Map/Module) to set different values into the CURRENT property. Set CURRENT to BLUE and the zone is highlighted blue.

The Turning Point Stalingrad is an example of how to do what Brent described.

Jim Hunter.

Thanks for the replies everyone. I’ll post what I did here and hope that it serves as a useful guideline for any other readers.

I had already added zones to the map (I’ll assume y’all know how to do that). To give you an idea of the type of map I’m working on, here’s a small portion of it so you can see the areas. The idea is to click on the TEM (the circle in the middle of each area) and have it highlight, or unhighlight if clicked again:

The first thing was to add a couple highlighters. For this post I’ll focus on the one with the name “AreaDisplay”:



Then I enabled “Use highlighting” on the zone via zone properties and gave it the highlight property “AreaHighlight”. This is a global property name I would reference later:

From there I did an “Add Global Property (Zone)” via right-clicking on the zone and added this:


You’ll notice that I used “AreaHighlight” (the global property) and set it to “None”. So, for now it won’t do anything. If I had wanted to start with it enabled I would’ve set to “AreaDisplay”, the name of my highlighter. If I had I stopped there, it would be enabled permanently.

Since we can’t interact with the zone or highlighter directly on the map, I needed to add a piece that would serve as a button to toggle the highlighter on and off. Since I’m using a graphic on the map as a control my piece would ultimately be invisible. However, during development I found it was handy to give it a temporary layer with some color so I could see the thing when repositioning it on the map, and then later delete that layer.

I used a prototype to set most of the properties of my button, which I created as an “At-Start” stack since it’s always going to be on the map. The “Area1” folder is just for organizational purposes:

As I mentioned before I recommend creating a temporary layer with some color so that it’s easier to reposition on the map:

And the control marker piece looks like this:

The “Non-Rectangular” bit is because the TEM is circular. “The Does Not Stack” property is so that players can’t accidentally stack it or move it around. These aren’t strictly necessary, but YMMV. And now on to the relevant bits.

I then added a “Set Global Property” like so:

You’ll notice the Global Property Name is the same as the “Global Property (Zone)” I set above. I selected “Current Zone/Current Map/Module” because the button will sit in the zone that it’s going to highlight.

I gave it the menu command “HighlightZone” instead of a right-click menu command because I don’t actually want this ability accessible via right-click. Remember this name, I will use that menu command name in a bit inside the “Action Button”. Lastly, I set the value directly using the following prompt:

{AreaHighlight != "AreaDisplay" ? "AreaDisplay" : "None"}

In other words, when the user clicks the button and it isn’t set to “AreaDisplay” (the name of our highlighter), then set it to “AreaDisplay” (toggle on). If it’s already set to “AreaDisplay” then set it to “None” (toggle off).

Last but not least I created an Action Button. The button is simple:

It simply invokes the key command “HighlightZone” that we defined in the Set Global Property Above.

With my button in place, I can now click the zone highlighter on and off:

Hope this helps some folks!