Developing The Art For Gardeners Grove

Questions about the art style of Gardeners Grove are asked very frequently on Twitter, so here is an in-depth look into what goes on behind the scenes and how the game’s paper-effect is achieved.

🌐 Is it 2D or 3D?

The game itself is 2.5D, and some of you might be wondering what that means. In simple terms, it means Gardeners Grove is set in a 3D world but all the assets are 2D sprites. This creates an interesting feeling of depth in the game and allows for different types of navigation, animation and lighting.

🌳 Natural Inspiration

Before I even create the final assets, I will sketch out the design in a smaller sketchbook. Usually, this sketch is done outside, in front of a real reference, such as an interesting tree or plant with some unusual characteristics. I focus on the shapes of the branches for trees, as well as the silhouette it creates with its foliage.

To the left, you can see a TikTok where I document the sketching process, as well as all the local plants and wildlife that have inspired the game’s art style.

🎨 How is the art made?

All of the assets in the game are physically made in real life, using watercolour paint, watercolour paper, and masking pens.

Process Breakdown

I start by painting the assets using watercolours. You can see from the TikTok on the right that I mask out the areas I want to keep white, and then paint over a light layer to make sure every plant has a yellow undertone. Once that undertone is dry I move on to adding layers of colour. I keep the paint very wet so there is a nice faded gradient to the plant.

The style itself is inspired by mixed-media illustrator Iraville. I studied her artwork and learnt about creating watercolour gradients, as well as how to construct autumnal scenes. Her process videos on Youtube were especially helpful during this learning process.

🖼️ Getting the paintings into Unity

Once the paintings are dry, I take a photo using my phone camera. You really don’t need a fancy camera to pull off this paper asset effect.

Top tip: Make sure it’s a sunny day when you take the photo! You will get some excellent texture from the paper coming through on the photo.

The photo is then taken over to photoshop where I apply a slightly yellow-toned colour balance and touch up the photo brightness as well as the vibrance of the colours. I cut around the edges of the assets carefully using the quick selection tool. Any random scuffs of dirt are cleared up using either the content-aware fill tool or just with the eraser.

Screenshot of the Photoshop file, highlighting the applied photo edits in the “Layers” tab.

I make sure to check that the plants have enough contrast against the game’s grass floor, and then I export each plant individually as a transparent png.

⏰ It’s Unity Time

Over in unity, I import all the png’s and convert them to sprites. I then drag all of the sprites into the scene and set their origin to 0. I scale the sprites down to 0.1 (because my phone camera resolution is quite high) and then add an empty game object to each asset. The sprite is then placed into the empty game object as shown below:

The sprite “Rock_asset_01” is a child of the game object “Rock01”.

Screenshot of an asset in the Unity hierarchy.

The sprite is be positioned at a 45-degree angle but the game object stays at 0 degrees of rotation – making it easier to move sprites around in the scene and allowing for more understandable access to the assets transform when needed in code.

This makes the game look a little bit weird from a side-on view but allows for the plants to have depth when the player moves the camera around in the game.

Screenshot of the Unity editor.

Another aspect to take note of here is that the camera is also placed at a 45-degree angle. Why? Because if it wasn’t placed at the same angle as the sprites, it would create a distorted or stretched effect, making the asset appear different from the original sprite.

Screenshot showing how the camera is positioned at a 45 degree angle in the Unity editor.

✨ Animations and Particle effects

Another common question I get asked is how I animate, move or create particle effects with 2D sprites in a 3D world.

Before I talk about this topic more in-depth, there are some limitations to using this style which I want to outline. For example, distorting the sprites on the Y-axis can completely remove the texture from the artwork as well as giving away the visual trick of the world being 3D.

Early prototype example where the plants were manipulated on the y-axis, causing some visual distortion in the textures.

Most of Gardeners Grove’s animations are created by manipulating the objects transform in different ways through code.

Gif of plants being placed and growing in Gardeners Grove.

Above is an example of the plants having growth animations, idle swaying animations, as well as particle effects when placed.

The animations are comprised of separate scripts where the local-scale of the asset is manipulated to create movement.

In the example on the right, when the plant is instantiated, the “Grow” function will trigger, causing the scale of the plant to increase until it hits its maximum growth size.

Screenshot of the C# PlantGrow script from Gardeners Grove.

As for the particle effects, I followed a fantastic tutorial by Warcher Defenders. In the tutorial, the example is all shown in pixel art, however, the same principle can be applied to any style. The only thing that you have to do differently is change the resolution of the sprite sheet that contains different variations of the single particles which you wish to emmit.

🛠️ How is the process different from a game that’s not hand-painted?

The traditional-to-digital process is a lot different from non-hand-drawn (or painted) games because it requires a different thought process to get the assets into the game. The game’s design is impacted by these static paintings too because you have to design around the lack of ability to quickly create animated digital content. A good example of this problem, and how I’ve designed around it, is that Gardeners Grove was originally intended to have animals running around the garden, but the complexity of hand-drawn animations takes up a lot of time, so instead, the animals appear behind plants and pop up out of the ground.

💚 Why was it important for the art to be created by hand?

Because I am a solo developer (working with a lovely composer) I had to find an artistic process that worked for me. I have joint hypermobility syndrome, and I often find that using a digital graphics tablet for hours on end can really flare up my joints, so I tried out a variety of different methods to create assets for the game to see what was viable for the time frame that I had to create it.

Watercolours are very light and don’t require much pressure on the arm or wrist, and after trying them, I fell in love with the children’s story-book-like feeling that they created – the childhood nostalgia perfectly matched the relaxing and cosy feelings that I wished to produce throughout the game.

Since starting this project I’ve also realised how videogames can be used to preserve traditional art in a different way to what we usually expect. Especially during the Covid19 pandemic, virtual exhibitions and online talks have been a prominent forefront to any artists career. It would be amazing if the games industry embraced and collaborated with more traditional illustrators, fine artists or even sculptors to see what sort of style they could create. I think it could really bring some unique flair to games and further establish games as an art form.

Thank you for reading this Dev blog. If you have any questions feel free to reach out to me on Twitter: