Devlog – Developing the art for Gardeners Grove

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: https://twitter.com/MemoPotato

Devblog – Developing the plant breeding system

Developing The Plant Breeding System

One of the main features of Gardeners Grove is the plant breeding system. This is because it ties the whole game together as it creates the core gameplay loop of plant, breed, take a cutting, and repeat.

In the early phases of development for Gardeners Grove, I had created an initial prototype for players to test. Throughout the playtest I quickly realised that there was a problem with the original design of the plant breeding system. Therefore, in order for the game to be playable, this system had to be reworked during the game’s development cycle.

In this development blog, I will be talking about how the plant breeding system was constructed and implemented. Additionally, I’ll also be covering the improvement of the UI, as well as the logic behind the plant breeding programming.

The Original Design

Original plant breeding poster.

Looking back upon the original designs for plant breeding, I had simply devised a system in which plant A + plant B would = plant C.

The shape and colour of the parent plants would combine to create a new breed. This would continue down in a “family tree” style.

I had sectioned these plants into primary, secondary and tertiary types which signified how far down the breeding line they were.

The Problem

The design problem began after the first prototype was tested. Players had no reason to plant slowly, and would quickly spam mouse buttons to place as many plants as possible. This did not align with the original intended experience which was supposed to be slow and relaxing. Furthermore, players couldn’t tell that some of the sprites were plants and thought that they were just shapes. This caused some confusion around the aim of the game.

Example Gif showing the initial prototype in which players would spam down plants.

In conclusion, there needed to be a solution to this problem, so I wrote down a list of potential fixes in this blog post. After ruling out any fixes that would be too large for the scope of the project, I set about testing the solutions that could work.

Testing The Solutions

I tested out the initial ‘objective’ solution that I came up with, on paper. This involved the player being given the next plant (as if it was the top card from a deck of cards) and having to figure out where they want to place it. This was tested on paper with a grid-based system and some plant cards.

On the right, you can see a TikTok that I created which gave a sneak peek into the process of creating and testing this prototype solution.

While testing this I ran into a problem where I realised not every plant could breed with each other so the player would potentially be able to break the game by placing non-breedable plants around the edges of each other.

This meant I had to go back to the drawing board for a better solution to the original problem.

Developing the solution

The Timed ‘Light Objective’ Solution

This solution was the most promising and involved me changing the following elements in the game:

  • Creating a better, well-defined plant breeding system diagram. As a result, I will know exactly which plants can breed with each other therefore I can effectively communicate the system to the player.
Visual Plant breeding diagram for Gardeners Grove.
  • Implementing a timed growing mechanic. For example, the plant cuttings will take time to grow, and can only breed once fully grown. Additionally, new plant variants will also take time to grow between parent plants.
Gif showing the plant growing animations.
  • Adding light objectives to the game. The light objectives reinforce the player by rewarding them with decorative items. Also, it allows players to have something to do while their plants are growing.
A gameplay Gif showing how players can complete objectives that show in the top left-hand corner.

Developing the UI

Implementing this design meant that I had to create some user-friendly UI that the player could easily navigate and understand. I called this ‘The Herbarium’ after real-life Herbarium’s, which contain preserved vascular plant specimens.

Inspiration & Case studies

To understand how to achieve a clean UI, I took a deeper look into how other collection focused games handle their interactive UI.

Pokemon Go

One of the most iconic collection games is Pokemon Go. For the most part, I want to take a look at the “Pokedex” in pokemon Go to see how that specific part of the game functions.

The Pokedex consists of a long, scrollable list of icons.

There are 3 states of icons here:

  • caught pokemon
  • seen pokemon
  • unknown

As the player scrolls through the list, they can easily see what is missing, and potentially understand what fills in the gaps because “seen” pokemon have their silhouette shown in the collection.

Each ‘set’ of Pokemon is split into regions such as “Johto” and statistics are given for how many the player has caught and how many they have seen.

There is a number assigned to each pokemon too.

Pokedex Example.

I want to take inspiration from this UI as it’s simple yet effective. Allowing the player to see everything they are able to collect in a list format also helps them to understand the depth of the game and find anything they are missing.

Toca Lab: Plants

Toca Lab Plants is a children’s tablet game in which the player can explore different methods to cultivate new plants. They have a very unique collection UI which has two states:

  • Found plants
  • Unknown plants (Displayed as silhouettes)

