Communauté Steam :: Croakwood

Croakwood

Tous Discussions Captures d'écran Créations de fans Diffusions Vidéos Actualités Guides Évaluations

Croakwood

Croakwood is a creative, relaxed town building simulation game about frogs and nature! Design and create structures, plan and decorate towns, and explore an ancient forest to guide the growth of a charming community of tiny amphibians as they settle into their new life in the lush and wild woods.

Consulter la page du magasin

Contenu officiel et de la communauté le plus populaire de la semaine passée. (?)

Devlog #7 - Rendering

10 avr.

This post is about a few different aspects regarding how the game is being rendered. It's mostly technical but I figured it might still be interesting to see behind the scenes a bit.

We're using Unity as the engine for this game. A game engine is a piece of software that provides various features for you, such as systems for animations, the UI, or how things get drawn (rendered).
This brings a bunch of benefits for game developers - creating all of this yourself is a big non-trivial task, so using an existing engine can save a lot of time. Plus if it's an engine that's already been used by many other games that probably means it comes with many helpful features have been proven to work well.

On the other hand, using something that has been created by others to work across a wide variety of games can also mean that despite being adaptable to your needs it's probably not going to be a 100% perfect match. If you need a feature to work slightly differently you might be out of luck, especially if it's an engine like Unity where you can't change the source code yourself. Also, since the features were designed to work for many different purposes and to have as few limitations as possible, they are probably doing things that you never need, or are doing things in a way that aren't necessarily the most optimal performance-wise for your specific game.

This is why we're not using many of Unitys default features and are developing our own solutions instead. One big area where we're doing a lot of custom work is rendering.

You might think: why are you even using Unity then, couldn't you just make your own engine?
We're still using many lower-level Unity features such as the graphics API abstractions; how assets are being loaded; and being able to deploy to many different platforms is great. So while we're not using some big parts of it the remaining parts still save us a lot of time.

I also want to point out that this is not supposed to be a "Unity is bad" post. When we decide to not use a Unity feature it's usually not because what Unity has is not good, but because we have some needs that other games might not have, or we might want to have more control over what's going on so we can do some slightly unusual things. Also Unity is constantly changing too - some of the things we have developed ourselves they have added in similar form in the meantime as well, so if were restarting development on this game today then the decision to develop some things ourselves might look differently.

Frustum culling

You don't want to tell the graphics card to render things that aren't visible on screen, so you need to check if your object would be visible or not.
Unity does this on the CPU, which can have some benefits. For the type of games that we're making that's not great though, because:

we have lots of objects (e.g. a single house is not "one object" but created from hundreds of individual pieces).
Checking them individually one after another is slow.
our games are more CPU-intense than most. Simulating all the little people running around needs to happen on the CPU, so ideally we want to avoid keeping it busy with other tasks as much as we can.

So we're doing this on the GPU instead. This is great because GPUs can easily do these visibility checks for many objects in parallel, and since we're not going for AAA graphics we can afford moving some tasks to the GPU.

LOD

Usually it's a good idea to draw things that are appearing tiny on screen at a lower level of detail.

Unity unfortunately doesn't have a tool to automatically generate lower level of detail versions of your objects (it looks like they're adding one soon though).
Building these manually is a mind-numbing task, and while there are some commercial tools for creating them automatically the ones we found are either super expensive or not very good, so we built this ourselves.

Postprocessing

Postprocessing layers effects on top of the rendered image, which can change the look of the game quite significantly.
Here's a look at some of our most important postprocessing effects.

Forest shadows

We want to give the feeling that the town is located in a clearing somewhere deep within an ancient, dense forest.
To emphasize this we gradually darken anything outside the area you can build in. It's essentially the same as a distance fog[en.wikipedia.org] effect, just using the distance to the playable area instead of the distance to the camera.

Apart from looking nice this effect has the additional benefits of making it a bit more clear where you can't build, and it nicely hides the seam that would otherwise be visible where our terrain ends.

Left: effect off; right: effect on

Volumetric light rays

These light rays add a lot to the atmosphere of the scene.
They are ray marched[en.wikipedia.org]. We tried a few ways to fake them with geometry which would be cheaper performance-wise but it didn't give us results we were satisfied with.

This effect only appears at the edge of the playing area. It would be a bit distracting if it appeared everywhere.

Left: effect off; right: effect on

Voxel AO/GI

This one seemed a bit crazy to do, but it's working really well.
Nice lighting is one of the most important things for making a game look good. In games with predesigned levels it's achieved by doing some heavy pre-calculations that can take many hours to complete.
In our games the players place all of the objects, so we can't pre-calculate anything. To still get nice lighting in Parkitect we used screen space ambient occlusion (SSAO)[en.wikipedia.org], which is an effect that tries to darken areas that less directly exposed to light. There can be some artifacts such as some flickering when objects disappear or dark halos around objects where it doesn't make much sense but overall it works reasonably well.

I've been keeping an eye on better methods for the past few years and one called Voxel Cone Tracing[www.gamedeveloper.com] was looking quite promising, so we tried building something based on that for Croakwood.
This article[wickedengine.net] gives a pretty good overview for the technical details, but in short, we first create a voxel[de.wikipedia.org] representation of our scene. This means rendering any contributing object a second time (at a lower LOD level) in a special way, which gives us this slightly Minecraft-looking version of the world:

This can then be used to fairly efficiently calculate ambient occlusion and color bounces:

Ambient occlusion

Color bounce

Here's a comparison how this looks in-game with the effect turned on/disabled:

Left: effect off; right: effect on

We think the AO we get from this looks nicer and more "correct" than SSAO, without any of its artifacts. Additionally we get a light color bounce along with the AO more or less for free, as a sort of very basic GI[en.wikipedia.org] approximation.
Some open areas for improvements that we still want to investigate is doing more light bounces, and using the voxel representation for real-time reflections on shiny materials.

Another benefit that's quite specific to our game is that it allows us to still get AO from objects that aren't visible, which is quite nice when looking into a building.
Note how in this example the roof is hidden, but you still get a color gradient on the wall in the corner where the roof would be:

Croakwood

Please tell me this game is coming this year!

It looks so cute and cozy please please please

heinous anus

31 déc. 2024 à 19h57

Discussions générales

Devlog #6 - Houses

7 févr.

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[bottosson.github.io] 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[texelraptor.com] 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.

Croakwood

103

Devlog #5 - Water

12 nov. 2024

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[bgolus.medium.com].

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[john-wigg.dev] and this video explain it better than I could.

Croakwood

Release Date??

Does anyone know when the game is coming out by any chance? I'm beyond excited - all of the clips and screenshots look amazing