trAIn&gAIn Post-Mortem 

Introduction

trAIn&gAIn is an Entertainment Technology Center (ETC) project making a WebGL game called Juicy Car to help students better understand Artificial Intelligence, especially Neural Networks. The game will function as support materials for AI courses and curriculum designed by Artificial Intelligence Pathways Institute, Boys & Girls Clubs of Western Pennsylvania (BGCWPA). 

Our team consists of six students:

Yuting Jing, the producer of the team, took charge of internal and external production, such as scheduling all kinds of meetings, managing the project pipeline, generating and tracking tasks and communicating with clients, and coordinating playtests both online and offline.

Chenguang Deng, the lead programmer of the team, worked on the functionality of the main scenes of this game development.  

Rohit Sharma, the game designer on the team, took charge of the general design of the game and focussed on keeping the design direction aligned with the client’s goal. He was also assistant to the producer and helped in taking meeting notes, writing blogs, and coordinating with other teammates. Later on, He helped the programmer with UI integration and general bug fixing.

Abhijeet was the 3D Artist and the Technical artist for the game. He mainly focused on the 3D design and art direction of the different levels. He was responsible for the introduction video that briefly explains Neural Networks using some motion graphics. He also assisted Rohit in some of the game design elements.

Xueying Yang, the UIUX designer of the team. She was responsible for the game UI with Qianhui together, mainly the color palette, the juice box design, the game cover page, and the tutorial pages. She also assisted in building the team website and edited the team introduction video.

Qianhui Zhi, the UIUX designer of the team. She made the Poster and Half-sheet for the team, and was responsible for the game UI with Xueying together, including the clickable button, upgrade page, tutorial pages, and test result pages. 

Our client is Phil Light, ETC Alumnus (2007), a project manager working on STEM for the BGCWPA. He provides us with mentorship and guidance throughout the semester. 

trAIn&gAIn is offering a “training” pathway to help students “gain” knowledge, in pursuit of explaining AI concepts visually, interactively, and correctly. 

Project Achievement 

Tech 

We made from scratch a final game distribution on the WebGL platform. To make the experience smooth and responsive on WebGL constant communication with the design team was necessary, and that was a strong point for us. The communication led us to the decision that keeping the art style simple would give us some leeway to work with a particle system while keeping the load on the browser low. Another thing that went well was that we were able to build a cohesive experience that includes a video lesson and an amalgamation of 2D and 3D elements which was a tech challenge that we were able to overcome.

Art

The choice of our art style was one of the major things that went well in the art department. We chose a voxel design language taking many factors into consideration. The most important of which was based on game performance. Considering that the game was WebGL based we wanted to keep the design low poly and steer away from complex texture maps that might not perform adequately on a browser. The design decisions that we took turned out to be really beneficial for the team and the game as it allowed us to make quick iterations due to its simple design and kept the game running smoothly on browsers. The voxel style also proved to be synergistic with our 2D UI language and tied the whole experience together.

UI Design

We have made several revisions to the design of the entire UI interface. From the left-right split screen or the top-bottom split screen, the shape of the buttons, the overall color palette and design style, to the design of the juice box, etc. We also tested this with more than 40 people to continuously improve the holistic UI design and ensure that the concept can be transmitted properly and efficiently. And because our game is a combination of 3D animation and 2D interface, we try to keep the style in between. We chose the tech style and added shadows to accentuate the three-dimensionality of the 2D UI interface.

Game Design

One of the biggest problems was to make sure that the design of the network looks less mechanical and more physical for the students to relate better and understand the concepts by interacting with the network. We decided to introduce the concept of a ‘neural juice’ that flows through pipes in a network that controls a self-driving car.

Another important decision was to make the player play as an AI. We wanted to emphasize the fact that neural networks are complex and perform calculations that a human cannot.

We also designed the flow of the game in a way that simplifies the concept and then reinforces the complexity of the neural network in real life. This was essential for the learning process.

Other 

We had very good communication within the team. Through Slack and Wechat, we communicated with each other well even after core hours and improved our work efficiency and flexibility. We did not only communicate about projects together, but also chatted with each other about life, food, and clothing, and learned each other’s languages! We also played games together and traveled together. After a semester, we did not only finish a project but also gained a very precious friendship!

Possible Improvements

Production

From an overall perspective, our team could do the time-managing work better for this semester. Since Artificial Intelligence is a very broad range of topics, it took us a long time to make the decision on the content of this project. Finally, even though we decided to choose Neural Networks as our main focus, it’s still a very deep area for us to dig into. Meanwhile, our team only has one student expert in the Neural Network area. Our artists and designers had to spend time understanding the concepts before taking action in designing. Considering this, we should have shortened the decision-making phase at the beginning of this semester, then fastened the speed of development in the middle of the semester, and had more rounds of playtesting with AIPI students before the end of the semester.

Tech 

Liquid Particle Effect 

For the liquid particle effects, we tried several kinds of liquid effects but finally selected the built-in particle system effect due to performance considerations. The visual feeling is acceptable but could be improved with more effort on this.

UI Animation

The UI design is elegant and modern, while the animations could not support enough this feeling. We could work on making nonlinear animation on UI elements and make players more immersive in-game with more time.

Art 

One major area of improvement in the 3D art space would be to improve the quality of the animation. We feel that animations in voxel art style are slightly different from more traditional styles and given a bit more time that would’ve been the next focus point. While the general color scheme of the artwork with the rest of the project, we feel that the lidar sensor on the car could have been more reactive to the environment. Also, other details such as dynamic blinkers and dynamic traffic lights could’ve added to the experience.

UI Design

If there is more time, we can do more iterations on the UI design of the game. There is still a lot of room for the design of the clickable control button and also the juice box. The design can be improved to be a more clear and more efficient visualization to explain the concept of neural networks to students. 

Game Design

The duration of the game can be longer and better-paced. Due to scope, we had to limit the number of interactions and levels for the player. This can definitely be added later on and made into a well-paced experience. Currently, the interest curve has few spikes in terms of learning and implementation. These problems can be tackled by adding more levels.

Conclusion

To sum up, team trAIn&gAin used 14 weeks, successfully completed a project, went through the steps of analyzing clients’ requirements, designing an educational game/experience, implementing the project, testing with different types of users, iterating the design, and making the final delivery. Building an educational experience that was unfamiliar to the team was a great learning experience and gave us a chance to learn and work outside our comfort zones. The remaining steps for team trAIn&gAIn are to hand off the project to our client, Phil Light. All in all, this was a fruitful semester. We appreciate everyone who helped us along the way!