The Avengers Find Their Way Using Cinema 4D and The City Kit

June 1, 2012 - By 

Great artist and friend Jayse Hansen gave us a sneak peek at NAB about how the City Kit was used in The Avengers. Needless to say, Chris and I were totally geeked out about the idea and excited to see the City Kit on the big screen. Now that the movie is out, Jayse was nice enough to put together a breakdown of the shot and some of the thinking and process that went behind the process of making Iron Man’s Heads Up Display. Take it away, Jayse…

I originally thought of using City Kit for the hud when I learned we needed to illustrate several moves through a 3d city. The original request was a dimensional city map that could: a. locate targets, b. plot trajectories, c. move along roadways, d. turn/zoom into and out of very specific areas in New York City.

Production had originally wanted a full screen city layout – but it ended up covering up too much of RDJ’s face, and too many of the other HUD elements had to be moved out or turned off completely to accommodate it. So we were asked to treat it like a widget. After several discussions with Lawes, Hristova, and Sean Cushing (Cantina VFX Producer), we decided that the widget could come from either the large diagnostic widget on screen left, or from the radar widget lower right (behind the spherical gyro-compass). The radar widget made the most sense – and I began drawing up ideas of how it could transform into a 3d widget.

Early ideas for the city widget.

The city widget is both a 2d and a 3d map, all in one. Here are the designs for the map in its 2d state which uses the City Kit + ILM geometry in a flattened state.

This first of the three is when the map is in its overall view, locked behind the ‘globe’, or ‘gimble’ map indicator. The red triangle icons indicate alien targets (numbers indicate threat level – 76 is the evil Leviathan that was nicknamed “Jumbo”), the yellow A’s are the locations of the other Avengers. There was the suggestion of using a hammer, shield and facemask icons, but, I think I safely ignored it.

It then transforms to ‘street level’ view when it comes to the front and is directly in front of Tony.

Iron Man is always represented in the center. This early draft screenshot indicates when he locks on to the Leviathan (red target) and is about to fly into him and blow him up from within. The yellow hex targets track approaching chariots behind him.

Then the 2d map spins, collapses and becomes a 3 dimensional map using cylindrical coordinates. Attached is a qt of one of the early tests with cubes I did to get the City to be able to move, turn, and zoom in to certain areas. I wanted the buildings to both fade at the edges, but also flatten out with a nice fall-off. It also had to transform quickly from the 2d map to the 3d widget and back again as different needs arose.

There were some C4D R12.5 rendering bugs that we discovered using random effectors and plain effectors with the color shader in the alpha channel. So I had a ton of help from the awesome Navarro Parker (who also did a lot of work on the Mark VI huds) and even ping’d Tim Clapham for some ideas to get the rig working the way I wanted in C4d. Everyone was a great help, but Navarro ended up solving the scaling issue by using the underrated and often overlooked inheritance effector. We used a simple null scaled down wafer thin in Y; as the city neared the edges of the effectors’ cylindrical falloff, individual buildings would both shrink (inheriting the y-scaled object’s scale properties) and fade (using the mograph color shader in the alpha channel).

After we got it to where it could fulfill Joss’s requests, we substituted our custom City Kit rig in for the extra detail and it worked great. For the custom rig we ended up mixing in ILM’s high density model of Stark Tower and accurate Park Avenue buildings when the story-points called for the focus to be located on a certain building. City Kit’s flexible ‘Custom Area’ function was essential to inserting ILM’s meshes into specific locations of the rig.

City Kit’s ‘Preview function’ allowed us to work with a full city in C4D and not get slowed down by extraneous geometry.

This was important – especially as there’s a scene where Tony needs to locate Thor. The 3d map backs out of a tunnel he’d just flown through, travels across town to 6th Street and zoom-spins into the buildings where the other Avengers are, surrounded by red targets.

We also loved how easy it was to carve paths through the city, customize the distribution of building sizes and make individual buildings as tall or short as we needed. For instance in the scene where Hawkeye tells Tony to look for sharp corners, we have Jarvis indicate he’s found a 90° bank. We made all the buildings in front of it dramatically shorter so that the audience could clearly see the arrow-indicator.

It’s little things like that which make our job easier. Coming up with things that work tends to be relatively easy – but coming up with things that work and can be changed and modified – usually within half a day’s time – is a bit more challenging, and City Kit helped us a lot with that.

Extra thanks to Cantina Creative. It’s the awesome company I did this work for and with. I led the design of the Mark VII and designed a few new elements for the Mark VI, but all of the HUDs were a team effort involving a shrink and grow team of up to 6 awesome designer/animators led by Cantina’s VFX Supervisor Venti Hristova and Creative Director Stephen Lawes. Also, Shout outs to the Cantina ‘Club Suave’ HUD team:
Jonathan Ficcadenti, Leon Nowlin, Navarro Parker, Alan Torres, Lukas Weyandt