The unique part is when you find a new plant type, it tells the player how they made it and what plant it originated from. The green arrows show the breeding flow between each plant that has been created.

The player can click on plants individually in the UI, and information about them will pop up at the bottom along with a fun and unique noise that tries to help the player remember the plant’s name.

Toca Lab Plants UI Example.

One of the only downsides to the function of this UI is that it’s not a transferable experience to PC/mouse. On a tablet, the player navigates the UI by dragging their finger along to look around the UI; which is a similar experience to navigating google maps.

Crossy Roads

In Crossy Roads the player can unlock characters by completing in-game quests or goals. In addition, they can also buy characters using real money or unlock them through in-game money in the prize machine.

The UI has 3 states:

  • Collected playable characters
  • Purchasable Characters
  • Unknown ‘quest’ characters

As the game is designed to be played horizontally, the player scrolls left to right to view their collection and can interact with each character by pressing the button below it.

There is a statistic in the bottom right which shows how many characters you have collected in that section.

Crossy Road UI Examples.

The UI of Crossy Roads is clear and easily understandable. However, the single sideways scrolling line of ‘collectables’ wouldn’t work with a mouse. In the case that I wanted to use a similar technique, there would have to be a scroll bar. Also, If I were to implement a similar “horizontally scrolling” menu I would have multiple lines as opposed to just one. That way I can fully utilize the fact that the player can see a lot more on a computer monitor.

Minecraft Earth

Although Minecraft Earth is being discontinued, I still want to take a look at the collection UI.

I’m focusing on the ‘inventory’ area where players can see items and mobs that they have collected. They can use these collectables by dragging them to the Hotbar and tapping to build their own little Minecraft chunk.

Minecraft Earth UI Examples.

Gardeners Grove works in a very similar way where the player can drag collected plants to their Hotbar and place them in their garden. A major problem I had with Minecraft Earth’s approach to this was that the inventory UI would take up more space than required. For example, I was often looking at a grey bar that filled 40% of the top half of the screen which wasn’t particularly helpful to me. In short, cutting back some of the unused space in a collection UI would be great for Gardeners Grove.

Visual Implementation

After studying the UI of other games and consulting the scope of the project, I decided upon having 2 states that the plants can be under; collected and unknown.

Gardeners Grove’s User Interface was mocked up in Figma before being implemented into Unity. Changes were made over in the Unity engine such as changing the text colour, removing the “locked” icon, and reducing the size of the collection slots

Screenshot showing the Figma mock-up screens.

A dictionary containing all the plants and their possible breedable partners was created. This allowed for further expansion when new plants needed to be added to the Herbarium. As a result, players are able to see gaps in their collection which allows them to go back and figure out what they are missing.

Gif showing the User Interface in action. Players can view their plant collection in the “Herbarium” tab and new plants show up as they are collected.

Technical Implementation

Moving on to what happens on the programming side of the game, I want to talk about the logic behind the plant breeding system.

Firstly, each plant is set up with a script called “Breedplants” which contains all of the unique breeding information attached to that plant. For example, this plant is a circle, the key is cir, and it can breed with 3 other plants, their keys being; cir, squ, tri.

Screenshot showing the Unity inspector of the “circle” plant prefab.

What this means, is that each time a plant is placed it checks all the plants in close proximity to see what their breeding information is. If a plant within the breedable radius matches one of the breeding options of the current plant, it will grow a new breed. Also, if there are many plants within the breeding radius, the game will randomly pick one to breed with.

Gif showing plants breeding.

Reflection

I want to reflect upon the importance of early playtesting and prototyping during development as this has made the project possible within the given time frame.

Without an early playtest I would’ve run into these issues much further into the development of the game. As a result, the scope of the project would’ve needed reducing. This could’ve caused some of the key ‘game feel’ features to be ruled out. Instead, I am able to develop the game in an agile way, iterating on the design as I go.

Screenshot from the game.

Overall, I am happy with how the game’s system design has developed throughout the project. I’ve built the plant breeding system in such a way that I can continue developing the game, even after the project is released because the system is easily expandable. Plants can be removed or added without affecting the game’s performance or player experience.

I’ll be looking to further develop the game in future, adding plant bundle updates and new decorative items.


Thank you for reading. If you have any questions, feel free to ask them over on Twitter: https://twitter.com/MemoPotato