# Games for Good (1J6Z1016_2324_1F)
## Jannah Tasnim Rahman 21343319

## Introduction

In this unit I was given the option to choose my group. My group has me, Elin, Chris and Ethan. We was given a theme to choose to base our project on. We decided we wanted to go with the them 'Environmental Justice'. We believe that the environment is suffering is different aspects wheter it is social, economical or environmental. We want to show the environmental view of injustice.

## Game Pitch

Our group decided to create 2D side scrolling game named 'Seasons Of Life'. This game will show the effects of environmental damage taking place in a forest first. The playable character will be a rabbit running through different stages as everything begins to negatively change.

## What is Environmental Justice?

Environmental Justice is the right to be treated well, having good laws, good treatment to the environment, reducing carbon and much more. (ClientEarth Communications, 2021). This helps people live better and healthier lives as there are so much injustice currently in the world. This movements goal is to make a positive change that will benefit everyone. It does not matter what race, nationality or income you got because as humans, we all have the right to live in harmony.

Unfortunately, not everyone has this justice. It has been reported that this is mainly enforced in more wealthy areas where the majority is white. This could that people of colour will not get the same treatment because of where they live across the world. Ways people can suffer with no environmental justice is:

- Drinking contaminated water
- Exposed to soot in commonly used places such as school
- Noise pollution
- Climate change

This inequality mainly affects children, the elderly and the poor as they are weaker or do not have enough income to support themselves. They also are exposed to environmemtal hazards. People who are not as educated or have a manual job will not have access good quality food meaning they will lack the proper nutrients in their diet. This leads to malnutrtion.

Ways to combat environmental inequalities are:

- Give devloping countries a chance in sayings, opportunities and decisions
- Give equal opportunities to all races
- Reduce carbon footprint
- Give a better chance for less fortunate countries
- Lower prices of good quality food

There are many ways to support the environment because it needs all types of help. Our group decided we wanted to show the negative change in the environment. A lot of trees and plants are dying or getting rid of so people can use that space for their own benefit. Little do they know that it negatively impacts the lives of innocent animals who's habitat is in mother-nature. People take away the homes of these animals and it will lead to their suffering or even extinction.

We as a group decided that our project will have an animal running from its habitat due to environmental changes made by humans taking over.

## Moodboard

To begin, I created a mood board with pictures of 2D assets from Google. This gives me a initial idea on how I want my assets to look when making them. These pictures consists of 2D and semi-realism since my group discussed that we are aiming for cartoonish but slightly realistic.


On this part of the moodboard, I like the style of assets shown. It is nicely saturated at a good level which makes the environment look happy and friendly. This is what I aim to do for my environment as I will be doing the first level.

## Game Inspirations

### Hollow Knight

Hollow Knight is a 2D adventure game which is hand drawn. (Team Cherry, 2017) In this game the character must explore diffent worlds and fight strange creatures and escape traps. This game is hand drawn in animation traditionally.

*Figure 1:* Hollow Knight Environment (Source: Blind Forest, 2024:online)

In *Figure 1:* Hollow Knight Environment (Source: Blind Forest, 2024:online) shows an image from the game Hollow Knight. Here shows that everything is 2D. The character faces either left or right depending on which way they are facing. This scene also has many nature assets to it such as the bushes, ponds and organic details in the background. It seems somewhat referenced to nature in real life as well as including some fictional form to it. This can be seen in the background as it does not really resemble anything in real life but seems to be made orgaincally. They contain spotted texture to it like a spotted frog or spotted eggs. This brings uniqueness to the environment because it does not look exactly like real life. Fictionality adds a twist which makes it become more of a fantasy world.

Our group decided that we will aim to make our game similar to this because of the art style and to make it a 2D side scrolling endless runner. Since I am going to make a forest environment, I will be taking some inspiration from Hollow Knight. I do like the way the bushes are placed in *Figure 1:* Hollow Knight Environment (Source: Blind Forest, 2024:online).

*Figure 2:* Hollow Knight Environment (Source: Blind Forest, 2024:online)

