top of page
Search

Animating Retropolis: An Art Directors Retrospect

Aug 17, 2021
7 min read

Introduction

Hello there!

I’m Daniel Ho, the art director of Peanut Button’s recently released VR point & click adventure game “The Secret of Retropolis''. As studio of 3, Asaf Geva is the producer and developer while Eyal Geva is the writer and director. The game took around 2 years to create, the first half of which premiered in Cannes XR 2021, a week or two before its release on the 21st of July. Between all the people who experienced it in Cannes, the demo on Steam, or our playtesting, a flattering response we keep hearing (or reading) is “How the hell did you make this game with just 3 people?”.



I’ve been asked quite often about the process behind creating and animating Retropolis, so I thought I would write about my approach and experience working as the art director (and the entire art department) in the production of The Secret of Retropolis. Essentially, creating a game world and all the inhabitants then animating them for a feature length story is no small feat. It would generally require a team of concept artists, modelers, riggers, texture artists, and animators in order to truly create something of any value.


Finding Quill

When The Secret of Retropolis was in its infancy, there were questions as to how to create a game without the need for a giant production team. Asaf Geva (the producer and programmer) told me about a VR animation program called Oculus Quill, which piqued my interest, but had no real experience working (or playing) with VR. Then in 2020, Asaf, Eyal and I formed a team for the Global Game Jam, which would be the test run for using Oculus Quill to create game assets. I sat down in Quill for the first time there and stumbled around the brushes and menus while Asaf tweaked his custom Quill to Unity importer. After a 48 hour game jam and a crash course in Quill, we slapped together a kooky alien 3D puzzle game called Borkas Flork Space Port (available on the Peanut Button website for the curious). The process of drawing in VR and creating 3D characters with the flat shaded, cartoony poppiness of Quill was an incredibly intuitive experience for someone who came from the technical and grueling process of classic 3D methods. It was love at first stroke, and it was there and then that we decided that Quill would be the tool to create Retropolis.


Retro References

The creative process behind creating the world seen in Retropolis, started with finding inspiring references and creating designs. With Retropolis being a city of robots built to keep the past alive, nostalgia was a natural direction in creating the visual style of the world, props, and characters, using heavy influences of aesthetics of the 1920’s to the 60’s. Additional references were Samurai Jack, Star Wars, Blade Runner, Akira, and Batman: The Animated Series (1992). Each reference had something that inspired me or an internal logic that profoundly impressed me, from Star Wars’ droids having clear purpose expressed in their physical build, the humanized robots of Samurai Jack filled to the brim with personality and decisive style, or the clunky comical analogue construction of the vintage sci-fi pulp automatons.



Retropolis is full of robots that hover, walk, or have simply been built into their surroundings. The worldbuilding logic behind that choice came from several points of reasoning, the canon reason being that some robots were not being built to imitate humans, and the production reason being that hovering robots simply meant less pain-staking work on walking animations. Hence the famous robot movie star and femme fatale Jenny Montage is the only robot with legs that walks and isn’t conveniently met while seated.



In creating the world and architecture for the city of Retropolis, the same references were perfect in giving me a base to build on. The sense of a city with infinite depth and boundless heights in which scale becomes ambiguous is a recurring theme for the worlds of Akira’s Tokyo, Aku City, or the animated Gotham. Obviously, the same design approach made inherent sense for Retropolis too, allowing for us to show the seedy depths of the city and the high class club above the clouds, all while feeling like we never really leave Retropolis.




Into The Pipeline

Having completed paper designs for most of the characters and the world for the game, it was time to jump into Quill and start the drawing process. I would discover that the program’s flat shading, and coloring method of individual 3D strokes meant adjusting most of the paper designs in order to find a balance of complexity of strokes and simplicity of the style in VR. Lack of lighting, or rather the fact that I had to imitate it in coloring the strokes, meant having to know the exact tones I wanted the world to be in. As the first iteration of characters were completed and most of the environments were in a working state, layout and animation could begin.


Having most of the pieces in place to start animating, we had one real hurdle left. How in the world were we going to animate the entire game, with all of its characters, environments, and effects? Our initial idea was to use a tool that Peanut Button used for previous productions, which was a motion capture puppeteering method using the controllers and headset tracking to ‘act out’ scenes. Testing a scene to see how it would work with a rigged version of Jenny, it was definitely the cheaper option production wise, but we all agreed that it failed to create an engaging visual experience.



