Leo Toivio Coding Game Designer



phont

Garden of Aesther is a game that I made when I went to Future Games. It’s a story based game about a world that has lost all its flora. Aesther’s job is to bring it back to life and unravel the mystery together with your involuntary partner.

My tree primary roles were as project manager, lead designer and lead programmer. Since I was the most experienced group member in Unity it naturally became my job to coordinate the team and to have final say on what should go into the game. As a programmer my biggest achievement was to design and implement the character including movement, implementation of animations, the camera and planting – the core mechanic. Together with the team we created a number of systems including quests, dialogues and an inventory.  We worked with Scrum and delivered weekly builds along with other tasks such as a marketing plan for our game.

MightAndDelight_iconDuring the development the independent game studio Might and Delight acted as our publisher. It was an instructive and challenging task since we had to change and adapt the game according to their feedback, much like in a real studio environment.


 

Overview

Title Garden of Aesther
Platform Android / iOS
Development time 7 weeks
Development period May – June 2015
Engine Unity
Responsibilities Lead Design, Lead Programming and Project Management
Team size 9


 

Trailer


Screenshots

jQuery( document ).ready(function( jQuery ) {
jQuery( ‘#example3_471’ ).sliderPro({
//width
width: 1000,

//height
height: 667,

//autoplay
autoplay: true,
autoplayOnHover: ‘none’,
autoplayDelay: 5000,

arrows: false,
buttons: false,
smallSize: 500,
mediumSize: 1000,
largeSize: 3000,
fade: true,

//thumbnail
thumbnailArrows: true,
thumbnailWidth: 120,
thumbnailHeight: 100,
thumbnailsPosition: ‘bottom’,
centerImage: true,
allowScaleUp: true,
startSlide: 0,
loop: true,
slideDistance: 5,
autoplayDirection: ‘normal’,
touchSwipe: true,
fullScreen: true,
});
});

/* Example 3 */

/* border */
#example3_471 .sp-selected-thumbnail {
border: 4px solid #000000;
}

/* font + color */
.title-in {
font-family: Arial !important;
color: #00000 !important;
background-color: #FFFFFF !important;
opacity: 0.7 !important;
}
.desc-in {
font-family: Arial !important;
color: #FFFFFF !important;
background-color: #00000 !important;
opacity: 0.7 !important;
}

/* bullets color */
.sp-button {
border: 2px solid #000000 !important;
}
.sp-selected-button {
background-color: #000000 !important;
}

/* pointer color – bottom */
.sp-selected-thumbnail::before {
border-bottom: 5px solid #000000 !important;
}
.sp-selected-thumbnail::after {
border-bottom: 13px solid #000000 !important;
}

/* pointer color – top */

/* full screen icon */
.sp-full-screen-button::before {
color: #FFFFFF !important;
}

/* hover navigation icon color */
.sp-next-arrow::after, .sp-next-arrow::before {
background-color: #FFFFFF !important;
}
.sp-previous-arrow::after, .sp-previous-arrow::before {
background-color: #FFFFFF !important;
}

#example3_471 .title-in {
color: !important;
font-weight: bolder;
text-align: center;
}

#example3_471 .title-in-bg {
background: rgba(255, 255, 255, 0.7); !important;
white-space: unset !important;
max-width: 90%;
min-width: 40%;
transform: initial !important;
-webkit-transform: initial !important;
font-size: 14px !important;
}

#example3_471 .desc-in {
color: !important;
text-align: center;
}
#example3_471 .desc-in-bg {
background: rgba(, ) !important;
white-space: unset !important;
width: 80% !important;
min-width: 30%;
transform: initial !important;
-webkit-transform: initial !important;
font-size: 13px !important;
}

@media (max-width: 640px) {
#example3_471 .hide-small-screen {
display: none;
}
}

@media (max-width: 860px) {
#example3_471 .sp-layer {
font-size: 18px;
}

#example3_471 .hide-medium-screen {
display: none;
}
}
/* Custom CSS */











Scripting character movement