In *Figure 2:* Hollow Knight Environment (Source: Blind Forest, 2024:online) shows vines hanging down from the top of the screen. The environment looks more decorative because they are more noticable compared to when assets are placed at the bottom of the screen. It feels as if nature is surrounding you as the player.

I do like this kind of placement of assets because it take spaces where it would have been empty.

### Ori and the Blind Forest

Ori and the Blind Forest is a game about a forest named Nibel which is dying caused by a dark nemesis. Moon (Studios, 2015). A heroic character named Ori does what it take to save the forest.

This game is created in 2D and has many beautiful environments to play through.

*Figure 3:* Ori and the Blind Forest Environment (Source: Blind Forest, 2024:online)

This is a scene from the game in *Figure 3:* Ori and the Blind Forest Environment (Source: Blind Forest, 2024:online). Here shows a wonderful scenery of mother-nature. Everything is bright and organic. Trees are shows in both the distance and up close to the player. Every living plant seems to be grown well. The yellow ambience sets a calm happy mood suggesting the forest has been untouched. The sky in the background is a complete different colour compared to the forest which creates a contrast that fits the scene nicely. The colour pallet of the sky is a calm blue colour consisting of pastel shades.

I really do like the environment as it is shows a positive emotion. This is something I want to try and do with my own environment so I will be referencing this went creating my own assets.

## Primary Images and Research

To have reference for the assets I will create, I went outside to take pictures of trees and bushes. I could not go to and actual forest because I do not own a car and could not go with anyone as no one was available. So for my safety, I travelled to areas with trees such as parks or places with nearby trees/bushes.

First, I went to an area in Manchester called Longsight. I found a carpark with some bushes and decided to take pictures of them.

This plant is called 'Ebbings Silverberry'. It is a evergreen type of shub hedge plant that can survive most environments and is drought resistant.

The leaves of this bush is very faint and has a leathery texture. The colours are green with yellow hues which almost looks silver in a way at the same time. The shape of the leaves are very rounded on the sides and pointed on the ends of the leaves. These give it a distincive shape because not all leaves are the same on every plant. The stems of the hedge has sections where about four or more leaves are grouped together. This type of bush looks unique to me because they are very different in colour compared to other hedges.

I will be using this hedge as reference when creating my own assets for the forest environment.

I took this picture from my garden. This is a Spruce tree. The Spruce tree is found in European and Asians regions. This tree is also native in parts of central and Northen Europe. This tree is iconically recognised as a Christmas tree, which is an ornamental tree for decorative purposes during Christmas; a Christian holiday.


I find these trees to be very eye catching because of its tallness and its detailed leaves. They are the most visable compared to other trees like the second photo. The colour are very rich in green as it appears to be darker than others. Since this tree is native to Northern Europe, I will be referencing this tree to my forest environment.

I took this picture in Manchester that is also located in Longsight. The tree in the picture is an Oak tree. This tree is part of the beech family. This type of tree is very common in the UK and can be found in forests as well as cities. Oak trees are also grow in other places in Europe such as France, Germany, Poland and many other European countries. For a long time, Britain has used oak wood for many reasons and has a known history of Oak.

The Oak tree is shown to be some what symmetrical in its shape in this photo. Although this one may not be as fully developed, it clearly shows the branches spreading outwards which creates a semi-circle shape.

I took this picture in Ardwick, Manchester named Ardwick Green Park. This is another Oak tree I spotted and taken a picture of. I was a little intrigued about this tree because of its maturity stage. It seems like it is not fully developed and makes me wonder that all trees are at different stages of maturity. I will use different maturity levels when creating my own tree assets. I came up with this idea because it can include a sense of realism because not all trees are the same age so they will look different.

Since these trees are not fully developed, I will use the internet to view developed oak trees.

*Figure 4:* Grown Oak Tree (Source: GardenersWorld.com, 2023:online)

In *Figure 4:* Grown Oak Tree (Source: GardenersWorld.com, 2023:online) shows a very developed oak tree. The leaves are bright green and almost covers every branch holding it. The overall shape of the tree is rounded. This gives me a better persective of how oak trees look when fully grown.