The Secret of Retropolis is a narrative heavy game with scenes that require its characters to evoke emotion and immerse the player in the moment. If the animation doesn’t sell the world, character, or the act, then the effect of the story on the player is nullified. We then explored the option of doing all the animation with Quill’s keyframe animation system, with which we could use a similar approach to stop motion or claymation with the use of replacements and leaning into the lower framerate, choppy movements. Additionally, one of the latest additions to my personal list of favorite movies, Spider-Man: Into The Spider-Verse, was a go-to reference for me in animating with Quill’s keyframe animations, as it took brave steps into making choppy animation and classic 2D animation techniques into the mainstream of 3D animation. So I quickly got to work defining the visual style of the animation for the game, experimenting with the use of choppy movement and smear frames.



Animation and Iteration

Before diving headfirst into animating the entire game, we took the time to do a test run of the animation pipeline on one scene, which meant directing, layout, posing, and a touch of animation. The puzzles themselves had been planned out using flowcharts (using puzzle dependency charts as explained here by Ron Gilbert), so we knew what had to happen in what order, and which character would be doing what in the background. This helped us understand what interactions had to happen. Then we laid out the dialogue options out onto a separate flowchart, in order to map out what could be said, and what poses or animation each character would have at each interaction.


Puzzle Dependency Chart


Dialogue Options Scripting


During the animation tests I had noticed several drawbacks in the design of Jenny Montage, which made the process of working with her model tedious and inefficient. Her design had rings connecting the ball joints to the limbs, and her skirt restricted her range of movement, making the length of her steps tiny and removing any possibility of her jumping in a realistic manner. So I set aside time to update her design and solved the issues by creating the limbs with fewer, intersecting strokes, making them easily selectable (making animation much more efficient), and completely changing the build of her waist and hips, to allow her to be able to achieve many more poses with ease and elegance.



I had the new design of the femme fatale, I was satisfied with the choppy animation and smear frames to tie up the style, but when we made her walk across the room, something immediately felt off. The choppy style looked great on the monitor, but in VR it was straining on the eyes to track her jumpy movements. And so we decided to have all spatial movement happen with “sliding” motion, while the character would loop the choppy animation. We had unwittingly recreated a trope of the old point and click adventure games in VR.



All the pieces were ready, the environments were polished, and the characters had their base animations (walk cycles). The only thing left to do was animate! All the different sections of character animation were planned out aside our dialogue flowchart, and I created 2D sketches of important poses characters had to strike at certain dialogue moments. The process would start with importing a master file with all the characters in the right scale, and placing them in their starting positions, then creating a floorplan to visually represent the mise en scene and enable me to plan out how I would juggle the player’s attention from one point of interest to another, while ensuring that no character blocked the view of one another.



Final Thoughts

Being a production team of 3 people with an animation department of 1 (with Asaf occasionally putting time aside to help between programming the entire game), the timeline we set for ourselves had to be decisive or else the project would never see the light of day. From the moment all the parts of the animation pipeline were ready to be put into motion, the animation process itself would take around four months. A conscious decision was made to have tight deadlines, starting with animating the second scene, through to the last, so that the last thing I would animate (and therefore be most capable for) would be the introduction cinematic. A good first impression would get the player to stick around, and a good last impression gets the player to leave on a high note, which meant that the first scene and the last scene the player saw should be the strongest, visually speaking. In the end, some extra animations were left on the floor of the cutting room, small imperfections in movement stayed in the game (hopefully I’m the only one who notices them), and we completed production of a full game with an unimaginable amount of character animation. The work on the animation and its pipeline has a clarity to it that makes it seem much more tangible, the question that remains is what other stories can be told through it.


Just like the nostalgic robots of Retropolis looking into the past (however recent), revisiting a creation can bring small specks of retrospective understanding… So if you read this far then let me take a moment to say thanks for reading, and if any of this was interesting then that’s a wonderful bonus for everyone! I hope the things I’ve written inform, engage, and maybe inspire other people to create with whatever tools they see fit for the stories that drive them. If you’re interested in entering the world of Retropolis for yourself, it can be found on Steam, Oculus Quest, and the Oculus Rift.


 
 
 