The Avengers ™&© 2012 Marvel and Subs.

You can learn more about City Kit here.

Posted In:  City Kit News Products
  • Wow! Very nice work Nick 😀

  • That’s insane! Congrats, you guys!

  • Really awesome, congrats on all the success, Nick!

  • Awesome stuff! Congrats! As always you make super useful tools.

  • Nick – congratulations! That’s so cool!

  • Well done, Jayse – looks like a ton of fun to work on.

  • “There was the suggestion of using a hammer, shield and facemask icons, but, I think I safely ignored it. ” – Jayse
    HAH!! Selective hearing can totally save you pain and suffering at times. bravo sir..

  • Vicky Gray-Clark June 1, 2012 at 2:41 pm

    Great use of the City Kit by Jayse…awesome images! Loved the film too…

  • oh..that’s why I loved that movie 🙂

  • So good! Great job with City Kit, Nick!

  • Too cool! Congratulations on the big success.

  • It’s nice to see how great artists uses the same tool as all of us, and they make such a wonderful job!!!

  • I’m happy for you!

  • Amazing! Congrats Nick! I’m positive your light kits are frequently used in broadcasts too! Pretty immense achievement this one…

  • That is freakin’ awesome!!! Great movie!!! Congrats Nick!!!

  • Mohamed aljazaere June 1, 2012 at 7:07 pm

    Great news !!
    congrats on all the success, Nick!
    you deserve more than that man !!
    really happy for you! and wish all the best for you too..

    Thumb up!

    • Mohamed aljazaere June 1, 2012 at 7:14 pm

      That tools give as a bigger challenge to be more Creative in this kind of works!
      not just click and drag!!

      Wow man !!
      you made my day!


  • RESPECT!!!

  • >> you could have another page like that with TRON 2 !
    there is a nice presentation by the guy who coordinate the graphic madness in the movie at the Gnomon University, the guy name is Gmunk and his presentation is really FUN AND ENERGETIC !!
    a bit like MIKE THE MONKEY > by the way I miss his high energetic fun presentation around here 😉 !

    Anyhow ! awesome respect to your sharing knowledge spirit ! to you and your friends creating those tools!
    you are doing it with such good vibes !! it s normal that it s shining like that !
    >> I can t stop sharing your website and what you are doing around me ;))


  • nice job! and thanks for no spoilers 😀

  • COOL!
    Now you just have to release a tutorial!

  • I know that is exciting for your guys. Well Deserved! I can’t wait to see what they do with Transform.

  • I’m sorry for my bad english, i’m a student and i like that you make and tutorial of this project, i like you’re make anything.
    Thank you for your attention!!!

  • Clap Clap Clap your hands say Yeah !!!

  • Wow – so much detail and manpower for this interface ending in a beautiful result.

    Jayse mentioned the render errors in the Alphachannel in C4D. I think this is still one of C4D biggest flaws, the alpha channels be it as a DOF multipass render or a Mograph shader. Am I the only on hating C4D on this issue???

  • I’m sooooo proud of you Nick! I’m saying this with a tissue in my hand and sobbing like a douche!
    Seriously though… We are all proud of you Master Vegas.

  • Call of Duty Modernwarefire 3 too some cinematics make in cinema 4D

  • Jayse, in a word….SICK!!

  • Gratz Nick!

  • That is pretty cool that they used it in the film. Iron Man 3 is coming. So it will propably be used again. 😉
    It really shows the power of the city kit.

  • That’s fantastic! Congrats!!!!!

  • Ofcourse , such a great movie needs a great program and tools to create such fantasy

  • Great movie, I like that movie.
    City kid is gooooooooood Nick !
    I love it….

  • Very nice work indeed Nick. I have been a quiet follower for a long time and assuredly, you are getting the recognition that you deserve and I am sure there will be much more to follow.

  • Terrific work indeed! I have followed you for a long time Nick, and you just keep pushing the envelope and getting better and better. I am sure that products like this from you will definitely make you first on everyone’s list to get what they need and want. Bravo!!

  • Finally… I also Got a Awesome HUD…and found my city more beautiful than ever 🙂
    watch and comment :

  • Demais! Parabéns! Faça um tutorial!

  • Hey, nick
    I watched behind the scenes for the movie and what I really liked is the city
    and wondered how could they do such a thing it’s unbeliveble
    I IIII I can’t belive I have this powerful tool all time

  • I’m doing this model… it is so cool!

    Here are some pictures I’ve snapped so far.

  • how to configuring the same render to exit with blue lines em all black? And put specular in black? equal a 1:49 minutes this video

  • could you please upload a tutorial for it

  • Awesome stuff! Congrats!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.