Croakwood Devlog #6 - Houses

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 Oklch 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/c/h 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.

Debug view showing the bounds used for occlusion checks

Parkitect Anniversary Update & News

Hi everyone!
To celebrate Parkitects 6th anniversary, we’ve got a new free update for the game along with some exciting news to share!

Custom Campaign Editor

This update adds a new custom campaign editor to the game in addition to the scenario editor.
Now you’ll be able to create and play your own custom campaigns, just like the ones that come with the base game and the Taste of Adventure DLC.
The campaigns can also be shared online through Steam Workshop and mod.io, so you're able to play the custom campaigns created by others.

The amazing AstroTron has already turned some of his scenarios into the brand new custom campaign that you see in the video above.
It's available on Steam Workshop here.
Big thanks to AstroTron for testing the campaign editor and allowing us to use the campaign in our showcase video!

New DLC Incoming

We’re also very excited to finally announce that a new content DLC is in the works and should be released in a few months. We know many of you have been asking for this, and we’re excited to have the opportunity to make it happen!
Work on it started fairly recently so there's nothing to show yet, but so far we know that it'll be a smaller DLC than the existing ones that'll focus on new deco themes.
We’ll be sharing more details later as development progresses.

AMA today

To top things off, we thought it would be fun to run another AMA (ask me anything) over on Reddit to mark this occasion. If you have any questions for us about Parkitect, Croakwood or game development in general, head over to Reddit and we’ll answer as best we can. The AMA starts at 6pm CET / 9am PST.

reddit AMA

1732899600

A big thanks to our amazing community and our sincere thanks to all our players, for all these wonderful years! Happy anniversary everyone!

Croakwood Devlog #5 - Water

In a game about frogs you kind of need to have water, which means you need to program a water shader. A shader is basically a short program that calculates what color a pixel should receive. To me as a programmer they can be somewhat intimidating to create - you need to write some code that, somehow, produces something that matches a certain artistic vision. Whenever I'm working on a shader I find that oftentimes the result looks terrible for a long time until eventually a tiny change is made and suddenly everything looks great, but figuring out what tiny change is required can be a long process of trying lots of different things.

Oftentimes it's also not clear from the start what the artistic vision is, especially when the art style of the rest of the game is still evolving, but you have to start somewhere. So one of our first tests around late 2021 for the water looked like this:

We liked the reflections and the wavy outlines around the edges of the water, but it felt like it was still missing something.

Eventually Marve came up with this concept art for the fishing hut:

This concept is really more about the the objects for the fishing hut, but it still gave us a some direction for what the water could look and "feel" like.

Over the next few years we kept making small tweaks to the water shader until eventually arriving at the current version, which looks like this:

This is what I meant at the start of this post - from a technical point of view this is really not all too different from the very first version we had, there's just some tweaks to the color, the transparency, the width and shape of the outlines, and some "smaller" additions like the ripples from the fish and other things swimming in the water, but with all of these things together it eventually looks good.

We'll surely keep making more small changes but for now we're quite happy with how it looks.

Shorelines

I couldn't find a lot about how other games are doing their water, so I wanted to give a bit of technical insight into how we're doing ours.

Probably the easiest approach for this kind of effect is the version we used in Parkitect, which looks like this:

