Animated Character Display

There are loads of ways to enhance the viewing experience for your audience and it has been kind of a tradition for Bring Your Own Controller to come up with something new and exciting every NHSmash (Being a fully animated versus screen at previous edition).
With announcing NHSmash3 we wanted to do something similar and we began brainstorming, we eventually picked a concept what I thought of back in the early days but we didn’t want to put our hands on it just yet because of the huge amount of effort it would take to create it: animated “portraits” which are controlled through our html scoreboard controller program.

So in order to make this task a succes I loaded my WiiU with a greenscreen modification which turns the background in the famous greenscreen color. Combined with a cinematic mod (deleted all hud elements) I got a great view on the characters in game.
I hooked up my capture device and began recording every character in game ( 58 different characters ) and removed the green area surrounding them.

eJwVzEsOhCAMANC7cAAqv-J4G4IEMWIJ7azM3H3i9i3eo77zUps6RAZvAHvjTHPXLDRTLboS1auk0Vhn6pBEUj56uYXBYsAFHcbgI1rjIr4UV_cJqzXWe29wgdbf5hxV_f7AjiHS.ARMLqbd6oJmj8bsKB-kNUbw5BLQ
Capturing the Characters one by one

There were two hard parts doing this

1) During taunts and sometimes their idle animation the characters generate a lot of special effects combined with lighting. Which makes it difficult to key them out perfectly. I even had to manually track Sonic’s eyes for 960 frames because his eyes are..  very green.

2) The sizes of the characters differs greatly, which isn’t a big deal while playing. But for display this gets very difficult. With DonkeyKong being incredibly large and Greninja being so small (because he crouches). We eventually settled with trying to stay as true a possible to their respective heights but we had to make some of the big guys smallers.

All WebM renders
All WebM renders

After recording, editing (making it loopable) and keying all 58 characters they had to be rendered in GIF format for then again to be rendered in WebM for their transparency to maintain in HTML. It was an immense task to accomplish but the results are great.

Leave a Reply

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