Unity_iconI put much work into making a great feeling third person controller for mobile devices, something that I hadn’t seen in any other game before. Constantly letting other people try it and make adjustments according to their feedback helped to make sure that I wasn’t just making enjoyable controls for me but also for others. We did a lot of testing and finally decided that using a joystick to move and a touch pad area to rotate the camera was the best solution for our game.


 

Painting the ground

I was also in charge of implementing  the shader and functionality for bringing back the flora to the island.

 

GoA_Painting

 

From the beginning of the project there was an idea to be able to make the area around the flora green when planting. There was many different ways to achieve this and I laid out a lot of options such as adding a chunk of grass meshes, putting green decals on the ground and overlaying the ground with meshes. In the end we decided to use the vertex colour of the mesh to lerp between two textures, a brown muddy texture and a green grass texture because it was both the best looking and most efficient method for our target platform, mobile.

 

 

To make the transition between painted and unpainted ground look more natural and interesting I created a shader using Shader Forge. It’s using the vertex color of the mesh and a noise texture to know what texture it should display and how to blend in between them.

 

jQuery( document ).ready(function( jQuery ) {
jQuery( ‘#example3_494’ ).sliderPro({
//width
width: 1900,

//height
height: 1020,

//autoplay
autoplay: true,
autoplayOnHover: ‘none’,
autoplayDelay: 5000,

arrows: false,
buttons: false,
smallSize: 500,
mediumSize: 1000,
largeSize: 3000,
fade: true,

//thumbnail
thumbnailArrows: true,
thumbnailWidth: 120,
thumbnailHeight: 100,
thumbnailsPosition: ‘bottom’,
centerImage: true,
allowScaleUp: true,
startSlide: 0,
loop: true,
slideDistance: 5,
autoplayDirection: ‘normal’,
touchSwipe: true,
fullScreen: true,
});
});

/* Example 3 */

/* border */
#example3_494 .sp-selected-thumbnail {
border: 4px solid #000000;
}

/* font + color */
.title-in {
font-family: Arial !important;
color: #00000 !important;
background-color: #FFFFFF !important;
opacity: 0.7 !important;
}
.desc-in {
font-family: Arial !important;
color: #FFFFFF !important;
background-color: #00000 !important;
opacity: 0.7 !important;
}

/* bullets color */
.sp-button {
border: 2px solid #000000 !important;
}
.sp-selected-button {
background-color: #000000 !important;
}

/* pointer color – bottom */
.sp-selected-thumbnail::before {
border-bottom: 5px solid #000000 !important;
}
.sp-selected-thumbnail::after {
border-bottom: 13px solid #000000 !important;
}

/* pointer color – top */

/* full screen icon */
.sp-full-screen-button::before {
color: #FFFFFF !important;
}

/* hover navigation icon color */
.sp-next-arrow::after, .sp-next-arrow::before {
background-color: #FFFFFF !important;
}
.sp-previous-arrow::after, .sp-previous-arrow::before {
background-color: #FFFFFF !important;
}

#example3_494 .title-in {
color: !important;
font-weight: bolder;
text-align: center;
}

#example3_494 .title-in-bg {
background: rgba(255, 255, 255, 0.7); !important;
white-space: unset !important;
max-width: 90%;
min-width: 40%;
transform: initial !important;
-webkit-transform: initial !important;
font-size: 14px !important;
}

#example3_494 .desc-in {
color: !important;
text-align: center;
}
#example3_494 .desc-in-bg {
background: rgba(, ) !important;
white-space: unset !important;
width: 80% !important;
min-width: 30%;
transform: initial !important;
-webkit-transform: initial !important;
font-size: 13px !important;
}

@media (max-width: 640px) {
#example3_494 .hide-small-screen {
display: none;
}
}

@media (max-width: 860px) {
#example3_494 .sp-layer {
font-size: 18px;
}

#example3_494 .hide-medium-screen {
display: none;
}
}
/* Custom CSS */




 

GroundPaintShader


 

First person mode

In the the inventory the player can find binoculars that enables the player to see the world from a first person view. Moving the phone rotates the camera using the phone’s gyroscope to look around – it’s like a window into the world of Aesther.