How to manage merging/splitting viewports to create a dynamic splitscreen

Question

I'm making a multiplayer 2D game where each player has an entity that they can move in any direction. This will be local only, so split screen.

Typically the player controlled entities will be in close proximity to each other. What I would like to do is have the screen get split only when players are far away - i.e. when it needs to.

See around mid way through this YouTube clip of Mari0 for an example of what I mean.
See this clip of Super Mario Bros X (sorry, it's a bit of a low FPS) for an example of horizontal & vertical splitting.

There starts off being a single viewport (or maybe 2 rendered to look like one). Then, as the players separate, either vertically or horizontally it splits the screen giving each player is own viewport.

How would I go about creating this effect? (managing the viewport merging/splitting etc)
How about extending it to work for up to 4 players? (is that even possible?)

Answer 1

To create the effect I would go for 2 viewports and masking/clipping.

When players are close to each other there's 1 viewport centered at the point half between players (maybe regarding movement vector). When players start to get apart you need to switch to 2 viewports plan.

Initially, when players are getting apart there should be 2 identical viewports which will get different shortly after. You might add sort of effect to display a border appearing between them in that time. While viewports are changing you also start centering on players, so they are no longer in corners. Optionally moving the viewports so that they take left/right half of the screen (or keep them alted in any direction). You can do the merging same way in reverse order (detect when to merge)

When the viewports are apart the render order will be like so:

1. Set clip area for 1st viewport (either by mask or by clip plane)
2. Render vieport 1
3. Set clip area for 2nd viewport (invert the mask or clip plane)
4. Render vieport 2
5. Release clip mask/plane
6. Render common stuff (border, GUI, etc.)

There's an issue when players move around each other (B player got left part of the screen and moves around so that he is in right of A player). For that case you need to track players positions and change viewports split from vertical to diagonal and horizontal and vertical again with A and B exchanging places (left/right).

Answer 2

The dynamic split screen of Mari0 looks fine because the frame just before the split is identical to the one after the split, plus the split line.

Either you manage such a thing, or you should think really hard about how to make it actually playable.

This won't work if the players might move in both horizontal and vertical directions (unless you plan about a diagonal split, of course...)

One way you could make it work under harsh conditions such as the diagonal split, could be to actually diagonally split it, and then gradually "move" the split line to be vertical again.