A big part of Croakwood is providing cozy little houses that your frog villagers can live and work in, so let's take a look at how the houses work! All of the buildings are created from individual pieces, so every wall, furniture item and decorative object is an individual object that you can place. This is a system that's similar to the one we used in our previous game, Parkitect. We really like that it allows a lot of creative freedom while still ensuring that houses a pretty quick and easy to design due some restrictions on what you can and can't do. Paths, walls and furniture objects are locked to a grid so they always fit together nicely, and to make sure that things the frogs need to interact with are accessible. Purely decorative objects like lamps or potted plants can be placed freely.
One somewhat annoying thing with the building pieces in Parkitect were doors and windows. In Parkitect the doors and windows were part of the wall piece, so for each wall style we had to add special wall pieces with holes cut out for doors and windows, or alternatively there were doors and windows that you could stick onto the wall, but they would just sit on top of it without creating a hole. We couldn't figure out a better solution at the time, but now for Croakwood we came up with a way of putting holes into walls using shaders. This gives you more freedom for placing doors and windows and we have to create fewer building pieces, which is a nice win-win.
Most objects can be recolored. One challenge we faced there is that the art style of Croakwood is somewhat textured, whereas Parkitect was mostly using flat colors which made recoloring easy. Figuring out how to do this for textured objects took some time, but we eventually came up with something that works quite nicely.
It took a few tries to figure out how to do this but wasn't too difficult in the end. Our first approach was to create our textures in grayscale and then multiply in the custom colors, which gave pretty flat results because it doesn't allow for any variations in color value. We divide our textures into different sections that should be recolorable and pick one of the most prominent colors in that section as its "base color". Then we generate a new texture where each pixel contains the delta in Oklab color space from its original color to the base color.
Left to right: texture; base color sections; delta texture in Oklab color space To apply the customized colors we submit the chosen custom color for each section to the shader, add the L/a/b values from the delta texture to it and convert back to RGB. This gives pretty nice results even if pixels in a section have color values that are very different from the base color. Also our artists can simply create their textures in the way they are used to without having to do anything special to make a texture recolorable.
Of course houses can also be saved and shared, so you won't have to design a complete new house every time. We're storing them in PNGs again since that worked quite nice :) Objects have resource costs, so once they are placed construction materials arrive and the builder frog constructs the objects to make them useable.
Once the house is complete you can always peak inside and see what its inhabitants are up to :)
Figuring out which objects to hide when peeking into a house is a bit tricky. We don't want to obscure the view of anything important, but also want to show as much of the inside as possible and not unnecessarily hide things that could stay visible. We tried a few different approaches for this but what worked the best in the end was to simply check if the bounds of an object are in front of the volume defined by the paths of the currently viewed floor. This alone would result in a lot of "visual noise" when rotating the camera caused by individual objects appearing and disappearing which doesn't feel very nice, so we're grouping nearby objects together and then decide the visibility for the whole group, so that we're always changing the visibility of a larger chunk of the building at once where possible.