Blog post: Creating Spring Yard's Visuals (2023-02-25)

Sourced from *Creating Spring Yard's Visuals*, a blog post on the game's official website by Lapper.

```
First properly shown (I think) around 2018 in a Sonic Retro Spotlight post, Spring Yard looked like this:

​You may notice a few oddities, but I'd like to point out the rough way the terrain is cut off on the bottom edge of the circle, or the left side of the ledge.

How terrain visuals work

If you aren't already aware, in Sonic Studio you create terrain by modifying vector shapes - kinda like you would in Adobe Illustrator. This makes a shape a collection of points, which joined together create a shape with edges. Collision with the player object uses these edge vector lines. The game will fill these shapes in with triangles, which can be then be easily drawn to the screen as textured polygons.

How Sonic Studio created shape visuals back then (and still does to this day albeit more advanced and appealingly) is to crop a base texture to that shape (such as the checker pattern in GHZ). and then over the top of that add decorations around the edges (based on the edge angle and other factors).

​These edge graphics typically include things like grass/floors, edge shading, or other kinds of borders.

This approach works absolute wonders for zones like Green Hill, needing only a checker base texture, edge shading, and grass (with a grass shadow).

​However as you can imagine this was more of an issue for more complex zone themes like Spring Yard, which requires pillars with a unique top and bottom to them, patterned floors which neatly curve around slopes, and a green mesh pattern throughout - and, of course, the most obvious issue, the large panels that overlap the base mesh texture, that cast shadows upon the mesh.

After this image was posted I got some well appreciated feedback regarding exactly those. While the zone was not finished having it's decorations added - I knew that simply cropping a texture with the panels and the mesh wasn't going to cut it.

Idea for a solution

After some experimentation, I created a rough system for applying overlays to shapes. This was originally meant for the large green leafy areas found over the terrain in Wood Zone, but I realised it would work for Spring Yard Zone also.

Simply put, in Spring Yard Zone each terrain shape would check a specified size of grid (in this case, each grid cell is the size of one overlay panel sprite), and if a grid cell was "roughly" within the shape, it would add an overlay tile. With the panels taken care of, the base texture could be changed to the green mesh alone. Together, we get the same result.

Here's an image of that in place (after I sorted the pillar issue too), along with an unrelated little visual change to the sprites themselves.

And well, it worked! Unfortunately though it was a little haphazard. Below you can see how the overlays very often poke outside of a shape's boundary.

This kind of thing would interfere with gameplay. This happened because while the overlay tiles were performing various "is this point within the shape?" checks to avoid this, it was not enough. To improve it would mean adding even more checks which could potentially cause lagging any time you edit a shape.

Shadow Situation

Damn. Not only that, I had no way to add the shadows the panels cast onto the mesh base texture. Somehow the overlay tiles would have to change the colour of the existing base mesh texture around them...

Luckily, while that issue was put on the backburner I had encountered many other issues in other zones which had prompted me to improve the internal system for defining a zone's visual profile (the textures and types of shape edges a certain zone will use), which both included an easy way to add additional layers, reorganise layers, and also crop layers to the base texture of the shape. This was perfect for adding shadows, I can simply add another layer of overlay tiles (which are the colour of the shadows) and crop that to the mesh texture. Sorted.

Pillar Problem

Overlays weren't the only issue, the Spring Yard pillars that border the walls needed to be added, and needed to look correct.  They have a unique top side, and bottom side, and needed to work when the edge was at a slight angle also. This ended up the more simple of the problems to solve. As angles the pillars are sheared/skewed (hey, can't account for everything with 100% perfectionism, I'd never get anywhere) and the endpoints of the pillar can be shifted based on what angle or type of edge is coming up next. If it's a floor, the pillar will need to be a bit shorter to accommodate it.

This type of thing can all be defined within the zone's visual profile internally.

Final Steps

The issue about edge overlapping overlay tiles still remained. Up until this point I had been using 5 different sprites for the randomly selected red panels that would appear, all the same general size. The obvious solution is to introduce smaller, half and quarter sized overlay tiles which can neatly fit into small spaces at the edges of shapes. However, while I had thought over this idea a long while, it would mean many more overlap checks for each overlay tile added. Well, frankly, too many.

Until I introduced a system under the hood for quickly accessing nearby terrain lines. This was in-place in gameplay from day 1, but not so for the editor. It was now possible to quickly check if there are terrain edges in a given grid area. The overlay system could now use this information to exclude or modify themselves if they are being intersected. This means the idea for context sensitive segmented overlay tiles was practical.

If a given overlay tile is intersecting the edge of a shape, it will then check which of it's 4 corners are intersecting (or are outside of) the shape. Based on this information, it can simply switch to a more appropriate image.

The final result (with further updated sprites, a little closer to the OG colour scheme):

Overlays such as these will now tightly hug the shape border, but won't overstep too much if at all.

All of that is just 1 or 2 of the larger issues I had to deal with for a single zone. Imagine the issues I deal with for the others, or the other issues I deal with in Spring Yard!

And as a bonus, here's a semi-accurate recreation of that 2018 image.

​While there are still small changes yet to be made overall, it's come very far from the 2018 preview image.
```