Creating a Kid-Friendly 2D Game: A Journey from After Effects to Code

Introduction:

Welcome to Part 2 of our exploration into the creation of a captivating 2D game for kids using After Effects and coding. In this article, we will delve into the process flow, challenges faced, and innovative solutions that paved the way to a successful game development journey.

Understanding Lottie Files: A Pixel-Perfect Solution

Before we dive into the intricacies of game development, let's unravel the magic behind Lottie files. After Effects' pixel-based nature can lead to pixelation and file size issues. Lottie files, a JSON-based animation format, come to the rescue. They ensure smooth scaling without pixelation, making them the ideal choice for deploying animations across various platforms.

Tools and Workflow: Merging Adobe, Figma, and After Effects

Our toolkit comprises Adobe Illustrator for graphic design, Figma for UI design, and After Effects for animation. The synergy between these tools is streamlined with AEUX, enabling seamless file imports from Figma to After Effects. For the conversion of animations into code, we opted for the reliable Lottie plugin, finding it superior to the free alternative, Bodymovin.

Collaboration and Asset Requirements

Before delving into development, a crucial step involved collaborating with developers to establish asset requirements. Our goal was clear—animations under 100kb each. With five levels, each containing 40–45 Lottie animation assets, optimization became paramount for ensuring a seamless gaming experience.

Pushing the Limits : Enchanted Forest

Embarking on the game development journey, we planned five captivating levels: Candy Town, Enchanted Forest, Water World, Dino Land, and Space City. Before diving into the creative process, I initiated thorough research on Lottie's compatibility with After Effects and explored its limitations for converting animations. Although I found limited information online for our specific project, I started testing with our developer.

Our exploration began with the enchanting Enchanted Forest, widely regarded as the highlight of our game. This level boasted three distinct zones featuring approximately 45 animations. Notable elements included an astronaut navigating on a bike, an entire-level PNG backdrop with a single background, and a thrilling mini-game concluding the adventure. The Enchanted Forest served as an exemplary showcase of our creative prowess, setting the standard for the levels to follow.

Test Case: Astronaut on a Bike Animation

1. Challenge: The detailed design of the astronaut on a bike animation presented complexities with intricate details, colors, and gradients.

2. Initial Attempts: Numerous efforts were made, involving collaboration with a developer, to find a suitable solution for the complex animation.

3. Breakthrough: The turning point occurred with the decision to directly import the Illustrator file into After Effects. This approach unlocked the potential for efficient animation handling.

4. Size Issues: Despite the breakthrough, size issues persisted during the animation process.

5. Resolution Experimentation: To address the size problem, various resolutions were tested. The key was to find the optimal balance between clarity and file size.

6. Viable Solution: Through experimentation, a resolution of 500x500px emerged as the sweet spot, maintaining a file size of 110kb. This resolution offered an effective compromise, allowing for smooth animation without compromising on quality.

Animation Asset Development :

Coin Collection Interaction:

Starting with the tap-on object to collect coin animation posed a challenge, inspired by the dynamic coin animation in the Mario game. The envisioned animation included the coin appearing, rotating in 3D, and then disappearing upon tapping an object. However, the realization that Lottie files don't support 3D animation prompted a creative solution.

I opted for traditional frame-by-frame animation,

collaborating with a graphic designer to create a frame-by-frame 3D coin animation in Illustrator. This approach proved successful, enabling the desired animation effect. For instance, when tapping on a lion, the coin would appear.

To translate this animation into code, the timeline transitioned from Time to Frames. Consider a lion animation Lottie file with 200 frames, where the lion loops in the cage before any taps. The animation structure involves a 0-100 frames loop animation and 100-200 frames showcasing the lion free from the cage along with the coin animation.

Multi-faceted Animation Divisions:

1. With numerous levels and a tight project deadline, collaboration became paramount. Two dedicated motion designers were brought on board to focus on different aspects of animation, while I concentrated on the AR model and Game UI animation. This collaborative effort ensured that each animation was tested, optimized, and seamlessly integrated into the Lottie file.

UI Animation:

• Animating the User Interface (UI) elements turned out to be a relatively straightforward task. Having cracked the code on animation and optimization, we introduced a rating symbol at the conclusion of the game, enhancing the overall user experience.
  

Mini-Game Animation:

• Animating the mini-game in After Effects presented challenges, prompting us to opt for direct coding by our skilled developer. This streamlined the process for a smooth and glitch-free gaming experience.

Bike Upgrade Animation with Coin Deduction:

• Aligning the Lottie file with varying phone aspect ratios presented a challenge. The solution involved allowing the coin animation to dynamically spread around the bike, ensuring compatibility with different phone resolutions.

Character Animation for Achievements:

• As each game level concluded, character animations featuring jumps, text motions, and confetti effects added a celebratory touch, conveying a sense of achievement to young players.

Balancing creativity, problem-solving, and collaboration, the animation team's efforts resulted in a seamless and engaging gaming experience for our young audience.

Final Delivery: Navigating Glitches and Triumphs

As we rounded up all levels and fine-tuned the game for optimal performance, minor glitches surfaced. In the Enchanted Forest level, snow animations created in After Effects and converted into Lottie caused lag. The solution? Code the snow in canvas. With these tweaks and resolving other minor issues, the game was ready for its grand launch.

Conclusion: A Creative Triumph

In conclusion, this creative odyssey from conceptualization to execution underscores the importance of innovative problem-solving, collaboration, and adaptability in the ever-evolving landscape of game development. Crafting a 2D game for kids is not just about pixels and code; it's a journey of creativity and perseverance. We hope this article provides insights and inspiration for your future endeavors in the exciting realm of game development!

Studio: Bombay Design Centre