Notifications
COMPLETED
Honorable Mention
Article
A peaceful day on Shell Street
Updated 5 months ago
2.5 K
28
A peaceful day on Shell Street

Final Submission



Post Mortem Article

Who are we ?

We are two game artists students from Lyon, France, Antonin Jury & Nicolas Duboc. We have decided to enter the contest together because we had already worked on several project as a team. We have been using Unity since september 2016 so we are still discovering a lot. The Neon Challenge was a perfect occasion to try new things and see how far our skills could take us with Unity.
We worked equally on the project, both of us on the concept, on the models, on the shots.

Inspiration and choosing a theme

This was a really important part because we have decided to make our own concept art to base our scene on. Even if the challenge is called “Neon”, it was clear that the theme “A new future” was very large and could be an alien life, a fantasy world, a robotic one… We tried to find a creative idea to build a simple but coherent new world. We thought that picturing a peaceful daily future could be an unexpected way to deal with the theme of the challenge. We also wanted our scene to be cartoonish and fun. From this, we thought of this subject :
13 millions years have passed, Nudibranchs have evolved to live on the ground and are now one of the major species of Earth. They don't live underwater anymore but they brought some sea stuff to live peacefully on Earth !
Our idea was to represent a nice new world where cute evolved Nudibranchs are living a peaceful life. The main theme is a residential & peaceful neighbourhood. We want you to feel like a daily afternoon on Shell Street.
There is a lot to explore with this angle. Sea shapes are abundant and sometimes exuberant and the Nudibranch’s colors form a big tint library. We designed some characters and buildings and made color keys to help us set the mood of the scene. The concept art was the first big step of our submission. When we were satisfied with it, we decided to stay as close as possible to it.

Process / Making of

Asset Store
There are really good free assets on the store that we've already downloaded for other projects. For this one, it was hard to find something useful because our theme is very specific (organic sea shapes & stylized characters). That’s why every model has been made from scratch. It was a challenge but we wanted our scene to be unique !
Still, we needed the Asset Store to make up for the skills we don’t have (like programming), to improve the visual quality of our scene or simply to save time ! For the movement of the characters, we used iTween a fantastic (and free !) tool. We needed this asset for a specific task : quickly creating curved paths for the characters and vehicles. iTween perfectly provided this result. We’ve also added the iTween Path Editor to easily visualize and edit the paths we were creating.


For the vegetation, we decided to use ShaderForge which is the only paid asset we used. I actually bought it for the challenge as I also needed it for other projects. With ShaderForge and the help of online tutorials, I’ve been able to easily create a vertex displacement shader for our trees (see the Vegetation&Terrain part).
We’ve also used the Ressource Checker asset which is of great help when it comes to clean the hierarchy of a scene. Of course, Cinemachine and post processing were also imported in the project.
Some other Github plugins we used : VolumetricLighting (discussed in more detail below), KvantSpray (no really necessary for our scene but such a great instancing / particle system tool) and PostProcessingUtilities (discussed in more detail below).
Models & Animations
This part is going to be way more visual. We’ve created all our models using 3ds Max or Blender and the animations have been made with Blender. We kept the animations very classic but we still tried to exaggerate them a bit with follow through and overlapping actions. We tried to make good use of the character design (swinging antennas for example). Once the main character was rigged, it wasn't very time consuming to add one specific animation to make the scene more alive.
The design of the buildings and the characters may seem simple at first but in fact, we've figured out that it was quite difficult to create an urban environment with natural and organic shapes. It's hard to find a balance with all the curvy shapes. We got a lot of inspiration from sea shell shapes, coral pattern and also from the Toyota Ex-II for the cars !
Textures & Materials
Our models are high poly and the textures are high res. We're trying to maximize the visual quality of the scene because there won't be a lot of elements to render. We're using albedo, metallic, smoothness and normal maps with the Unity standard material. All the textures were digitally hand-painted.
The main idea was “Let’s not lose time with optimization”. It seemed a bit counterintuitive for us who want to work in the video game industry but for the challenge it saved us a lot of time not to overthink the modelling and texturing steps with optimization constraints. We also have a good machine to render the final scene.
To obtain a variety of characters and cars, we duplicated the textures and the materials and changed the colors. Not smart but quick.