Here is another photo I took at Ardwick Green Park. This tree is called 'Copper Beech Tree'. This tree is from the Beech family. Within this tree family contains Beeches, Chestnuts and Oak trees. This tree leaves change from deep purple to copper the the seasons of Spring and Autumn. The natural habitat of the Beech family live in a large part of Europe, going from southern Sweden to northern Sicily.

In this photo, the Copper Beech tree is not fully developed, however I would like to use it as reference because of its copper coloured leaves. It would add a splash of colour to the environment. I will use the internet to view better images of Copper Beech trees so I can understand them better perspectively.

*Figure 5:* Grown Copper Beech Tree (Source: bowhayestrees, no date:online)

This is a fully developed Copper Beech tree shown in *Figure 5:* Grown Copper Beech Tree (Source: bowhayestrees, no date:online). In this image, the Copper Beech tree is bright red and has grown more bigger. I can understand more details of how this tree looks as it is more mature so I will be referncing this when making my own Copper Beech tree.
# Silhouette



# Trees

To begin with designing my tree assets, I will create sillhouettes to create a general shape of how they will look. I will be referencing my primary photos as well as my research.

#### Oak Tree 1

To begin, I used a big brush to create general shape of the tree. This Oak tree shape is meant to be shown in the middle of growing rather than fully grown. I want to include this to show different stages of growth in the forest environment. I then added some shading for initial details for the branches and leaves. I will repeat this process to all my tree silhouettes.

I then coloured the silhouette by creating a new layer and setting it to colour.

Here is what my first Oak tree will look like.

I lowered the opacity of the chosen silhouette and drew line art over it in detail.

I painted flat colours for the base.

I then used different brushes to add some semi-realism by adding darker values.

I then added lighter values so it becomes three dimensional.

Here is the concept sheet with the rendered asset, silhouette and colour swatches.

#### Oak Tree 2

For the second Oak tree, I painted a different shape to show a more developed stage of its growth.

I coloured this oak tree to a slightly different colour than the first one. I did this because not all trees have the same shade and can vary in different tones.

Here is there coloured result.

I lowered the opacity of the silhouette and drew line art over it.

I added flat colours as a base.

I painted darker values with different brushes depeding where the light source is.

I added lighter values with the same brushes.

Here is the concept sheet with the rendered asset, colour swatch and silhouettes put together.

#### Spruce Tree

Here is the beginning of my spruce tree silhouette. Spruce trees are very detailed because of their leaves so when shading, I used a sqaure brush to create rigid lines rather than painting detailed leaves to simplify it.

I then coloured it with a colour layer. The trunk of this tree will be darker because Spruce trees tend to be darker than others.

Here is what the Spruce tree silhouette looks like with colour.

I then used the silhouette on a new canvas and lowered the opacity then drew a detailed line art over it.

I then added flat colours from the silhouette colour swatch.

I used a rough brush and added darker values on the leaves and trunk.

I used the same brush and added lighter values.

Here is the concept sheet of my Spruce tree. I added the rendered asset, silhouette and colour swatch.

#### Copper Beech Tree

I created a silhouette of a Copper Beech tree and added some shading to it. I wanted a rounder shape so I used a sqaure brush and painted around the tree to make a circular shape.

I then added a colour layer and painted it deep red. I did not want it to be too dark as some Copper Beech trees are so I aimed for a maroon shade of red.

Here is what it looks like.

I then used the coloured silhouette and drew a detailed line art. I included seperate leaves so it does not look entirely bushy.

I used the same brush for the other trees I painted and added darker values.

I then added lighter values.

Here is the concept sheet put together with the rendered asset, silhouette and colour swatch.

# Platforms

I am going to draw sillhouettes for the platform and ground blocks. Platforms are usually flat so it may be limited to how I create it.

#### Platform 1

For my first platform, I want it to be floating so the player can jump while running in this environment. I started off by painting a rectangular shape and added some shapes to create rocks, grass, flowers and soil cracks.

I then painted over this silhouette in brown and green by using the colour layer.

Here is what my first platform will look like.

I then made a new canvas and placed the silhouette and sketched over it in more detail.

I then made another layer for the line art and neatened it.

I added flat colours and made sure it was not too saturated.