6 Comments


123B có mục hỏi đáp khá hợp với kiểu đọc lướt của mình, vì nhìn câu hỏi là biết có đúng chuyện mình đang muốn tìm không. Mấy đoạn giới thiệu dài thì mình hay bỏ qua, còn cách hỏi rồi trả lời ngay bên dưới lại dễ theo dõi hơn. Chẳng hạn phần điều kiện đăng ký được đưa thành một câu riêng, đỡ phải đọc vòng qua nhiều đoạn mới thấy thông tin cần xem. Mình cũng thích việc trang nói rõ về phí giao dịch, có nhắc cả ngoại lệ chứ không chỉ ghi mỗi câu miễn phí rồi thôi. Tất nhiên những nội dung này vẫn nên đối chiếu thêm, nhưng đọc như vậy cũng đỡ…

Like

Rikvip mình thấy bạn bè nhắc hoài nên cũng ghé xem thử cho biết, chủ yếu tò mò giao diện thôi. Vừa vào là thấy trang nhìn sáng sủa, khoảng trắng vừa đủ nên không bị ngộp chữ. Mình thích nhất là cách họ chia nội dung theo từng khối rõ ràng, kéo xuống một chút là nắm được chỗ nào đang nói về gì, không phải căng mắt dò. Mấy phần thông tin trình bày dạng danh sách ô nhìn gọn, đọc lướt nhanh vẫn hiểu, kiểu phù hợp lúc đang bận mà muốn xem qua. Menu đặt khá dễ thấy nên bấm qua lại cũng mượt, không bị cảm giác “lạc” trong trang. Nói chung cảm giác dùng…

Like

Sunwin mình thấy dạo này hay được nhắc nên cũng bấm vào coi thử cho biết, kiểu tò mò thôi chứ không có chơi gì. Vừa vào là thấy họ để mục “link tải mobile 2026” khá dễ nhìn, nằm nổi bật nên khỏi phải lục lọi. Mình lướt tiếp qua phần nói về lịch sử phát triển thì cách trình bày theo từng khối rõ ràng, đọc nhanh vẫn hiểu ý chính, không bị rối mắt. Mấy tiêu đề heading đặt ngay trên đoạn nội dung nên kéo xuống tới đâu là biết mình đang đọc phần nào tới đó. Nói chung cảm giác trang này sắp xếp thông tin gọn gàng, nhất là cái heading “tổng quan về…

Like

TR88 tối qua mình lướt lúc đang nghỉ tay, kiểu mở ra xem thử cho biết thôi. Vừa vào trang chủ là thấy bố cục khá gọn, mấy khối nội dung đặt theo cột nhìn lướt phát nắm được ý chính, đỡ phải cuộn lên cuộn xuống như chơi trò tìm đồ thất lạc. Chữ và khoảng cách dòng cũng vừa mắt nên đọc lâu không bị “căng não”, với lại thanh menu đặt rõ ràng nên mình bấm qua lại vài mục mà không bị lạc đường (tính mình hay quên đang ở đâu trên web). Có chi tiết mình thích là họ để kênh CSKH 24 7 khá dễ thấy, ít nhất lúc gặp lỗi thì biết chỗ…

Like

TG88 có đáng để mình lướt ké vài phút không? Mình tự trả lời là cũng được đấy. Tối qua rảnh tay, mình mở trên điện thoại cho đỡ buồn, kiểu xem thử có dễ nhìn hay lại loạn mắt như nhiều chỗ. Trang này nhìn khá “gọn hàng”, các khối nội dung tách ra rõ nên không phải nheo mắt đoán mình đang ở đâu. Tông đỏ làm chủ đạo nên nổi thật, hơi chói nhẹ nhưng bù lại nhìn cái là nhận diện ngay, khỏi nhầm qua mấy trang na ná. Mình bấm qua mấy mục thì thấy phản hồi cũng nhanh, không bị đứng khựng kiểu đang vui thì tụt mood. Nói chung mình không ngồi lâu,…

Like
  • LinkedIn
  • Instagram
  • Facebook
  • Discord
  • Steam
  • X

© 2024 Peanut Button LTD

bottom of page