Xplore (Learn With Games)

Xplore (Learn With Games)

A visual blueprint for animation — combining character design, layout strategy, background detailing, and production-ready workflows.

Character Line-Up

The characters primary characteristics are features and costume details, a thick-to-thin line quality is appliedin certain areas to add weightage and dimension. Simplified shapes and silhoutte. Focus on face and expressions. Shape/size can differ as per age. Blocky accessories and focus on feminine physical features is minimal. Wider torso, narrow waist and legs. Small feet, slightly exaggerated head size for me. Layering to add visual interest. Major design details contained within the shape. Relevance to the setting and storyline the color for the characters are decided, reflective of a character's nature and attributes. To direct focus towardsthe face and gestures. Complimentary to the background.

Character Design & Rig

The attention is on rounded edges and fuller shape. Volumetric designs appeal better to a younger target audience and blend well with the art style. Angular shapes may create off tangent,a sense of aggression in the visual language and put off the users subconciously. The main gameplay elemets should always be the main focus, with the filler embellishments never overpowering them. A substantial value addition in terms of design and completion is expected in the final line art.

Character Shapes

If the character occupies the full or almost the entire screen, detail level should be maximum. In smaller sizes, the details will be minimum. This completely depends on the framing and compositions of the game screens. Wider waist/hip, narrower torso and legs, small feet, slightly exaggerated head size. Major design details contained within the shape. Rounded, smooth face shape, no angular edges. Doesn't apply to the hair. A simple round brush with pen pressure on is used for clean linear design. The character color is divided into three parts: the base color (majority), the outline (a darker shade of the fill color), and the shadow (slightly darker to imply soft lighting). Finally, highlights should be much lighter than the midtone and can add textural detail and light source contrast.

Character Rig

The layering structure is optimised for animation, especially in After Effects. Overlapping is maintained at the joints and points of motion. The characters are designed in a way to avoid hindrance near the joints. Elements such as hair and jewellery is kept separate for secondary animation.

Character Structure

The ‘Head’ will be a group containing:
-Hair and HairBack
-Eyebrows
-Head
-Nose
-Mouth Left eye and Right eye
-The’ Body” will be one layer
-The ‘ Waist” can be a separate lay
-The legs will be named L_Leg and R_Leg
-The arms will be named L_Arm and R_Arm

Elements

The elements follow the same approach as the background and the characters. Design for animals, orany non-human character is designed in a way so that some key sensibilities remain the same. Maintain a simple silhouette, details such as hair, fur feather should be majorly handled in the color treatement. In certain areas, it can be incorporated as part of the lineart for stylistic flair, but without hindering animation at the joints. Props and game elements playy a very importantrole in engaging the players visually. The shappes should be simple and geometric, with a visibile chunkiness, not super realistic. Simple propshave low detail and are usually of low priority to the storyline. The coloring details on props and gameplay elements should be as per its priority in the gameplay nad narrative. Important primary elements may be detialed upto using 5 tones of color for extra empahsis and visual appeal. This helps the players focus and connect with the gameplay better.

Turn-arounds

Background – Interior

The foreground elements have the thinnest line width. The midground elements has the optimal outline and thickness. Overlapping layering of elements is encouraged so that it doesn'tlook too flat. That also helps convey a depth of field and realism. Arrangement and choice of elements in a frame play a huge role in effective content communication and visually direct a players focus on the important objects in a game. Background colors are picked as per the setting and context of the game. Use higher contrast for the important areas in the composition and low contrast detailing for the filler parts. In evvery frame, use coloring to define a clear focal area and make sure attention doesn't drift. Avoid pure blacks and whites and most importantly, if ther are characters in the framethe background should never overpower the characters on the top. In every frame, use coloring to define a clear focal area and make sure attention does'nt drift.

Background – Exterior

The foreground elements have the thinnest line width. The midground elements has the optimal outline and thickness. Overlapping layering of elements is encouraged so that it doesn'tlook too flat. That also helps convey a depth of field and realism. Arrangement and choice of elements in a frame play a huge role in effective content communication and visually direct a players focus on the important objects in a game. Background colors are picked as per the setting and context of the game. Use higher contrast for the important areas in the composition and low contrast detailing for the filler parts. In evvery frame, use coloring to define a clear focal area and make sure attention doesn't drift. Avoid pure blacks and whites and most importantly, if ther are characters in the framethe background should never overpower the characters on the top. In every frame, use coloring to define a clear focal area and make sure attention does'nt drift.

Background – Structure

The storyboard is fleshed out and designed primarirlyat thelineart stage. The sketch in a storyboard is expectedto be a very basic layout of the frame. The layout, camera angle, perspectiveand placement of elements can be understood from it.

The main gameplay elements should alwaysbe the main focus, with the filler embellishments never overpowering them. What it is not is a design reference.

The fair lineart should be created as per the design guideand additional references, taking into consideration the content requrements and gameplay.

Each and every element in the frame is composed with ine major intent, to direct our eye towards the main focal area. Subtle visual cuescan be added to support the game objectivebetter and to define an art composition better.

Background colors arepicked as per the setting and context of the game. Vibrant, yet toned down colors are chosen for the background palette. Be very careful not to distract from the character animation prlearning objective.

In every frame, use coloring to define a clear focal area and make sure attentiondoesn't drift. The art area is brightest in terms of color contrast, as the primary focus is intended to be the entrance and front facade of the structure.

The extremefar off elements are less saturate, which varies as per distancefrom the camera. The foreground elements are darker, to establish depth of field. Lighting is ambient, non directional. BG lighting is not related to character.

Color Balance

The colors need to be choosen as per the content and gameplay as seen in the storybaord. It completely depends on the context and priority of the elements seen on screen. This a creative call to be taken after a close understanding of the prototype. here, you can see how the same wooden chest prop has been adjusted to fit two very different requirements. Ina certain prop orcharacter requires attanetion, the level of detail and choice of tones must help in emphaszing that. Additional light source may be incorporated to achieve the same, wherever possible. In a composition where the attention is undivided, maintain a similar tonal value accross the entire artwork. This is common in cases where there is additional characters and screens on top of a BG.

Layout & Grid

The grid is used as a layout for planning and creation of backgrounds. The art area is most focused on and the most important elements of the background are designed to be visible in the area. The canvas area consists of the entire artwork, but the most important elements are contained within the safe area. Portions of the safe may be covered by UI elements, dialouge panels etc, so this part must not contain any visuals vital to the gameplay. The primary focus of this frame is intended to be the radio and its buttons along with the props nearby, hence it has beencomposed within the art area. All other elements in the Cnavas area are minor elements

Final Compositions