I added darker values by using airbrushes and some rough brushes for the dirt. I did the same for the grass. I used a smoother brush for the rocks as it did not need too much detail.

I added light values with rougher brushes.

I made a concept sheet by adding the rendered platform, silhouette and colour swatches.

I wanted to create another platform so I used the current sillhouette and painted under it.

I added details on the sillhouette so I can roughly initiate how I want it to look. At the bottom, I painted rock shapes since this platform is a deeper floor lifted from the ground.

I coloured this usuing the colour layer.

Here is what it looks like when coloured

I made a new canvas and lowered the opacity of the silhouette and drew line art over it in detail

I added the same flat colours from the first platform I made and put it on this one.

I shaded this platform the same as the first platform.

I added lighter values.

Here is the concept of the second platform. I layed the concept sheet the same as platform 1.

## Floor Block

Before making the regular floor asset, Ethan suggested in the group Discord that the floor shoud be made up from blocks so it would be easier to place in Construct which is a 2D game engine used to build games.

Ethan describes how a floor asset will be stretched and distorted so it will be easier to use blocks and build them however we like on Construct.

So to begin this, I used my first platform sillhouette and cut it up into blocks.

I kept the grass on top and minimised the flowers to simplify the blocks.

I added a colour layer and painted the blocks.

Rather than starting from scratch to create line art, I saved some time and used the line art from my first platform. I did this by duplicating it and then placed a squre on top of it. I chose the area of the flowers so I can capture it for the dirt blocks.

I turned on the colour layers to see how it looks. I liked the results so I went along with it.

I erased the unnecessary parts so it fits the dirt block.

I repeated the process because I wanted different segments to fit the silhouettes of my dirt blocks. I made sure the textures will stack properly without making it unmatching.

Here is what the bottom dirt block looks like.

I duplicated it and added some small rocks for variation.

I repeated the process so I can make a dirt block with flowers on top.


I joined two grass dirt blocks to see if they join. I had to make some adjustments with the line art.

After making four dirt blocks, I put them altogether in a concept sheet.
## Bush

Here is my silhouette. I began by using a rounded brush and added leaves on some areas. I used darker greys to draw leaves inside the bush.

To make variations. I used my current bush silhouette and duplicated it then painted over it with the same brushed and colours.

I repeated the same process again.

I drew detailed line art over the silhouette.

I painted flat colour over it











# Background

## Sky

### Primary Photos

To begin the background for my forest environment, I decided to take some primary photos of the sky outside during sunset since that is the time it looks the most eye-catching. Here are the photos I have taken using my phone. I travelled by car in Salford, Manchester taking pictures. I taken a few and will reference them in my own drawings.

In this image, I like how the clouds have peachy orange tones infront of a blue sky. The clouds look more detailed and sets a calm mood as the sun sets



The sky appears in a ombre colour with the colours blue and orange. Between it is a mix between yellow and blue. I like this mix of colours because it tells a time in the day since different skies show different colours. This is something I will include when creating my own background for the forest environment.

To begin, I painted a gradient of colours using pastel colours of purple, pink and yellow. I chose these colours to represent a sunset.

I then painted cloud silhouettes using a darker pink with a hard brush.

I added shading by using purple and yellow to give depth.

I wanted to create some colour variations so I adjusted the hue and saturation.

I then adjusted th colour of the clouds.


I did the same for this colour variation. After some thought I chose this sky colour to be my chosen colour pallet. I will begin to draw it in more detail.

To begin, I created a 1920x1080 canvas and painted pastel blue as a base.

I then painted a gradient with a airbrush.

I painted the basic shapes of the clouds with a hard brush.

I then use different shades of pinks and purples for the clouds and added darker values. I used pastel yellow to add some light hues on the clouds.

## Mountain

### Third Party Photos

Based on my reseach, forests contains mountains so I asked my overseas friend from Norway if I could use his mountain photos as refernce for this project. He agreed and sent some photos via Discord.

These pictures were taken in the city Senja and Lofoten located in the northern part of Norway. Both of these places are cities with rural areas where my friend sometimes travel to with his family.


Here are the images he sent to me via Discord.

