Title Layers | Patreon Weekly #328

Hey Patrons, with v3.2.4 and it’s new title screen releasing in full today, I wanted to quickly show off how the new title screen actually works! The new title screen, is comprised of a number of ‘layers’, and I’ll show them off in order below.

There’s also a new Patreon poll this week! With all the UI changes happening recently, there’s one I thought would be interesting to let you guys decide on.

The new title screen targets an internal height of 450 pixels (same as the splash arts), and then scales appropriately to match the game’s full display. Normally scaling like this would look really awkward, but because the assets are fully rendered, pixel imprecision isn’t really noticeable.

The first layer is, of course, the new archs. There are six pre-defined arch assets that the game picks between as it goes, with the first two assets being 2x more likely. The game randomly offsets each row in pre-defined intervals to vary things up, while also keeping the archs largely aligned. Lastly, the game applies a slight darkening gradient over the archs, that makes them appear slightly more dim toward the bottom.

Next we have all the floating objects, which are all laid out somewhat similarly. Objects are placed in random spots and tilts sequentially as the game goes down from the top of the screen, usually with some logic to prevent objects in the same layer from being too close. The game also multiples the scale of all the floating assets by 0.67x on portrait (effectively turning the scene height up to 675 pixels) to give a bit more room for things.

The first two floating layers are the clusters of bricks in the distance. There are just two cluster brick assets, but they stick around in the back so it’s hard to tell. The first cluster layer renders the bricks at 0.5x scale, and darkens them by 50%. The second layer is faster, and renders the bricks at 1x scale with just -25% brightness.

Next we have a somewhat sparse layer of small to medium objects at 0.75-1.25x scale and -20% brightness. This layer mainly exists to help sell a sense of scale in the scene.

Then we have the real meat of the scene, two layers of mid to large objects. The first is at 0.75-1.25x scale and -10% brightness. The assets used here are bigger so it looks closer than the previous small layer despite being the same scale. The closer layer is at 1.25-1.75x scale and full brightess

Lastly, there’s another layer of smaller objects rendered very close, at 2-2.5x scale. This again helps sell the depth of the scene, and also lets people more easily see some the finer assets like the chests.

And all of those layers together create the scene!