The leader of the Hoa team was kind enough to talk about the way they’re using the Ghibli style and mixing different elements to build a marvelous game in Unity.
Introduction
Our team consists of graduates from universities in Singapore (NTU and NUS). Currently, we have 4 members: 2 artists and 2 programmers. We are going to add another programmer and a composer to our lineup soon. All our members have a full time job, and work part time on Hoa in our spare time.
Hoa is the first big project for all members of our team. Only me, Ryo, the team leader, have experience working in the game industry prior to this. Hoa started as my side project while working as an artist in the university’s gamelab. As the scale of the game slowly got bigger, I started recruiting friends who studied with me in college to help out, and that’s how our team was built.
Hoa
When I started the project, my only thought is to try and make a side-scroller that looks stunning. I’ve always been a fan of side-scrolling games with beautiful visual like Trine, Limbo, Rayman… and I wanted to make one like those. But to do that I need a story, so I started to write one. After a few rounds of brainstorming, I took a liking to the idea of the main character finding his/her way home. It’s a simple and elegant scenario that allows us to get the characters through different environments and showcase the beautiful side-scrolling visual, and it also has lots of potential for backstories.
With that as the starting idea, I went through countless discussions with our Creative Director, Son-Tra, to sort out the story’s details. The plot went through a lot of revision before reaching its current form. Unfortunately, we cannot share too much about the story at the moment, but you get the general idea.
Art Style
When I first came up with the story of Hoa, I had no idea how the game would look like. The only thing I knew at the time is that I want it to be so beautiful that people would want to play it just to be in it. So I went to Son-Tra and we decided to start with building our main character. Inspired by her backstory and the actions she is expected to perform, we eventually came to the current design.
Sample concept of the main character
We then experimented with putting the character in various art styles. To our surprise, she fits in nicely with the hand painted backgrounds of Japanese animation, especially ones from Studio Ghibli. Another plus point of this art style is its attention to depicting plants and flowers – a big part of our storyline. That was when we decided to pursue our current aesthetics.
Choosing Unity
One reason for choosing Unity is that for the awesome things that the engine can do, the learning curve is not too steep. Despite the lack of experience in game industry, our members were able to pick up Unity pretty quickly.
Unity’s 2D tool set is very powerful, and they keep adding cool features each patches. It allows us to add and manipulate 2D elements, as well as combine 2D and 3D easily.
Another strong point of Unity is their huge Asset Store. Being a small and inexperienced team, we often find ourselves seeking help in many tasks, and the Asset Store has always been helpful. An example is rendering our 3D elements. To achieve a toony look that blends well with the hand-painted background, we used a couple of toon shaders (Toony Colors Pro 2 and RealToon) purchased from the Asset Store. This saved us a lot of time writing the shaders ourselves.
Character Creation
As mentioned earlier, we used the characters’ in-game actions and backstory as the core of our design, and get rid of any the elements that don’t serve those purposes. For example, we decided that Hoa will not be doing any action that requires arms or hands, so in the final design she has her whole body covered by the cloak and her hands are not visible. You don’t even know if she has hands or not.
Once the concept was decided, our 3D process was actually quite standard, may be even simpler than normal. Most of our characters’ shape are very simple and distinctive, and our 2D cel-shaded look does not require normal maps. The details are painted directly into the albedo map, so there is no need to follow the normal process of creating a high poly model then retopo-ing and baking the details onto the low poly. We went straight to creating the final model, rigging and animating it in Maya (with some help of Photoshop for texturing). The model was then exported in fbx format, and later imported into Unity along with the textures.
Scenes
Our scenes’ set-up is actually quite similar to other side-scrolling games: 2D sprites placing at different depths to achieve parallax effect. Nothing too special here.
About the interactive objects, I will take the rocks with eyes following the character as an example. For that eye, we created 9 animation clips of the eyes looking in 8 directions (up, down, left, right, and 4 corners), and one when it is looking straight. After that, we create an Animator Controller in Unity, and put all these animation into a Blend Tree. The Blend Tree takes in 2 parameters: X-position and Y-position. It is set up as follow.
Using a script attached to the rock, we get player’s X and Y position in relative to the rock’s position and plug them into the Blend Tree’s parameters. With that, the eye will always look at the position of the character.
Texturing
Once we decided to pursue the Ghibli style, we knew the biggest obstacle that we have to overcome is to be able to recreate that beautiful hand-painted effects in digital. At that moment I was not really sure if we can do it. Ghibli’s artist like Kazuo Oga have decades of painting experience, and we have to match that quality. If we cannot pull it off, then the project is over right at the beginning.
We spent a lot of time watching all Ghibli movies, researching their background art, breaking down the techniques, then finding a way to recreate that in Photoshop. It was a really tough task, but as we paint more we start to get the hang of it. After a few months of continuous researching and practicing and playing with different brush settings in Photoshop, our works reach an acceptable level. We make up for the remaining difference in quality with filters and post-processing effects in Unity.
Regarding the time cost, our R&D stage lasted for a few months as mentioned. In production, take the forest scene we posted for example, it took us about two weeks to finish painting all the background elements for the scene. The elements were divided into layers, and depending on the layer’s distance
from the camera, we adjusted the level of details and colors accordingly. Planning is very important to maximize the situations that each sprites can be used and make sure the sprites blend well together.
Sample sprite sheet from our game
Animation
You know, the good old 12 principles. The basics done well goes a long way. For example, Squash and Stretch for jumping and landing shows the impact of her fall, adds to the cuteness, sells the weight. For the long tip of her hood, Follow-through/Wave, and so on. We attached a slow motion gif so you can see clearly how the principles are applied. It’s funny to say this out loud, but the way we go about animating this is somewhere between being as obvious and as subtle as possible. We hope that makes some sense.
Creating smooth animation is only half the battle. We still have to set it up in Unity so that they transition smoothly from one into another. A lot of time this has nothing to do with timing, but more about your logic. Did the character do the run animation when he is supposed to jump? Why did this happen? How to fix it? This requires a lot of trial and error, and very good teamwork between artists and programmers.
Plans
Currently, we are working to build a playable demo and having it ready by mid-2019. Our plan after that largely depends on the community’s feedback on our demo. The best scenario is our investors agree to continue funding us, but in case they don’t, we will probably bring the game to a crowdfunding platform to seek financial assistance. We aim to release the game around early to mid 2020, first on PC, then Nintendo Switch. Consoles will depend on our budget. We do have mobile in our mind too, but at the moment we cannot promise anything.
Regarding the scale of the game, we are aiming for something like Journey. Not too long, just a couple hours with breathtaking experience. That should be enough.
The Team of Hoa
Interview conducted by Artem Sergeev
Simple River Stones by Stan Brown is a procedural material for your environments fully made in Substance Designer. The package includes a fully commented and organized graph for study and customization.
© a.sergeev for 80lvl, 2019. | Permalink | No comment | Add to del.icio.us
Post tags: 2D art, 3d art, gamedev, indiedev, made with unity, Maya, Photoshop, Unity, unity3d
Feed enhanced by Better Feed from Ozh
Source : https://80.lv/articles/hoa-using-ghibli-style-for-an-adventure-in-unity-004adk/