In this image, it shows the textures and patterns of the snow on the mountain. The mountain is not fully covered by snow; only some areas but creates the shapes of the ridges.

In this image, the mountain is shown to be further in the distance. This makes the mountain shown to have more blue haze because of the air molecules. This is important to have when creating environments because it shows the distance between the viewer and the object. This will be an important feature when I create my own environment.

In this image, the mountains are lined up in the distance but are crooked because of its natural shape. They consist in different heights and placement whch will be important when creating my own mountians for my environment.

### Sillhouettes

To begin my mountain assets, I painted a quick silhouette with greyish blue hues of colours.

Referncing the photo's my Norwegian friend sent me via discord, I used a thinner paint brush and tried to replicate the snow layed on the mountains. On the right mountain, I painted side to side pathways of snow going down.

Next, I created a new canvas to draw line art over the silhouette.

To make the mountains have a repeated pattern, I duplicated the line art and placed the on each side of the canvas and made tweaks to the line art to make sure it fits.

I added flat colours for the mountain. I did not make them darker because in the distance, everything has a blue hue because of air particles.

I added subtle shading.

I then used rough brushes in some areas.

I used the same brushes to add lighter values. This is the complete image of my mountain asset.
****

After creating all my assets, I put them all in a shared Google Drive folder so my group can access it. In my group, Ethan said he will be the one putting the entire game together on construct.

Here is him in our Discord group telling us he will start putting the game together.

I replied to him with a shared Google drive document which contains all my assets in a transparent format.

I made sure to rename the files so it will be easier for my group to view and find the ones they will need when putting the game together on Construct.

https://drive.google.com/drive/folders/1d3EdodJKEFkIGaceL7vL7QppHD7CG-wi?usp=drive_link

This is the link to my transparent asset images.

## Link to the game

After Ethan created the game on Construct, he shared the link to the game.

Here is the link to the game:

https://www.construct.net/en/free-online-games/seasons-life-64210/play

## Evaluation

Overall this project has been pretty simple. It is heavily based on nature which does not require so much research or complex designs to make. I have found it somewhat challenging in the beginning because it was spring when this project started and all the trees had no leaves, leaving me to only use secondary images from Google at first. After the trees started to bloom, I did take my time to photograph them outside wherever I could. This did teach me to only use what I can access when possible. The help of my overseas friend also taught me to learn and understand different parts of countries because I am getting direct information and images when asking them for reference in my project.

Drawing while refencing was very easy to execute because trees all look the similar to eavh other and do not need any changes otherwise it may look far from what it actually is. I did make sure my assets are stylised so it is not completely unoriginal. The help of my asset mood board helped me with this.

However I did struggle with some time management. Sometimes I felt like I was mentally struggling with my thoughts and I find it difficult to focus. This has been an ongoing issue for me which I am trying to currently get help with. This has made me slightly fall back with the project so my perfomance was not the best in that area. I believe I made the best I could from what I produced.

I was also a slight shame that not all my assets could be used in the game engine. I did feel slightly upset but it did teach me not to make my work feel too precious because in the world of work, not everything I make will be accepted for use due to different reasons.

## Bibliography

ClientEarth Communications. (2021) *What is environmemtal justice?* Client Earth. [Online][Accessed on 21st May 2024]
https://www.clientearth.org/latest/news/what-is-environmental-justice/

R Skeleton, V Miller. (2023) *What is environmemtal justice?* NRDC. [Online][Accessed on 21st May 2024]
https://www.nrdc.org/stories/environmental-justice-movement

European Environment Agency. (no date) *Environmental inequalities* [Online][Accessed on 21st May 2024]
https://www.eea.europa.eu/en/topics/in-depth/environmental-inequalities#:~:text=Communities%20with%20lower%20levels%20of,%2D%20and%20climate%2Drelated%20hazards.

The Global Goal . (no date) *The Targets* [Online][Accessed on 21st May 2024]
https://www.globalgoals.org/goals/10-reduced-inequalities/?gad_source=1&gclid=Cj0KCQjwjLGyBhCYARIsAPqTz1-TdBELXUTKAD9rA3IaBpYje-zprXyYjerxulkPYVg4DwhYeE2JIGEaAu1FEALw_wcB

