2023-03-26

Activate the containment field

My current virtual tabletop of choice for prototype work is Screentop.gg, which provides a 2D environment that you can access from a browser, and do this for free (though paid-for premium is apparently on the way - and has been for a couple of years now!) without installing anything, and without melting your PC from the load. This works well for me and makes me happy. It is also under active development, and new features crop up periodically, generally without fanfare (unless you are paying close attention in their Discord server), which makes for occasional excitement or confusion.

Note: this post is likely to not make very much sense to a lot of people. If you're not interested in Screentop configuration, I really won't mind if you move along and do something else with your life. Anyway...

A relatively recent addition is grid "dropzones", which appear by default on "container" components (which are the type of component you use if you want to put something on top of or in it - like a board, say), which made a huge difference, allowing containers to have a simple and useful default behaviour without having to mess about with setting up anchors in precise locations.

Anyway, what I wanted to talk about here is how you can make anchors (lines or points where you can drop other components) interact on containers in order to make some neat and helpful behaviour with little effort.

The driver for this is making a virtual prototype of my "City State Co-op" game, which requires cards to be tucked behind a small player board, and overlapped so that the main information on each card is easily visible. Like in the following picture.

The way this works is with a set of dropzones on a "player zone" container that I created for arranging player components on, arranged in a particular way:


In this, it is the "Cards" and "PlayerBoard" dropzones that matter. Screentop arranges things in order, down the list, so in this case the player board is rendered after the cards, and thus appears on top of them. If I rearranged this so that the cards are after the player board (the 6 dots to the left of the names are handles that you can drag around to rearrange the order), the board would appear underneath.

The PlayerBoard dropzone just has a point anchor in the middle of the container and isn't interesting other than its presence. The Cards dropzone has a bit more going on with it though:


The highlighted line in the image is the "Challenges" anchor, which isn't massively interesting, as it is a place to dump cards that have not yet been dealt with in the game - this anchor ensures that the cards are face-up, and aligned vertically with respect to the player zone, and makes sure they are lined up neatly (unless you have way too many in play - in which case you have probably lost the game) which is cute, but that's about it.

The other two lines are, I think more interesting. They are effectively mirror images of each other, and ensure that the cards that need to be tucked line up the correct way.



The x coordinates of the line here run left to right and the cards are aligned to the end (the right) of the line, with a gap setting that overlaps by the right amount to show what I want of the card. The rotate makes sure that the card is on its side, in the correct direction, and the "open" and "up" settings ensure that the cards are face-up. (Actually, in this case the cards are modelled as containers, which allows some other handy behaviour not available to tiles, which would usually be a good choice for cards, and so only the "open" setting actually matters.)

The "Buildings-right" anchor differs in that the x coordinates (which are shifted to the other side of the component) run from right to left, so that the "end" alignment now hits the left, and the rotation is 270 to allow the cards to rotate neatly the other way.

And the upshot of all this is that I can basically drag a card to the general area of one of these anchors and let it go, and the card will flip, rotate and tuck appropriately without further assistance, making the game much smoother to play than it might otherwise have been.

I realise that this post is very dry and probably of interest to about two people, and they may never see it, but please do let me know if this sort of thing is helpful. 





No comments:

Post a Comment