This is being created by checking if the distance from the water surface to the depth in the depth buffer is below a certain threshold. It's very easy to do and quite cheap performance-wise, but you can't do a wave movement animation towards the shore and it can look as if the effect is painted onto the objects inside the water (because it essentially is; the effect can not extend beyond the geometry of the objects inside the water, so you can also only ever see it on the side that's facing the camera, not all around the object).

In Croakwood we went for a slightly more complex approach. We're placing an orthographic camera that's looking straight down just above the water surface to get a texture that contains the outlines of anything intersecting the water surface.
Here's an example with the generated outline texture on the right:

To be able to distinguish what type of shore it is we render the terrain into the green color channel and anything else into the red color channel (we do this so that we can give the wave effect a different movement direction and slightly different look depending on whether it's around the terrain or an object).

Then for every pixel in this outline texture we calculate the distance to the nearest shoreline pixel which can be done really fast on the GPU as explained in this excellent article.

Signed Distance Field generated for the shoreline effect (the version on the right is just a different visualization to better understand what's going on)

And that's all we need to know where the shoreline effect should appear! They work for objects of any shape, fully surround them and nicely combine if there are multiple nearby objects.

Waves

The waves created by swimming frogs and fish look like they might be fairly complex, but it's surprisingly just a couple dozen lines of code in a compute shader. This article and this video explain it better than I could.

Croakwood Devlog #4 - Art Direction

In this post our art director and concept artist Marve gives some insights into her thoughts on the setting of the game and some of the influences for the art direction.

Mood

We decided pretty early on we want to keep the overall style semi-realistic and not wander too far into fantasy. From earlier conversations we referenced story-book like elements a lot, and its still one of our guiding elements in various design choices.

The story-book feel is reflected in the vibrant color scheme, stylized light and extra warm shadows, to really emphasize this almost dream-like warm summer day. The perfect time for frogs to be active!

Most importantly, there is no human involvement in our world. You wont encounter any stray tin cans or bottle caps. We really wanted to keep the forest and all the natural elements very untouched and wild.

In a way the forest is a character on its own. The light won't reach under thicker forest nooks which creates a much more cool and mysterious atmosphere. The frogs will be discovering their surroundings alongside the players, it's supposed to be a bit secretive and unpredictable. The trees and mushrooms grow too tall, the trails can lead to unknown locations and various strange creatures can cross your path.

To help along with the immersion we found it very important to have a direct reference to scale. Seeing familiar plants, mushrooms and trees are really nice ways to grasp how small our frogs are. Also, there's something so charming about imagining such a village existing in a massive forest you have walked in.

Early concept art exploring different ideas for biomes

Our world is set at a temperate climate with plenty of greenery and rain but nothing too tropical or desert dry. This helps narrow down the selection of flora and fauna we add to the environment.

With some creative freedom, a lot of it is reflected in the building materials, furniture, the clothes frogs wear and symbols they use in their arts and crafts.

Anyone who's had the chance to spend a lot of time in nature as a child might feel right at home here. A small yard or a garden used to feel like a massive playground, a whole forest would be filled with endless possibilities and mysteries.
We want to give you this feeling of being close to the ground, where bugs and snails roam around under leaves and grass blades and the sunrays peek through the leaves.

Influences

These are some of our main influences for the mood and look:

Midsummer, Djamila Knopf

This painting from Djamila Knopf has that specific feeling of wonder and warmth that reminds you of the carefree and quiet summers of childhood. There's so much magic and playfulness here and it always fills you with a sense of home. This is what we want Croakwood to feel like - warm, welcoming and a little bit dream-like.

Another huge influence here has been Arrietty, the movie by Studio Ghibli. Aside from the dollhouse furniture and borrowed human items, one of the most charming parts is how the tea poured in a mug behaves, it's so delightfully weird, thick and viscous; nothing like we're used to seeing. Small details like that help so much with pushing the believability.

Because we do not have humans living in our world, the focus for Croakwood is more on natural elements the frogs can use to craft their tools, workshops and houses.

In addition, Alexandre Diboine has his amazing world of Saltenpepper, which also has influenced the art direction quite a bit. The way he handles shapes and textures is very close to what we’re aiming for.

Tiny Garlic Shop, Alexandre “Zedig” Diboine

Small beings living among massive plants and vegetables; a lot of furniture and house designs are a direct reference to the environment around them; how large an actual garlic is in that space and how big and chunky the rolled up leaves are in the background - all of this pushes the believably and makes it much easier to imagine how it might be like to live in this world.

Setting

Croakwoods main location for the frogs is an open and light filled meadow in the middle of large ancient forest, a space lush with various flowers, mushrooms, shrubs and building materials taken straight from the environment.

There's a lot you can show with how the materials are used and the textures and detail density, for example how the wood grain would be a lot more bloated and the grooves and cracks will be more visible. Large pinecone makes an excellent material for some roof shingles. Tree bark is sturdy enough to build up walls and fences. And pine needles make a great rustic looking thatched roof.

Our frogs are also a bit chaotic and fun loving creatures, they might not always follow the most convenient building regulations. Patchwork of various materials make great little cottages. They can be very resourceful with what materials they use and how they build their houses.

Some of the first concepts for frog houses

The grid system and modular nature of the construction pieces do create some limitations, but we’ve been working hard to add plenty of variety in fun materials and elements to make this world extra cozy and alive.

Towns in Croakwood are meant to look like natural parts of the environment, everything is carefully and lovingly handcrafted by the villagers themselves. Also, the frogs coexist with the forest and its inhabitants - all the resources they make can provide for more than just for the town.
Perhaps you could use some to trade in exchange of a secret or as an offering for a mischievous forest spirit?