Terrain & Vegetation
The vegetation has been developed through Shader Forge and Unity Terrain tool. With ShaderForge, we were able to use vertex painting to animate tree trunks and their foliage with blue and red channels. The Terrain tool gave us the possibility of directly painting billboards for low vegetation. Moreover, the terrain tool allowed us to easily shape the ground as we wanted.

Post-process & Volumetric lighting
A quick note on our use of the post processing stack and the volumetric lighting effect. We think using these effects in the right way can really boost the visual quality of your scene and improve the mood you're trying to render.
First, we added the volumetric lighting effect. This was pretty straight forward. We were already satisfied with our light angle. Adding the volumetric lighting effect emphasized our directional light with sun shafts. The effect is easy to tweak. You can lower the quality (it can be heavy on performance), add some noise to have a fog effect in the light shafts, increase the power of the shafts, ect. About lighting, everything is rendered with a realtime Global Illumination.
Then, we added the post-processing stack on our camera. It's a powerful visual tool that quickly improved our scene. We already knew the post processing stack and we knew wich effect we wanted to add to our peaceful street. Bloom was a must-add. We have a strong back light and the bloom effect softens the edge of the light zones. We really like this effect but we're trying not to overuse it (because you can quickly go crazy with its intensity !). The Ambient Occlusion is also a great effect that immediately gives a nice connection between the ground and the objects which is very important otherwise everything seem to float in the air. Binding all our elements together is the most important task. We used the Vignette effect to recenter the attention on the scene. Color Grading is also very powerful but we only used a tiny bit of it because we liked the colors of the scene. Fog, Antialiasing and Screen Space reflection are also on (we worked with the deferred path). Screen Space reflection is an expensive effect but we still had a safety margin on framerate so we added it. It creates more subtle reflections.
Timeline & Cinemachine
Before thinking about how we would use this tools, we knew we had to include multiple views of the scene so the first step was to draw a quick story-board.
The goal was to have a main character : the (slow) bus of Shell Street and the daily life around it. We tried to find interesting views that could exploit the movement of the bus like dolly tracks, turning around a target...
Then Cinemachine came into play ! Creating these camera movements was easier than we thought. Combined with the Timeline, it's a powerful couple. Here’s a making of our scene and how we used Cinemachine and the Timeline.
Cinemachine has been a very useful tool to compose our shots. For example, it was quite simple to carry out the complex movement of the shot 2. It starts diving above nudibranchs discussing or leaving their home and ends inside the bus, alongside a dozed passenger. The DollyTrack system allowed us to smooth the movement until the camera arrives next to the bus. We blended three different Virtual Cameras to focus first on the bus and then on the nudibranchs talking.When the camera is inside the bus, we used the Follow (targeting the bus) and the LookAt (targeting the nudibranchs) systems.
The simplicity of use of Cinemachine allowed us to focus our attention on the artistic composition of the shots. We took care to alternate acrobatic shots and more static shots to let the spectator breathe. For example, after shot 2 (a long traveling shot with different subjects) the shot 3 focuses only on the head of the tired bus driver. Then we alternated with a bird's-eye view with the focus on the mother who takes her three children to the public swimming-pool. The camera rotates around the family. Next shot is, therefore, peaceful and allows to see the scene in a more global way, with the point of view of a discrete observer to give a cocooning effect. The viewer can easily find his way around the scene and relate to what he saw in the previous shots. Also, handeld camera noise gives instant life to a static shot and it’s really great !
Music & Sound effect
The music is an original soundtrack we composed for the challenge with a digital piano. We tried to make a very light and happy melody that would fit our world. We wanted to create a coherent but simple sound environment with free audio files available on Freesound.org. Some sound effects have been reworked with Audacity.

Asset List