### Game Inspirations

Team Cherry. (2017) *Hollow Knight* PC, Mac, Linux, Playstation, Xbox, Nintendo [Game] Team Cherry.

hollowknight. (no date) *Descend into the Dark.* Team Cherry. [Online][Accessed on 2Oth May 2024] https://www.hollowknight.com/

*Figure 1:* Hollow Knight Environment (Source: HollowKnight, 2024:online)
https://www.hollowknight.com/

*Figure 2:* Hollow Knight Environment (Source: HollowKnight, 2024:online)
https://www.hollowknight.com/

Moon Studios. (2015) *Ori and the Blind Forest* Nintendo, Xbox, Microsoft Windows [Game] Microsoft Studios.

*Figure 3:* Ori and the Blind Forest Environment (Source: Blind Forest, 2024:online)
https://www.orithegame.com/blind-forest/

### Ebbings Silverberry

buchanansplants. (no date) *Ebbing's Silverberry.* [Online][Accessed on 21st May 2024]
https://buchanansplants.com/plant-library/shrubs/ebbings-silverberry/

Bakker.co. (no date) *The foundation of every garden.* [Online][Accessed on 21st May 2024]
https://en-gb.bakker.com/products/ebbing-s-silverberry-elaeagnus-ebbingei-hardy-plant

### Spruce Tree

The Editors of Encyclopaedia Britannica. (2024) *Spruce.* Britannica. [Online][Accessed on 21st May 2024]
https://www.britannica.com/plant/spruce

Wolman. (no date) *Natural range.* [Online][Accessed on 21st May 2024]
https://www.wolman.de/en/infocenter-wood/from-tree-to-wood/spruce#:~:text=The%20spruce%20is%20one%20of,and%20far%20into%20eastern%20Asia.

### Oak Tree

Woodland Trust. (no date) *Oak, English.* [Online][Accessed on 21st May 2024]
https://www.woodlandtrust.org.uk/trees-woods-and-wildlife/british-trees/a-z-of-british-trees/english-oak/

iWood. (no date) *Geography.* [Online][Accessed on 21st May 2024]
https://www.iwood.co.uk/timber-knowledge-library/oak/where-does-oak-come-from/#:~:text=European%20Oak%20(Quercus%20petraea)%20trees,Asia%20Minor%20and%20Northern%20Africa.

Hardwoods Group. (no date) *A History of Oak.* [Online][Accessed on 21st May 2024]
https://hardwoodsgroup.com/a-history-of-oak/

### Image

*Figure 4:* Grown Oak Tree (Source: GardenersWorld.com, 2023:online)
https://www.gardenersworld.com/how-to/grow-plants/complete-guide-to-oak-trees/

### Copper Beech Tree

Woodland Trust. (no date) *Beech, Copper* [Online][Accessed on 21st May 2024]
https://www.woodlandtrust.org.uk/trees-woods-and-wildlife/british-trees/a-z-of-british-trees/copper-beech/#:~:text=Copper%20beech%20is%20not%20native%20to%20the%20UK.,-Credit%3A%20iStockPhoto.com&text=iStockPhoto.com%20%2F%2013Threephotography-,Its%20leaves%20turn%20from%20deep%20purple%20in,to%20copper%20in%20the%20autumn.&text=It%20can%20grow%20to%20over%2040m%20high.,-Credit%3A%20Gordon%20Hulmes&text=Copper%20beech%2C%20also%20known%20as,also%20sometimes%20found%20in%20nature).

Science.jrank. (no date) *Beech Family. Fagaceae.* [Online][Accessed on 21st May 2024]
https://science.jrank.org/pages/798/Beech-Family-Fagaceae.html

Exetertrees. (no date) *Copper Beech.* [Online][Accessed on 21st May 2024]
https://www.exetertrees.uk/copper-beech.html

*Figure 5:* Grown Copper Beech Tree (Source: bowhayestrees, no date:online)
https://www.bowhayestrees.co.uk/product-page/fagus-sylvatica-atropurpurea-copper-beech