Little Pony, Big City is an immersive and interactive virtual trading card experience, inspired by Hasbro and KAYOU’s My Little Pony official Trading Card Game.
Little Pony, Big City is a 2.5D immersive experience where the player can enter a My Little Pony trading card and interact with the objects inside.
The project features Rarity, a a humble and generous fashion designer from Ponyville who has always dreamed of opening up boutiques across Equestria. This trading card captures the moment where Rarity looks up at the billboards of Manehattan, which all display her fashion, and realizes that her dream has come true.
It all started with some concept art and a dream. I had a clear vision of what I wanted the card to look like – Rarity in the center, surrounded by looming skyscrapers full of colorful billboards. I wanted a forced perspective and lots of details, with references to the franchise as well as original designs done by myself.
This scene took lots of planning, with many different variables to account for. I had to consider the full size of the image vs. the small 2.5 x 3.5 inch space of the card; I had to figure out how to make 2D buildings appear 3D, and how to make those buildings follow the forced perspective I imagined; and of course, I had to determine which billboards would have interaction and plan for that accordingly.
I began the prototype in a 3D project in Unity6, where I started with the most vital part of my project – the seamless scene transition. I was able to make this work by triggering a delayed scene change that lined up exactly with the timing of the animations of the camera and the card edges. When the player presses on the card, the scene transition starts.
With the scene transition taken care of, I moved into prototyping the rest of the features. using a starter script package that was provided, as well as some research, I was able to implement parallax layering, side to side camera panning, bounded camera rotation, and clickable objects with a white hover outline. Creating the camera movement that I wanted was challenging due to the conflict of player movement and triggered animations – by implementing a camera rig, I was able to overcome this issue.
With the prototype finished, I moved into the production phase. I started with the character because the quality of her final illustration would be the standard I would hold myself to for the rest of the project. I spent a lot of time studying the art styles of both the My Little Pony television series and the trading card art so that I could properly adapt my style and create an illustration that was on par to the franchise.
I experimented with different rendering styles before deciding to land on a mix between the styles of a GR (gold rare) and CR (colorful rare) card from KAYOU’s trading card game. I then separated out her different body parts on individual layers in preparation for animation, for a total of ten moving pieces, including an ‘eyes closed’ state.
I imported the layers into After Effects, where I adjusted the pivot points and began to animate. I created a looping animation where her hair and shopping bags blow in the wind, with intermittent blinking. The animation is around four seconds.
I then exported the animation as a PNG sequence, which I converted into a sprite sheet for Unity implementation. It took a lot of tweaking, compressing, and adjusting to balance between maintaining a high-quality image and optimizing it for performance and memory.
My next step was illustrating all fifteen of my buildings. This portion took the longest due to the level of detail I aspired to put into each building. I started with the central building because this one would be one of the few that were visible from outside of the card.
I opted for a lineless art style not only because it would fit within the style of the television show, but also because it increased my speed of work. As I continued to finish each building, I became more familiar with the style. The billboard designs on each building are original, many of which have references to the show or its characters. For example, in the central building, the middle billboard features Rarity’s logo, which appears in some of the Friendship is Magic comics. I included references like these throughout the environment to add more detail and to entertain the audiences that are familiar with the franchise.
To the left is a progress update during Climb 9. As you can see, I had illustrated and implemented most of the buildings, as well as the road. Some of the buildings (such as the red and pink cubes) I had blocked out for reference but had not yet finished illustrating.
I created seven interactive objects, each with unique animations – four billboards, one lamppost, one trees, and the newsstand. Each one was animated in After Effects, exported as a PNG sequence, and converted into a high-quality spritesheet. For each of these animations, I had to keep in mind how they would go back to the idle state and had to keep them around 3 seconds or less to account for file sizes and performance.
I created a shader that makes a white outline appear around the sprite when hovered over to indicate to the player that the object is clickable.
I designed this card frame with inspiration from KAYOU’s official My Little Pony Trading Card game. I wanted it to look like it belonged to the card game without directly copying an already existing frame. You can see in the bottom right corner is Rarity’s cutie mark (the symbol on her flank that represents her unique talent) and in the top left is the level of card rarity that the card is (CR). At the bottom in the gold print is the card number (UF01-CR01) as well as my name and credits to KAYOU and Hasbro for their character and associated content.
This project taught me many lessons in time management, problem solving, and pushing through despite the obstacles that kept popping up. It felt like every week presented a new challenge – but with patience and determination, I was able to solve each problem one step at a time and overcome these barriers. If given another chance at this project, I would pace myself to allow myself more breaks between illustration and set my production starting point earlier in the process.
Little Pony, Big City is a testimony for my passion to create art that is whimsical, magical, and new. It has been so rewarding to see my vision come to life over these past fourteen weeks. Pouring my heart into the details and allowing my creativity flow has brought me to the final product you see before you.
Whether you’re familiar with My Little Pony or not, I hope you’ve become inspired to follow your dreams the way that Rarity follows hers!
Click on the link below to play Little Pony, Big City in-browser, or download (windows) for a better experience!