iTween, by PixelPlacement - Shader Forge, by Joachim Holmér - Ressource Checker, by HandCircus - Cinemachine, by UnityTechnologies - Post processing stack v1, by UnityTechnologies - KvantSpray, by keijiro - Post processing utilities, by keijiro
All the sound effects are free of use. We found them on Freesound.org.

Work-in-Progress Logs


Update 12 - 01/12/2018

What about post process & volumetric light ?
A quick note on our use of the post processing stack and the volumetric lighting effect. We think using this effects in the right way can really boost the visual quality of your scene and improve the mood you're trying to render.
First, we added the volumetric lighting effect. This was pretty straight forward. We were already satisfied with our camera angle. Adding the volumetric lighting effect emphasized our directional light with sun shafts. The effect is easy to tweak. You can lower the quality (it can be heavy on performance), add some noise to have a fog effect in the light shafts, increase the power of the shafts, ect.
Then, we added the post-processing stack on our camera. It's a powerful visual tool that improved quickly our scene. We already knew the post processing stack and we knew wich effect we wanted to add to our peaceful street. Bloom was a must-add. We have a strong back light and the bloom effect softens the edge of the light zones. We really like this effect but we're trying not to overuse it (because you can quickly go crazy with its intensity !). The Ambient Occlusion is also a great effect that immediately gives a nice connection between the ground and the objects which is very important otherwise everything seem to float in the air. We used the Vignette effect to recenter the attention on the scene. Color Granding is also very powerful but we only used a tiny bit of it because we liked the colors of the scene. We might adjust it before the end. Fog, Antialiasing and Screen Space reflection are also on (we work with the deferred path).
With Post Processing Stack V1, by UnityTechnologies - Volumetric Lights, by SlightlyMad

Update 11 - 01/11/2018

Here we are, all models are almost finished! The composition of the scene is ready.
The vegetation has been developed through Shader Forge and Unity Terrain tool. Shader Forge allows us to use vertex painting to animate tree trunks and their foliage with blue and red channels and the Terrain tool gives us the possibility of directly painting billboards for low vegetation.
The animations created under Blender remain to put in place, as well as different patterns for the Nudibranchs texture. We want to have a really clean scene before buidling our final timeline and using Cinemachine.
We have the end of the week to look for interesting shots and create a nice scene with Cinemachine and Timeline. Thank you to all those who continue to support us!

Update 10 - 01/10/2018

We've almost finished all our models ! Here's the last house on Shell Street. We tried to think the houses as modular buildings with sea textures and shapes (like coral) to remind where the Nudibranchs come from. The next step is going to be more fun as we're going to gather all our models to create a nice and living environment.

Update 09 - 01/09/18

A new house on Shell Street ! We've almost done all the models we need. There is still one house and somes trees that have to be modeled. Then, we will build the scene more deeply and we will finally start to build our video ! Don't hesitate to give us feedback !

Update 08 - 01/08/18

This is the Nudibranch's car ! It's a three wheels model. We took the Toyota Ex-II as a reference to imagine this new car.
We're still working on our models, soon to come : two more houses and the trees (very important !).

Update 07 - 01/04/18

The nice and slow bus of Shell Street ! The Nudibranchs take it to cross the neighborhood. Even if the bus is slow, it's so comfy that the Nudibranchs don't hesitate to use it.
The design of the buildings and the characters may seem simple at first but in fact, we've figured out that it was quite difficult to create an urban environnment with natural and organic shapes. It's hard to find a balance with all the curvy shapes.

Update 06 - 01/02/18


Hi everyone ! We're working on the models and the terrain and we're trying to stay faithful to our concept art. Here's the integration for now. We're using Unity Terrain for the global shape of the ground. It's also useful for the vegetation. We still have a lot to do !

Update 05 - 01/01/18

