Art Spotlight: Toon Classroom

Back to overview

About Me

Hello all! My name is Tommaso Coviello and I’m a 2D/3D freelance game artist from Italy. I’m currently working for Imaginary, a serious game company based here, in Milano. Here I work as a 360° artist: illustration, 2D/3D asset production, and Unity set up, as well as characters and environments. The company is not that big and artists’ roles are general. So I’m lucky to work and improve my skills in more than one aspect of digital art.

The Game

This scene is part of a series of environments I have designed for a serious-game. The game, Aksion, was developed for a European research project, and its focus is children’s education using an interactive and fun experience. The target is autistic children, and the game wants to teach them how to behave in and react to uncomfortable situations, using minigames that reflect real life situations.

Visual

Device: Android

Target: autistic children 5-10 yo

The concept was to create illustrated frames and to make the scene’s final look feel like a comic or an illustration with minimal intrusion of 3D elements in the scene.

For these reasons the game has been designed as a mix of 2D and 3D art: 3D base environment, 2D props and characters, visual look as a hand-painted illustration.

As a reference for the scene’s set up, gameplay and navigation we chose Fallout: Shelter.

This allowed me to create high-performance scenes optimized for Android devices (low-poly geometries), and easily understandable to an audience with comprehension difficulties.

From Concept to Scene

The first step was concept design. I drew the whole scene in Photoshop first. I paid a lot of attention at this stage to composition, color palette and visual look. This is because for the whole production I wanted to stay faithful to the concept in a way that did not lose the sensation of a 2D illustration when looking at the scene.

A good Photoshop file would make things a lot easier, so I decided to keep it as well ordered as possible.

In this first step I was aided by Blender: I roughly modeled the scene with the principal props, the spaces and some objects, in a way that served as a guide for the design. In this way I was able to control and better understand the spaces and the extent of the scene, mocking up the distance, personal items, the rooms, and all the dynamics that I would then have to find in Unity.

I chose a cartoon style for the visuals. I kept the art really clean and simple.

I baked a fake lightmap on both floor and walls and I added some scenes that would make the parallax of objects on stage better, giving depth to the scenery.

The construction was simple. I modeled the low poly model, baked the AO, colored over the albedo and finally added the outline to the shader.

After having finished the concept art, the next step was to figure out what would be modeled in 3D and what instead would be drawn as a 2D sprite. The finished game would be a 2D horizontal-scrolling game, with a touch of camera movement to make the scene a little more dynamic. I chose to 3D model only the environment’s base mesh (walls, floor, etc. ) and all the objects with strong perspective lines. In this way the perspective would not be broken once the camera moved into the scene.

3D Modeling

I started modeling in Blender. Models were obviously based on the concept. 🙂

Models are really low-poly: I didn’t want to spend lot of time on modelling because most of the details would be drawn on textures. The pipeline was very easy: lowpoly modeling, unwrapping UV, baking AO and texturing in Photoshop. Once I textured props, I added an outline to the models in order to have the same graphic style as the rest of the 2D scene.

3D objects in scene, everything else (expect for walls and floor) are sprites.

Textures of 3D objects have been atlasized to reduce the size of textures in scene.

This project is made for Android so optimization was a crucial step

Walls and floor are made of tileable BW textures. Drawing the shadow cast from the windows was easy: I cut the mesh where the shadow would go, I assigned the same textures to both light and shadowed surfaces, and then I duplicated the material and assigned different colors to the textures’ albedo. They had the same UVs, so there was no problem overlaying the drawings.

Modular patches I drew for ledges and matchboards. To draw the main shadows I used the same texture in two different materials multiplied in different colors.

2D Sprite

Everything that was not 3D would be 2D! I knew from the start that my concept art would be a reference for the scenario. So I had already drawn different objects from the scene in different and cleanly ordered Photoshop layers. This way I didn’t have to re-draw all the elements in the scene, and this was really time saving.

Layer’s composition for sprites: the same technique as was used for texturing 3D models.

The final step was to combine the scene’s background and foreground objects. This helped to create and enhance depth, creating a cool parallax effect between foreground, midground, and the environment outside the windows.

Setting up the Sketchfab Scene

I wanted to show both the concept and the Unity scene, to better illustrate the similarity between the two. I made a simple scene in Blender putting the concept art on top of the Unity scene.

Blender scene ready for export.

In Sketchfab I used no lights and settled on black for the background color. Render: classic, shading mode: shadeless.

The scene would have no light so I just used albedo and alpha textures for the materials.

1) Lighting tab; 2) 3D material setting: as you can see the setting is really basic, all the details are in textures 3) 2D sprite material: I used the same alpha .png both for albedo and alpha mask

For 2D sprites I used the albedo texture (alpha png) both for diffuse channel and opacity channel, setting up the mode on blending and setting the format on alpha.

There was not a lot of post processing to be done. Visuals were comic style, so I added just a little AO. Colors were already ok so no color correction was needed.

If you want to check other environments I designed for the same game check my profile!

Here is the video presentation of Aksion (the game is still in development):

Developed for Imaginary srl

 

About the author

Tommaso Coviello

2D/3D Artist


Leave a Reply

Your email address will not be published. Required fields are marked *

Related articles