A browser-based racing game based on a 100 year old Carnegie Mellon tradition.
May 15, 2020
Buggy All Stars is a browser-based racing game that celebrates 100 years of Buggy history, a Carnegie Mellon tradition where student-led teams compete with aerodynamic, engineless vehicles known as “Buggies.” Developed in Unity, you compete against AI controlled buggies (based on famous buggies in the tradition’s history) around a track filled with notable Carnegie Mellon landmarks.
This project was commissioned by the Buggy Alumni Association at Carnegie Mellon University for Buggy’s 100th anniversary, and I served as the Art Director, leading student artists through concept art, 3D model, motion capture, and texture development. In addition, I also helped out the Design team with user interviews and gameplay research.
Challenges
Project Management: How do I teach students critical parts of the 3D art pipeline, maintain stylistic consistency, and divide work/maintain a timeline as an art director?
Communication: How do I communicate with the other teams to make art integration seamless?
Covid-19: How to pivot to a totally different medium?
Accessibility: How do we make this game accessible to all (especially the older generations)?
How do I optimize this game to run on lower end machines (in browser) ?
Objectives
Create the art and animations of the game with a unified style that honors a 100 year old tradition.
Teach students new to 3D art development the ins and outs of the video game art pipeline.
Takeaways
Project Management: Organize artists by their interests, use agile meetings for quick updates and pivots, and use similar software to ease communication and integration.
Communication: Ease integration with programmers by having artists and programmers talk with one another during work sessions.
Outcomes
A browser based racing game with a toon styled aesthetic that runs smoothly on most machines (so that anyone can play!).
Students with experience in a game setting with appropriate art skills that I taught them.
Skills
- 3D Modeling/Texturing
- Environment Art
- Project Management
- Agile
- Motion Capture
- Concept Art
- User Testing
Tools
- Maya
- Blender
- Substance Painter
- Substance Designer
- Unity
- Photoshop
- Illustrator
Duration
- Team Project (9 artists, 24 people total)
- 6 Months
The Team
The entire team consisted of 24 people, in an interdisciplinary, class based studio called Strike Force Studios. Comprised of undergraduate and graduate students, staff members, and faculty, we were organized into 3 sub teams; Art, Design, and Programming.
The team at Strike Force studios, on Zoom.
- Eric Yu (Art Director, Designer): I was in charge of the entire art development pipeline, from concept art to modeling to animation. I led a majority student team and taught them tools used in the industry. I was also a member of the design team, and lead multiple user tests as well as researched gameplay mechanics.
You can find the other team members by going to the Buggy All Stars website!
Project Goal
Original VR Vision
Rest in peace, original virtual reality vision.
Originally we were planning a Virtual Reality (VR) game, and we had multiple builds done which placed the player in the cockpit of the Buggy. However, due to the onset of COVID-19, Carnegie Mellon shut down and transitioned to work from home. Since we were unable to test our builds nor were we able to present at Carnival (the annual university celebration where Buggy usually takes place) due to the festivities (and the race) being cancelled in 2020, we decided to pivot our direction. For more information, check out this blog post!
Current Browser Vision
Instead of a VR game, we decided to develop a browser based racing game, so that those in quarantine could still experience a much beloved Carnegie Mellon Tradition. The audience of the game would be both current students of the school as well as alumni who have participated in Buggy races before, so we aimed to develop a game that could be played on a multitude of platforms that would be simple to play. With racing still being our main gameplay mechanic, we set about optimizing our assets and redesigning the user experience in order to fit this new platform.
Theme/Concept Art
Buggy All Stars was commissioned to celebrate 100 years of Buggy. To that end, we wanted to make an experience that really captured the essence of the race, from its history starting in 1920, to its energy, especially on race day. We believed that a toon-shaded, competitive racing game would be a perfect fit. The style really represented the joviality of the event (and was easier for our artists to texture, and less taxing to render). We looked to other games for inspiration, such as Fortnite, Overwatch, and Mario Kart.
Some vintage buggies we looked through to find the perfect candidates.
We wanted to introduce the history to the players through their settings and vehicles. The same racing route, despite a few modifications, has remained the same, and brings the racers around several major landmarks of Pittsburgh, including Carnegie Mellon’s campus. I had the environment artists make some concept art of these major landmarks to capture the tone and the feel of the game.
For the vehicles, there were many notable buggies throughout the race’s history. We wanted to feature the most famous ones in the game in the form of the AI opponents. To choose which ones would be in the game, we divided the 100 years of history into three eras; the Early, Mid, and Late eras. We chose the candidates such that each era would be equally represented.
The Pipeline
With my experience in developing 3D art for games and animations alike, I was designated as the Art Lead for the project by Tom Corbett, the game’s producer. My main challenge was to figure out an art development pipeline that was understood by both the artists, many of whom were students with limited knowledge in 3D art, as well as the non-artists, such as the programmers and composers. After doing some research (including consulting artists from Pixar and Gearbox), I was able to make a plan.
I divided the entire art team into 3 teams based on their interests; the Character, Environment, and Buggy (Vehicle) Art Teams. There would also be 3 phases; Pre-Production (concept art and revision, grey boxing), Production (modeling, texturing, rigging, animation), and Post-Production (VFX, post processing). We would also meeting twice per week in short, Agile meetings where we discuss what has been done and what the plans are for the following few weeks (using Trello boards for organization), with one of those meetings done in conjunction with the programming team to see what can be integrated for the next build.
Here I am teaching students how to animate characters with Mixamo.
In addition, since a lot of team members were students who were new to the 3D pipeline, I held lectures and demonstrations on using certain software commonly used in the industry, such as Maya, Blender, and Substance Painter. Many students were interested in 3D modeling or the animation/games industry, so I wanted to make sure that they had the skills necessary to work at future studios.
Pipeline tasks, divided by production phases.
Timeline of the art development pipeline, divided by tasks.
I wanted to make sure the communication was clear not only between the artists, but also between teams, so that the artists knew what was feasible and the programmers knew what was possible. In addition, since many artists were students or specialized in 2D, I spent a few days teaching them industry software used in 3D art development (such as Maya, Blender, and Substance Painter). I inspected each asset and animation to make sure it fit the feel of the game and also fit the needed specs, and provided the artists with feedback afterwards. Not only should the assets be consistent, but the artists should also be learning skills that will prepare them for the industry.
Gameplay Ideation
Since we were making a game about the Buggy races, it was only natural that we make a racing game! We wanted to capture the history of the races, as well as the excitement around the event.
Due to the Coronavirus pandemic of 2020, Carnival would not take place on campus, so we needed to fill a desire for those who were looking forward to the event.
How do we make a game that is accessible?
Buggy is a popular tradition for both people in and out of the sport, and they can range from college freshmen to alumni who have participated decades prior. We wanted to make a game that all audiences can play.
We decided to go with a browser based game, which was an easy way for people to play. No installation necessary, just hop to the link and start!
Although we aimed for a racing game, we needed to figure out how to spice the gameplay up. Given our limited time caused by our pivot due to COVID-19, we decided to:
Randomize the AI opponents, so you got to see different buggies every time you played.
Add player skins, allowing players to customize their vehicle.
Included Boost pads, allowing the player to come up with their own strategies of winning.
Included the High Scores table, so the player has something to strive for.
3D/2D Art
Famous buggies modeled for the game.
Our game takes place during Carnival, where for the 100th anniversary of Buggy, every major buggy from history returns to take part in the All-Stars race. The player is a driver in charge of a futuristic buggy created by the Alumni Association, and will compete amongst the best of the best.
For this game we aimed to capture the event in not only its form, but its atmosphere as well. Still, we had many things to consider, especially in terms of efficiency; we were working in the confines of a browser, and needed to make sure the game would run on most machines, especially the lower end ones.
Challenges
Since the original game was originally planned for VR, the move to browsers (through WebGL, a JavaScript API) meant many of our models and textures had to be downscaled. Although many of our models remained relatively intact, some had to be shelved for their 2D versions (for efficiency in the game engine). The toon shader that we used (created by Adrian Biagioli) had to be rewritten for these new constraints.
Other challenges included:
Foliage: the race track is known for the trees around it, so we needed foliage that didn’t take up too much of the processing power.
This meant that making individual leaves were out, since each leaf would need transparency, and thus more power, than we were willing to give.
We leaned into the cartoony look and made solid trees, akin to those in Animal Crossing.
We also used level of detail, or LOD, to make different versions of the trees; detailed versions for close up viewing, which transitioned into low poly versions when they became far away.
Buildings: because of the amount of buildings in the area, we needed to reduce our polygon count drastically to get the engine to run efficiently.
Due to the speed of each buggy, buildings did not need to be highly detailed, or even 3D at that depending on the distance.
We tapped into the skills of our 2D artists to make 2D buildings for our more distant architecture, which would be less taxing for a browser and also provided a nice backdrop for the race itself.
Texture Size: since we were using WebGL, not only did we have to forgo post-processing and the shader graph for better performance, but we also had to drastically reduce the size of our textures.
This was accomplished by re-exporting the textures with lower resolutions or optimizing their size through Unity.
For the animation, we tapped into Carnegie Mellon’s own motion capture studio, where we were able to capture buggy specific motions, such as “pushing” the buggy. For more generic motions, such as running, we were able to use animations on Mixamo, with some of our “pusher” models created in Adobe Fuse.
Using different levels of detail; we made a low and high poly version of the trees that updated depending on how far away the player was.
A view of Frew street at Carnegie Mellon…
…and Tech street, right by Posner Hall!
Me as the mocap model, “driving” a buggy!
Thoughts
This project was not only a test of my ability to create a style, coordinate with other non-art teams, and oversee an entire art team; it was also a test in how to deal with unforeseeable challenges, especially in regards with the COVID-19 pandemic. This was the first time where I managed an entire art pipeline, from pre production to production to post production, and I learned a lot about how to delegate tasks, and make sure everything gets into the game without headaches for integration. I had previous experiences in coordinating with other teams and teaching 3D art to students, and I was able to use these skills in a more rigorous setting, akin to an actual game studio.
If the pandemic has taught us anything, it is how to adapt and overcome. What was originally a virtual reality game could not be continued with COVID-19 ravaging the country, so we had to learn the hard way on how to pivot. We were able to shift from a full 3D virtual reality game to a smaller, browser based racing game in the span of 2 months. I learned how to adapt our existing assets and material to a new paradigm, and how to keep things calm as I steered the Art team into a new direction. After we finished and launched our game to the university, I felt as if we could tackle anything.