Models
We're going full handmade for our models.
Here's our first character : Noodie. Modelling and animation have been done with Blender. We plan on duplicate the texture to quickly obtain a variety of character with the same polygon base. We'll add some other animations later (sitting in the bus, waving the hand).
And this is our first building. It's the house of one of the street's resident. Our models are high poly and the textures are high res. We're trying to maximize the visual quality of the scene because there won't be a lot of elements to render. We're using albedo, metallic + smoothness and normal maps with the Unity standard material.

Update 04 - 12/31/17

Hi, a more relevant update will come tomorrow but today is a bit special ! We wish everyone a happy new year =D

Update 03 - 12/28/17

Quick Unity mock-up
It's our first mock-up of the scene. We tried to find the same colors, the same light and the same composition as the concept art. We did this very roughly to have a more accurate vision of the scale and the mass of our objects. For this mock-up, we rendered a quick real time Global Illumination. We also added linear fog and volumetric lighting.
Discovering Cinemachine
It's our first use of Cinemachine. We watched some tutorials to have an idea of what can be achieved with this tool. It seems to be quite powerful and instinctive. For this two shots, we used a basic Cinemachine camera with an animated look at target (shot 01) and a dolly track (shot 02). There is a lot of settings and possibilities to smooth the shots. We will do a more in depth explanation of our use of this tool in the future.

Update 02 - 12/27/17

Storyboard
The orange shape is the yellow bus from the concept art. It's kind of the main character of our scene and we will use it to have dynamic shots as it's constantly moving.
It was hard to find balance between the narrative part and the showcase part of our submission. We will approximatively have a week to make our entire project. It's a very tight schedule ! We think that the narrative part souldn't outshine the showcase and undermine the overall quality of the scene. We decided to go with simple shots that can still make good use of Cinemachine. We may add some shots if we have time. The goal is to feel like a peaceful suburb.
Asset store search
There are really good free assets on the store that we've already dowloaded for other projects. For this one, it's hard to find something useful as our theme is very specific (organic sea shapes & stylized characters). We don't think we'll be using free 3D models.
For now, our free assets list (plus Cinemachine and PostProcessing) :
Instant Screenshot by Saad Khawaja - VolumetricLighting by Unity Technologies - ITween by Pixelplacement
Github assets :
VolumetricLight by SlightlyMad - KvantSpray by Keijiro
And our potential paid assets :
Dynamic bones by Will Hong - Shader Forge by Joachim Holmér

Next step :
A quick Unity mock-up of the scene to reach the same composition, lighting and color. We will look into Cinemachine and do some test shots with this mock-up.

Update 01 - 12/22/17

Design
Here's our digital researches (Photoshop).
First, we talked a lot ! We tried to find a theme that we liked that could fit the challenge. We had several ideas but the main concept was "an alien daily life", where's the characters are living happily.
Secondly, we did some character researches to find something catchy.
We also drew some buildings inspired by nudibranchs's colors and sea shell's shapes. The main idea was to stay simple and a bit decorative.
Thirdly, we did some color keys to find the mood of our final concept art (you can see it above). They were really important, we thought about how we wanted to light the scene and we began to think about the composition of the shots for the final video.
Next Step
Next step should be a bit of story boarding to define the shots for the video. We'll also look into cinemachine and we'll search through the Asset Store if some free assets could be of use !

Nicolas Duboc
2D/3D Artist - Student
15
Contributors
Antonin Jury
Student - Artist
Comments
Nicolas Duboc
5 months ago
2D/3D Artist - Student
Farrukh AbdurVery nice result. Creative and different. Good luck :)
Thank you Farrukh =D
0
Farrukh Abdur
5 months ago
3d Artist / Game Designer - Artist
Very nice result. Creative and different. Good luck :)
1
Nicolas Duboc
5 months ago
2D/3D Artist - Student
Sam WelkerI need to play this game :D Wish it was an actual full scale production.
Thank you Sam ! We'd love to make something out of this !
1
Sam Welker
5 months ago
Houdini/3D Artist - Owner
I need to play this game :D Wish it was an actual full scale production.
0
Ahmed
5 months ago
Senior Creative Specialist - Designer
Good Luck!
0